/* Artikelpagina: slot onder de tekst (vraag + terug naar het overzicht). Bouwt voort op kennis.css. */
/* Lange titelwoorden (bv. "arbeidsconflictenprotocol") breken af in plaats van de pagina breder te maken op 320 px. overflow-wrap werkt alleen als een woord niet past; afbreken met koppelteken alleen onder 375 px, want Chromium breekt anders ook op brede schermen anders af. */
.ka-titel { overflow-wrap: anywhere; }
@media (max-width: 374px) { .ka-titel { -webkit-hyphens: auto; hyphens: auto; } }

/* ===== opbouw artikel (keuze Jochem 29 okt: optie 2 van artikel-opties.html) =====
   Kop: tekst links, foto rechts. Daaronder links een inhoudsopgave uit de tussenkopjes die meeloopt en aangeeft waar
   je bent (alleen bij twee of meer kopjes) plus deelknoppen, rechts de tekst met een contactblok. Dunne leesbalk bovenin. */
.ka-leesbalk { position: fixed; left: 0; right: 0; top: 0; z-index: 60; height: 3px; pointer-events: none; }
.ka-leesbalk span { display: block; height: 100%; background: var(--inkt); transform: scaleX(0); transform-origin: 0 50%; }
.ka-kop2 { padding: clamp(40px, 5vw, 72px) 0 0; }
.ka-kop2-rij { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: clamp(32px, 6vw, 90px); align-items: end; }
.ka-kop2-rij:has(> .ka-foto[hidden]) { grid-template-columns: minmax(0, 1fr); }
/* Het fotovak staat vanaf het begin open (vaste verhouding), zodat de kop niet verspringt als artikel.js de foto zet;
   artikel.js sluit het als er geen foto is. Zonder JavaScript en zonder foto in de HTML: geen leeg vak. */
