/* kennis.css - Kennisbank-laag bovenop design-system.css
   THE REAL MAG. design system: scherp/vlak, radius 2px, 1px borders, koperen accent,
   geen schaduwen, geen pillen. Leesbaarheid boven breedte: tekst smal, tabellen breed. */

:root {
  --kb-maat: 74ch;
}

/* ---------- layout ---------- */
.kb-article { padding-block: clamp(48px, 7vw, 96px); }

/* ---------- het kopblok, 3 sep 2026 ----------
   De kennisbank begon zonder kopblok, terwijl elke andere pagina opent met
   <section class="page-intro">: een warme band over de volle breedte met het kruimelpad,
   een eyebrow en de h1. Zonder die opening staat de afsluiter onderaan als enige zware
   blok op de pagina, en dat is precies wat opviel.
   .page-intro brengt zijn eigen ruimte onder de vaste nav mee
   (padding-top: nav-hoogte + clamp(80px,10vw,160px)), dus de bovenpadding van
   .kb-article moet eraf, anders komt die er nog eens bovenop. */
.kb-article > .page-intro:first-child { margin-bottom: clamp(32px, 4vw, 56px); }
/* De lead-alinea staat nu IN het kopblok, en gedraagt zich daar als de lead van elke andere
   pagina in plaats van als het uitgelichte antwoord dat hij in de leeskolom was.

   - ondermarge op 0, anders telt zijn oude marge dubbel met de onderpadding van .page-intro
   - GEEN koperen kantlijn en geen inspringing. Die streep hoort bij een uitgelicht antwoord;
     boven in het kopblok leest hij als een citaatstreep. Hans wees dit aan op 3 sep 2026.
   - maat 60ch, gelijk aan .page-intro .lead elders op de site

   De klasse kb-answer blijft staan, want die wordt nergens buiten de CSS gebruikt en het
   gaat hier alleen om het uiterlijk binnen het kopblok.

   LET OP de leesrichting: deze uitzondering staat HIERBOVEN de basisregel .kb-answer die hij
   overschrijft, en niet eronder. Dat werkt omdat .page-intro .kb-answer specificiteit (0,2,0)
   heeft tegen (0,1,0), en specificiteit gaat voor bronvolgorde. Verplaats je de basisregel
   omhoog of geef je die een klasse meer, dan valt dit om. */
.page-intro .kb-answer {
  margin-bottom: 0;
  padding: 0;
  border-left: 0;
  max-width: 60ch;
}
.kb-article.kb-met-kop { padding-top: 0; }

/* De naam-h1 van de overzichtspagina. Die draagt een merknaam en geen artikeltitel, dus
   hij mag groter dan de 52px van .kb-article h1. De volle sitemaat var(--t-h1) is te veel:
   The Real Knowledge Base. is 24 tekens en breekt daar over drie regels, waardoor het
   kopblok 779px wordt tegen een afsluiter van 527px. Op 76px blijft het twee regels en
   614px. Gemeten op 1440px, 3 sep 2026. Pijler- en artikelpaginas raakt dit niet. */
.kb-article .page-intro h1.kb-kop-naam {
  font-size: clamp(38px, 5.4vw, 76px);
  max-width: 20ch;
}

/* ---------- de afsluiter, compacter ----------
   De sitebrede .mega-cta zet een kop van clamp(40px,6vw,96px) en padding van
   clamp(96px,12vw,200px) onder de pagina. Op 1440px is dat een kop van 86px boven een
   leeskolom met een h1 van 52px, dus het slot werd groter dan de pagina zelf. Elders op de
   site wordt die maat gedragen door een even grote openingskop; in een kennisartikel niet.
   Hier dus de kop op dezelfde maat als de h1 van het artikel, en minder padding. */
.mega-cta-kb { padding-block: clamp(64px, 7vw, 112px); }
.mega-cta-kb h2 { font-size: clamp(32px, 3.6vw, 56px); max-width: 24ch; }
.mega-cta-kb p { margin-bottom: var(--ruimte-6); }
.kb-narrow { max-width: 980px; }
.kb-article h1 {
  font-size: clamp(30px, 4.2vw, 52px);
  line-height: 1.1;
  letter-spacing: -0.01em;
  margin-bottom: var(--ruimte-4, 24px);
  max-width: 22ch;
  overflow-wrap: anywhere;
}

