/* Kennisbank: hub (/kennisbank), begrippen en artikelen (/kennisbank/<slug>), categorieën
   (/kennisbank/begrippen/<categorie>), 'Herken je dit?' (/herken-je-dit en /herken-je-dit/<slug>). Alles gescoped onder .pagina-kennisbank.
   Ritme zoals de rest van de site: navy hero zonder beeld -> witte leessectie -> lichte sectie
   'Lees verder' -> blauwe afsluiter. Leesmaat ~68 tekens, vraagkoppen in gewone hoofdletters
   (lange vragen in kapitalen lezen slecht), het blok 'Uitleg in het kort' bovenaan.
   De HTML maakt build/_kennisbank.py; de klassen voor schrijvers staan in build/kennisbank/plan.json. */

/* ---------- hero ---------- */
.pagina-kennisbank .hero--kb{padding-bottom:clamp(88px,10vw,128px);}
.pagina-kennisbank .hero--kb .hero__tekst{max-width:920px;}
/* --l = lengte van het langste woord in de kop (gezet door de bouw): de kop wordt zo klein dat dat
   woord op een telefoon past, ook bij 'Verwerkersovereenkomst' */
.pagina-kennisbank .hero--kb h1{font-size:min(clamp(40px,5.8vw,78px),calc((100vw - 2 * var(--gutter)) / (var(--l,10) * .74)));overflow-wrap:break-word;}
.pagina-kennisbank :is(.hero--kb-artikel,.hero--kb-herken,.hero--kb-cat) h1{font-size:min(clamp(32px,4.3vw,58px),calc((100vw - 2 * var(--gutter)) / (var(--l,10) * .74)));line-height:.98;max-width:24ch;}
.pagina-kennisbank .hero--kb-hub .hero__tekst{max-width:1000px;}
.pagina-kennisbank .hero--kb-hub h1{font-size:min(clamp(40px,4.6vw,66px),calc((100vw - 2 * var(--gutter)) / (var(--l,10) * .74)));}
.pagina-kennisbank .hero--kb .hero__lead{max-width:52ch;}

/* kruimelpad */
.kruimel{margin-bottom:22px;font-size:14px;animation:opdoemen .5s var(--ease) both;}
.kruimel ol{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;align-items:center;row-gap:4px;}
.kruimel li{display:inline-flex;align-items:center;min-width:0;color:var(--tekst-licht-zacht);}
.kruimel li + li::before{content:"";flex:none;width:6px;height:6px;margin:0 12px 0 9px;border-top:1.5px solid currentColor;border-right:1.5px solid currentColor;rotate:45deg;opacity:.55;}
.kruimel a{color:var(--tekst-licht-zacht);text-decoration:none;padding-block:4px;transition:color var(--t-snel);}
.kruimel a:hover{color:var(--wit);text-decoration:underline;text-underline-offset:.3em;}
.kruimel [aria-current]{color:var(--ijs);max-width:40ch;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

/* datum en leestijd */
.kb-meta{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:26px;font-size:14.5px;color:var(--tekst-licht-zacht);animation:opdoemen .5s var(--ease) .6s both;}
.kb-meta span{display:inline-flex;align-items:center;gap:8px;}
.kb-meta .icoon{width:16px;height:16px;color:var(--lucht);}

/* hub: sprongen naar de onderdelen */
.kb-sprong{display:flex;flex-wrap:wrap;gap:10px;margin-top:32px;animation:opdoemen .5s var(--ease) .6s both;}
.kb-sprong a{display:inline-flex;align-items:center;min-height:44px;padding:0 18px;border-radius:var(--r-pil);border:1px solid rgba(255,255,255,.24);color:var(--wit);font-size:15px;font-weight:500;text-decoration:none;transition:background-color var(--t-snel),border-color var(--t-snel);}
.kb-sprong a:hover{background:rgba(255,255,255,.1);border-color:rgba(255,255,255,.5);}

/* ---------- leessectie: tekst links, zijkolom rechts ---------- */
.pagina-kennisbank .kb{padding-top:clamp(56px,7vw,96px);}
.kb__grid{display:grid;grid-template-columns:minmax(0,1fr) 272px;gap:clamp(40px,6vw,96px);align-items:start;}
@media (max-width:960px){.kb__grid{grid-template-columns:minmax(0,1fr);}.kb-zij{display:none;}}

.kb-tekst{max-width:68ch;font-size:18px;line-height:1.7;color:var(--tekst);}
.kb-tekst > * + *{margin-top:18px;}
.kb-tekst > :first-child{margin-top:0;}
.kb-tekst h2{max-width:none;margin-top:60px;font:800 clamp(24px,2.4vw,32px)/1.14 var(--f-display);text-transform:none;letter-spacing:-.012em;color:var(--navy);scroll-margin-top:110px;}
.kb-tekst h3{margin-top:34px;font-size:20px;color:var(--navy);}
.kb-tekst :is(h2,h3) + *{margin-top:14px;}
.kb-tekst p,.kb-tekst li{color:rgba(11,28,61,.86);}
.kb-tekst strong{color:var(--navy);}
.kb-tekst :is(ul,ol):not(.vink){display:grid;gap:10px;margin-left:0;padding-left:1.25em;}
.kb-tekst :is(ul,ol):not(.vink) li::marker{color:var(--blauw);font-weight:700;}
.kb-tekst .vink{gap:10px;}
.kb-tekst :is(li,td) a{color:var(--blauw);text-decoration:underline 1px;text-underline-offset:.25em;text-decoration-color:rgba(37,99,235,.4);transition:text-decoration-color var(--t-snel);}
.kb-tekst :is(li,td) a:hover{text-decoration-color:currentColor;}
.kb-tekst .faq{margin-top:20px;}
.kb-tekst .faq summary{font-size:17px;}
.kb-tekst .faq details p{font-size:16.5px;}
.kb-tekst .tabelwrap{margin-top:24px;}
@media (max-width:640px){.kb-tekst{font-size:17px;}.kb-tekst h2{margin-top:48px;}}

/* Uitleg in het kort */
.kb-kort{position:relative;padding:22px 26px;border-radius:var(--r-m);background:rgba(37,99,235,.06);border:1px solid rgba(37,99,235,.2);}
.kb-kort::before{content:"";position:absolute;left:-1px;top:20px;bottom:20px;width:4px;border-radius:0 4px 4px 0;background:var(--blauw);}
.kb-kort__kop{display:flex;align-items:center;gap:10px;margin-bottom:8px;font:700 12.5px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw)!important;}
.kb-kort__kop::before{content:"";flex:none;width:18px;height:14px;background:currentColor;mask:var(--glimlach) center/contain no-repeat;}
.kb-tekst .kb-kort p:last-child{font-size:18.5px;line-height:1.6;color:var(--navy);}

