/*
 * SDC Table
 *
 * Brand table treatment for blog posts (core/table block style) and case
 * studies (TinyMCE "SDC Table" format inside ACF WYSIWYG fields).
 *
 * The theme shipped with no table CSS at all, so anything pasted into content
 * rendered as an unstyled browser default. Every table that passes through
 * the_content() or acf_the_content() now comes out wrapped in
 * .sdc-table-scroll, which is what makes the plain selector below safe: it
 * only ever matches a table that came from editable content.
 *
 * Word and Excel inline their own borders, widths, fonts and cell padding on
 * every element they emit. The paste handler strips most of it, but tables
 * pasted before that existed still carry it, so the properties Word writes
 * inline are forced here rather than merely declared.
 *
 * The custom properties come from header.php on the front end. TinyMCE and the
 * block editor canvas do not always have them, so every var() carries a literal
 * fallback.
 */

.sdc-table-scroll {
  margin: 30px 0;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* The block editor supplies its own figure wrapper; don't double the margin. */
.wp-block-table > .sdc-table-scroll {
  margin: 0;
}

.sdc-table-scroll > table,
table.sdc-table,
.wp-block-table.is-style-sdc-table > table,
.wp-block-table.is-style-sdc-table-striped > table {
  width: 100% !important;
  margin: 0;
  border: 1px solid #dfe3e8 !important;
  border-collapse: collapse !important;
  border-spacing: 0 !important;
  background: #fff !important;
  font-family: var(--font2, montserrat, sans-serif) !important;
  font-size: 16px;
  line-height: 1.5;
  color: #333131 !important;
}

.sdc-table-scroll > table th,
.sdc-table-scroll > table td,
table.sdc-table th,
table.sdc-table td,
.wp-block-table.is-style-sdc-table > table th,
.wp-block-table.is-style-sdc-table > table td,
.wp-block-table.is-style-sdc-table-striped > table th,
.wp-block-table.is-style-sdc-table-striped > table td {
  padding: 12px 16px !important;
  border: 1px solid #dfe3e8 !important;
  text-align: left;
  vertical-align: top !important;
  background: transparent;
  word-break: normal;
}

/*
 * Header row.
 *
 * Only a real thead or a th is treated as a header — a first row of plain tds
 * is left alone, because plenty of tables legitimately have no header.
 */
.sdc-table-scroll > table thead th,
.sdc-table-scroll > table thead td,
table.sdc-table thead th,
table.sdc-table thead td,
.wp-block-table.is-style-sdc-table > table thead th,
.wp-block-table.is-style-sdc-table > table thead td,
.wp-block-table.is-style-sdc-table-striped > table thead th,
.wp-block-table.is-style-sdc-table-striped > table thead td {
  border-color: var(--primary, #1574c4) !important;
  background: var(--primary, #1574c4) !important;
  color: #fff !important;
  font-weight: 700 !important;
  vertical-align: middle !important;
}

.sdc-table-scroll > table thead a,
table.sdc-table thead a,
.wp-block-table.is-style-sdc-table > table thead a,
.wp-block-table.is-style-sdc-table-striped > table thead a {
  color: #fff !important;
  text-decoration: underline;
}

/* Striped variant. */
table.sdc-table--striped tbody tr:nth-child(even) > *,
.wp-block-table.is-style-sdc-table-striped > table tbody tr:nth-child(even) > * {
  background: #f5f7f9 !important;
}

.sdc-table-scroll > table tbody tr:hover > *,
table.sdc-table tbody tr:hover > *,
.wp-block-table.is-style-sdc-table > table tbody tr:hover > *,
.wp-block-table.is-style-sdc-table-striped > table tbody tr:hover > * {
  background: rgba(var(--primary-rgb, 21, 116, 196), 0.06) !important;
}

.sdc-table-scroll > table td a,
table.sdc-table td a,
.wp-block-table.is-style-sdc-table > table td a,
.wp-block-table.is-style-sdc-table-striped > table td a {
  color: var(--primary, #1574c4);
  text-decoration: underline;
}

.sdc-table-scroll > table caption,
table.sdc-table caption,
.wp-block-table.is-style-sdc-table > table caption,
.wp-block-table.is-style-sdc-table-striped > table caption {
  caption-side: bottom;
  padding-top: 10px;
  color: #666;
  font-size: 14px;
  font-style: normal;
  text-align: left;
}

/*
 * Word wraps every cell's text in <p class="MsoNormal"> and often a <span>
 * carrying Calibri. Neutralise both so cells inherit the table's typography.
 */
.sdc-table-scroll > table td > p,
.sdc-table-scroll > table th > p,
table.sdc-table td > p,
table.sdc-table th > p,
.wp-block-table.is-style-sdc-table > table td > p,
.wp-block-table.is-style-sdc-table-striped > table td > p {
  margin: 0 !important;
  font-size: inherit;
  line-height: inherit;
  color: inherit;
}

.sdc-table-scroll > table td > p + p,
table.sdc-table td > p + p,
.wp-block-table.is-style-sdc-table > table td > p + p,
.wp-block-table.is-style-sdc-table-striped > table td > p + p {
  margin-top: 10px !important;
}

.sdc-table-scroll > table td span,
.sdc-table-scroll > table th span,
table.sdc-table td span,
table.sdc-table th span,
.wp-block-table.is-style-sdc-table > table td span,
.wp-block-table.is-style-sdc-table-striped > table td span {
  font-family: inherit !important;
  font-size: inherit !important;
  color: inherit !important;
  background: none !important;
}

.sdc-table-scroll > table ul,
.sdc-table-scroll > table ol,
table.sdc-table ul,
table.sdc-table ol {
  margin: 0 !important;
  padding-left: 18px !important;
}

@media (max-width: 767px) {

  .sdc-table-scroll {
    margin: 24px 0;
  }

  /*
   * Scroll the table rather than crushing it. Squeezing four columns into a
   * phone viewport wraps every cell to one word per line.
   */
  .sdc-table-scroll > table {
    min-width: 520px;
  }

  .sdc-table-scroll > table th,
  .sdc-table-scroll > table td,
  table.sdc-table th,
  table.sdc-table td {
    padding: 10px 12px !important;
    font-size: 15px;
  }
}