/* sections/legal.css
 *
 * Shared primitives for the legal-style cohort: /referral, /cookies,
 * eventually /privacy + /terms. Extracted from `sections/referral.css`
 * (PR #23) and `sections/cookies.css` (PR #25) once a third consumer
 * (/privacy) made the duplication obvious — per `docs/visual-polish-plan.md`
 * Phase C conditional-extra-commit guidance.
 *
 * The legal pages share a dark hero (`AysPageHero`) + light cream body
 * (`.ays-light`) + long-form prose organized as one intro block + N
 * numbered sub-blocks. This file owns every rule that the three pages
 * render identically. Per-page CSS files (`referral.css`, `cookies.css`,
 * `privacy.css`) keep only their page-specific overrides applied via
 * class composition (`<table class="ays-legal-table ays-cookies-table">`
 * pattern).
 *
 * Class convention:
 *   .ays-light .ays-legal-{element}
 *
 * Counter:
 *   `--ays-legal-section` — auto-numbers titled sub-blocks 1.–N. with
 *   a hanging-number gutter at x=0. Counter is reset on
 *   `.ays-legal-container` so the intro block (which has no title)
 *   doesn't interfere with the count.
 *
 * Load order in Layout.astro: between components.css and the per-page
 * legal CSS (referral, cookies, privacy).
 */

/* ── Section wrap ──
 * Cream background, full page-rhythm padding from the `section`
 * selector in ays-base.css (80px desktop block; 24px mobile inline). */
.ays-light .ays-legal-section {
  background: var(--ays-page-default);
}

/* Container — content cap shared with `.page-hero .container` via
 * `--ays-legal-max-width` (ays-base.css) so the hero title block and
 * the legal body underneath align on the same vertical axis. 48px
 * vertical gap between sub-blocks reads as anchored without padding
 * the page visually; individual pages override the gap when their
 * content density demands it (e.g. /cookies → 32px). */
.ays-legal-container {
  max-width: var(--ays-legal-max-width);
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: 48px;
  /* Counter for auto-numbering titled sub-blocks (1.–N.). Reset at
   * the container so the intro block (which has no title) doesn't
   * interfere; every `.ays-legal-block-title::before` increments. */
  counter-reset: ays-legal-section;
}