/* ---------- kruimelpad ---------- */
.kb-crumbs {
  font-size: 13px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  margin-bottom: var(--ruimte-4, 24px);
  color: var(--tekst-zacht, #6b6a67);
}
.kb-crumbs a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.kb-crumbs a:hover { border-bottom-color: var(--accent, #a07050); color: var(--accent, #a07050); }
.kb-crumbs span { opacity: 0.5; margin: 0 6px; }

/* ---------- het antwoord (de alinea die LLM's overnemen) ---------- */
.kb-answer {
  font-size: clamp(18px, 2vw, 22px);
  line-height: 1.55;
  font-weight: 500;
  max-width: var(--kb-maat);
  padding: var(--ruimte-4, 24px) 0 var(--ruimte-4, 24px) var(--ruimte-4, 24px);
  border-left: 3px solid var(--accent, #a07050);
  margin-bottom: var(--ruimte-5, 32px);
}

/* ---------- auteur ---------- */
.kb-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 18px;
  align-items: baseline;
  padding-bottom: var(--ruimte-4, 24px);
  border-bottom: 1px solid var(--lijn, #d9d8d4);
  margin-bottom: var(--ruimte-5, 32px);
  font-size: 14px;
}
.kb-author { font-weight: 600; }
.kb-role, .kb-date { color: var(--tekst-zacht, #6b6a67); }
.kb-role::before { content: "— "; }

/* ---------- inhoudsopgave ---------- */
.kb-toc {
  border: 1px solid var(--lijn, #d9d8d4);
  border-top: 3px solid var(--accent, #a07050);
  padding: var(--ruimte-4, 24px);
  margin-bottom: var(--ruimte-6, 40px);
  max-width: var(--kb-maat);
}
.kb-toc h2 {
  font-size: 12px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  margin: 0 0 12px;
  color: var(--tekst-zacht, #6b6a67);
}
.kb-toc ol { margin: 0; padding-left: 1.2em; }
.kb-toc li { margin-bottom: 6px; font-size: 15px; }
.kb-toc a { color: inherit; text-decoration: none; border-bottom: 1px solid transparent; }
.kb-toc a:hover { border-bottom-color: var(--accent, #a07050); }

/* ---------- artikeltekst ---------- */
.kb-body { max-width: var(--kb-maat); }
.kb-body h2 {
  font-size: clamp(22px, 2.6vw, 30px);
  margin-top: var(--ruimte-7, 56px);
  margin-bottom: var(--ruimte-3, 16px);
  scroll-margin-top: 90px;
  overflow-wrap: anywhere;
}
.kb-body h3 {
  font-size: clamp(17px, 2vw, 21px);
  margin-top: var(--ruimte-5, 32px);
  margin-bottom: 10px;
  scroll-margin-top: 90px;
}
.kb-body p { margin-bottom: var(--ruimte-3, 16px); line-height: 1.7; }
.kb-body ul, .kb-body ol { margin: 0 0 var(--ruimte-3, 16px) 1.25em; }
.kb-body li { margin-bottom: 8px; line-height: 1.65; }
.kb-body a { color: inherit; border-bottom: 1px solid var(--accent, #a07050); text-decoration: none; }
.kb-body a:hover { color: var(--accent, #a07050); }
.kb-body code {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 0.9em;
  background: var(--vlak, #f2f1ee);
  padding: 1px 5px;
  border: 1px solid var(--lijn, #d9d8d4);
}
.kb-body blockquote {
  border-left: 3px solid var(--accent, #a07050);
  padding-left: var(--ruimte-4, 24px);
  margin: var(--ruimte-5, 32px) 0;
  font-size: 18px;
}
.kb-body blockquote p { margin: 0; }

/* ---------- tabellen: mogen breder dan de tekstkolom ---------- */
.tbl-wrap {
  overflow-x: auto;
  margin: var(--ruimte-5, 32px) 0;
  border: 1px solid var(--lijn, #d9d8d4);
  border-top: 3px solid var(--accent, #a07050);
}
.tbl-wrap table { width: 100%; border-collapse: collapse; font-size: 15px; }
.tbl-wrap th, .tbl-wrap td {
  text-align: left;
  padding: 12px 16px;
  border-bottom: 1px solid var(--lijn, #d9d8d4);
  vertical-align: top;
}
.tbl-wrap th {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: var(--vlak, #f2f1ee);
  white-space: nowrap;
}
.tbl-wrap tbody tr:last-child td { border-bottom: none; }
.tbl-wrap td:first-child { font-weight: 500; }

/* ---------- FAQ ---------- */
/* Ook een <section>, dus ook de generieke padding-block eraf, net als bij .kb-related. */
.kb-faq { max-width: var(--kb-maat); margin-top: var(--ruimte-8); padding-block: 0; }
.kb-faq details {
  border-bottom: 1px solid var(--lijn, #d9d8d4);
  padding: var(--ruimte-3, 16px) 0;
}
.kb-faq summary {
  cursor: pointer;
  font-weight: 500;
  font-size: 17px;
  list-style: none;
  display: flex;
  justify-content: space-between;
  gap: 16px;
}
.kb-faq summary::-webkit-details-marker { display: none; }
.kb-faq summary::after { content: "+"; color: var(--accent, #a07050); font-size: 20px; line-height: 1; }
.kb-faq details[open] summary::after { content: "–"; }
.kb-faq details p { margin: 12px 0 0; line-height: 1.7; color: var(--tekst-zacht, #4a4947); }

/* ---------- bronnen ---------- */
.kb-sources { max-width: var(--kb-maat); margin-top: var(--ruimte-8); padding-block: 0; }
.kb-sources h2 { font-size: 18px; margin-bottom: var(--ruimte-3, 16px); }
.kb-sources ul { margin-left: 1.1em; }
.kb-sources li { font-size: 14px; color: var(--tekst-zacht, #6b6a67); margin-bottom: 8px; line-height: 1.6; }

/* ---------- kaarten / clusters ---------- */
/* .kb-related is een <section> en pakt daarom de generieke regel uit het design system,
   section { padding-block: clamp(64px, 9vw, 144px) }. Op 1440px was dat 129,6px boven EN
   onder, bovenop deze marge, dus ruim 300px leegte tussen twee blokken in een leeskolom.
   Gemeten en gemeld door Hans op 3 sep 2026. De padding gaat eruit; de scheiding komt van
   de marge. Zelfde valkuil als bij .hero, waar in design-system.css al een waarschuwing
   over deze generieke regel staat. */
.kb-related { margin-top: var(--ruimte-8); padding-block: 0; }
.kb-related > h2 { font-size: clamp(20px, 2.4vw, 26px); margin-bottom: var(--ruimte-4, 24px); }
/* Gap van 32px zoals de sitebrede .grid, niet de 12px die var(--ruimte-3, 16px) opleverde.
   Met deze gap komt de leeskolom van 868px op TWEE kolommen van 418px uit in plaats van
   drie van 281px, en dat is precies de bedoeling: een omschrijving van twee zinnen viel in
   een kolom van 233px uiteen in vijf korte regels. Nu 370px breed. */
.kb-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: var(--ruimte-6);
}
.kb-grid > * { min-width: 0; }
/* Padding van 32px zoals de sitebrede .card, niet de 16px die var(--ruimte-4, 24px)
   opleverde. De 3px bovenrand blijft, dat is het accent van de pijlerkaarten. */
.kb-card {
  display: block;
  background: var(--bg);
  border: 1px solid var(--lijn, #d9d8d4);
  /* In rust dezelfde lijnkleur als de andere drie zijden, anders staat het vakje open
     aan de bovenkant en leest het als een afgebroken kader. Stond tot 3 sep 2026 op
     transparent, puur om ruimte te reserveren voor het hover-accent; bij de
     pijlerkaarten viel dat niet op omdat die de koperkleur al in rust krijgen, bij de
     artikelkaarten onder Nieuwste artikelen wel. Op hover wordt hij koper. */
  border-top: 3px solid var(--lijn, #d9d8d4);
  border-radius: var(--radius-2);
  padding: var(--ruimte-6);
  text-decoration: none;
  color: inherit;
  transition: border-color 0.18s ease, background 0.18s ease;
}
.kb-card:hover { border-top-color: var(--accent, #a07050); background: var(--vlak, #f2f1ee); }
.kb-card h3 {
  font-size: 17px;
  line-height: 1.35;
  margin: 0 0 8px;
  overflow-wrap: anywhere;
}
.kb-card p {
  font-size: 14px;
  line-height: 1.6;
  margin: 0;
  color: var(--tekst-zacht, #6b6a67);
}
.kb-count {
  display: inline-block;
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--accent, #a07050);
}
.kb-grid-pillars .kb-card { border-top-color: var(--accent, #a07050); }

/* ---------- CTA ---------- */
.kb-cta {
  margin-top: var(--ruimte-7, 56px);
  padding: var(--ruimte-6, 40px);
  border: 1px solid var(--lijn, #d9d8d4);
  border-top: 3px solid var(--accent, #a07050);
  background: var(--vlak, #f2f1ee);
}
.kb-cta h2 { font-size: clamp(20px, 2.4vw, 26px); margin: 0 0 8px; }
.kb-cta p { margin: 0 0 var(--ruimte-4, 24px); color: var(--tekst-zacht, #4a4947); max-width: 52ch; }

/* ---------- mobiel ---------- */
@media (max-width: 640px) {
  .kb-article { padding-block: clamp(36px, 9vw, 56px); }
  .kb-answer { padding-left: var(--ruimte-3, 16px); font-size: 17px; }
  .kb-cta { padding: var(--ruimte-4, 24px); }
  .tbl-wrap th, .tbl-wrap td { padding: 10px 12px; font-size: 14px; }
}