/* /kennisbank/<slug>/ (fase 7.0). Bovenop tokens.css, herbouw.css en pagina.css.
   Waarden uit tokens.css, regels uit merk/STYLEGUIDE.md, de vorm uit
   ux-onderzoek/poort-kbartikel.md: de inhoudsopgave die meeloopt naast de
   leeskolom van Stripe, en de koppen, tabellen, callouts, links en de knop terug
   naar de inhoud van GOV.UK. */

/* ---------- hero ---------- */

.zka-hero{position:relative;isolation:isolate;padding-block:var(--ruimte-sectie) calc(var(--ruimte-sectie) * 1.2)}
.zka-hero .zh-vlekken{-webkit-mask-image:linear-gradient(#000 60%,transparent);mask-image:linear-gradient(#000 60%,transparent)}
.zka-hero__in{display:grid;gap:var(--ruimte-blok-m);justify-items:start}
body.zh .zka-hero__titel{font-size:var(--type-maat-titel);line-height:var(--type-regel-kop);letter-spacing:var(--type-spatie-kop);max-width:26ch;text-wrap:balance}
/* Een titel als vraagzin van 50 tekens of meer zakt naar kop-2, zoals de koppelingspagina's;
   op titelmaat liep hij op 390 naar vier of vijf regels (stijlgids: hooguit drie). */
body.zh .zka-hero__titel--lang{font-size:var(--type-maat-kop-2);max-width:28ch}
.zka-hero__lead{max-width:var(--ruimte-meet)}
.zka-kruimel{display:flex;flex-wrap:wrap;align-items:center;column-gap:calc(var(--ruimte-blok-s) / 2);color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}
.zka-kruimel a{display:inline-flex;align-items:center;min-height:var(--ruimte-tikdoel);color:var(--kleur-tekst-2);text-decoration:none;transition:color var(--motion-duur-hover) var(--motion-curve-uit)}
.zka-kruimel a:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
@media (hover:hover) and (pointer:fine){.zka-kruimel a:hover{color:var(--kleur-tekst)}}
.zka-voor{max-width:var(--ruimte-meet);margin:0;color:var(--kleur-tekst-2);font-size:var(--type-maat-tekst);line-height:var(--type-regel-ui)}
.zka-meta{display:flex;flex-wrap:wrap;column-gap:calc(var(--ruimte-blok-s) / 2);margin:0;color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);font-variant-numeric:tabular-nums}
/* De stip gaat mee met het item erna, zodat hij nooit los aan het eind van een regel hangt. */
.zka-meta > [aria-hidden="true"]{display:none}
.zka-meta > [aria-hidden="true"] + span::before{content:"·" / "";margin-right:calc(var(--ruimte-blok-s) / 2)}

/* ---------- het artikel, op het lichte vlak ---------- */

.zka-artikel{--zka-kop:calc(var(--ruimte-knop) + var(--ruimte-blok-l) + 1px);--zka-boven:calc(var(--zka-kop) + var(--ruimte-blok-l) * 2)}
.zka-artikel__in{display:grid;gap:calc(var(--ruimte-blok-l) * 2);align-items:start}
/* minmax(0,1fr): anders zwelt de ene kolom op tot de breedte van een tabel en loopt de pagina smal over. */
.zka-kolom{display:grid;grid-template-columns:minmax(0,1fr);gap:calc(var(--ruimte-blok-l) * 2);min-width:0}

/* De inhoudsopgave: breed een lijst die meeloopt, met per item een lijn van 1px
   die in kleur-link kleurt bij de kop in beeld (Stripe). Smal staat hij uit en
   neemt de uitklaplijst het over. */
.zka-inhoud{display:none}
.zka-inhoud__lijst{margin:var(--ruimte-blok-s) 0 0;padding:0;list-style:none}
.zka-inhoud__link{
  display:block;padding:calc(var(--ruimte-blok-s) / 2) 0 calc(var(--ruimte-blok-s) / 2) var(--ruimte-blok-s);
  border-left:1px solid var(--kleur-rand);color:var(--kleur-tekst-2);
  font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);text-decoration:none;
  transition:color var(--motion-duur-hover) var(--motion-curve-uit),border-color var(--motion-duur-hover) var(--motion-curve-uit);
}
.zka-inhoud__link[aria-current="true"]{color:var(--kleur-link);border-left-color:var(--kleur-link);font-weight:var(--type-gewicht-label)}
.zka-inhoud__link:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:calc(var(--ruimte-focus-afstand) * -1)}
@media (hover:hover) and (pointer:fine){.zka-inhoud__link:hover{color:var(--kleur-tekst);border-left-color:var(--kleur-tekst-2)}}

