/* ============================================================
   vaMicrosites Legal Plugin  –  legal.css
   Readable long-form document styling for the compiled legal
   notice. Deliberately inherits the host site's fonts and
   colors so the page reads as part of each microsite.
   ============================================================ */

/* ── Long-form flow ───────────────────────────────────────── */
.va-legal {
  /* WHY: Templates attach this role to their existing native content container. Legal owns
     only document mechanics; the host container remains the direct parent of headings and
     prose so its normal inset, color, link, and interaction rules apply. The shared wrapper
     allocation lives in va-common.css; this plugin layer only releases a flex/grid item's
     automatic minimum so the wrapper can shrink below its longest word. */
  min-inline-size: 0;
  --va-legal-rule:
    var(--motif-plugin-border, color-mix(in srgb, currentColor 18%, transparent));
  /* WHY: the header band and code chips must sit a shade off whatever surface the notice actually
     renders on, so the inherited text color cannot collide with them. Deriving both from
     `currentColor` guarantees that: on a light page the tint is a light grey under dark text, on a
     dark page a faint light wash under light text, and the delta stays the same either way. A theme
     surface token cannot do this — `--motif-plugin-surface` resolves to the site's *card* color,
     which on SparkClean was a near-black panel behind the page's dark body text. */
  --va-legal-cell-bg: color-mix(in srgb, currentColor 12%, transparent);
  --va-legal-gap:           1.15rem;
  --va-legal-heading-gap:   2.25rem;
  --va-legal-radius:        var(--motif-plugin-radius, 0);
}

/*
 * WHY: A compiled notice is plain `p`/`ul`/`table` markup, so it never picks up the prose class
 * (`.body-text`, `.spark-lead`, `.essay-body p`, …) each site uses for its own long-form copy and
 * would otherwise fall back to the raw `body` size and an unset line height. Bridging the
 * container to the canonical motif body roles gives every notice the host's own reading voice.
 * Zero specificity keeps any real host declaration — element, container, or page-scoped — stronger.
 */
:where(.va-legal) {
  font-family: var(--motif-font-body, inherit);
  font-size: var(--motif-type-body, inherit);
  line-height: var(--motif-line-body, 1.7);
}

/*
 * WHY: Some microsites style semantic headings globally while others expose their typography
 * only through the canonical motif roles. Zero-specificity rules give every Legal heading the
 * active microsite's own font and scale without beating any native element, section, or
 * page-specific selector. App-local ornaments remain app-owned (for example Guáncher's h2 rail).
 */
:where(.va-legal > h1) {
  font-family: var(--motif-font-h1, inherit);
  font-size: var(--motif-type-h1, 2em);
}

:where(.va-legal > h2) {
  font-family: var(--motif-font-h2, inherit);
  font-size: var(--motif-type-h2, 1.5em);
}

:where(.va-legal > h3) {
  font-family: var(--motif-font-h3, inherit);
  font-size: var(--motif-type-h3, 1.17em);
}

:where(.va-legal > h4) {
  font-family: var(--motif-font-h4, inherit);
  font-size: var(--motif-type-h4, 1em);
}

:where(.va-legal > :is(h1, h2, h3, h4, h5, h6)) {
  color: var(--motif-color-heading, currentColor);
  line-height: var(--motif-line-tight, 1.2);
}

/*
 * A microsite that never styles bare anchors renders the notice's links in the browser's default
 * blue/purple, which reads as unstyled content on an otherwise themed page. Bridging to the
 * canonical accent role fixes that; zero specificity keeps every real host anchor rule stronger.
 */
:where(.va-legal a) {
  color: var(--motif-color-accent-primary, currentColor);
}

/*
 * Several microsites strip underlines from bare anchors because their own links are buttons, cards,
 * or nav chrome. Inside a notice that leaves an inline link indistinguishable from the sentence
 * around it, so document links — the compiled Markdown's and the template's return link, neither of
 * which carries a class — keep an underline. Host-classed anchors are untouched.
 */
.va-legal a:not([class]) {
  text-decoration: underline;
  text-underline-offset: 0.2em;
}

/*
 * WHY: Document flow is a Legal mechanic, not host typography. Many microsites zero element
 * margins globally (`p, h2, ul { margin: 0 }`) and restore rhythm only on their own authored
 * classes, so a zero-specificity rule here collapsed whole notices into one wall of text.
 * HOW: class-level specificity beats those element resets while staying weaker than any
 * host rule scoped to the legal container, and adjacent margins still collapse — so a site
 * that already spaces its prose more generously keeps its own larger rhythm.
 */
.va-legal > * + * {
  margin-block-start: var(--va-legal-gap);
}

.va-legal > * + :is(h1, h2, h3, h4, h5, h6) {
  margin-block-start: var(--va-legal-heading-gap);
}

/*
 * va-common.css owns the responsive 1000px wrapper and the host owns its padding. Direct document
 * flow consumes that complete content box so the notice cannot become narrower than its wrapper
 * through a second font-dependent measure.
 */
.va-legal > :is(p, ul, ol, dl, blockquote) {
  max-inline-size: 100%;
}

.va-legal ul,
.va-legal ol {
  padding-inline-start: 1.5rem;
}

.va-legal ul {
  list-style: disc;
}

.va-legal ol {
  list-style: decimal;
}

/* Sites that reset `li` margins globally would otherwise render disclosure lists with no separation. */
.va-legal :is(ul, ol) > li + li {
  margin-block-start: 0.45rem;
}

/* ── Tables ──────────────────────────────────────────────── */
/* The metadata summary and cookie inventory fill the host wrapper's content box. Each scrolls
   locally when its columns need more room, so the page body never overflows. */
.va-legal table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-inline-size: 100%;
  margin-block: 0 var(--va-legal-gap);
  border-collapse: collapse;
}

.va-legal th,
.va-legal td {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--va-legal-rule);
  font-size: 0.95em;
  text-align: start;
  vertical-align: top;
}

.va-legal th {
  background: var(--va-legal-cell-bg);
  font-weight: 600;
}

.va-legal code {
  padding: 0.1em 0.35em;
  border-radius: calc(var(--va-legal-radius) / 2);
  background: var(--va-legal-cell-bg);
  font-size: 0.9em;
}

/* Return links are template-owned ordinary anchors; this helper contributes spacing only. */
.va-legal-back {
  margin-block-end: 1.5rem;
}