/* bedacht voorbeeld, kanttekening, bron */
.kb-voorbeeld{padding:20px 24px;border-radius:var(--r-m);background:var(--wolk);border:1px dashed rgba(11,28,61,.2);}
.kb-voorbeeld__kop{margin-bottom:6px;font:700 12px/1.2 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--tekst-zacht)!important;}
.kb-tekst .kb-voorbeeld p{font-size:17px;}
.kb-tekst .kb-noot{padding-left:16px;border-left:2px solid var(--grijs);font-size:15.5px;color:var(--tekst-zacht);}
.kb-tekst .kb-bron{margin-top:40px;padding-top:16px;border-top:1px solid var(--grijs);font-size:14px;line-height:1.6;color:var(--tekst-zacht);}
.kb-tekst .kb-bron a{display:inline;}

/* dienstblok onder de tekst */
/* ook op een categoriepagina, in .kb-blok onder de kaarten */
.kb-blok{max-width:68ch;margin-top:clamp(48px,6vw,72px);}
:is(.kb-tekst,.kb-blok) .kb-dienst{display:grid;grid-template-columns:auto minmax(0,1fr);gap:18px 20px;align-items:start;margin-top:60px;padding:28px;border-radius:var(--r-l);
  background:var(--korrel),radial-gradient(70% 90% at 100% 0%,rgba(37,99,235,.38),transparent 70%),var(--navy);color:var(--tekst-licht);box-shadow:0 30px 60px -34px rgba(7,20,42,.55);--focus:var(--ijs);}
.kb-dienst .chip{width:44px;height:44px;}
:is(.kb-tekst,.kb-blok) .kb-dienst .kb-dienst__kop{margin-bottom:6px;font:800 22px/1.15 var(--f-display);letter-spacing:-.01em;color:var(--wit);}
:is(.kb-tekst,.kb-blok) .kb-dienst p{font-size:16px;line-height:1.6;color:rgba(255,255,255,.84);}
.kb-dienst .knop{grid-column:2;justify-self:start;}
.kb-blok .kb-dienst{margin-top:0;}
@media (max-width:560px){:is(.kb-tekst,.kb-blok) .kb-dienst{grid-template-columns:minmax(0,1fr);padding:24px;}.kb-dienst .chip{display:none;}.kb-dienst .knop{grid-column:1;}}

/* auteur */
.kb-tekst .kb-auteur{display:flex;align-items:flex-start;gap:16px;margin-top:36px;padding-top:28px;border-top:1px solid var(--grijs);}
.kb-auteur img{flex:none;width:64px;height:64px;border-radius:50%;object-fit:cover;border:2px solid var(--grijs);}
.kb-tekst .kb-auteur p{font-size:15.5px;line-height:1.55;color:var(--tekst-zacht);}
.kb-auteur__kop{display:block;margin-bottom:2px;font-size:16.5px;font-weight:600;color:var(--navy);}
.kb-auteur__datum{display:block;margin-top:6px;font-size:14px;}