/* Smal: een dichte lijst boven de tekst (GOV.UK zet hem open en duwt zo de
   eerste inhoud ver weg). */
.zka-uitklap{border:1px solid var(--kleur-rand);border-radius:var(--radius-tegel);background:var(--kleur-vlak);scroll-margin-top:var(--zka-boven)}
.zka-uitklap__knop{
  display:flex;align-items:center;justify-content:space-between;gap:var(--ruimte-blok-s);
  min-height:var(--ruimte-tikdoel);padding-inline:var(--ruimte-blok-s);cursor:pointer;list-style:none;
  font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui);
}
.zka-uitklap__knop::-webkit-details-marker{display:none}
.zka-uitklap__knop::after{content:"";width:8px;height:8px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;rotate:45deg;translate:0 -2px;transition:rotate var(--motion-duur-hover) var(--motion-curve-uit)}
.zka-uitklap[open] .zka-uitklap__knop::after{rotate:225deg;translate:0 2px}
.zka-uitklap__aantal{margin-left:auto;color:var(--kleur-tekst-2);font-variant-numeric:tabular-nums}
.zka-uitklap__knop:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand);border-radius:var(--radius-tegel)}
.zka-uitklap__lijst{display:grid;margin:0;padding:0 var(--ruimte-blok-s) var(--ruimte-blok-s);list-style:none}
.zka-uitklap__lijst a{display:flex;align-items:center;min-height:var(--ruimte-tikdoel);color:var(--kleur-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px}

/* De knop terug naar de inhoud: pas als de uitklaplijst uit beeld is, en weg bij
   de voet (GOV.UK laat hem over de footerlinks hangen). */
.zka-terug{
  position:fixed;right:var(--ruimte-blok-s);bottom:var(--ruimte-blok-s);z-index:20;
  display:inline-flex;align-items:center;gap:calc(var(--ruimte-blok-s) / 2);
  min-height:var(--ruimte-tikdoel);padding-inline:var(--ruimte-blok-s);
  border-radius:var(--radius-pil);border:1px solid var(--kleur-glas-rand);background:var(--kleur-vlak);
  box-shadow:var(--schaduw-tip);color:var(--kleur-tekst);
  font-size:var(--type-maat-knop);font-weight:var(--type-gewicht-label);text-decoration:none;
  opacity:0;translate:0 var(--ruimte-blok-s);pointer-events:none;visibility:hidden;
  /* visibility pas na het uitfaden, zodat hij in rust geen focusstop is. */
  transition:opacity var(--motion-duur-hover) var(--motion-curve-uit),translate var(--motion-duur-kaart) var(--motion-curve-uit),visibility 0s linear var(--motion-duur-hover);
}
.zka-terug[hidden]{display:none}
.zka-terug.is-aan{opacity:1;translate:0 0;pointer-events:auto;visibility:visible;transition-delay:0s}
.zka-terug:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}

/* ---------- de leeskolom ---------- */

.zka-tekst{max-width:var(--ruimte-meet);font-size:var(--type-maat-tekst);line-height:var(--type-regel-tekst)}
.zka-tekst > *{margin:0}
.zka-tekst > * + *{margin-top:var(--ruimte-blok-s)}
/* De koppen dicht bij de tekstmaat, zoals GOV.UK: h2 op de kop-3 van de stijlgids,
   h3 op de tekstmaat, beide vet. */
