/* ══════════════════════════════════════════════════════════════════
   Kennisbank: overzicht en artikel
   ══════════════════════════════════════════════════════════════════ */

/* ── Overzicht ─────────────────────────────────────────────────── */
.kbArchiefHero{padding:56px 0 40px}
.kbArchiefHero h1{font-size:40px;margin:10px 0 0}
.kbArchiefIntro{max-width:760px;margin-top:16px;font-size:17px;line-height:1.7;color:var(--font-color)}

.kbArchief{padding-bottom:72px}
.kbArchiefCat{margin-top:52px}
.kbArchiefCatKop{max-width:760px;margin-bottom:20px}
.kbArchiefCatKop h2{font-size:22px;margin:0 0 6px}
.kbArchiefCatKop p{margin:0;font-size:15px;line-height:1.65;color:var(--font-color)}

.kbArchiefGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:18px}
.kbKaart{display:flex;flex-direction:column;gap:10px;padding:24px 26px;border-radius:var(--radius-card);border:1px solid var(--border-color-1);background:#fff;box-shadow:var(--shadow-card);transition:var(--transition)}
.kbKaart:hover{box-shadow:var(--shadow-lift)}
.kbKaart h3{font-size:17px;font-weight:800;line-height:1.35;margin:0}
.kbKaart h3 a{color:var(--font-color-dark);transition:var(--transition)}
.kbKaart h3 a:hover{color:var(--color-indigo)}
.kbKaartTekst{margin:0;font-size:14.5px;line-height:1.7;color:var(--font-color)}
.kbKaartMeta{margin:auto 0 0;padding-top:12px;border-top:1px solid var(--border-color-2);font-size:13px;font-weight:600;color:var(--font-color-light)}

/* ── Artikel ───────────────────────────────────────────────────── */
.kbHero{padding:56px 0 36px}
.kbHero h1{font-size:38px;margin:10px 0 0;max-width:820px}
.kbSamenvatting{max-width:760px;margin-top:18px;font-size:18px;line-height:1.7;color:var(--font-color)}

.kbInhoud{padding-bottom:80px}
.kbLayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:48px;align-items:start}
.kbMain{min-width:0}

/* Samenvattend kader boven het artikel. */
.kbKern{padding:24px 28px;border-radius:var(--radius-card);background:var(--background-alt-1);border-left:3px solid var(--color-indigo);margin-bottom:36px}
.kbKern h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--font-color-dark);margin:0 0 14px}
.kbKern ul{display:flex;flex-direction:column;gap:9px;margin:0}
.kbKern li{position:relative;padding-left:22px;font-size:15px;line-height:1.6;color:var(--font-color-dark)}
.kbKern li::before{content:'';position:absolute;left:2px;top:8px;width:6px;height:6px;border-radius:50%;background:var(--color-indigo)}

/* Inhoudsopgave: verschijnt bij lange artikelen boven de lopende tekst. */
.kbToc{padding:22px 26px;border-radius:var(--radius-card);border:1px solid var(--border-color-1);background:#fff;box-shadow:var(--shadow-card);margin-bottom:36px}
.kbToc h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--font-color-dark);margin:0 0 14px}
.kbToc ol{counter-reset:kbtoc;list-style:none;margin:0;display:grid;grid-template-columns:repeat(2,1fr);gap:9px 28px}
.kbToc li{counter-increment:kbtoc;position:relative;padding-left:26px;line-height:1.45}
.kbToc li::before{content:counter(kbtoc,decimal-leading-zero);position:absolute;left:0;top:1px;font-size:12px;font-weight:700;color:var(--color-indigo);font-variant-numeric:tabular-nums}
.kbToc a{font-size:14.5px;font-weight:600;color:var(--font-color-dark);transition:var(--transition)}
.kbToc a:hover{color:var(--color-indigo)}

/* Lopende tekst van het artikel. */
.kbBody{max-width:760px;font-size:16.5px;line-height:1.8;color:var(--font-color)}
.kbBody h2{font-size:25px;line-height:1.3;color:var(--font-color-dark);margin:44px 0 14px;scroll-margin-top:96px}
.kbBody h2:first-child{margin-top:0}
.kbBody h3{font-size:19px;line-height:1.35;color:var(--font-color-dark);margin:32px 0 10px}
.kbBody p{margin:0 0 18px}
/* list-style expliciet uit: .kbBody draagt ook .entry-content, en die zet in
   style.css `list-style:disc` terug, anders staat de native bullet naast het
   eigen indigo bolletje uit ::before. */
