/**
 * Legal document family – page-scoped only.
 *
 * One stylesheet for privacy-policy, terms and data-privacy. The three
 * mock-ups' `p-*` blocks are byte-identical, so three files would be three
 * copies of one design; inc/finas/legal.php enqueues this one from the
 * template instead of relying on the per-slug lookup in inc/enqueue.php.
 *
 * The kit does the structural work: `.page-hero--navy --compact` (pages.css
 * §1), `.prose` (§4), `.with-aside` (§5), `.card` and `.grid--3` (§6),
 * `.callout--warn` (§18), `.table-wrap` (§17), `.section` and `.alt-band`.
 *
 * `.p-layout` in the mock-up is 90% a re-implementation of `.with-aside`: same
 * grid, same sticky column, same 960px collapse, differing only in the track
 * width and which side the rail sits on. So `legal__layout` composes
 * `.with-aside` and overrides those two things and nothing else. Forking the
 * primitive would mean fixing every future `.with-aside` bug twice.
 *
 * VALUES. Every colour, radius, shadow, type size and space resolves to a
 * token; tokens.css is not edited here. Dimensions the token scale has no name
 * for are composed from the spacing scale, with the comment saying whether the
 * composition is exact. The remaining literals are the ones the signed-off kit
 * already uses the same way: icon glyph sizes, the 44px tap-target floor,
 * hairline and keyline widths, and the 960px breakpoint `.with-aside` uses.
 */

/* The breadcrumb sits above the eyebrow. finas_breadcrumb() emits its own
   markup, so the spacing hangs off this wrapper. */
.legal__crumb { margin-block-end: var(--s-4); }

/* Shell – notice, meta row, document and related band share one measure.
   1056px: the mock-up's 1060px expressed against the container token. */
.legal__shell {
  max-inline-size: calc(var(--container) - var(--s-8) - var(--s-7));
  margin-inline: auto;
}

/* ----------------------------------------------------------------
   REVIEW NOTICE – deliberately prominent. It must not recede, and it
   disappears the moment the editor unticks the field.
   ---------------------------------------------------------------- */
.legal__notice {
  padding: var(--s-4) var(--s-5);
  border-inline-start: calc(var(--s-1) / 2) solid var(--red-deep);
}
.legal__notice .callout__label {
  display: inline-flex;
  align-items: center;
  gap: var(--s-1);
  font-size: var(--text-s);
}
.legal__notice .callout__label svg { width: 16px; height: 16px; flex: none; }
.legal__notice p { font-size: var(--text-base); line-height: var(--leading-body); }

/* Document meta row. */
.legal__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s-1) var(--s-4);
  margin-block-start: var(--s-4);
  font-size: var(--text-xs);
  font-weight: 600;
  color: var(--ink-faint);
}
.legal__meta b { color: var(--ink-soft); }

/* ----------------------------------------------------------------
   INLINE PLACEHOLDER CHIP – [finas_tbc] in the editor.
   The brackets are decoration; the screen-reader affordance is the
   "Placeholder:" prefix the shortcode writes. See inc/finas/legal.php.
   ---------------------------------------------------------------- */
.legal__tbc {
  font-style: normal;
  font-weight: 700;
  font-size: 0.85em;
  /* The chip has to be breakable. It was `nowrap`, which sets well in a wide
     column but turned the longest placeholder – "NPC contact details to be
     confirmed at legal review", 364px – into a rigid box that overflowed a
     320px screen on its own. `clone` re-draws the border, background and
     padding on each fragment, so a chip that wraps still reads as one chip
     rather than two half-open brackets. */
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
  color: var(--gold-deep);
  background: var(--gold-tint-15);
  border: 1px dashed var(--gold-deep);
  border-radius: var(--r-s);
  padding: 0.1em 0.5em;
}

/* ----------------------------------------------------------------
   LAYOUT – only the differences from .with-aside
   ---------------------------------------------------------------- */
.legal__layout {
  /* 15.5rem lead rail. The mock-up's 250px on the spacing scale, 2px narrower.
     `.with-aside` runs the other way round: minmax(0,1fr) then a 340px aside. */
  grid-template-columns: calc(var(--s-8) * 2 + var(--s-4)) minmax(0, 1fr);
  margin-block-start: var(--s-5);
}

/* The rail itself. `.with-aside__side` already supplies position, the sticky
   offset, the flex column and the collapse to static – this changes the gap
   and, below 960px, turns the rail into a boxed contents panel. */