body.zh .zka-tekst h2{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-kop);max-width:none;margin-top:calc(var(--ruimte-blok-l) * 2);scroll-margin-top:var(--zka-boven);text-wrap:balance}
body.zh .zka-tekst h3{font-size:var(--type-maat-tekst);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);margin-top:var(--ruimte-blok-l)}
.zka-tekst > h2:first-child{margin-top:0}
.zka-tekst h2 + *,.zka-tekst h3 + *{margin-top:calc(var(--ruimte-blok-s) / 2)}
.zka-tekst ul,.zka-tekst ol{padding-left:var(--ruimte-blok-l)}
.zka-tekst li + li{margin-top:calc(var(--ruimte-blok-s) / 2)}
.zka-tekst strong{font-weight:var(--type-gewicht-nadruk)}
.zka-tekst a{
  color:var(--kleur-link);text-decoration:underline;text-decoration-thickness:1px;text-underline-offset:3px;
  transition:text-decoration-thickness var(--motion-duur-hover) var(--motion-curve-uit);
}
.zka-tekst a:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand);border-radius:var(--radius-tip)}
@media (hover:hover) and (pointer:fine){.zka-tekst a:hover{text-decoration-thickness:2px}}
.zka-tekst .callout,.zka-tekst blockquote{padding-left:var(--ruimte-blok-m);border-left:var(--ruimte-focus-gloed) solid var(--kleur-tekst-3)}
.zka-tekst .callout > :first-child{margin-top:0}
.zka-tekst .callout > * + *{margin-top:calc(var(--ruimte-blok-s) / 2)}

/* Tabellen: alleen horizontale lijnen, geen zebra (GOV.UK). Smal schuift de
   tabel zijwaarts in zijn eigen vak. */
.tablescroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tablescroll:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand)}
.zka-artikel table{width:100%;border-collapse:collapse;font-size:var(--type-maat-klein);line-height:var(--type-regel-ui);font-variant-numeric:tabular-nums}
.zka-artikel th,.zka-artikel td{padding:calc(var(--ruimte-blok-s) / 2) var(--ruimte-blok-s) calc(var(--ruimte-blok-s) / 2) 0;border-bottom:1px solid var(--kleur-rand);text-align:left;vertical-align:top}
.zka-artikel th{font-weight:var(--type-gewicht-label);border-bottom-color:var(--kleur-tekst-3)}
.zka-artikel .is-bedrag,.zka-artikel .is-getal,.zka-artikel .is-rechts{text-align:right}
/* Koppen, datums en getallen breken niet: de tabel schuift al zijwaarts. */
.zka-artikel th,.zka-artikel .is-bedrag,.zka-artikel .is-getal,.zka-artikel .is-rechts,.zka-artikel .is-datum,.zka-blad td:not(.is-breed){white-space:nowrap}

/* Een scherm of beeld in de tekst, met een zichtbaar bijschrift (STYLEGUIDE 6). */
.zka-tekst figure{display:grid;gap:calc(var(--ruimte-blok-s) / 2);margin-block:var(--ruimte-blok-l)}
.zka-tekst figure img{display:block;width:100%;height:auto;border:1px solid var(--kleur-rand);border-radius:var(--radius-kaart)}
.zka-tekst figcaption{color:var(--kleur-tekst-2);font-size:var(--type-maat-bijschrift);font-weight:var(--type-gewicht-label);line-height:var(--type-regel-ui)}

/* ---------- het bestand ---------- */