.kbBody ul,.kbBody ol{margin:0 0 20px;padding-left:0;list-style:none;display:flex;flex-direction:column;gap:9px}
.kbBody ul li{position:relative;padding-left:24px}
.kbBody ul li::before{content:'';position:absolute;left:4px;top:10px;width:6px;height:6px;border-radius:50%;background:var(--color-indigo);opacity:.55}
.kbBody ol{counter-reset:kb}
.kbBody ol li{position:relative;padding-left:34px;counter-increment:kb}
.kbBody ol li::before{content:counter(kb);position:absolute;left:0;top:1px;width:22px;height:22px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--background-alt-1);border:1px solid var(--border-color-1);font-size:12px;font-weight:700;color:var(--font-color-dark)}
.kbBody strong{color:var(--font-color-dark);font-weight:700}
.kbBody a{color:var(--color-indigo);text-decoration:underline}
.kbBody table{width:100%;border-collapse:collapse;margin:0 0 24px;font-size:15px}
.kbBody th,.kbBody td{padding:11px 14px;text-align:left;border-bottom:1px solid var(--border-color-1)}
.kbBody th{font-weight:700;color:var(--font-color-dark);background:var(--background-alt-1)}

.kbFaq{margin-top:52px;max-width:760px}
.kbFaq h2{font-size:25px;margin:0 0 4px}

/* ── Zijkolom ──────────────────────────────────────────────────── */
.kbZij{position:sticky;top:24px;display:flex;flex-direction:column;gap:18px}
.kbZijBlok{padding:24px 26px;border-radius:var(--radius-card);border:1px solid var(--border-color-1);background:#fff;box-shadow:var(--shadow-card)}
.kbZijBlok h2{font-size:13px;font-weight:800;text-transform:uppercase;letter-spacing:.06em;color:var(--font-color-dark);margin:0 0 14px}
.kbBureauLijst{display:flex;flex-direction:column;gap:0;margin:0}
.kbBureauLijst li{display:flex;flex-direction:column;gap:2px;padding:11px 0;border-bottom:1px solid var(--border-color-2)}
.kbBureauLijst li:first-child{padding-top:0}
.kbBureauLijst li:last-child{border-bottom:0;padding-bottom:0}
.kbBureauLijst a{font-size:15px;font-weight:700;color:var(--font-color-dark);transition:var(--transition)}
.kbBureauLijst a:hover{color:var(--color-indigo)}
.kbBureauLijst span{font-size:13px;color:var(--font-color-light)}
.kbZijLink{display:inline-block;margin-top:16px;font-size:14px;font-weight:700;color:var(--color-indigo)}
.kbZijLink:hover{text-decoration:underline}
.kbZijLeeg{margin:0;font-size:14px;color:var(--font-color-light)}
.kbZijLinks{display:flex;flex-direction:column;gap:10px;margin:0}
.kbZijLinks a{font-size:14.5px;font-weight:600;color:var(--font-color-dark);transition:var(--transition)}
.kbZijLinks a:hover{color:var(--color-indigo)}

/* ── Responsief ────────────────────────────────────────────────── */
@media (max-width:1040px){
    /* De zijkolom past niet meer naast de tekst; hij schuift eronder en is
       dan niet langer sticky. */
    .kbLayout{grid-template-columns:1fr;gap:40px}
    .kbZij{position:static;flex-direction:row;flex-wrap:wrap}
    .kbZijBlok{flex:1 1 280px}
}
@media (max-width:768px){
    .kbArchiefHero h1{font-size:30px}
    .kbHero h1{font-size:29px}
    .kbSamenvatting{font-size:16.5px}
    .kbBody{font-size:16px}
    .kbBody h2{font-size:22px}
}
@media (max-width:600px){
    .kbArchiefGrid{grid-template-columns:1fr}
    .kbZij{flex-direction:column}
    .kbKaart,.kbZijBlok,.kbKern,.kbToc{padding:20px}
    .kbToc ol{grid-template-columns:1fr}
}