/* ============================================================
   Offertekeuring — Juridische trust-pagina's (verbatim-conversie
   van de Claude Design-export 'Offertekeuring Juridisch.dc.html').
   De export werkt met inline-styles die naar deze --ok-* tokens
   verwijzen; dit bestand levert exact die tokenlaag + de globale
   regels uit de export-<helmet>, plus de :hover-equivalenten van
   de DC-`style-hover`-attributen. Fonts zijn zelf-gehost
   (ds/fonts.css). Alleen geladen op /privacy, /voorwaarden,
   /disclaimer en /integriteit → body/html-regels zijn veilig.
   ============================================================ */

:root {
  /* ---- Laag 2 — merk / chrome ---- */
  --ok-ground:          #FCFBF9;
  --ok-tint:            #ECEEF1;
  --ok-surface-card:    #FFFFFF;
  --ok-footer:          #F4F4F2;

  --ok-ink:             #23211E;
  --ok-ink-2:           #33312D;
  --ok-text-secondary:  #56524C;
  --ok-text-muted:      #6E6C67;
  --ok-text-faint:      #8C8B86;

  --ok-line:            #ECE8E1;
  --ok-line-strong:     #E5E0D8;
  --ok-line-faint:      #F2EEE7;

  --ok-accent:          #27496B;
  --ok-accent-hover:    #1F3A56;
  --ok-accent-tint:     rgba(39, 73, 107, 0.07);
}

/* ---- Globale regels uit de export-<helmet> ---- */
body.legal {
  margin: 0;
  background: #FCFBF9;
  color: var(--ok-ink, #23211E);
  font-family: 'Source Sans 3', system-ui, sans-serif;
  font-feature-settings: 'tnum' 1, 'lnum' 1;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
body.legal a { color: inherit; text-decoration: none; }
html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

/* de export-secties zijn full-bleed; main mag niets beperken */
.legal .ok-main { max-width: none; padding: 0; margin: 0; }

/* Leesmaat: lopende tekst in de leeskolom max ~68ch (web-interface-guidelines:
   65–75ch). De article-kolom blijft 768px voor TOC + contactblok; alleen de
   proza (paragrafen + lijstregels) krijgt een kortere regellengte. */
.legal .legal-page article > section p,
.legal .legal-page article > section li { max-width: 68ch; }

/* inline-links binnen de leeskolom krijgen de accentkleur (de body-reset
   zet a→inherit; de juridische tekst heeft echte links nodig) */
.legal .legal-page article a {
  color: var(--ok-accent);
  border-bottom: 1px solid var(--ok-accent-tint);
}
.legal .legal-page article a:hover { border-bottom-color: var(--ok-accent); }

/* style-hover uit de DC-export → CSS-equivalenten (alleen op de legal-pagina's) */
.legal .ok-legal-navlink:hover,
.legal .ok-legal-back:hover,
.legal .ok-legal-toc:hover,
.legal .ok-legal-backlink:hover { color: var(--ok-accent); }
.legal .ok-legal-backlink:hover { border-bottom-color: var(--ok-accent); }

.legal .ok-legal-pill:not(.ok-legal-pill--actief):hover {
  border-color: var(--ok-accent);
  color: var(--ok-accent);
}
.legal .ok-legal-pill--actief:hover,
.legal .ok-legal-cta:hover {
  background: var(--ok-accent-hover);
  border-color: var(--ok-accent-hover);
}