/* ─────────────────────────────────────────────────────────────────────
   Gedeelde stijl voor de juridische pagina's (privacy.html, voorwaarden.html)
   Sluit aan op de huisstijl van index.html.
   ───────────────────────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
:root {
  --rood:       #D62828;
  --blauw:      #1A2E4A;
  --blauw-mid:  #2B4C7E;
  --licht:      #F8F9FA;
  --wit:        #FFFFFF;
  --grijs:      #6B7280;
  --grijs-licht:#E5E7EB;
  --tekst:      #1F2937;
  --radius:     12px;
}
html { scroll-behavior: smooth; }
body {
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  color: var(--tekst); background: var(--licht); line-height: 1.7;
}
a { color: var(--blauw-mid); text-decoration: underline; text-underline-offset: 2px; }
a:hover { color: var(--rood); }

/* ── Topbalk ──────────────────────────────────────────────────────── */
.legal-nav {
  background: var(--wit); border-bottom: 1px solid var(--grijs-licht);
  padding: 0 24px; height: 64px;
  display: flex; align-items: center; justify-content: space-between;
}
.legal-nav .logo {
  display: flex; align-items: center; gap: 10px;
  font-weight: 700; font-size: 1.1rem; color: var(--blauw); text-decoration: none;
}
.legal-nav .logo span {
  background: var(--rood); color: var(--wit);
  padding: 4px 10px; border-radius: 6px; font-size: 0.85rem;
}
.legal-nav .terug { font-size: 0.9rem; color: var(--grijs); text-decoration: none; }
.legal-nav .terug:hover { color: var(--tekst); }

/* ── Inhoud ───────────────────────────────────────────────────────── */
.legal-wrap {
  max-width: 760px; margin: 0 auto; padding: 56px 24px 80px;
}
.legal-wrap h1 {
  font-size: clamp(1.8rem, 3vw, 2.4rem); font-weight: 800;
  color: var(--blauw); line-height: 1.2; margin-bottom: 8px;
}
.legal-meta { color: var(--grijs); font-size: 0.9rem; margin-bottom: 40px; }
.legal-wrap h2 {
  font-size: 1.25rem; font-weight: 700; color: var(--blauw);
  margin: 40px 0 12px; padding-top: 8px;
}
.legal-wrap h3 {
  font-size: 1.02rem; font-weight: 700; color: var(--tekst); margin: 24px 0 8px;
}
.legal-wrap p { margin-bottom: 14px; color: var(--tekst); }
.legal-wrap ul, .legal-wrap ol { margin: 0 0 16px 22px; }
.legal-wrap li { margin-bottom: 8px; }
.legal-wrap strong { color: var(--tekst); }
.legal-card {
  background: var(--wit); border: 1px solid var(--grijs-licht);
  border-radius: var(--radius); padding: 4px 28px 8px; margin-top: 24px;
}

/* ── Disclaimer / waarschuwingsblok ───────────────────────────────── */
.disclaimer {
  background: #FEF2F2; border: 1.5px solid var(--rood);
  border-radius: var(--radius); padding: 24px 28px; margin: 0 0 32px;
}
.disclaimer h2 { margin-top: 8px; color: var(--rood); }
.disclaimer p:last-child { margin-bottom: 8px; }

/* ── Invul-markering (verwijder vóór livegang) ────────────────────── */
.invul {
  background: #FEF9C3; border-bottom: 1px dashed #CA8A04;
  padding: 0 3px; border-radius: 3px;
}

/* ── Voetregel ────────────────────────────────────────────────────── */
.legal-footer {
  background: var(--blauw); color: rgba(255,255,255,0.6);
  padding: 28px 24px; font-size: 0.85rem; text-align: center;
}
.legal-footer a { color: rgba(255,255,255,0.8); }
.legal-footer a:hover { color: var(--wit); }
.legal-footer .links { margin-bottom: 8px; display: flex; gap: 20px; justify-content: center; flex-wrap: wrap; }

@media (max-width: 600px) {
  .legal-wrap { padding: 40px 18px 60px; }
}