/* Intro — no subtitle, one or more flush paragraphs. */
.ays-legal-intro {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Every titled sub-block (the numbered sections). */
.ays-legal-block {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Subtitle — Figma renders h6.framer-text at 24px in `--ays-text-brand`
 * purple with a 32px left-indent (`pl-[31.67px]`). Markup carries
 * `.bds-h4` (matches Figma's 24px exactly on desktop + tablet; drops
 * to 20px on mobile via BDS's responsive scale). The 32px indent
 * doubles as the hanging-number gutter — the auto-incremented
 * "1.", "2."… counter renders absolute-positioned at x=0 so title
 * text starts flush at x=32px.
 *
 * Overrides vs `.bds-h4` markup default:
 *   - `font-weight: var(--fw-h3)` → 700 (BDS h4 default 600); Figma
 *     uses Poltawski_Nowy:Bold.
 *   - `color: var(--ays-text-brand)` instead of body text color.
 * 24px vertical breathing above / below so each section reads as
 * anchored rather than sandwiched against surrounding paragraphs.
 * Flex `gap` on `.ays-legal-block` is 12px; no margin collapse inside
 * flex, so the effective spacing becomes gap + margin. */
.ays-light .ays-legal-block-title {
  position: relative;
  padding-left: 32px;
  font-weight: var(--fw-h3);
  color: var(--ays-text-brand);
  margin: 24px 0;
}
.ays-light .ays-legal-block-title::before {
  counter-increment: ays-legal-section;
  content: counter(ays-legal-section) ".";
  position: absolute;
  left: 0;
}

/* Sub-group inside a numbered block — third heading tier below
 * `.ays-legal-block-title`. Promoted from /privacy's per-page
 * `.ays-privacy-rights-group-title` once /terms turned out to need
 * the same pattern (jurisdiction sub-groups in /privacy section 6;
 * billing sub-groups in /terms section 4: Free Trial / iOS / Android /
 * General payment terms).
 *
 * Visual hierarchy: numbered subtitle (`.bds-h4` purple, 24px) →
 * sub-group title (`.bds-h5` primary, 20px) → bullets / labeled
 * paragraphs. Markup carries `.bds-h5`; this rule supplies the bold
 * weight + primary color + breathing margins so the sub-group reads
 * as anchored mid-block.
 *
 * Wrapper `.ays-legal-subgroup` keeps the sub-title + its content
 * visually bound as one unit; flex `gap: 8px` is tighter than the
 * surrounding `.ays-legal-block`'s 12px so the sub-group reads as
 * denser than the section's flow text. */
.ays-light .ays-legal-subgroup-title {
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
  margin: 16px 0 4px;
}
.ays-legal-subgroup {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* Body text — paragraphs use `bds-p2`, unified with the body scale on
 * the marketing pages (/about, /why); previously `bds-p1` (one step
 * larger) to match Figma. Primary color by default; the `muted`
 * modifier renders in `--ays-text-secondary` for tail / footnote /
 * muted paragraphs. */
.ays-light .ays-legal-block p,
.ays-light .ays-legal-intro p {
  color: var(--ays-text-primary);
  margin: 0;
}
.ays-light p.ays-legal-muted {
  color: var(--ays-text-secondary);
}

/* Inline bold inside any legal block — labeled sub-blocks' `<strong>`
 * prefix, bullet-list `<strong>` labels, contact-block `<strong>`
 * lines. One rule covers every `<strong>` inside `.ays-legal-block`
 * so consumers don't need to add per-shape selectors. Page-specific
 * callouts (e.g. /referral's `.ays-referral-important strong`) win
 * via higher specificity when they need a different treatment. */
.ays-light .ays-legal-block strong {
  font-weight: var(--fw-h3);
  color: var(--ays-text-primary);
}

/* Bullet lists — Figma `pl-[24.61px]` indent on the `ul.framer-text`
 * container; 24px left-padding renders identically. `list-style: disc`
 * matches the bullet glyph Figma draws. */
.ays-legal-bullets {
  list-style: disc;
  padding-left: 24px;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ays-light .ays-legal-bullets li {
  color: var(--ays-text-primary);
  margin: 0;
}

/* ── Tables (shared shape) ──
 * Border model: the table draws a 1px outer border with a 12px radius
 * and clips cells via `overflow: hidden` so the purple header and
 * cream body honor the rounded corners. `border-collapse: separate`
 * is required so `border-radius` is respected on the `<table>`
 * element (browsers ignore radius on collapsed tables);
 * `border-spacing: 0` keeps the visual identical to collapse mode.
 * Per-cell `border-bottom` / `border-left` give the internal grid
 * without doubling because we never set border-top / border-right
 * on a sibling cell.
 *
 * 24px vertical margin pulls the table away from the surrounding
 * prose so blocky elements (titles, table) read as anchored against
 * the flow text. */
.ays-legal-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--ays-border-base);
  border-radius: 12px;
  overflow: hidden;
  font-family: var(--font-marketing-body);
  font-size: var(--fs-p2);
  line-height: var(--lh-body);
  margin: 24px 0;
}
.ays-light .ays-legal-table thead th {
  background: var(--ays-button-bg-primary);
  color: var(--ays-text-inverse-primary);
  text-align: left;
  font-weight: var(--fw-h3);
  padding: 12px;
}
/* Internal vertical separators between cells. The adjacent-sibling
 * `+ th` / `+ td` selectors apply only to cells that have a sibling
 * before them — the leftmost column never gets a left border, so the
 * internal grid stays distinct from the table's outer border.
 *
 * Header uses translucent white because the cell background is purple
 * (`--ays-button-bg-primary`); `--ays-border-base` is a dark ink token
 * that would vanish on the purple. Body uses the standard border
 * token. */
.ays-light .ays-legal-table thead th + th {
  border-left: 1px solid oklch(100% 0 0 / 0.16);
}
/* Body cells share the same padding / border-bottom / color whether
 * they're a `<td>` data cell or a `<th scope="row">` row-header cell.
 * Combined selector + the `tbody th` override below give row headers
 * a left-aligned, properly-weighted header treatment without the
 * default browser center-align. */
.ays-light .ays-legal-table tbody td,
.ays-light .ays-legal-table tbody th {
  padding: 12px;
  border-bottom: 1px solid var(--ays-border-base);
  color: var(--ays-text-primary);
  vertical-align: top;
}
.ays-light .ays-legal-table tbody th {
  text-align: left;
  font-weight: var(--fw-h3);
}
/* Internal vertical separators between cells in a row. Using
 * `:not(:first-child)` instead of `td + td` so the rule applies
 * regardless of whether the row leads with a `<th>` or a `<td>`. */
.ays-light .ays-legal-table tbody tr > :not(:first-child) {
  border-left: 1px solid var(--ays-border-base);
}
.ays-light .ays-legal-table tbody tr:last-child > * {
  border-bottom: none;
}

/* Any link inside a legal block — mailto in the contact / questions
 * sections, internal cross-page links, external opt-out URLs —
 * renders as the canonical purple link. Scoped to `.ays-legal-block`
 * so the rule covers any legal-page link without each consumer
 * needing its own selector. */
.ays-light .ays-legal-block a {
  color: var(--ays-text-brand);
  text-decoration: underline;
}

/* ── Responsive ── */
@media (max-width: 1024px) {
  .ays-legal-container {
    gap: 40px;
  }
}
@media (max-width: 768px) {
  /* Keep the 32px subtitle indent on mobile — the gutter hosts the
   * auto-incremented section number, so dropping it would collide
   * the digit with the title text. */
  .ays-legal-container {
    gap: 32px;
  }
  /* Tables — shrink type so multi-column tables still fit on a 390px
   * viewport. */
  .ays-legal-table {
    font-size: var(--fs-p3);
  }
  .ays-light .ays-legal-table thead th,
  .ays-light .ays-legal-table tbody td {
    padding: 8px;
  }
}