/* ============================================================
   Legal pages: privacy-policy.html and personal-data-use-opt-out.html.
   A dark hero in the homepage's language, then one calm white
   reading column. The copy is the live site's legal text word for
   word, so everything here is presentation only.

   Loaded after site.css and theme.css, on <body class="theme legal">;
   the opt-out page, which has no contents list, adds .legal--single.
   ============================================================ */
.legal {
  --legal-col: 612px;   /* the articles' reading column, so long-form reads the same */
  --legal-rule: #E3E8EF;
}

/* ---------- hero: eyebrow, title, then the meta line under it ---------- */
/* The shared .intro splits title and lede side by side; a legal title
   reads better with its date (or summary) directly beneath it. Padding,
   label spacing and the glow come from theme.css. */
.legal .pagehero .intro { grid-template-columns: minmax(0, 1fr); gap: 20px; align-items: start; }
.legal .pagehero .h-section { max-width: 20ch; }
.legal .pagehero .lede { max-width: 60ch; color: var(--sa-muted); }
/* "Updated ..." is meta, not a standfirst: smaller, set off by a short rule. */
.legal .pagehero .legal__updated {
  display: inline-flex; align-items: center; gap: 12px;
  font-size: 16px; font-weight: 600; letter-spacing: 0.005em;
}
.legal .pagehero .legal__updated::before { content: ""; width: 24px; height: 1px; background: #33445A; flex: none; }

/* ---------- one centred column, hero aligned to it ---------- */
/* Like the articles: with no contents list beside it, the column is
   centred and the hero text starts on the same left edge. The policy
   keeps the full-width layout only where its contents list shows. */
/* The opt-out page starts on the same left edge as the privacy policy
   and every other hero (the wrap edge); its column keeps the reading
   measure. */
.legal--single .legal-body .prose { margin-inline: 0; }
@media (max-width: 1179px) {
  .legal .pagehero > .wrap,
  .legal .legal-body > .wrap { max-width: calc(var(--legal-col) + 2 * var(--gutter)); }
}

/* ---------- the reading ground ---------- */
/* The page ground is dark now, so the reading section paints its own white. */
.legal .legal-body { background: #FFFFFF; color: var(--sa-text); padding-block: clamp(64px, 7.5vw, 104px); }

/* ---------- the column: Source Sans 18/1.7 ---------- */
.legal .prose {
  max-width: var(--legal-col); margin-top: 0;
  font-family: var(--sa-body); font-size: 18px; color: var(--sa-text);
}
.legal .prose > * + * { margin-top: 24px; }
.legal .prose p, .legal .prose li { line-height: 1.7; }
.legal .prose > :first-child { margin-top: 0; }
/* When the document opens on a heading, the hero edge already separates it. */
.legal .prose > h2:first-child { border-top: 0; padding-top: 0; }

/* h2 opens a section: Archivo 500 under a hairline, with real air above. */
.legal .prose h2 {
  margin-top: clamp(48px, 5vw, 64px); padding-top: 32px;
  border-top: 1px solid var(--legal-rule);
  font-family: var(--sa-display); font-weight: 500; font-variation-settings: "wdth" 100;
  font-size: clamp(1.625rem, 2.3vw, 2rem); line-height: 1.2; letter-spacing: -0.022em;
  color: var(--sa-text);
  scroll-margin-top: 112px;   /* clears the sticky header on in-page jumps */
}
/* h3 and h4 are card-title weight, stepping down in size only. */
.legal .prose h3 {
  margin-top: 40px;
  font-family: var(--sa-body); font-weight: 600; font-size: 22px; line-height: 1.3; letter-spacing: -0.015em;
  color: var(--sa-text);
}
.legal .prose h4 {
  margin-top: 32px;
  font-family: var(--sa-body); font-weight: 600; font-size: 19px; line-height: 1.35; letter-spacing: -0.01em;
  color: var(--sa-text);
}
/* A heading belongs to what follows it, so the gap below is tighter than above. */
.legal .prose h2 + *, .legal .prose h3 + *, .legal .prose h4 + * { margin-top: 12px; }
.legal .prose h2 + h3 { margin-top: 28px; }
.legal .prose h3 + h4 { margin-top: 20px; }

/* ---------- lists ---------- */
.legal .prose ul, .legal .prose ol { display: grid; gap: 10px; padding-left: 1.5em; }
.legal .prose li { padding-left: 0.25em; }
.legal .prose li::marker { color: var(--sa-link); font-weight: 600; }

/* ---------- links: ocean ink, and long policy URLs wrap ---------- */
.legal .prose a {
  color: var(--sa-link); overflow-wrap: anywhere;
  text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px;
  text-decoration-color: rgba(19, 117, 170, 0.45);
}
.legal .prose a:hover { color: var(--sa-text); text-decoration-color: currentColor; }
.legal .legal-body :focus-visible { outline-color: var(--sa-link); }

/* ---------- on-page contents (privacy policy, wide screens only) ---------- */
/* Built at runtime from the h2s (see the page's script); the nav is empty
   and hidden without JavaScript, and never shown below 1180px. It comes
   first in the source so it is the first thing Tab reaches in the body,
   and sits in the right-hand column. */
.legal-toc { display: none; }
@media (min-width: 1180px) {
  .legal-doc:has(.legal-toc:not([hidden])) {
    display: grid; grid-template-columns: minmax(0, var(--legal-col)) minmax(0, 272px);
    justify-content: space-between; align-items: start; column-gap: 64px;
  }
  .legal-doc:has(.legal-toc:not([hidden])) > .prose { grid-column: 1; grid-row: 1; }
  .legal-toc:not([hidden]) {
    grid-column: 2; grid-row: 1;
    display: block; position: sticky; top: 120px;
    max-height: calc(100vh - 152px); overflow-y: auto;
    /* Room inside the scroller so focus rings on the end links aren't clipped. */
    padding: 8px 8px 8px 20px; border-left: 1px solid var(--legal-rule);
  }
  .legal-toc ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .legal-toc a {
    display: block; position: relative; padding: 6px 0;
    font-family: var(--sa-body); font-size: 15px; font-weight: 600; line-height: 1.35;
    color: var(--sa-text2); text-decoration: none;
  }
  .legal-toc a:hover { color: var(--sa-text); }
  /* The current section takes the marker's gold on the rule beside it. */
  .legal-toc a[aria-current]::before {
    content: ""; position: absolute; left: -21px; top: 6px; bottom: 6px; width: 3px; border-radius: 2px;
    background: var(--gold);
  }
  .legal-toc a[aria-current] { color: var(--sa-text); }
}

/* ---------- reading progress (the policy) ---------- */
/* The articles' bar: the logo's colours under the sticky header, filling
   as the page is read. Pure CSS, so browsers without scroll timelines
   show nothing; never under reduced motion. The short opt-out page
   doesn't need it. */
@supports (animation-timeline: scroll()) {
  @media (prefers-reduced-motion: no-preference) {
    .legal:not(.legal--single) .site-header::after {
      content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 3px;
      background: linear-gradient(90deg, #F2AE2E, #1CAF69 50%, #1685C1);
      transform-origin: left center; transform: scaleX(0);
      animation: legal-progress linear both; animation-timeline: scroll(root);
      pointer-events: none;
    }
    @keyframes legal-progress { to { transform: scaleX(1); } }
  }
}

/* ---------- small screens ---------- */
@media (max-width: 760px) {
  .legal .prose h3 { font-size: 20px; }
  .legal .prose h4 { font-size: 18px; }
}

@media print {
  .legal .site-header::after { display: none; }
}