/* ═══ Kennisbank — laadt bovenop ../style.css. Opzet zoals support.intention.nl: donkere kop met de vraag en het zoekveld, daaronder veelgestelde vragen en onderwerpen ═══ */

/* kop: dezelfde fotohero als de supportpagina, maar lager en met de zoeker in het midden */
.hero-kb{min-height:min(52vh,500px);overflow:visible;z-index:5}
.hero-kb .hero-clip{position:absolute;inset:0;overflow:hidden;border-radius:inherit}
.hero-kb .hero-inner{transform:none!important;opacity:1!important} /* geen parallax-verschuiving: de uitklaplijst hangt aan het zoekveld */
.hero-kb .hero-inner{align-items:center;text-align:center;gap:26px;padding-top:138px;padding-bottom:clamp(36px,5vw,56px)}
.hero-kb .h1{max-width:20ch;margin:0 auto;font-size:clamp(32px,4.4vw,54px);color:rgba(255,255,255,.84)} /* tussen de grijstint (.66) van de andere koppen en wit in */
.kb-hero-kop{display:flex;flex-direction:column;align-items:center;gap:14px}
.kb-hero-sub{font-size:clamp(15px,1.6vw,17px);line-height:1.6;color:rgba(255,255,255,.86);text-shadow:0 1px 2px rgba(10,14,20,.3), 0 10px 34px rgba(10,14,20,.28)}
.kb-hero-sub a{color:#fff;font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(255,255,255,.45);transition:text-decoration-color .2s}
.kb-hero-sub a:hover{text-decoration-color:#fff}
.hero-kb .hero-zoek{max-width:760px;position:relative}
.hero-kb .hero-zoek .dom-search{margin:0 auto}
.hero-kb .dom-search input::-webkit-search-cancel-button{-webkit-appearance:none}

/* artikelpagina's: alleen het zoekveld in een lage kop */
.hero-kb-compact{min-height:0}
.hero-kb-compact .hero-inner{padding-top:118px;padding-bottom:36px}
@media(max-width:640px){
  .hero-kb{min-height:min(44vh,400px)}
  .hero-kb .hero-inner{padding-top:104px}
  .hero-kb-compact .hero-inner{padding-top:96px;padding-bottom:26px}
}

/* zoekresultaten: uitklaplijst direct onder het zoekveld */
.kb-resultaten{
  position:absolute;top:calc(100% + 8px);left:0;right:0;z-index:20;text-align:left;
  background:#fff;border:1px solid var(--line);border-radius:20px;padding:8px;
  box-shadow:0 24px 60px -18px rgba(3,44,64,.35);
}
.kb-resultaten[hidden]{display:none}
.kb-resultaten a{display:flex;align-items:baseline;justify-content:space-between;gap:14px;padding:12px 14px;border-radius:12px;color:var(--ink);transition:background .15s}
.kb-resultaten a:hover,.kb-resultaten a:focus,.kb-resultaten a.actief{background:rgba(3,44,64,.05);outline:none}
.kb-resultaten b{font-weight:500;font-size:15px}
.kb-resultaten span{font-size:12.5px;color:var(--grey-soft);white-space:nowrap}
.kb-resultaten p{padding:12px 14px;font-size:14.5px;color:var(--grey)}
.kb-resultaten p a{display:inline;padding:0;color:var(--brand);font-weight:500}
.kb-resultaten p a:hover{background:none;text-decoration:underline}

/* secties onder de kop iets dichter op elkaar */
.kb-sec{padding-top:clamp(40px,5.5vw,64px);padding-bottom:0}
.kb-sec+.final{margin-top:clamp(56px,7vw,88px)}

/* onderwerpen: rustig raster van twee kolommen, icoon links en één regel tekst, even breed als de vragenlijst */
.kb-onderwerpen{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px;max-width:880px;margin:0 auto}
.kb-onderwerp{min-width:0;flex-direction:row;align-items:flex-start;gap:16px;padding:18px 22px;border-radius:20px;color:inherit}
.kb-onderwerp .step-num{flex-shrink:0;width:40px;height:40px;margin:0}
.kb-onderwerp div{display:flex;flex-direction:column;gap:3px;min-width:0}
.kb-onderwerp h3{font-size:16.5px}
.kb-onderwerp p{font-size:14px;line-height:1.5;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.kb-onderwerp::after{content:"\2192";margin-left:auto;padding-left:12px;font-size:13px;color:var(--grey-soft);transition:color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.kb-onderwerp:hover h3{color:var(--brand)}
.kb-onderwerp:hover::after{color:var(--brand);transform:translateX(3px)}
@media(max-width:640px){
  .kb-onderwerpen{grid-template-columns:1fr}
  .kb-onderwerp p{white-space:normal}
}

/* interne links: pijl naar rechts in plaats van "opent elders" */
.kb-lijst-intern a::after{content:"\2192"}

/* artikel: twee kolommen, tekst links en een plakkende zijbalk rechts */
.kb-artikel-wrap{
  max-width:1180px;margin:0 auto;padding:clamp(36px,5vw,52px) clamp(20px,4vw,48px) clamp(48px,7vw,84px);
  display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:clamp(36px,5vw,72px);align-items:start;
}
.kb-artikel-wrap .artikel{max-width:none;margin:0;padding:0}
/* plakt onder de navigatie; de ondermarge houdt hem onderaan vrij van de donkere kaart */
.kb-zij{position:sticky;top:96px;margin-bottom:clamp(48px,7vw,84px);display:flex;flex-direction:column;gap:14px}
.kb-zij-kaart{padding:22px 24px;border-radius:22px;background:#fff;border:1px solid var(--line)}
.kb-zij h3{margin-bottom:12px;font-size:11.5px;font-weight:700;letter-spacing:.11em;text-transform:uppercase;color:var(--grey-soft)}
.kb-zij-cat{
  display:flex;align-items:center;gap:10px;padding:12px 14px;border-radius:14px;
  background:rgba(3,44,64,.05);color:var(--ink);font-size:14.5px;font-weight:600;transition:background .2s,color .2s;
}
.kb-zij-cat svg{flex-shrink:0;transition:transform .25s cubic-bezier(.2,.7,.2,1)}
.kb-zij-cat small{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--grey)}
.kb-zij-cat:hover{background:rgba(3,44,64,.08)}
.kb-zij-cat:hover svg{transform:translateX(-3px)}
.kb-zij ul{display:flex;flex-direction:column}
.kb-zij li a{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:10px 0;border-bottom:1px solid var(--line);font-size:14.5px;font-weight:500;line-height:1.4;color:var(--ink);transition:color .2s}
.kb-zij li:last-child a{border-bottom:none;padding-bottom:2px}
.kb-zij li a::after{content:"\2192";font-size:12px;color:var(--grey-soft);flex-shrink:0;margin-top:3px}
.kb-zij li a:hover{color:var(--brand)}
@media(max-width:900px){
  .kb-artikel-wrap{grid-template-columns:1fr;gap:8px}
  .kb-artikel-wrap .artikel{padding-bottom:32px}
  .kb-zij{position:static;margin-bottom:0}
}

/* artikel: kruimelpad en titel boven de tekst */
.kb-kruimel{display:flex;align-items:center;gap:8px;margin-bottom:12px;font-size:13.5px;font-weight:500;color:var(--grey-soft)}
.kb-kruimel a{color:var(--grey);transition:color .2s}
.kb-kruimel a:hover{color:var(--brand)}
.kb-artikel .kb-artikel-titel{font-size:clamp(28px,3.4vw,40px);font-weight:600;letter-spacing:-.03em;line-height:1.1;color:var(--ink);margin-bottom:26px}

/* artikel: genummerde stappen en schermafbeeldingen */
.kb-artikel h2{display:flex;align-items:center;gap:12px}
.kb-stap{flex-shrink:0;width:28px;height:28px;border-radius:50%;background:var(--ink);color:#fff;font-size:13px;font-weight:600;display:inline-flex;align-items:center;justify-content:center}
.kb-foto{margin:4px 0 26px}
.kb-foto img{display:block;max-width:min(300px,100%);height:auto;border-radius:18px;border:1px solid var(--line);box-shadow:0 18px 40px -24px rgba(3,44,64,.45)}
.kb-artikel table th{width:38%;font-weight:500;color:var(--grey)}
.kb-artikel table td{color:var(--ink)}
.kb-code{margin:0 0 20px;padding:16px 20px;border-radius:14px;background:var(--ink);color:#fff;overflow-x:auto}
.kb-code code{background:none;padding:0;color:inherit;font-size:14px}
.kb-let-op{margin-top:0}


/* ═══ Inhoud uit de database (artikel.php) ═══ */
.kb-inhoud img{max-width:100%;height:auto;border-radius:14px;margin:10px 0;border:1px solid var(--line)}
.kb-inhoud table{width:100%;border-collapse:collapse;margin:16px 0}
.kb-inhoud pre{overflow-x:auto}
.kb-video{position:relative;aspect-ratio:16/9;margin:18px 0;border-radius:14px;overflow:hidden;background:#04222f}
.kb-video iframe{position:absolute;inset:0;width:100%;height:100%;border:0}

/* ═══ Categoriepagina: secties met artikellijsten ═══ */
.kb-sectie{margin-top:28px;scroll-margin-top:110px}
.kb-sectie h2{margin-bottom:10px}


/* ═══ Categorie- en zoekpagina: elke vraag als wit blok ═══ */
.kb-blokken{display:flex;flex-direction:column;gap:10px}
.kb-blokken a{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:16px 20px;border-radius:16px;background:#fff;border:1px solid var(--line);font-size:15.5px;font-weight:500;line-height:1.4;color:var(--ink);transition:color .2s,border-color .2s,box-shadow .2s}
.kb-blokken a::after{content:"\2192";flex-shrink:0;font-size:13px;color:var(--grey-soft);transition:color .2s,transform .25s cubic-bezier(.2,.7,.2,1)}
.kb-blokken a:hover{color:var(--brand);border-color:rgba(3,44,64,.22);box-shadow:0 6px 20px rgba(3,44,64,.06)}
.kb-blokken a:hover::after{color:var(--brand);transform:translateX(3px)}
.kb-blokken a small{margin-left:auto;font-size:12.5px;font-weight:400;color:var(--grey);white-space:nowrap}
.kb-sectie h2{margin-bottom:14px}

/* ═══ Zijbalk: zachte tint in plaats van wit, zodat de witte vraagblokken ernaast uitkomen ═══ */
.kb-zij-kaart{background:rgba(3,44,64,.055);border-color:transparent}
.kb-zij li a{border-bottom-color:rgba(3,44,64,.12)}
.kb-zij-cat{padding:6px 0;background:transparent;border-radius:0}
.kb-zij-cat:hover{background:transparent;color:var(--brand)}

/* ═══ Zonder zijbalk: één kolom met leesbare breedte ═══ */
.kb-artikel-wrap{grid-template-columns:minmax(0,1fr);max-width:820px}
.kb-gerelateerd{margin-top:40px;padding-top:28px;border-top:1px solid var(--line)}
.kb-gerelateerd h2{margin-bottom:14px}

/* ═══ Links in de artikeltekst: onderstreept, en een 'extern'-icoontje bij links die in een nieuw tabblad openen ═══ */
.kb-inhoud a,.kb-artikel .lead a{color:var(--ink);font-weight:500;text-decoration:underline;text-underline-offset:3px;text-decoration-color:rgba(3,44,64,.3);transition:color .2s,text-decoration-color .2s}
.kb-inhoud a:hover,.kb-artikel .lead a:hover{color:var(--brand);text-decoration-color:var(--brand)}
.kb-inhoud a[target="_blank"]::after{
  content:"";display:inline-block;width:11px;height:11px;margin-left:5px;vertical-align:-1px;opacity:.45;
  background:currentColor;
  -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
  mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4l-9 9'/%3E%3Cpath d='M19 14v5a1 1 0 0 1-1 1H5a1 1 0 0 1-1-1V6a1 1 0 0 1 1-1h5'/%3E%3C/svg%3E") center/contain no-repeat;
}
.kb-inhoud a[target="_blank"]:hover::after{opacity:.85}

/* ═══ Tussenkopjes (h3) in artikelinhoud ═══ */
.kb-inhoud h3{margin:22px 0 10px;font-size:17px;font-weight:600;letter-spacing:-.01em;color:var(--ink)}