/* ==========================================================================
   LEGAL PAGES — Privacy Policy, Cookie Policy, Accessibility Statement, Terms
   ==========================================================================
   Built by engine/starter (specs/_starter.php → starter_legal_page): the hero,
   then the copy, one text element per clause (H2 + copy), so an editor changes
   one clause without touching the rest.
   Cornerstone (legal_side 'right'): the Legal layout has Contao's right
   column (right.css). The main article is `legal legal-copy`; the right column
   holds an article of its own, `legal-side`: "On this page" (.legal-toc, links
   to each clause's id) and the questions card (.legal-ask). Sticky under the
   header; stacked at 860 with "On this page" first and the card gone (each
   page ends with the same contact details).
   Older sites: one article `legal band`, a 2/3 `legal-copy` group beside a 1/3
   `legal-aside` group holding the card.
   ========================================================================== */

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

/* ---- The aside column (Legal layout) -----------------------------------
   #right on Cornerstone (right.css); #left works the same (left.css). */
:is(#right, #left) {
  --right-width: clamp(240px, 24vw, 340px);
  --left-width: clamp(240px, 24vw, 340px);
  --right-sticky-top: calc(var(--header-h, 88px) + var(--space-24));
  --left-sticky-top: calc(var(--header-h, 88px) + var(--space-24));
  .legal-side { padding-block: var(--space-60) var(--space-section); }
}
.legal-copy .content-text[id] { scroll-margin-top: calc(var(--header-h, 88px) + var(--space-24)); }
.legal-toc {
  .legal-toc__label {
    margin: 0 0 0.75em;
    color: var(--second);
    font-size: 0.75rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
  }
  /* a rail of links (left.css styles #left's; the same for #right here) */
  nav ul { list-style: none; margin: 0; padding: 0; border-left: 2px solid var(--stroke); }
  nav li { margin: 0; }
  nav a {
    display: block;
    margin-left: -2px;
    padding: 6px 0 6px 12px;
    border-left: 2px solid transparent;
    border-bottom: 0;
    font-size: 0.9375rem;
    line-height: 1.35;
    color: var(--heading);
  }
  nav a:hover, nav a:focus-visible { color: var(--second); border-left-color: var(--second); }
}
.legal-ask { margin-top: var(--space-40); }
@media (max-width: 860px) {
  :is(#right, #left) .legal-side { padding-block: var(--space-40) 0; }
  #right { order: -1; }                      /* "On this page" above the copy */
  .legal-toc nav ul { display: flex; flex-wrap: wrap; gap: 6px; border-left: 0; }
  .legal-toc nav a { margin-left: 0; padding: 5px 12px; border: 1px solid var(--stroke); }
  .legal-ask { display: none; }              /* each page ends with the same details */
}