/* ============================================================
   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: The plugin owns only document mechanics. Width, inset, font, heading, color, link,
     and interaction presentation deliberately come from the site template and stylesheet. */
  --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);
}

: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;
}

/* ── Cookie table ─────────────────────────────────────────── */
/* WHY: The cookie inventory is the one wide element here. It scrolls inside its
   own container so the page body never scrolls horizontally on small screens. */
.va-legal table {
  display: block;
  overflow-x: auto;
  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;
}