.zka-bestand{
  display:grid;gap:var(--ruimte-blok-s);max-width:var(--ruimte-meet);padding:var(--ruimte-blok-l);
  border:1px solid var(--kleur-rand);border-radius:var(--radius-kaart);background:var(--kleur-vlak);
}
body.zh .zka-artikel .zka-bestand__kop{scroll-margin-top:var(--zka-boven);font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-kop);max-width:none}
.zka-bestand p{margin:0}
.zka-blad{margin:0;display:grid;gap:calc(var(--ruimte-blok-s) / 2)}
.zka-blad__kop{color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}
.zka-blad__tab{display:inline-block;padding:0 calc(var(--ruimte-blok-s) / 2);border-radius:var(--radius-tip);background:var(--kleur-rij);color:var(--kleur-tekst);font-weight:var(--type-gewicht-label)}
.zka-bestand__actie{display:flex;flex-wrap:wrap;align-items:center;gap:var(--ruimte-blok-s)}
.zka-bestand__maat{color:var(--kleur-tekst-2);font-size:var(--type-maat-klein);line-height:var(--type-regel-ui)}

/* ---------- breed ---------- */

@media (min-width:1024px){
  .zka-artikel__in{grid-template-columns:minmax(0,3fr) minmax(0,9fr);gap:calc(var(--ruimte-goot) * 1.5)}
  .zka-inhoud{display:block;position:sticky;top:var(--zka-boven);max-height:calc(100vh - var(--zka-boven) - var(--ruimte-blok-l));overflow:auto;scrollbar-width:thin}
  .zka-uitklap,.zka-terug{display:none}
}

/* ---------- de app en verder lezen ---------- */

.zka-app{padding-block:calc(var(--ruimte-sectie) * 1.5)}
body.zh .zka-app h2{max-width:20ch;text-wrap:balance}
/* Zonder scherm: de kop links, de zin en de link rechts op de onderlijn, geen lege helft. */
.zka-app__zonder{align-items:end}
.zka-app__zonder .zh-tekst + .zh-tekst{display:grid;gap:var(--ruimte-blok-m);justify-items:start}

.zka-verder{padding-block:0 calc(var(--ruimte-sectie) * 1.5)}
.zka-verder .zh-wrap{display:grid;gap:var(--ruimte-blok-m)}
/* De lijn op de kop en niet op de wrap: zo loopt hij niet door in de goot. */
.zka-verder h2.zh-label{padding-top:calc(var(--ruimte-sectie) * 1.2);border-top:1px solid var(--kleur-rand)}
.zka-verder__lijst{display:grid;gap:0;margin:0;padding:0;list-style:none}
.zka-verder__link{
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:var(--ruimte-blok-m);
  min-height:var(--ruimte-tikdoel);padding-block:var(--ruimte-blok-m);border-top:1px solid var(--kleur-rand);
  color:var(--kleur-tekst);text-decoration:none;
}
.zka-verder__titel{font-size:var(--type-maat-inleiding);font-weight:var(--type-gewicht-kop);line-height:var(--type-regel-ui);text-wrap:pretty}
.zka-verder__pijl{color:var(--kleur-link);font-weight:var(--type-gewicht-kop);transition:transform var(--motion-duur-kaart) var(--motion-curve-uit)}
.zka-verder__link:focus-visible{outline:var(--ruimte-focus-breedte) solid var(--kleur-focus);outline-offset:var(--ruimte-focus-afstand);border-radius:var(--radius-tip)}
.zka-verder__link:focus-visible .zka-verder__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
@media (hover:hover) and (pointer:fine){
  .zka-verder__link:hover .zka-verder__pijl{transform:translateX(var(--motion-verplaatsing-pijl))}
  .zka-verder__link:hover .zka-verder__titel{color:var(--kleur-link)}
}
.zka-verder__titel{transition:color var(--motion-duur-hover) var(--motion-curve-uit)}
@media (min-width:861px){
  .zka-verder__lijst{grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--ruimte-goot)}
  .zka-verder__link{align-items:start;height:100%}
}

/* ---------- minder beweging ---------- */

@media (prefers-reduced-motion:reduce){
  .zka-inhoud__link,.zka-kruimel a,.zka-tekst a,.zka-verder__titel,.zka-verder__pijl,.zka-uitklap__knop::after,.zka-terug{transition:none}
  .zka-verder__link:hover .zka-verder__pijl,.zka-verder__link:focus-visible .zka-verder__pijl{transform:none}
  .zka-terug{translate:0 0}
}