/* ==========================================================================
   LEGAL PAGES — Privacy Policy, Cookie Policy, Accessibility Statement, Terms
   ==========================================================================
   Built by engine/starter (specs/_starter.php → starter_legal_page): the hero,
   then an article `legal band` holding `legal-copy` (2/3, one text element per section: H2 + copy, so an editor
   changes one clause without touching the rest) beside `legal-aside` (1/3, a
   soft card with the contact route, sticky under the header).
   ========================================================================== */

/* the article holding the copy and the aside */
.legal { padding-block: var(--space-60) var(--space-section); }

.legal-copy {
  color: var(--text-body);

  h2 {
    margin: var(--space-40) 0 0.5em;
    color: var(--heading);
    font-size: clamp(1.375rem, 2vw, 1.75rem);
    line-height: 1.25;
  }
  ul { margin: 0 0 1em; padding-left: 1.2em; }
  li { margin-bottom: 0.4em; }
  li::marker { color: var(--second); }
  a { color: var(--prime); font-weight: 600; }
  a:hover { color: var(--second); }
  /* the Cookie Policy's cookie lists */
  table { width: 100%; margin: 0.5em 0 1.25em; border-collapse: collapse; font-size: 0.875rem; }
  th, td { padding: 10px 12px; border-bottom: 1px solid var(--stroke); text-align: left; vertical-align: top; }
  th { color: var(--heading); font-size: 0.75rem; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; background: var(--surface-soft); }
  td:first-child { white-space: nowrap; }
  code { color: var(--heading); font-size: 0.85em; }
}
.legal-updated p {
  margin: 0;
  color: var(--second);
  font-size: 0.875rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* phones: a wide cookie table scrolls sideways inside its section */
@media (max-width: 700px) {
  .legal-copy .content-text:has(table) .rte { overflow-x: auto; }
}

@media (min-width: 993px) {
  .legal-aside .card {
    position: sticky;
    top: calc(var(--header-h, 88px) + var(--space-24));
  }
}