html:not(.js) .ka-foto:not(:has(img[src])) { display: none; }
/* vooraf gebouwde pagina zonder JavaScript: de tekst en de deelknoppen staan er, maar 'link kopiëren' werkt alleen met JS */
html:not(.js) .ka-deel-knop[data-ka-deel="kopieer"] { display: none; }
.ka-kop2-tekst { max-width: 760px; }
.ka-kop2 .ka-lbl { margin-top: 0; }
.ka-kop2 .ka-titel { font-size: clamp(30px, 3.4vw, 46px); }
.ka-kop2 .ka-foto { padding-top: 0; }
.ka-kop2 .ka-foto .beeld { aspect-ratio: 4 / 3; border-radius: var(--hoek); }
.ka-nw { white-space: nowrap; }
.ka-lijn { margin: clamp(48px, 6vw, 80px) 0 0; border: 0; border-top: 1px solid var(--lijn); }
.ka-romp2 { display: grid; grid-template-columns: 260px minmax(0, 720px); gap: clamp(40px, 6vw, 90px); padding-top: clamp(48px, 6vw, 80px); }
.ka-romp2 .ka-tekst { padding-top: 0; }
.ka-romp2 .ka-tekst h2 { scroll-margin-top: 12px; } /* bovenop scroll-padding-top (96px) van html: kopje net onder de kop */
.ka-zij { position: sticky; top: 108px; align-self: start; } /* inhoudsopgave en Delen lopen samen mee: Delen schuift zo nooit over de inhoudsopgave */
.ka-zij > * + * { margin-top: 32px; }
.ka-inhoud { position: relative; z-index: 1; }
.ka-inhoud[hidden], .ka-delen[hidden] { display: none; }
.ka-inhoud ol { list-style: none; margin: 14px 0 0; padding: 0; border-left: 1px solid var(--lijn); }
.ka-inhoud a { display: block; padding: 11.5px 0 11.5px 18px; margin-left: -1px; border-left: 2px solid transparent; color: var(--grijs); font-size: 15px; line-height: 1.4; text-decoration: none; transition: color .25s, border-color .25s; }
.ka-inhoud a[aria-current="true"] { color: var(--inkt); border-left-color: var(--inkt); }
.ka-inhoud a:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
.ka-mk { background-image: linear-gradient(transparent 60%, var(--geel) 60%, var(--geel) 94%, transparent 94%); background-repeat: no-repeat; background-size: 0 100%; -webkit-box-decoration-break: clone; box-decoration-break: clone; transition: background-size .55s var(--ease); }
.ka-inhoud a[aria-current="true"] .ka-mk, .ka-inhoud a:focus-visible .ka-mk { background-size: 100% 100%; }
.ka-delen .ka-deel { display: flex; gap: 8px; margin-top: 12px; }
.ka-deel-knop { display: inline-grid; place-items: center; width: 44px; height: 44px; padding: 0; border: 1px solid var(--lijn); border-radius: 2px; background: var(--wit); color: var(--inkt); font: inherit; cursor: pointer; transition: border-color .25s; }
.ka-deel-knop svg { width: 18px; height: 18px; transition: transform .35s var(--ease); }
.ka-deel-knop:focus-visible { outline: 2px solid var(--inkt); outline-offset: 2px; }
/* contactblok onder de tekst */
.ka-contact { display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 16px 32px; align-items: center; margin-top: 56px; padding: 28px 32px; background: var(--beige); border-radius: var(--hoek); }
.ka-contact[hidden] { display: none; }
.ka-contact-kop { margin: 0; font-size: 22px; font-weight: 500; line-height: 1.25; color: var(--inkt); }
.ka-contact-sub { margin: 6px 0 0; font-size: 15px; line-height: 1.55; color: var(--grijs); }
.ka-contact-regels { display: flex; flex-direction: column; }
.ka-contact-regel { display: inline-flex; align-items: center; gap: 12px; min-height: 44px; color: var(--inkt); font-size: 16px; text-decoration: none; }
.ka-contact-regel svg { width: 20px; height: 20px; flex: none; }
.ka-contact-regel span { background-image: linear-gradient(var(--geel), var(--geel)); background-repeat: no-repeat; background-position: 0 88%; background-size: 0 40%; transition: background-size .45s var(--ease); }
.ka-contact-regel:focus-visible { outline: 2px solid var(--inkt); outline-offset: 3px; }
.ka-auteur:not([hidden]) + .ka-contact { margin-top: 32px; }
/* meer over dit onderwerp: rustige lijst, hele regel klikbaar */
.ka-meer-lijst { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 32px; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--lijn); }
.ka-meer-rij { position: relative; display: grid; grid-template-columns: minmax(0, 1fr) 20px; gap: 8px 24px; align-content: start; padding: 22px 0; border-top: 1px solid var(--lijn); cursor: pointer; }
.ka-meer-rij > .kn-lbl, .ka-meer-titel { grid-column: 1; }
.ka-meer-titel { margin: 0; font-size: 20px; font-weight: 500; line-height: 1.3; overflow-wrap: break-word; text-wrap: balance; }
.ka-meer-titel a { color: var(--inkt); text-decoration: none; }
.ka-meer-titel a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.ka-meer-titel a:focus-visible { outline: none; }
.ka-meer-rij:has(a:focus-visible) { outline: 2px solid var(--inkt); outline-offset: 4px; border-radius: 2px; }
.ka-meer-rij:has(a:focus-visible) .ka-mk { background-size: 100% 100%; }
.ka-meer-pijl { grid-column: 2; grid-row: 2; display: grid; place-items: center; width: 20px; height: 20px; margin-top: 3px; color: var(--inkt); }
.ka-meer-pijl svg { width: 20px; height: 20px; transition: transform .35s var(--ease); }
.ka-meer-rij:has(a:focus-visible) .ka-meer-pijl svg { transform: translateX(5px); }
@media (hover: hover) {
  .ka-inhoud a:hover { color: var(--inkt); }
  .ka-deel-knop:hover { border-color: var(--inkt); }
  .ka-deel-knop:hover svg { transform: translateY(-2px); }
  .ka-contact-regel:hover span { background-size: 100% 40%; }
  .ka-meer-rij:hover .ka-mk { background-size: 100% 100%; }
  .ka-meer-rij:hover .ka-meer-pijl svg { transform: translateX(5px); }
}
@media (max-width: 1100px) { .ka-romp2 { grid-template-columns: 220px minmax(0, 1fr); gap: 40px; } .ka-contact { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 860px) {
  .ka-kop2-rij { grid-template-columns: minmax(0, 1fr); }
  .ka-kop2 .ka-foto .beeld { aspect-ratio: 3 / 2; }
  .ka-romp2 { grid-template-columns: minmax(0, 1fr); gap: 32px; }
  .ka-zij { position: static; }
  .ka-inhoud { position: static; padding: 20px 20px 12px; background: var(--tegel); border-radius: var(--hoek); }
  .ka-meer-lijst { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 560px) { .ka-contact { padding: 24px 20px; } .ka-meer-titel { font-size: 18px; } .ka-contact-kop { font-size: 19px; } }
@media (max-width: 374px) { .ka-meer-titel { -webkit-hyphens: auto; hyphens: auto; } }
@media (prefers-reduced-motion: reduce) { .ka-mk, .ka-deel-knop svg, .ka-contact-regel span, .ka-meer-pijl svg, .ka-inhoud a { transition: none; } }
.ka-inhoud[hidden] + .ka-delen { margin-top: 0; }
@media (max-width: 560px) { .ka-lt { display: block; margin-top: 4px; } .ka-sep { display: none; } }
/* artikel op de telefoon: de laatste stap (de hele artikeltitel) op één regel met '…'; de titel staat er direct onder voluit */
@media (max-width: 860px) { .ka-kop2.met-kruimel .dk-kruimel [aria-current] { min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } }