/* ============================================================
   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 width, inset, color, link, and interaction rules apply. */
  min-inline-size: 0;
  max-inline-size: 100%;
  --va-legal-rule:
    var(--motif-plugin-border, color-mix(in srgb, currentColor 18%, transparent));
  --va-legal-cell-bg:
    var(--motif-plugin-surface, color-mix(in srgb, currentColor 4%, transparent));
  --va-legal-gap:           1.15rem;
  --va-legal-radius:        var(--motif-plugin-radius, 0);
}

/*
 * 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);
}

:where(.va-legal > * + *) {
  margin-block-start: var(--va-legal-gap);
}

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

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

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

/* ── Tables ──────────────────────────────────────────────── */
/* WHY: The metadata summary and cookie inventory share one bounded table surface.
   Each scrolls locally when needed so the page body never overflows on small screens. */
.va-legal table {
  display: block;
  overflow-x: auto;
  width: 100%;
  max-width: 100%;
  margin-block: 0 var(--va-legal-gap);
  border-collapse: collapse;
  font-size: 0.95em;
}

.va-legal th,
.va-legal td {
  padding: 0.6rem 0.85rem;
  border: 1px solid var(--va-legal-rule);
  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;
}