/*
  WebAssisto — legal-page stylesheet (Privacyverklaring + Algemene voorwaarden)
  Source: extracted verbatim from the <style> blocks inside the approved
  "WebAssisto Privacyverklaring.dc.html" and "WebAssisto Algemene
  Voorwaarden.dc.html" Designer exports. Loaded ONLY by the two legal
  pages (in addition to the shared site.css) — never referenced by the
  Homepage, so nothing here can affect or regress index.html.

  Rules already covered by the shared site.css (box-sizing, base font
  family, h1/h2 font family, nav/footer link states, generic
  a:focus-visible/button:focus-visible, mobile-menu classes) are reused
  as-is and NOT duplicated here.
*/

/* Legal pages use h3-level headings nowhere in current content, but the
   approved Voorwaarden source scopes Space Grotesk to h3 too — kept for
   forward-compatibility with future legal copy, scoped to this file only. */
.c-root h3 { font-family: 'Space Grotesk', system-ui, sans-serif; }

/* Smooth in-page scrolling for anchor/TOC navigation — from both sources */
.c-root, .c-root * { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  .c-root, .c-root * { scroll-behavior: auto; }
}

/* TOC link base + hover — identical in both approved sources */
.c-toc-link { text-decoration:none; color:#6b6858; font-size:13.5px; display:block; padding:6px 0; border-left:2px solid transparent; padding-left:14px; transition:color 0.15s ease, border-color 0.15s ease; }
.c-toc-link:hover { color:#14151a; border-left-color:#d4ff5f; }
.c-toc-link:focus-visible { outline:2px solid #4a90e2; outline-offset:2px; }

/* Active TOC link state — Algemene voorwaarden only (scroll-spy, see legal-toc.js) */
.c-toc-link-active { color:#14151a !important; font-weight:700; border-left-color:#c94a2c !important; }

/* Plain legal-body text link — Privacyverklaring */
.c-legal-link { color:#565349; text-decoration:underline; text-underline-offset:2px; }
.c-legal-link:hover { color:#c94a2c; }

/* Anchor scroll offset below the fixed/sticky header — both pages */
.c-legal-content > div[id] { scroll-margin-top:96px; }
.c-art > div[id] { scroll-margin-top:96px; }

/* Nested ordered-list styling (lettered sub-clauses) — Algemene voorwaarden */
.c-art ol { margin:0 0 12px; padding-left:22px; }
.c-art ol ol { margin:6px 0 6px; list-style:lower-alpha; }
.c-art li { margin-bottom:6px; }

/* ---- Privacyverklaring TOC/grid (13 sections, no internal TOC scroll) ---- */
@media (max-width:900px) {
  .c-priv-grid { grid-template-columns:1fr !important; }
  .c-priv-toc { position:static !important; order:-1; margin-bottom:32px; }
}
@media (max-width:480px) {
  .c-priv-grid { padding:40px 20px 72px !important; }
}
@media (max-width:420px) {
  .c-legal-content ul { padding-left:18px !important; }
}

/* ---- Algemene voorwaarden TOC/grid (23 articles, sticky TOC scrolls
       internally on desktop only — no nested scroll on touch devices) ---- */
@media (max-width:900px) {
  .c-toc-grid { grid-template-columns:1fr !important; }
  .c-toc-col { position:static !important; max-height:none !important; overflow-y:visible !important; }
}
@media (max-width:480px) {
  .c-toc-grid { padding:40px 20px 72px !important; }
}
@media (max-width:420px) {
  .c-art ol { padding-left:18px !important; }
  .c-art ol ol { padding-left:16px !important; }
}

/* Shared hero-intro section responsive padding — both pages */
@media (max-width:480px) {
  .c-legal-hero-section { padding:56px 20px 64px !important; }
}

/* FIX (not in either approved Designer source): the hero <h1> is a single,
   unbreakable Dutch word ("Privacyverklaring") at 44px. Neither approved
   source defines any responsive font-size for it, so at narrow widths the
   word itself is wider than the 320px content column and causes horizontal
   overflow — confirmed present in the Designer original too (h1 scrollWidth
   355px vs 320px available at 360px viewport). Reduced only enough to fit;
   "Algemene voorwaarden" (two words, already wraps) is unaffected in
   practice. See MIGRATION_NOTES.txt. */
@media (max-width:480px) {
  .c-legal-hero-section h1 { font-size:34px !important; }
}