/* Kennisbank — eigen CSS in de huisstijl (#0c4a6e / #1d4fa6 / #38bdf8),
   alles gescoped op .pagina-kennisbank. */
.pagina-kennisbank { font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Arial, sans-serif;
	color: #1f2937; line-height: 1.6; }



.pagina-kennisbank .kb-inhoud { max-width: 960px; margin: 0 auto; padding: 2.5rem 1rem 3rem; }
.pagina-kennisbank .kb-sectiekop { font-size: 1.5rem; font-weight: 700; color: #0c4a6e; margin: 0 0 1.25rem; }
.pagina-kennisbank .kb-sectiekop + .kb-artikellijst,
.pagina-kennisbank .kb-subkop { font-size: 1.15rem; font-weight: 700; color: #0c4a6e; margin: 2rem 0 1rem; }
.pagina-kennisbank .kb-catintro { color: #4b5563; margin: -0.75rem 0 1.5rem; }


.pagina-kennisbank .kb-artikellijst { display: flex; flex-direction: column; gap: .6rem; }
.pagina-kennisbank .kb-artikelrij { display: flex; align-items: flex-start; gap: .9rem;
	background:var(--surface,#fff); border: 1px solid #e5e7eb; border-radius: 10px; padding: .9rem 1.1rem;
	text-decoration: none; color: inherit; transition: border-color .15s, box-shadow .15s; }
.pagina-kennisbank .kb-artikelrij:hover { border-color: #38bdf8; box-shadow: 0 4px 12px rgba(12,74,110,.10); }
.pagina-kennisbank .kb-artikelicoon { color: #38bdf8; font-size: 1rem; line-height: 1.6; }
.pagina-kennisbank .kb-artikeltekst { flex: 1; display: flex; flex-direction: column; gap: .15rem; }
.pagina-kennisbank .kb-artikeltitel { font-weight: 600; color: #1d4fa6; }
.pagina-kennisbank .kb-artikelexcerpt { font-size: .85rem; color: #6b7280; }
.pagina-kennisbank .kb-artikelviews { font-size: .78rem; color: #9ca3af; white-space: nowrap; align-self: center; }
.pagina-kennisbank .kb-leeg { color: #6b7280; background: #f9fafb; border: 1px dashed #d1d5db;
	border-radius: 10px; padding: 1.25rem; }

.pagina-kennisbank .kb-artikel { background:var(--surface,#fff); border: 1px solid #e5e7eb; border-radius: 14px;
	padding: 2rem 2.25rem; }
.pagina-kennisbank .kb-artikel-titel { font-size: 1.6rem; font-weight: 800; color: #0c4a6e; margin: 0 0 .35rem; }
.pagina-kennisbank .kb-artikel-meta { font-size: .82rem; color: #9ca3af; margin: 0 0 1.5rem;
	padding-bottom: 1rem; border-bottom: 1px solid #e5e7eb; }
.pagina-kennisbank .kb-artikel-inhoud { color: #1f2937; }
.pagina-kennisbank .kb-artikel-inhoud img { max-width: 100%; height: auto; border-radius: 8px; }
.pagina-kennisbank .kb-artikel-inhoud iframe { max-width: 100%; }
.pagina-kennisbank .kb-artikel-inhoud a { color: #1d4fa6; }
.pagina-kennisbank .kb-stem { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
	margin: 1.75rem 0 0; padding: 1rem 0 0; border-top: 1px solid #e5e7eb; }
.pagina-kennisbank .kb-stem-vraag { font-weight: 600; color: #374151; }
.pagina-kennisbank .kb-stem-dank { color: #059669; font-weight: 600; }
.pagina-kennisbank .kb-artikel-inhoud h1, .pagina-kennisbank .kb-artikel-inhoud h2,
.pagina-kennisbank .kb-artikel-inhoud h3 { color: #0c4a6e; }
.pagina-kennisbank .kb-artikel-inhoud pre { background: #f3f4f6; padding: 1rem; border-radius: 8px;
	overflow-x: auto; }
.pagina-kennisbank .kb-artikel-inhoud table { max-width: 100%; border-collapse: collapse; }
.pagina-kennisbank .kb-artikel-inhoud td, .pagina-kennisbank .kb-artikel-inhoud th
	{ border: 1px solid #e5e7eb; padding: .4rem .6rem; }
.pagina-kennisbank .kb-terug { margin-top: 1.75rem; }
.pagina-kennisbank .kb-terug a { color: #1d4fa6; font-weight: 600; text-decoration: none; }
.pagina-kennisbank .kb-terug a:hover { text-decoration: underline; }

@media (max-width: 600px) {
	.pagina-kennisbank .kb-artikelviews { display: none; }
	.pagina-kennisbank .kb-artikel { padding: 1.25rem 1rem; }
}
.pagina-kennisbank .kb-ai-zoek{margin-top:2rem;padding-top:1.5rem;border-top:1px solid #e5e7eb}
.pagina-kennisbank .kb-ai-zoek .kb-ai-start{display:flex;align-items:center;gap:.9rem;flex-wrap:wrap}
.pagina-kennisbank .kb-ai-zoek .kb-ai-hint{color:#6b7280;font-size:.9rem}
.pagina-kennisbank .kb-ai-zoek .kb-ai-gesprek{display:flex;flex-direction:column;gap:.75rem;margin-top:1rem}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel{max-width:85%;padding:.7rem 1rem;border-radius:12px;line-height:1.5;font-size:.95rem}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel.van-klant{align-self:flex-end;background:#1d4fa6;color:#fff;border-bottom-right-radius:3px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel.van-ai{align-self:flex-start;background:#f3f4f6;color:#1f2937;border-bottom-left-radius:3px}
.pagina-kennisbank .kb-ai-bubbel.van-ai a{color:#1d4fa6}
.pagina-kennisbank .kb-ai-typt{display:inline-flex;gap:4px;align-items:center}
.pagina-kennisbank .kb-ai-typt span{width:7px;height:7px;border-radius:50%;background:#9ca3af;animation:kbaitik 1s infinite}
.pagina-kennisbank .kb-ai-typt span:nth-child(2){animation-delay:.15s}
.pagina-kennisbank .kb-ai-typt span:nth-child(3){animation-delay:.3s}
@keyframes kbaitik{0%,60%,100%{opacity:.3}30%{opacity:1}}

/* =====================================================================
   Portaal-weergave (Supportcentrum-tab, ontwerp support2): witte zoekkaart,
   raster van categorie-kaarten met teller-chip, top-3 artikelen en een
   Alle artikelen-link; sub-weergaven krijgen een compacte kruimelbalk.
   ===================================================================== */
.kb-in-portaal .kb-inhoud { max-width: none; padding: 16px 0 0; }
.kbp-hero {
	text-align: center; padding: 26px 24px 30px;
	background: var(--hero-gradient, linear-gradient(90deg, #152a80, #1d65af));
	border: none; border-radius: 22px; color: #fff;
	box-shadow: 0 8px 30px rgba(38,71,154,.3);
}
.kbp-hero-titel { margin: 0 0 6px; font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: #fff; }
.kbp-hero-sub { margin: 0 0 16px; font-size: 13.5px; color: rgba(255,255,255,.78); }
.kbp-hero .kbp-zoek input { background:var(--surface,#fff); border-color: transparent; }
.kbp-hero .kbp-zoek input:focus { border-color: #fff; box-shadow: 0 0 0 3px rgba(255,255,255,.35); background:var(--surface,#fff); }
.kbp-zoek { position: relative; max-width: 480px; margin: 0 auto; }
.kbp-zoek i { position: absolute; left: 14px; top: 50%; transform: translateY(-50%); color: #979ba4; font-size: 13px; }
.kbp-zoek input {
	width: 100%; box-sizing: border-box; min-height: 44px; padding: 10px 14px 10px 38px;
	border: 1px solid var(--gray-lighter-4, var(--gray-lighter-4,#e9eaec)); border-radius: 10px; background:var(--body-bg,#f7f8fa);
	font: inherit; font-size: 14px; color: var(--gray-darker, #17191c);
}
.kbp-zoek input::placeholder { color: #979ba4; }
.kbp-zoek input:focus { outline: none; border-color: var(--brand-primary, #1062fe); box-shadow: 0 0 0 3px rgba(16,98,254,.12); background:var(--surface,#fff); }
.kbp-balk { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; padding: 14px 20px; }
.kbp-kruimel { font-size: 13px; color: var(--gray-base, #5e636e); min-width: 0; }
.kbp-kruimel a { color: var(--gray-base, #5e636e); text-decoration: none; font-weight: 600; }
.kbp-kruimel a:hover { color: #1d65af; }
.kbp-kruimel span { margin: 0 6px; color: #979ba4; }
.kbp-kruimel strong { color: var(--gray-darker, #17191c); font-weight: 700; }
.kbp-zoek-klein { margin: 0; flex: none; width: 260px; }
.kbp-zoek-klein input { min-height: 40px; }
.kbp-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
@media (max-width: 1100px) { .kbp-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 720px) { .kbp-grid { grid-template-columns: 1fr; } }
.kbp-cat { display: flex; flex-direction: column; }
.kbp-cat-kop { display: flex; align-items: center; gap: 9px; margin-bottom: 4px; }
.kbp-cat-naam { font-size: 14.5px; font-weight: 800; color: var(--gray-darker, #17191c); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kbp-cat-teller { flex: none; padding: 4px 10px; border-radius: 50px; background: #f0f2f6; color:var(--gray-base,#5e636e); font-size: 11.5px; font-weight: 700; }
.kbp-cat-lijst { flex: 1; }
.kbp-art {
	display: flex; align-items: center; justify-content: space-between; gap: 12px;
	padding: 11px 0; border-bottom: 1px solid #f0f2f6; text-decoration: none;
	font-size: 13.5px; font-weight: 500; color: var(--gray-darker, #17191c); line-height: 1.45;
}
.kbp-art i { color: #4A72FB; flex: none; font-size: 12px; }
.kbp-art:hover span { color: #1d65af; }
.kbp-alle { display: inline-flex; align-items: center; gap: 6px; margin-top: 12px; }
.kbp-alle i { font-size: 11px; }

/* Doorklik-weergaven in het portaal (categorie/zoeken/artikel): zelfde
   kaartstijl en kleuren als de rest van het Supportcentrum, in plaats van
   de publieke lichtblauwe stijl. */
.kb-in-portaal .kb-sectiekop { font-size: 16px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-darker, #17191c); margin: 4px 0 12px; }
.kb-in-portaal .kb-subkop { font-size: 14px; font-weight: 800; color: var(--gray-darker, #17191c); margin: 18px 0 10px; }
.kb-in-portaal .kb-catintro { font-size: 13.5px; color: var(--gray-base, #5e636e); margin: -4px 0 14px; }
.kb-in-portaal .kb-artikellijst {
	display: block; background: var(--surface, #fff); border: 1px solid var(--gray-lighter-4, var(--gray-lighter-4,#e9eaec));
	border-radius: 18px; padding: 4px 20px; box-shadow: 0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
}
.kb-in-portaal .kb-artikelrij { background: transparent; border: none; border-radius: 0; border-bottom: 1px solid #f0f2f6; padding: 13px 0; box-shadow: none; }
.kb-in-portaal .kb-artikelrij:last-child { border-bottom: none; }
.kb-in-portaal .kb-artikelrij:hover { border-color: #f0f2f6; box-shadow: none; }
.kb-in-portaal .kb-artikelrij:hover .kb-artikeltitel { color: #1d65af; }
.kb-in-portaal .kb-artikelicoon { display: none; }
.kb-in-portaal .kb-artikeltitel { font-size: 13.5px; font-weight: 600; color: var(--gray-darker, #17191c); }
.kb-in-portaal .kb-artikelexcerpt { font-size: 12.5px; color: var(--gray-lighter, #979ba4); }
.kb-in-portaal .kb-leeg { background: var(--surface, #fff); border: 1px solid var(--gray-lighter-4, var(--gray-lighter-4,#e9eaec)); border-radius: 14px; color: var(--gray-base, #5e636e); font-size: 13.5px; }
.kb-in-portaal .kb-artikel {
	border: 1px solid var(--gray-lighter-4, var(--gray-lighter-4,#e9eaec)); border-radius: 18px; padding: 26px 30px;
	box-shadow: 0 1px 3px rgba(23,25,28,.04), 0 8px 24px rgba(23,25,28,.06);
}
.kb-in-portaal .kb-artikel-titel { font-size: 19px; font-weight: 800; letter-spacing: -.01em; color: var(--gray-darker, #17191c); margin: 0 0 14px; }
.kb-in-portaal .kb-artikel-inhoud { font-size: 14px; line-height: 1.7; color: var(--gray-darker, #17191c); }
.kb-in-portaal .kb-artikel-inhoud h1, .kb-in-portaal .kb-artikel-inhoud h2, .kb-in-portaal .kb-artikel-inhoud h3 { color: var(--gray-darker, #17191c); }
.kb-in-portaal .kb-artikel-inhoud a { color: #1d65af; }
.kb-in-portaal .kb-terug a { color: #1d65af; font-weight: 700; font-size: 13.5px; }
.kb-in-portaal .kb-ai-bubbel.van-klant { background: #2F61AD; }
.kb-in-portaal .kb-ai-bubbel.van-ai { background: #f0f2f6; color: var(--gray-darker, #17191c); }

/* Live zoeksuggesties onder de kennisbank-zoekvelden. */
.kbp-sug {
	position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 30;
	margin: 0; padding: 6px; list-style: none; text-align: left;
	background:var(--surface,#fff); border: 1px solid var(--gray-lighter-4, var(--gray-lighter-4,#e9eaec)); border-radius: 12px;
	box-shadow: 0 2px 8px rgba(23,25,28,.06), 0 24px 48px rgba(23,25,28,.12);
	max-height: 280px; overflow-y: auto;
}
.kbp-sug[hidden] { display: none; }
.kbp-sug-item {
	padding: 9px 12px; border-radius: 8px; cursor: pointer;
	font-size: 13.5px; color: var(--gray-darker, #17191c); line-height: 1.45;
}
.kbp-sug-item:hover, .kbp-sug-item.actief { background: rgba(16,98,254,.08); color: #1d65af; }

/* Opmaak-elementen voor artikelinhoud: tip- en waarschuwingsblokken en
   knop/menu-chips via <kbd>. Bruikbaar in alle kennisbank-artikelen. */
.kb-artikel-inhoud h3 { font-size: 15.5px; font-weight: 800; margin: 22px 0 8px; }
.kb-artikel-inhoud ol, .kb-artikel-inhoud ul { padding-left: 22px; }
.kb-artikel-inhoud li { margin: 4px 0; }
.kb-artikel-inhoud .kb-tip, .kb-artikel-inhoud .kb-warn {
	display: flex; gap: 10px; align-items: flex-start;
	border-radius: 12px; padding: 12px 16px; margin: 14px 0;
	font-size: 13.5px; line-height: 1.6;
}
.kb-artikel-inhoud .kb-tip { background: rgba(16,98,254,.06); border: 1px solid rgba(16,98,254,.16); }
.kb-artikel-inhoud .kb-tip > i { color: #1d65af; margin-top: 3px; flex: none; }
.kb-artikel-inhoud .kb-warn { background: #FEF7E9; border: 1px solid #f3e3bd; }
.kb-artikel-inhoud .kb-warn > i { color: #B98900; margin-top: 3px; flex: none; }
.kb-artikel-inhoud kbd {
	display: inline-block; padding: 1px 8px; border-radius: 6px;
	background: #f0f2f6; border: 1px solid #e3e5ea; color:var(--gray-darker,#17191c);
	font-family: inherit; font-size: 12.5px; font-weight: 600; white-space: nowrap;
}


/* Publieke variant: zelfde Supportcentrum-ontwerp (kbp-*) als in het portaal.
   De portaal-tokens staan hier lokaal (lichte waarden uit portal-shell.css). */
.pagina-kennisbank:not(.kb-in-portaal) {
	--brand-primary: #1062fe;
	--btn-primary: #1d65af;
	--gray-darker: #17191c;
	--gray-base: #5e636e;
	--gray-lighter: #979ba4;
	--gray-lighter-4: var(--gray-lighter-4,#e9eaec);
	--body-bg: #f7f8fa;
	--surface: #fff;
	max-width: 1010px;
	margin: 0 auto;
	padding: 30px 20px 44px;
}

.pagina-kennisbank:not(.kb-in-portaal) .kb-inhoud { max-width: none; padding: 2rem 0 0; }
.pagina-kennisbank:not(.kb-in-portaal) .sc-kb-ai { margin-top: 2rem; }

.pagina-kennisbank .kb-ai-kaart { margin: 14px 0 0; }

/* Nacht (portaal): donkerblauwe koppen worden warm licht-oranje. */
.wp-body[data-night="1"] .pagina-kennisbank .kb-sectiekop,
.wp-body[data-night="1"] .pagina-kennisbank .kb-subkop,
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-titel,
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud h3 { color: #ffc79a; }
.wp-body[data-night="1"] .pagina-kennisbank,
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud { color: var(--gray-darker, #e9ecf4); }
.wp-body[data-night="1"] .pagina-kennisbank .kb-stem-vraag { color: var(--gray-base, #a9b1c4); }
.wp-body[data-night="1"] .pagina-kennisbank .kb-ai-bubbel.van-ai { background: #242e49; color: var(--gray-darker, #e9ecf4); }


/* Nacht-leesbaarheid (audit 2026-08-11): donkere accent-/statuskleuren
   worden licht; blauwe tint-achtergronden warm oranje. */
.wp-body[data-night="1"] .pagina-kennisbank{color:var(--gray-darker,#e9ecf4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-sectiekop{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-sectiekop + .kb-artikellijst{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-subkop{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-catintro{color:var(--gray-base,#a9b1c4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikeltitel{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikelexcerpt{color:var(--gray-base,#a9b1c4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-titel{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud{color:var(--gray-darker,#e9ecf4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud a{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-stem-vraag{color:var(--gray-base,#a9b1c4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud h1{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud h2{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-artikel-inhoud h3{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-terug a{color:#ffc79a}
.wp-body[data-night="1"] .pagina-kennisbank .kb-ai-zoek .kb-ai-hint{color:var(--gray-base,#a9b1c4)}
.wp-body[data-night="1"] .pagina-kennisbank .kb-ai-bubbel.van-ai a{color:#ffc79a}
.wp-body[data-night="1"] .kbp-kruimel a:hover{color:#ffc79a}
.wp-body[data-night="1"] .kbp-art i{color:#ffc79a}
.wp-body[data-night="1"] .kbp-art:hover span{color:#ffc79a}
.wp-body[data-night="1"] .kb-in-portaal .kb-artikelrij:hover .kb-artikeltitel{color:#ffc79a}
.wp-body[data-night="1"] .kb-in-portaal .kb-artikel-inhoud a{color:#ffc79a}
.wp-body[data-night="1"] .kb-in-portaal .kb-terug a{color:#ffc79a}
.wp-body[data-night="1"] .kbp-sug-item:hover{color:#ffc79a;background:rgba(255,164,92,.13)}
.wp-body[data-night="1"] .kbp-sug-item.actief{color:#ffc79a;background:rgba(255,164,92,.13)}
.wp-body[data-night="1"] .kb-artikel-inhoud .kb-tip > i{color:#ffc79a}

/* ---- Zoek met AI (blok onder de zoekresultaten) ---- */
.pagina-kennisbank .kb-ai-zoek{margin-top:22px;background:var(--b05,rgba(16,98,254,.05));border:1px solid var(--b12,rgba(16,98,254,.12));border-radius:14px;padding:16px 18px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-start{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pagina-kennisbank .kb-ai-zoek .kb-ai-hint{font-size:13px;color:var(--gray-base,#5e636e)}
.pagina-kennisbank .kb-ai-zoek .kb-ai-gesprek{display:flex;flex-direction:column;gap:10px;margin-top:14px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel{max-width:85%;padding:10px 14px;border-radius:12px;font-size:13.5px;line-height:1.55;overflow-wrap:anywhere}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel.van-klant{align-self:flex-end;background:var(--btn-primary,#1d65af);color:#fff;border-bottom-right-radius:4px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-bubbel.van-ai{align-self:flex-start;background:var(--surface,#fff);border:1px solid var(--gray-lighter-4,#e9eaec);color:var(--gray-darker,#17191c);border-bottom-left-radius:4px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-vorm{display:flex;gap:8px;margin-top:12px}
.pagina-kennisbank .kb-ai-zoek .kb-ai-vorm input{flex:1;min-width:0;border:1px solid var(--gray-lighter-4,#e9eaec);border-radius:9px;padding:10px 13px;font:inherit;font-size:14px;color:var(--gray-darker,#17191c);background:var(--surface,#fff);outline:none}
.pagina-kennisbank .kb-ai-zoek .kb-ai-vorm input:focus{border-color:var(--brand-primary,#1062fe);box-shadow:0 0 0 3px rgba(16,98,254,.12)}
.pagina-kennisbank .kb-ai-zoek .kb-ai-kaart{display:block;margin-top:8px;background:var(--surface,#fff);border:1px solid var(--gray-lighter-4,#e9eaec);border-radius:10px;padding:10px 13px;font-size:13px;font-weight:600;color:var(--brand-primary,#1062fe);text-decoration:none}
.pagina-kennisbank .kb-ai-zoek .kb-ai-kaart:hover{border-color:rgba(16,98,254,.4)}