.legal__index { gap: calc(var(--s-1) / 2); }
.legal__index-kicker {
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-block-end: var(--s-1);
}
.legal__index a {
  display: flex;
  align-items: center;
  gap: 0.7em;
  min-block-size: 44px;
  padding: 0.35em 0.8em;
  border-radius: var(--r-m);
  border: 1px solid transparent;
  font-size: var(--text-s);
  font-weight: 600;
  color: var(--ink-soft);
  line-height: var(--leading-snug);
  transition: background-color var(--dur-fast) ease,
              color var(--dur-fast) ease,
              border-color var(--dur-fast) ease;
}
.legal__index a:hover { background: var(--blue-tint-05); color: var(--blue); }
/* The mock-up's scrollspy sets aria-current as well as a class. Keying the
   state off the attribute means the state and the announcement cannot drift,
   and there is nothing to change here if the scrollspy lands later. */
.legal__index a[aria-current="true"],
.legal__index a.is-active {
  background: var(--blue-tint-05);
  border-color: var(--blue-tint-20);
  color: var(--blue);
}
.legal__index i {
  font-style: normal;
  font-family: var(--display);
  font-weight: 800;
  font-size: var(--text-xs);
  color: var(--blue);
  min-inline-size: 1.8em;
  flex: none;
}

@media (max-width: 960px) {
  /* `.with-aside` collapses here too, but `.legal__layout` outranks it, so the
     single-column rule has to be repeated rather than inherited.

     `minmax(0, 1fr)`, not a bare `1fr`. A `1fr` track takes its automatic
     minimum from min-content, so a single wide descendant stretches the track
     and everything laid out in it. `table.data` carries `min-width: 560px`
     (pages.css §17) so that it can scroll inside `.table-wrap`, and that
     minimum was propagating outwards: the column measured 562px at every
     width below 768px, and the index rail stretched to match. The rail was
     the symptom that got noticed; the track was the cause. The desktop rule
     above already uses `minmax(0, 1fr)` for this exact reason – the collapse
     rule had simply never been given the same floor. With it, `.table-wrap`
     scrolls, which is what it was always for. */
  .legal__layout { grid-template-columns: minmax(0, 1fr); }
  .legal__index {
    background: var(--cloud);
    border: 1px solid var(--line);
    border-radius: var(--r-m);
    padding: var(--s-3) var(--s-4);
  }
}

/* ----------------------------------------------------------------
   DOCUMENT – numbered sections, generous scroll offset
   ---------------------------------------------------------------- */
.legal__doc { counter-reset: legal-doc; }
.legal__doc > section {
  counter-increment: legal-doc;
  /* Same value as the sticky header offset, so a heading never lands under it. */
  scroll-margin-block-start: var(--sticky-offset);
}
.legal__doc > section > * + * { margin-block-start: var(--s-3); }
.legal__doc > section > h2::before {
  /* The word is passed in by the template so it stays translatable – CSS
     `content` is the one user-visible string no __() call can reach. */
  content: var(--legal-section-word, "Section") " " counter(legal-doc, decimal-leading-zero);
  display: block;
  font-family: var(--body);
  font-size: var(--text-xs);
  font-weight: 700;
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: var(--blue);
  margin-block-end: 0.6em;
}
/* Without the mock-up's scrollspy this template ships no JavaScript, so :target
   is what marks the section you jumped to. It also works with JS switched off,
   which the scrollspy never did. */
.legal__doc > section:target > h2::before { color: var(--gold-deep); }

/* Opt-in inside the document body: the boxed "short version" summary the
   applicant-consent page closes on. Add class="legal__consent" to a group. */
.legal__consent {
  background: linear-gradient(165deg, var(--blue-tint-05), var(--paper) 72%);
  border: 1px solid var(--blue-tint-20);
  border-inline-start: calc(var(--s-1) / 2) solid var(--blue);
  border-radius: var(--r-card);
  padding: clamp(var(--s-4), 3vw, calc(var(--s-4) * 1.5));
}
.legal__consent ul > li { padding-inline-start: 1.9em; }
.legal__consent ul > li::before {
  content: "✓";
  background: none;
  width: auto;
  height: auto;
  border-radius: 0;
  top: 0;
  inset-inline-start: 0.15em;
  color: var(--blue);
  font-weight: 800;
}

/* ----------------------------------------------------------------
   RELATED DOCUMENTS
   ---------------------------------------------------------------- */
.legal__related-head { margin-block-end: var(--s-4); }
.legal__related-head h2 { font-size: var(--text-xl); }
.legal__related .link-cta { font-size: var(--text-s); margin-block-start: auto; }

/* ----------------------------------------------------------------
   PRINT – a legal document is a document, so it prints. pages.css §21
   strips the chrome; the index is a navigation aid with nothing to
   navigate on paper.
   ---------------------------------------------------------------- */
@media print {
  .legal__index { display: none; }
  .legal__layout { grid-template-columns: 1fr; margin-block-start: 0; }
  .legal__doc > section { break-inside: auto; }
  .legal__doc > section > h2 { break-after: avoid; }
  .legal__notice { break-inside: avoid; print-color-adjust: exact; -webkit-print-color-adjust: exact; }
}