/*
  Rich-text / WYSIWYG prose module.

  Scope: everything is nested under `.rich-text`, so these styles only touch
  editor-generated content (ACF WYSIWYG / the_content) and never leak into the
  rest of the page. Any section that renders editor output wraps it in a single
  `.rich-text` element. Loaded globally (rich text is cross-cutting), not per
  section.

  Goal: style the full standard tag set TinyMCE can emit defensively, so an
  editor can't break the layout — headings, paragraphs, lists, links, inline
  marks, blockquotes, code, media, horizontal rules, and tables. All values
  come from the design tokens.

  Table styling matches Figma 228:1933 (the "Product Evolution: v3 vs v5" spec
  table): navy header row, zebra rows, navy gridlines, rounded outer corners.
*/

.rich-text {
  font-family: var(--font-family-sans);
  font-size: var(--font-size-body);
  line-height: var(--line-height-loose);
  color: var(--color-text-body);
  /* Long URLs / unbroken strings must not blow out the layout. */
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------
   Vertical rhythm — consistent spacing between top-level blocks.
   The owl selector spaces siblings; headings get a larger lead-in.
   First/last children sit flush so the wrapper controls outer space.
   --------------------------------------------------------------- */
.rich-text > * {
  margin-block: 0;
}

.rich-text > * + * {
  margin-top: 1.25em;
}

.rich-text > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-top: 2em;
}

/* ---------------------------------------------------------------
   Headings
   --------------------------------------------------------------- */
.rich-text :is(h1, h2, h3, h4, h5, h6) {
  font-family: var(--font-family-display);
  font-weight: var(--font-weight-semibold);
  line-height: 1.2;
  color: var(--color-text-heading);
}

.rich-text h1 { font-size: var(--font-size-h2); }
.rich-text h2 { font-size: var(--font-size-h3); }
.rich-text h3 { font-size: var(--font-size-h4); }
.rich-text h4 { font-size: var(--font-size-body-lg); }
.rich-text h5 { font-size: var(--font-size-body); }
.rich-text h6 {
  font-size: var(--font-size-sm);
  letter-spacing: var(--letter-spacing-wide);
  text-transform: uppercase;
  color: var(--color-text-muted);
}

/* ---------------------------------------------------------------
   Text-level
   --------------------------------------------------------------- */
.rich-text p {
  line-height: var(--line-height-loose);
}

.rich-text a {
  color: var(--color-navy);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
  transition: color 0.2s ease-out;
}

.rich-text a:hover,
.rich-text a:focus-visible {
  color: var(--color-green-2);
}

.rich-text :is(strong, b) {
  font-weight: var(--font-weight-semibold);
}

.rich-text :is(em, i) {
  font-style: italic;
}

.rich-text small {
  font-size: var(--font-size-sm);
}

.rich-text mark {
  background-color: var(--color-green-tint);
  color: inherit;
  padding: 0 0.15em;
}

.rich-text :is(sub, sup) {
  font-size: 0.75em;
  line-height: 0;
}

.rich-text del { text-decoration: line-through; }
.rich-text ins { text-decoration: underline; }
.rich-text abbr[title] { cursor: help; text-decoration: underline dotted; }

/* ---------------------------------------------------------------
   Lists
   --------------------------------------------------------------- */
.rich-text :is(ul, ol) {
  padding-left: 1.5em;
}

.rich-text li + li {
  margin-top: 0.4em;
}

/* Nested lists hug their parent item rather than getting block spacing. */
.rich-text li > :is(ul, ol) {
  margin-top: 0.4em;
}

.rich-text ul { list-style: disc; }
.rich-text ol { list-style: decimal; }
.rich-text li::marker {
  color: var(--color-green-2);
}

/* Definition lists */
.rich-text dt { font-weight: var(--font-weight-semibold); }
.rich-text dd { margin-left: 1.5em; }

/* ---------------------------------------------------------------
   Blockquote
   --------------------------------------------------------------- */
.rich-text blockquote {
  padding: var(--space-2) var(--space-6);
  border-left: 4px solid var(--color-green-2);
  font-style: italic;
  color: var(--color-text-muted);
}

.rich-text blockquote > :first-child { margin-top: 0; }

/* ---------------------------------------------------------------
   Code
   --------------------------------------------------------------- */
.rich-text :is(code, kbd, samp, pre) {
  font-family: ui-monospace, "SFMono-Regular", "SF Mono", Menlo, Consolas,
    "Liberation Mono", monospace;
  font-size: 0.9em;
}

