/* ==========================================================
   Elyon Talent | stijl voor de juridische pagina's
   ========================================================== */
:root{
  --navy-900:#0B1220; --navy-800:#0F172A; --slate-600:#475569; --slate-500:#64748B;
  --slate-400:#94A3B8; --slate-200:#E2E8F0; --slate-100:#F1F5F9; --slate-50:#F8FAFC;
  --blue:#2563EB; --blue-soft:#DBEAFE; --orange:#F97316; --orange-soft:#FFF7ED;
  --font-display:'Plus Jakarta Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --font-body:'Inter', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --header-h:74px;
}
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%; scroll-behavior:smooth; scroll-padding-top:calc(var(--header-h) + 16px)}
body{margin:0; font-family:var(--font-body); font-size:16.5px; line-height:1.72; color:var(--slate-600);
  background:#fff; -webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--font-display); color:var(--navy-800); letter-spacing:-.022em; line-height:1.2; font-weight:800}
h1{font-size:clamp(1.9rem,1.4rem+2vw,2.7rem); margin:0 0 14px; line-height:1.1}
h2{font-size:1.32rem; margin:44px 0 12px; scroll-margin-top:90px}
h3{font-size:1.05rem; margin:26px 0 8px; font-weight:700}
p{margin:0 0 1.05em}
a{color:var(--blue)}
a:hover{text-decoration:none}
strong{color:var(--navy-800); font-weight:650}
ul,ol{margin:0 0 1.15em; padding-left:1.35em}
li{margin-bottom:.5em}
li::marker{color:var(--slate-400)}
img,svg{max-width:100%; display:block}
.container{width:100%; max-width:820px; margin-inline:auto; padding-inline:24px}

/* Header, gelijk aan de landingspagina */
.site-header{position:sticky; top:0; z-index:60; background:rgba(255,255,255,.88);
  backdrop-filter:saturate(180%) blur(14px); -webkit-backdrop-filter:saturate(180%) blur(14px);
  border-bottom:1px solid var(--slate-200)}
.site-header .container{max-width:1160px; height:var(--header-h); display:flex; align-items:center;
  justify-content:space-between; gap:16px}
.brand{display:flex; align-items:center; gap:13px; text-decoration:none; flex:none}
.brand svg{width:46px; height:46px; flex:none; border-radius:13px; box-shadow:0 2px 8px rgba(15,23,42,.16)}
.brand__name{font-family:var(--font-display); font-weight:800; font-size:1.42rem; letter-spacing:-.04em;
  color:var(--navy-800); line-height:1; white-space:nowrap}
.brand__name em{font-style:normal; font-weight:600; color:var(--slate-500); letter-spacing:-.03em}
.btn{display:inline-flex; align-items:center; justify-content:center; gap:9px; font-family:var(--font-display);
  font-weight:700; font-size:.95rem; padding:11px 20px; border-radius:8px; border:1px solid var(--slate-200);
  background:#fff; color:var(--navy-800); text-decoration:none; white-space:nowrap;
  transition:border-color .18s ease, transform .18s ease}
.btn:hover{border-color:var(--navy-800); transform:translateY(-1px)}
.btn--primary{background:var(--orange); color:#fff; border-color:transparent;
  box-shadow:0 10px 24px -10px rgba(249,115,22,.6)}
.btn--primary:hover{background:#EA6A0B; border-color:transparent}
.btn:focus-visible{outline:3px solid var(--orange); outline-offset:3px}

/* Kop van de pagina */
.doc-hero{background:linear-gradient(180deg,var(--navy-800),var(--navy-900)); color:#B6C2D4;
  padding:clamp(48px,6vw,76px) 0 clamp(40px,5vw,60px)}
.doc-hero h1{color:#fff}
.doc-hero .kicker{font-family:var(--font-display); font-size:.78rem; font-weight:700; letter-spacing:.14em;
  text-transform:uppercase; color:#7FB0FF; margin:0 0 14px}
.doc-hero .meta{font-size:.94rem; color:var(--slate-400); margin:0}
.doc-hero .container{max-width:820px}

/* Inhoudsopgave */
.toc{background:var(--slate-50); border:1px solid var(--slate-200); border-radius:14px; padding:22px 26px;
  margin:36px 0 8px}
.toc h2{font-size:.8rem; letter-spacing:.13em; text-transform:uppercase; color:var(--slate-500);
  margin:0 0 12px; font-weight:700}
.toc ol{columns:2; column-gap:32px; margin:0; padding-left:1.2em; font-size:.95rem}
.toc a{color:var(--slate-600); text-decoration:none}
.toc a:hover{color:var(--blue); text-decoration:underline}

main{padding-bottom:72px}
.doc-body{padding-top:8px}

/* Waarschuwingsblok voor nog in te vullen punten */
.notice{border:1px solid #FED7AA; background:var(--orange-soft); border-radius:12px; padding:18px 22px;
  margin:28px 0; font-size:.95rem}
.notice strong{color:#9A3412}
.notice p:last-child{margin-bottom:0}
.todo{background:#FEF3C7; border-bottom:1px dashed #D97706; color:#92400E; padding:0 4px; font-style:italic}

/* Definitielijst */
.defs{margin:0 0 1.2em}
.defs dt{font-family:var(--font-display); font-weight:700; color:var(--navy-800); margin-top:14px}
.defs dd{margin:2px 0 0}

table{width:100%; border-collapse:collapse; margin:0 0 1.3em; font-size:.96rem}
th,td{text-align:left; padding:11px 14px; border-bottom:1px solid var(--slate-200); vertical-align:top}
th{font-family:var(--font-display); font-weight:700; color:var(--navy-800); background:var(--slate-50)}
.table-wrap{overflow-x:auto}

.back-link{display:inline-flex; align-items:center; gap:8px; margin-top:40px; font-family:var(--font-display);
  font-weight:600; text-decoration:none; color:var(--blue)}
.back-link:hover{text-decoration:underline}

/* Footer */
.site-footer{background:var(--navy-900); color:var(--slate-400); padding:40px 0 30px; font-size:.92rem}
.site-footer .container{max-width:1160px; display:flex; flex-wrap:wrap; gap:12px 24px; justify-content:space-between}
.site-footer a{color:var(--slate-400); text-decoration:none}
.site-footer a:hover{color:#fff}
.footer-links{display:flex; flex-wrap:wrap; gap:8px 20px}

.skip-link{position:absolute; left:-9999px; top:0; background:var(--navy-800); color:#fff; padding:12px 20px;
  z-index:100; border-radius:0 0 8px 0}
.skip-link:focus{left:0}

.on-narrow{display:none}

@media (max-width:640px){
  .container{padding-inline:18px}
  .toc ol{columns:1}
  .brand svg{width:40px; height:40px; border-radius:11px}
  .brand__name{font-size:1.2rem}
  .btn{padding:10px 14px; font-size:.85rem}
  .on-wide{display:none}
  .on-narrow{display:inline}
  .site-header .container{gap:10px}
  th,td{padding:10px 11px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition-duration:.001ms !important}
}
@media print{
  .site-header,.site-footer,.back-link,.toc{display:none}
  body{font-size:11pt; color:#000}
  .doc-hero{background:none; color:#000; padding:0 0 20px}
  .doc-hero h1{color:#000}
}