/* build 18-07-2026-b — cache-verversing */
/* ============================================================
   content.css — gedeelde stijl voor artikel-tabellen
   Doel: brede vergelijkingsmatrices netjes laten scrollen met
   sticky eerste kolom, i.p.v. afkappen. Eén bron voor alle
   contentpagina's. 16 juli 2026.
   ============================================================ */
.tablewrap, .table-wrap{
  overflow-x:auto; -webkit-overflow-scrolling:touch;
  border:1px solid #DCE6F3; border-radius:14px; background:#fff;
  box-shadow:0 8px 24px rgba(15,31,64,.05); margin:18px 0 26px;
}
.tablewrap table, .table-wrap table{
  width:100%; min-width:760px; border-collapse:separate; border-spacing:0;
  font-size:13.5px; line-height:1.5; margin:0;
}
.tablewrap thead th, .table-wrap thead th{
  position:sticky; top:0; z-index:1;
  background:#F5F8FC; color:#4A576D;
  font-size:11.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  padding:12px 15px; border-bottom:1px solid #DCE6F3; text-align:left; white-space:nowrap;
}
.tablewrap tbody td, .table-wrap tbody td{
  padding:11px 15px; border-bottom:1px solid #EEF2F8;
  vertical-align:top; color:#1F2937; background:#fff;
}
.tablewrap tbody tr:nth-child(even) td, .table-wrap tbody tr:nth-child(even) td{background:#FAFCFE}
.tablewrap tbody tr:last-child td, .table-wrap tbody tr:last-child td{border-bottom:0}
.tablewrap tbody tr:hover td, .table-wrap tbody tr:hover td{background:#F2F7FD}
.tablewrap td:first-child, .tablewrap th:first-child,
.table-wrap td:first-child, .table-wrap th:first-child{
  position:sticky; left:0; z-index:2;
  font-weight:750; color:#101828;
  border-right:1px solid #E4EAF3;
  min-width:150px; max-width:220px;
}
.tablewrap thead th:first-child, .table-wrap thead th:first-child{z-index:3}
.tablewrap tbody tr:nth-child(even) td:first-child,
.table-wrap tbody tr:nth-child(even) td:first-child{background:#F7FAFD}
.tablewrap tbody tr:hover td:first-child, .table-wrap tbody tr:hover td:first-child{background:#EDF4FC}
@media(max-width:760px){
  .tablewrap table, .table-wrap table{min-width:640px; font-size:12.5px}
  .tablewrap tbody td, .table-wrap tbody td{padding:9px 12px}
  .tablewrap thead th, .table-wrap thead th{padding:10px 12px}
  .tablewrap td:first-child, .table-wrap td:first-child{min-width:120px; max-width:160px}
}

/* ============================================================
   polish-laag (16 juli 2026) — details die het verschil maken
   ============================================================ */
::selection{background:#2563EB;color:#fff}
html{scroll-behavior:smooth}
[id]{scroll-margin-top:88px}

/* hub-intro: volwaardige leadtekst i.p.v. kale alinea */
.hub-intro{font-size:16.5px;line-height:1.7;color:#4A576D;max-width:72ch;margin:14px 0 26px}

/* hub-kaarten: rustige hover-lift + soepele overgang */
article.card{transition:border-color .16s ease, box-shadow .16s ease, transform .16s ease}
article.card:hover{border-color:#B9CBE4;box-shadow:0 14px 34px -20px rgba(16,27,51,.28);transform:translateY(-1px)}
article.card h2 a{text-decoration:none}
article.card h2 a:hover{color:#2563EB}

/* FAQ: vraag + antwoord als rustig blok */
h3 + p.faq, h3 + .faq{margin-top:8px}
p.faq{background:#F5F8FC;border:1px solid #E4EAF3;border-radius:12px;padding:13px 17px;color:#374151;line-height:1.65}

/* artikel-typografie: ademruimte boven tussenkoppen */
article h2{margin-top:2.2em}
article h2:first-child{margin-top:0}
article .lead{font-size:17px;line-height:1.65;color:#4A576D}

/* score-ring op profielen: klein beetje lucht op mobiel */
@media(max-width:600px){
  figure.score-ring{float:none;margin:0 auto 18px}
}

/* links in artikelen: consistente onderstreping op hover */
article a:not(.ht3-all){text-underline-offset:2px}

/* ===== Header uniform met dashboard (app.css) — QA 17 juli 2026 =====
   Contentpagina's droegen een eigen headermaat (1920px breed, padding 40,
   menugewicht 800); het dashboard gebruikt 1320/24/600. Door het verschil
   'versprong' het menu bij navigeren. Deze override trekt alles gelijk. */
nav.topbar .wrap.nav, .wrap.nav{max-width:1320px!important;padding-left:24px!important;padding-right:24px!important}
.nav-trigger{font-weight:600!important}
@media(min-width:1181px){
  /* FIX 18 juli: display:grid ontbrak — .nav is flex in content-base.css,
     waardoor grid-template-columns inert was en het menu t.o.v. de
     app-pagina's (nav-grid) verschoof. Nu exact dezelfde geometrie. */
  .wrap.nav{display:grid!important;grid-template-columns:210px 1fr 320px!important;align-items:center;gap:28px!important}
  .wrap.nav .nav-actions{justify-self:end}
  .wrap.nav .navlinks{width:100%!important;min-width:0;display:flex!important;justify-content:center!important}
}

/* stabiele scrollbalk: header verschuift niet tussen korte en lange paginas */
html{overflow-y:scroll}

/* ============================================================
   compact & interactief (18 juli 2026) — feedback Luc
   1) minder verticale witruimte  2) TOC-scrollspy
   3) 'Verder lezen' gedempt  4) CTA in huisstijl
   5) onderwerpkaarten duidelijk klikbaar
   ============================================================ */

/* 1) compacter: ±20% minder verticale ruimte, iets smallere kaart-padding */
.hero{padding:52px 0 26px}
.eyebrow{margin-bottom:16px}
h1{margin-bottom:16px}
.article-grid{gap:30px;margin:22px auto 54px}
article{padding:34px 38px}
article h2{margin-top:1.7em}
article h2:first-child{margin-top:0}
h3{margin:18px 0 8px}
.related-bottom{margin-top:24px;padding-top:16px}
.cta{margin-top:28px}
@media(max-width:900px){article{padding:24px}}

/* 2) TOC-scrollspy: actieve sectie blauw met lijn links */
.toc a{border-left:2px solid transparent;padding:6px 0 6px 10px;transition:color .15s ease,border-color .15s ease}
.toc a.on{color:#2563EB;border-left-color:#2563EB;font-weight:750}
.toc a:hover{color:#2563EB}

/* 3) 'Verder lezen' gedempt: rustige zijstreep i.p.v. blauw kader */
.related-inline{background:transparent;border:0;border-left:3px solid #DCE6F3;border-radius:0;padding:4px 0 4px 14px;margin:14px 0 18px}
.related-inline strong{font-size:12px;letter-spacing:.05em;text-transform:uppercase;color:#62708A;margin-bottom:4px}
.related-inline p{font-size:14px;line-height:1.6}
.related-inline a{font-weight:700}

/* 4) CTA in blauwe huisstijl i.p.v. groen */
.cta{background:#F4F8FF;border:1px solid #CFE0FF}

/* 5) onderwerpkaarten: zichtbaar klikbaar (pijl + hover-lift) */
.related-bottom a{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:64px;transition:border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.related-bottom a::after{content:"\2192";color:#98A6BF;font-weight:800;transition:color .16s ease,transform .16s ease}
.related-bottom a:hover{border-color:#A9C5FF;background:#F2F7FF;box-shadow:0 12px 28px -18px rgba(16,27,51,.35);transform:translateY(-1px)}
.related-bottom a:hover::after{color:#2563EB;transform:translateX(3px)}