/* zijkolom: inhoudsopgave of meer begrippen; plakt mee */
.kb-zij{position:sticky;top:110px;}
.kb-zij__in{padding:22px 22px 18px;border-radius:var(--r-m);background:var(--wolk);border:1px solid var(--grijs);color:var(--tekst);--focus:var(--blauw);}
.kb-zij__in > :first-child{margin-top:0;}
.kb-zij__kop{margin-bottom:10px;font:700 12px/1.35 var(--f-display);letter-spacing:.14em;text-transform:uppercase;color:var(--blauw);}
:is(.kb-inhoud,.kb-lijst){list-style:none;margin:0 0 6px;padding:0;display:grid;gap:2px;counter-reset:kb;}
:is(.kb-inhoud,.kb-lijst) a{display:flex;gap:10px;margin-inline:-10px;padding:7px 10px;border-radius:10px;font-size:15px;line-height:1.35;color:var(--tekst);text-decoration:none;transition:background-color var(--t-snel),color var(--t-snel);}
:is(.kb-inhoud,.kb-lijst) a:hover{background:var(--wit);color:var(--blauw);}
.kb-inhoud li{counter-increment:kb;}
.kb-inhoud a::before{content:counter(kb,decimal-leading-zero);flex:none;padding-top:.2em;font:700 11.5px/1.35 var(--f-display);color:var(--blauw);}
.kb-zij__terug{position:relative;display:inline-flex;align-items:center;gap:8px;margin-top:10px;font-size:15px;font-weight:600;color:var(--blauw);text-decoration:none;}
.kb-zij__terug::after{content:"";width:16px;height:16px;background:currentColor;mask:var(--pijl-wit) center/contain no-repeat;transition:translate var(--t-ui) var(--ease);}
.kb-zij__terug:hover::after{translate:3px 0;}

/* ---------- kaarten (Lees verder, hub, overzicht) ---------- */
.kaart .kb-kaart__soort{font:700 12px/1.3 var(--f-display);letter-spacing:.12em;text-transform:uppercase;color:var(--blauw);}
.kaart--nacht .kb-kaart__soort{color:var(--lucht);}
.kb-kaart h3{font-size:21px;line-height:1.2;}
.kaart--nacht.kaart--link:hover{border-color:var(--lucht);box-shadow:var(--schaduw-zweef);}
.kaart--nacht .kaart__meer{color:var(--lucht);}
.pagina-kennisbank .noot a{color:var(--blauw);}

/* ---------- hub: begrippen per categorie ---------- */
.kb-cats{display:grid;gap:20px;}
@media (min-width:860px){.kb-cats{grid-template-columns:repeat(2,minmax(0,1fr));}}
.kb-cat{padding:28px;border-radius:var(--r-l);background:var(--wolk);border:1px solid var(--grijs);scroll-margin-top:110px;--focus:var(--blauw);}
.kb-cat h3{color:var(--navy);}
.kb-cat h3 a{display:inline-flex;align-items:center;gap:10px;color:inherit;text-decoration:none;transition:color var(--t-snel);}
.kb-cat h3 a::after{content:"";flex:none;width:18px;height:18px;background:currentColor;mask:var(--pijl-wit) center/contain no-repeat;opacity:.45;transition:translate var(--t-ui) var(--ease),opacity var(--t-snel);}
.kb-cat h3 a:hover{color:var(--blauw);}
.kb-cat h3 a:hover::after{opacity:1;translate:3px 0;}
.kb-cat > p{margin-top:6px;font-size:15.5px;color:var(--tekst-zacht);}
.kb-termen{list-style:none;margin:18px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px;}
.kb-termen a{display:inline-flex;align-items:center;min-height:40px;padding:0 15px;border-radius:var(--r-pil);background:var(--wit);border:1px solid var(--grijs);color:var(--navy);font-size:15px;font-weight:500;text-decoration:none;transition:border-color var(--t-snel),color var(--t-snel),translate var(--t-snel) var(--ease);}
.kb-termen a:hover{border-color:var(--blauw);color:var(--blauw);translate:0 -1px;}

/* ---------- categoriepagina: andere onderwerpen ---------- */
.kb-anders{--focus:var(--blauw);}
.rooster + .kb-anders{margin-top:clamp(56px,7vw,88px);padding-top:clamp(32px,4vw,48px);border-top:1px solid var(--grijs);}
.kb-anders .kb-termen{margin-top:4px;}
.kb-anders .kb-zij__terug{margin-top:22px;}

/* ---------- telefoon: rustig ---------- */
@media (max-width:640px){
  .kruimel{margin-bottom:16px;font-size:13.5px;}
  .kruimel li:last-child{display:none;}           /* de paginanaam staat er direct onder, als kop */
  .hero--kb-hub .kruimel{display:none;}           /* op de hub zou alleen 'Home' overblijven */
  .kb-meta{margin-top:20px;gap:6px 18px;font-size:13.5px;}
  .kb-sprong{gap:8px;margin-top:26px;}
  .kb-sprong a{min-height:40px;padding:0 14px;font-size:14px;}
  .kb-kort{padding:18px 20px;}
  .kb-tekst .kb-kort p:last-child{font-size:17.5px;}
  .kb-cat{padding:22px 20px;}
  .kb-termen a{min-height:38px;padding:0 13px;font-size:14.5px;}
  .kb-kaart h3{font-size:19px;}
  .kb-kaart p:not(.kb-kaart__soort){display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden;}
}