/* ============================================================
   Body Text
   ============================================================ */

.content-page__body-wrap {
  padding-bottom: var(--spacing-3xl);
}

.content-page__body-wrap h1,
.content-page__body-wrap h2,
.content-page__body-wrap h3,
.content-page__body-wrap h4,
.content-page__body-wrap h5,
.content-page__body-wrap h6 {
  color: var(--text-primary);
}

.content-page__body-wrap p {
  color: var(--text-secondary);
  /* padding, not margin: an empty <p> (a blank line typed in the editor)
     has no border/padding/content of its own to stop margin-collapsing, so
     a margin-bottom here would collapse away to 0 and the blank line would
     disappear on the front end even though it's visibly a line in Tiptap.
     Padding never collapses, so this matches text-image-row.css/grid-2.css/
     grid-3.css, where the same blank-line spacing already works correctly. */
  padding-bottom: var(--spacing-xl);
}

.content-page__body-wrap ul {
  list-style-type: disc;
  padding-left: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
}

.content-page__body-wrap ol {
  list-style-type: decimal;
  padding-left: var(--spacing-3xl);
  padding-bottom: var(--spacing-xl);
}

.content-page__body-wrap li {
  padding-bottom: var(--spacing-md);
  color: var(--text-secondary);
}

.content-page__body-wrap p:last-child,
.content-page__body-wrap ul:last-child,
.content-page__body-wrap ol:last-child,
.content-page__body-wrap li:last-child {
  padding-bottom: 0;
}

/* ============================================================
   Tables (rich-text) — responsive scroll wrapper + header row
   ============================================================ */

/* Let the wrapper (and its ancestors) actually shrink inside flex/grid parents,
   otherwise the table's min-width pushes the whole page wide on mobile. */
.content-page__body-wrap,
.content-page__body-wrap .ts-body-lg {
  min-width: 0;
  max-width: 100%;
  font-size: 16px;
}

/* Flatten every descendant to 16px (kills UA heading defaults like h3's 1.17em).
   Inline style="font-size:...px" on the element itself still wins over this. */
/* .content-page__body-wrap *:not([style*="font-size"]) {
  font-size: 16px;
} */

.content-page__body-wrap .body-table-scroll {
  display: block;
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow-x: auto;
  overflow-y: hidden;
  -webkit-overflow-scrolling: touch;
  border: 1px solid var(--border-default);
  border-radius: var(--radius-xl);
  margin-bottom: var(--spacing-xl);
}

.content-page__body-wrap table {
  width: 100% !important;
  min-width: 480px;
  border-collapse: separate;
  border-spacing: 0;
  table-layout: auto;
}

/* Neutralise rich-text colgroup/col fixed widths so columns fill the width. */
.content-page__body-wrap colgroup,
.content-page__body-wrap col {
  width: auto !important;
  min-width: 0 !important;
}

.content-page__body-wrap th,
.content-page__body-wrap td {
  padding: var(--spacing-sm) var(--spacing-xl);
  border-bottom: 1px solid var(--border-default);
  border-right: 1px solid var(--border-default);
  text-align: left;
  vertical-align: top;
  color: var(--text-secondary);
}

.content-page__body-wrap th:last-child,
.content-page__body-wrap td:last-child {
  border-right: 0;
}

.content-page__body-wrap tr:last-child td {
  border-bottom: 0;
}

.content-page__body-wrap td p,
.content-page__body-wrap th p {
  margin-bottom: 0;
  color: inherit;
}

/* Zebra striping on body rows (header is the first row, so start alternating from it). */
.content-page__body-wrap tbody tr:nth-child(even) td {
  background: var(--surface-page);
}

/* Header = <thead> if present, else the first row (rich-text uses <td>). */
.content-page__body-wrap thead th,
.content-page__body-wrap thead td,
.content-page__body-wrap table:not(:has(thead)) tbody tr:first-child td {
  background: var(--surface-hero);
  color: var(--text-on-dark);
  font-weight: 600;
}

/* Round the outer corner cells so the header/last row follow the wrapper radius. */
.content-page__body-wrap tr:first-child td:first-child,
.content-page__body-wrap tr:first-child th:first-child {
  border-top-left-radius: var(--radius-xl);
}
.content-page__body-wrap tr:first-child td:last-child,
.content-page__body-wrap tr:first-child th:last-child {
  border-top-right-radius: var(--radius-xl);
}
.content-page__body-wrap tr:last-child td:first-child {
  border-bottom-left-radius: var(--radius-xl);
}
.content-page__body-wrap tr:last-child td:last-child {
  border-bottom-right-radius: var(--radius-xl);
}

/* Small screens (phones + tablets): stack each row as a card (matches the
   cookie-policy table). Header row is dropped; every cell becomes a
   full-width block with its column label inline. */
@media (max-width: 768px) {
  .content-page__body-wrap .body-table-scroll {
    overflow: visible;
    border: 0;
    border-radius: 0;
  }
  .content-page__body-wrap table,
  .content-page__body-wrap thead,
  .content-page__body-wrap tbody,
  .content-page__body-wrap th,
  .content-page__body-wrap td,
  .content-page__body-wrap tr {
    display: block;
    width: 100% !important;
    max-width: 100%;
  }
  .content-page__body-wrap table {
    min-width: 0;
  }
  /* Hide the header — real <thead>, or the first row when rich-text uses <td>. */
  .content-page__body-wrap thead,
  .content-page__body-wrap table:not(:has(thead)) tbody tr:first-child {
    display: none;
  }
  .content-page__body-wrap tr {
    margin-bottom: var(--spacing-sm);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-xl);
    overflow: hidden;
  }
  .content-page__body-wrap tr:last-child {
    margin-bottom: 0;
  }
  .content-page__body-wrap td,
  .content-page__body-wrap tr:last-child td {
    border: 0;
    border-bottom: 1px solid var(--border-default);
    padding: var(--spacing-sm) var(--spacing-xl);
  }
  .content-page__body-wrap tr td:last-child {
    border-bottom: 0;
  }
  /* Inline column label above each cell value (from the header row). */
  .content-page__body-wrap td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-weight: 600;
    color: var(--text-primary);
    margin-bottom: var(--spacing-xxs);
  }
  /* No zebra when stacked — keep cards clean. */
  .content-page__body-wrap tbody tr:nth-child(even) td {
    background: transparent;
  }
}