/* Kennisbank.
   De artikeltypografie komt uit blog.css (.blog-body); dit bestand voegt
   alleen toe wat de kennisbank extra nodig heeft: tabellen, de verantwoording,
   het bronnenblok en de hub. Zo staat er geen enkele regel dubbel.
   Architectuur: docs/kennisbank/. */

/* ── Hub ─────────────────────────────────────────────────────────────────── */
.kb-hub { max-width: 1080px; margin: 0 auto; padding: 56px 24px 96px; }
.kb-cluster { margin-bottom: 44px; }
.kb-cluster__kop { display: flex; align-items: baseline; gap: 12px; border-bottom: 1px solid var(--rand); padding-bottom: 10px; margin-bottom: 18px; }
.kb-cluster__kop h2 { font-size: 24px; color: var(--inkt); }
.kb-cluster__code { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--goud-tekst); }
.kb-cluster__pillar { display: block; font-size: 15.5px; color: var(--tekst-3); margin-bottom: 16px; }
.kb-lijst { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px 24px; list-style: none; padding: 0; }
.kb-lijst a { color: var(--goud-link); font-size: 15px; line-height: 1.6; }
.kb-lijst__vraag { display: block; font-size: 13px; color: var(--tekst-5); }

/* ── Artikelkop ──────────────────────────────────────────────────────────── */
.kb-kop { max-width: 760px; margin: 0 auto; padding: 28px 24px 0; }
.kb-kop h1 { font-size: 38px; line-height: 1.15; color: var(--inkt); margin: 14px 0 10px; }
.kb-kop__cluster { font-size: 12px; letter-spacing: .12em; text-transform: uppercase; color: var(--goud-tekst); }

/* Verantwoording: auteur, controleur en herzieningsdatum. Op YMYL-pagina's is
   dit geen sierlijstje maar het bewijs dat er een vakinhoudelijke check was. */
.kb-verantwoording { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 13px; color: var(--tekst-5); border-top: 1px solid var(--rand); border-bottom: 1px solid var(--rand); padding: 12px 0; margin-top: 18px; }
.kb-verantwoording strong { color: var(--tekst-3); font-weight: 600; }

/* ── Artikelbody, aanvullingen op .blog-body ─────────────────────────────── */
.kb-body table { width: 100%; border-collapse: collapse; margin: 0 0 28px; font-size: 14.5px; }
.kb-body caption { text-align: left; font-size: 13px; color: var(--tekst-5); padding-bottom: 8px; }
.kb-body th, .kb-body td { border: 1px solid var(--rand-kaart); padding: 10px 12px; text-align: left; vertical-align: top; line-height: 1.55; }
.kb-body th { background: var(--creme-veld); color: var(--tekst-2); font-weight: 600; }
.kb-body__tabel { overflow-x: auto; }
.kb-body sup a { text-decoration: none; }

/* Kernantwoord: de eerste alinea beantwoordt de hoofdvraag. Antwoord eerst. */
.kb-antwoord { background: var(--creme-tint); border-left: 3px solid var(--goud); border-radius: 0 var(--r-kaart) var(--r-kaart) 0; padding: 20px 24px; margin: 0 0 30px; }
.kb-antwoord p { margin-bottom: 0; font-size: 16.5px; line-height: 1.75; color: var(--tekst-2); }
.kb-antwoord p + p { margin-top: 14px; }

.kb-let-op { background: var(--rood-bg); border: 1px solid var(--rood-rand); border-radius: var(--r-kaart); padding: 18px 22px; margin: 0 0 28px; }
.kb-let-op p { margin-bottom: 0; color: #6E2A22; font-size: 15px; }

/* ── Bronnen ─────────────────────────────────────────────────────────────── */
.kb-bronnen { max-width: 720px; margin: 0 auto; padding: 0 24px 48px; }
.kb-bronnen h2 { font-size: 19px; color: var(--inkt); margin-bottom: 12px; }
.kb-bronnen ol { padding-left: 20px; font-size: 13.5px; line-height: 1.7; color: var(--tekst-4); }
.kb-bronnen li { margin-bottom: 8px; }
.kb-bronnen a { color: var(--goud-link); }
.kb-disclaimer { font-size: 13px; color: var(--tekst-5); border-top: 1px solid var(--rand); padding-top: 14px; margin-top: 18px; }

/* ── Verder lezen ────────────────────────────────────────────────────────── */
.kb-verder { max-width: 720px; margin: 0 auto; padding: 0 24px 56px; }
.kb-verder h2 { font-size: 19px; color: var(--inkt); margin-bottom: 12px; }
.kb-verder ul { list-style: none; padding: 0; }
.kb-verder li { border-top: 1px solid var(--rand); padding: 12px 0; }
.kb-verder a { color: var(--goud-link); font-size: 15.5px; }
.kb-verder span { display: block; font-size: 13px; color: var(--tekst-5); margin-top: 2px; }

/* ── Begrip ──────────────────────────────────────────────────────────────── */
.kb-begrip { max-width: 640px; margin: 0 auto; padding: 48px 24px 80px; }
.kb-begrip h1 { font-size: 32px; color: var(--inkt); margin-bottom: 14px; }
.kb-begrip__def { font-size: 16.5px; line-height: 1.75; color: var(--tekst-2); }
.kb-begrip__door { margin-top: 24px; font-size: 15px; }

@media (max-width: 760px) {
  .kb-lijst { grid-template-columns: 1fr; }
  .kb-kop h1 { font-size: 30px; }
  .kb-hub { padding: 40px 20px 72px; }
}