.rich-text :not(pre) > code {
  background-color: var(--color-green-tint);
  padding: 0.15em 0.4em;
  border-radius: 4px;
}

.rich-text pre {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  padding: var(--space-6);
  border-radius: 8px;
  overflow-x: auto;
}

.rich-text pre code {
  background: none;
  padding: 0;
  color: inherit;
}

/* ---------------------------------------------------------------
   Horizontal rule — center-fading line (matches the divider style)
   --------------------------------------------------------------- */
.rich-text hr {
  border: 0;
  height: 1px;
  background: linear-gradient(
    90deg,
    transparent,
    var(--color-border) 50%,
    transparent
  );
}

/* ---------------------------------------------------------------
   Media
   --------------------------------------------------------------- */
.rich-text img {
  max-width: 100%;
  height: auto;
  border-radius: 8px;
}

.rich-text figure > img { display: block; }

.rich-text figcaption {
  margin-top: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-text-muted);
  text-align: center;
}

/* ---------------------------------------------------------------
   Tables — styled to match Figma 228:1933.
   border-collapse: separate (+ overflow:hidden) so the 8px outer radius
   clips cleanly; cells draw the internal gridlines via right/bottom borders.
   --------------------------------------------------------------- */
.rich-text table {
  width: 100%;
  table-layout: fixed;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--color-navy-blue);
  border-radius: 8px;
  overflow: hidden;
}

.rich-text :is(th, td) {
  padding: var(--space-4_5) var(--space-6);
  border-right: 1px solid var(--color-navy-blue);
  border-bottom: 1px solid var(--color-navy-blue);
  font-size: var(--font-size-body);
  vertical-align: middle;
  /* First column reads as a row label (left); data columns center. */
  text-align: center;
}

.rich-text :is(th, td):first-child {
  text-align: left;
}

.rich-text :is(th, td):last-child {
  border-right: 0;
}

.rich-text tr:last-child :is(th, td) {
  border-bottom: 0;
}

.rich-text thead th {
  background-color: var(--color-navy-blue);
  color: var(--color-text-on-dark);
  font-weight: var(--font-weight-semibold);
}

/* Zebra striping on body rows — solid white / light green, never transparent,
   so the table reads the same over a tinted or dark section background. */
.rich-text tbody tr:nth-child(odd) {
  background-color: var(--color-white);
}

.rich-text tbody tr:nth-child(even) {
  background-color: var(--color-green-tint);
}

/* Tables are wrapped in a horizontal scroll container so wide / many-column
   tables can be swiped left-right on touch instead of overflowing the page.
   The table keeps width:100% so it fills the wrapper at desktop; the wrapper
   (not the table) is what scrolls, so the page width is never affected.
   In the theme a filter auto-wraps each <table> in this element; a bare,
   unwrapped table degrades to a fixed full-width layout (no slider). */
.rich-text__table-scroll {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Below the layout breakpoint the table switches to auto layout with a
   per-column min-width, so columns stay readable and the table grows past the
   viewport — the wrapper then scrolls. More columns = more to swipe.
   The first column is frozen (position: sticky) so the row label stays
   visible while the data columns scroll underneath. Sticky cells overlap
   scrolled content, so each needs an explicit background matching its row
   (white/zebra/navy) — inherited tr backgrounds don't apply to sticky cells. */
@media (max-width: 767px) {
  .rich-text__table-scroll table {
    table-layout: auto;
    /* overflow:hidden on the table (used at desktop to clip the rounded outer
       corners) establishes a scrolling ancestor that breaks position:sticky on
       nested cells. Drop it — and the matching border-radius — at mobile so the
       frozen first column below can actually stick to the scroll container. */
    overflow: visible;
    border-radius: 0;
  }
  .rich-text__table-scroll :is(th, td) {
    min-width: 150px;
  }
  .rich-text__table-scroll :is(th, td):first-child {
    position: sticky;
    left: 0;
    z-index: 1;
    background-color: var(--color-white);
    /* The table's outer border is on the <table> itself, so it scrolls off to
       the left with the rest of the table. Give the sticky cell its own
       left border so the frozen column always shows a left edge. */
    border-left: 1px solid var(--color-navy-blue);
  }
  .rich-text__table-scroll tbody tr:nth-child(even) :is(th, td):first-child {
    background-color: var(--color-green-tint);
  }
  .rich-text__table-scroll thead th:first-child {
    background-color: var(--color-navy-blue);
    z-index: 2;
  }
}