/* V76 — assets/handleidingen.css: de handleidingenbibliotheek.
 *
 * UITGANGSPUNT
 * Deze pagina leent zijn schil (koptekst, menu, voettekst, lettertype) van een bestaande
 * pagina. Dit bestand mag daarom NIETS globaals aanraken: geen regels op body, h1, a of
 * ul zonder .hl ervoor. Alles hangt onder .hl, zodat het onmogelijk is dat deze pagina
 * de opmaak van de rest van de site verandert.
 *
 * KLEUREN KOMEN UIT DE HUISSTIJL
 * Elke kleur is var(--iets, terugval). De variabelen staan in de inline stijl van de
 * sitepagina's (--navy, --orange, --line, --ink, --text, --muted). Wordt de huisstijl
 * in het beheer aangepast, dan verandert deze pagina mee. De terugvalwaarde erachter is
 * er voor het geval de schil ooit van een pagina komt die ze niet zet — dan ziet het er
 * nog steeds uit zoals bedoeld in plaats van zwart op wit.
 *
 * DE LIJNEN
 * Eén hairline per regel, onder de naam, en verder niets: geen kaders, geen kaartjes,
 * geen schaduwen op rust. Een lijst van handleidingen is een register, en een register
 * leest op ritme en witruimte — niet op dozen. De categorienaam erboven is een maatje
 * zwaarder en krijgt een iets donkerder lijn, zodat de hiërarchie zichtbaar is zonder
 * dat er een tweede kleur of een vlak aan te pas komt.
 */

.hl {
  /* Eigen tokens, afgeleid van de huisstijl. Eén plek om aan te draaien. */
  --hl-ink:    var(--ink, #152C47);
  --hl-tekst:  var(--text, #46586F);
  --hl-stil:   var(--muted, #7A8AA0);
  --hl-lijn:   var(--line, #E4E8EE);
  --hl-vlak:   var(--surface, #FFFFFF);
  --hl-paneel: var(--panel, #F6F7F9);
  --hl-accent: var(--orange, #F26F1F);
  --hl-accent-diep: var(--orange-dark, #DA5F12);

  /* Lijnen apart van de randkleur: een scheidingslijn in een lijst mag zachter zijn
     dan de rand van een invoerveld, anders gaat de pagina strepen. */
  --hl-hairline: color-mix(in srgb, var(--hl-lijn) 78%, transparent);
  --hl-hairline-sterk: var(--hl-lijn);

  --hl-radius: 12px;
  --hl-soepel: 220ms cubic-bezier(.22, .61, .36, 1);

  color: var(--hl-tekst);
  background: var(--hl-vlak);
}

@media (prefers-reduced-motion: reduce) {
  .hl, .hl * { transition-duration: 1ms !important; animation-duration: 1ms !important; }
}

/* GEEN eigen breedte meer.
 *
 * Hier stond een .hl-breed met max-width 1180px en 24px padding. De site zelf gebruikt
 * .container met --dq-max (1440px) en 32px padding - gemeten verschil: de inhoud van
 * deze pagina begon ruim honderd pixels verder naar rechts dan het logo in de koptekst
 * en de kolommen in de voettekst. Dat zie je meteen en het is nergens voor nodig.
 *
 * De pagina gebruikt nu .container van de site. Dezelfde reden als waarom de schil van
 * een bestaande pagina wordt geleend: verandert de huisstijl de paginabreedte, dan
 * verandert deze pagina mee zonder dat iemand eraan hoeft te denken. */

.hl-ico { flex: none; }

/* ---------------------------------------------------------------------------
   Hero
   ---------------------------------------------------------------------------
   Donkerblauw vlak over de volle breedte met witte tekst, en de zoekbalk als
   hoofdrolspeler. Dat is een keuze: op een handleidingenpagina komt vrijwel iedereen
   met een concrete vraag, niet om te bladeren. Het vlak zet die zoekbalk apart van de
   lijst eronder zonder dat er een kader of een schaduw aan te pas komt.

   De knoppen zijn .btn-primary en .btn-light van de site zelf - oranje, en wit met
   navy tekst. Niet nagebouwd: dan wijken ze af zodra de huisstijl verandert.
   --------------------------------------------------------------------------- */

.hl-hero {
  background: var(--navy-deep, #0E2138);
  /* Nauwelijks zichtbaar verloop. Geen effect om het effect: het houdt een vlak van
     1440 bij 400 pixels levend zonder dat je kunt aanwijzen waar het vandaan komt. */
  background-image: linear-gradient(155deg, var(--navy, #152C47) 0%, var(--navy-deep, #0E2138) 100%);
  color: #fff;
  padding: 58px 0 52px;
}
@media (max-width: 760px) { .hl-hero { padding: 32px 0 30px; } }

/* Basis voor kruimelpad en eyebrow. Stonden in de oude kop-sectie; die is vervangen
   door de hero, en zonder deze twee verliest het kruimelpad zijn tussenruimte en de
   eyebrow zijn kapitalen. */
.hl-kruimels {
  display: flex; flex-wrap: wrap; align-items: center; gap: 9px;
  font-size: 13px;
}
.hl-kruimels a { text-decoration: none; transition: color var(--hl-soepel); }
.hl-kruimels span[aria-hidden] { opacity: .4; }

.hl-eyebrow {
  margin: 0 0 12px;
  font-size: 11px; font-weight: 600; letter-spacing: .2em; text-transform: uppercase;
}

.hl-hero .hl-kruimels { color: rgba(255, 255, 255, .52); margin-bottom: 22px; }
.hl-hero .hl-kruimels a { color: inherit; }
.hl-hero .hl-kruimels a:hover { color: #fff; }
.hl-hero .hl-kruimels [aria-current] { color: rgba(255, 255, 255, .88); }
.hl-hero .hl-eyebrow { color: var(--orange, #F26F1F); margin-bottom: 14px; }

.hl-titel {
  margin: 0;
  /* Strakker dan de standaardkop van de site: zwaarder, duidelijk negatieve
     letterafstand, en een regelhoogte die twee regels tegen elkaar aan zet. */
  font-size: clamp(34px, 4.6vw, 54px);
  line-height: 1.03;
  letter-spacing: -.028em;
  font-weight: 650;
  color: #fff;
}

.hl-lead {
  margin: 15px 0 0;
  max-width: 58ch;
  font-size: 17px; line-height: 1.6;
  color: rgba(255, 255, 255, .72);
}

/* ---------------------------------------------------------------------------
   Zoeken - over de volle breedte van de hero
   --------------------------------------------------------------------------- */

.hl-zoek { position: relative; margin: 30px 0 0; max-width: none; }

.hl-zoek-veld {
  display: flex; align-items: center; gap: 14px;
  height: 68px; padding: 0 10px 0 22px;
  background: #fff;
  border: 1px solid transparent;
  border-radius: 14px;
  transition: box-shadow var(--hl-soepel), border-color var(--hl-soepel);
}
.hl-zoek-veld > .hl-ico { color: var(--muted, #7A8AA0); transition: color var(--hl-soepel); }
.hl-zoek:focus-within .hl-zoek-veld {
  border-color: var(--orange, #F26F1F);
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--orange, #F26F1F) 32%, transparent);
}
.hl-zoek:focus-within .hl-zoek-veld > .hl-ico { color: var(--orange, #F26F1F); }

.hl-zoek input[type="search"] {
  flex: 1 1 auto; min-width: 0;
  height: 100%; border: 0; background: none; outline: none; padding: 0;
  font: inherit; font-size: 17px; color: var(--ink, #152C47);
}
.hl-zoek input::placeholder { color: var(--muted, #7A8AA0); }
.hl-zoek input[type="search"]::-webkit-search-decoration,
.hl-zoek input[type="search"]::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }

.hl-zoek-leeg {
  flex: none; width: 36px; height: 36px; display: grid; place-items: center;
  border: 0; border-radius: 9px; background: none; cursor: pointer;
  color: var(--muted, #7A8AA0); transition: background var(--hl-soepel), color var(--hl-soepel);
}
.hl-zoek-leeg:hover { background: var(--panel, #EDF1F6); color: var(--ink, #152C47); }

.hl-zoek-knop {
  flex: none; height: 50px; padding: 0 30px;
  border: 0; border-radius: 10px; cursor: pointer;
  background: var(--orange, #F26F1F); color: #fff;
  font: inherit; font-size: 15px; font-weight: 600; letter-spacing: .01em;
  transition: background var(--hl-soepel), transform var(--hl-soepel);
}
.hl-zoek-knop:hover { background: var(--orange-dark, #DA5F12); }
.hl-zoek-knop:active { transform: translateY(1px); }
@media (max-width: 560px) {
  .hl-zoek-veld { height: 60px; padding-left: 16px; }
  .hl-zoek-knop { padding: 0 18px; }
}

/* --- hint links, knoppen rechts --- */
.hl-hero-voet {
  display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px;
  margin-top: 20px;
}
.hl-hero-knoppen { margin-left: auto; display: flex; flex-wrap: wrap; gap: 12px; }
@media (max-width: 700px) { .hl-hero-knoppen { margin-left: 0; width: 100%; } }

.hl-zoek-hint { margin: 0; font-size: 13.5px; color: rgba(255, 255, 255, .55); }
.hl-zoek-hint.is-bezig::after {
  content: ""; display: inline-block; width: 11px; height: 11px; margin-left: 8px;
  vertical-align: -1px; border: 1.5px solid rgba(255, 255, 255, .3);
  border-top-color: var(--orange, #F26F1F); border-radius: 50%;
  animation: hl-draai .7s linear infinite;
}
@keyframes hl-draai { to { transform: rotate(360deg); } }

/* --- aanvullingen terwijl je typt --- */
.hl-suggesties {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 10px);
  margin: 0; padding: 6px; list-style: none;
  background: var(--surface, #fff);
  border: 1px solid var(--line, #E4E8EE);
  border-radius: 14px;
  box-shadow: 0 24px 56px -20px rgba(5, 18, 33, .45);
  max-height: 340px; overflow-y: auto;
  text-align: left;
}
.hl-suggesties[hidden] { display: none; }
.hl-suggestie {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; border-radius: 9px; cursor: pointer;
  font-size: 15px; color: var(--ink, #152C47);
}
.hl-suggestie:hover, .hl-suggestie.is-actief { background: var(--panel, #EDF1F6); }
.hl-suggestie b { font-weight: 600; }
.hl-suggestie-soort {
  margin-left: auto; flex: none;
  font-size: 11px; letter-spacing: .09em; text-transform: uppercase; color: var(--muted, #7A8AA0);
}

/* ---------------------------------------------------------------------------
   Filterbalk
   --------------------------------------------------------------------------- */

.hl-filters {
  position: sticky; top: 0; z-index: 30;
  background: color-mix(in srgb, var(--hl-vlak) 88%, transparent);
  backdrop-filter: saturate(160%) blur(10px);
  -webkit-backdrop-filter: saturate(160%) blur(10px);
  border-bottom: 1px solid var(--hl-hairline);
  margin-top: 8px;
}
.hl-filterrij {
  display: flex; gap: 8px; align-items: center;
  padding: 12px 0; overflow-x: auto;
  /* De scrollbalk weg, maar het scrollen blijft: op mobiel is dit een rij van acht
     categorieën en die moet je kunnen vegen. */
  scrollbar-width: none; -ms-overflow-style: none;
}
.hl-filterrij::-webkit-scrollbar { display: none; }

.hl-filter {
  flex: none; display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 15px;
  border: 1px solid var(--hl-hairline-sterk); border-radius: 999px;
  font-size: 14px; font-weight: 500; color: var(--hl-tekst); text-decoration: none;
  white-space: nowrap;
  transition: color var(--hl-soepel), border-color var(--hl-soepel), background var(--hl-soepel);
}
.hl-filter:hover { color: var(--hl-ink); border-color: var(--hl-ink); }
.hl-filter.is-actief { background: var(--hl-ink); border-color: var(--hl-ink); color: #fff; }
.hl-filter-telling {
  font-size: 12px; font-variant-numeric: tabular-nums; color: var(--hl-stil);
}
.hl-filter.is-actief .hl-filter-telling { color: rgba(255, 255, 255, .62); }

/* ---------------------------------------------------------------------------
   Groep (categorie)
   --------------------------------------------------------------------------- */

.hl-groep { padding: 46px 0 6px; }
.hl-groep + .hl-groep { padding-top: 38px; }

.hl-groep-kop {
  display: flex; align-items: baseline; gap: 24px;
  padding-bottom: 15px;
  /* De lijn onder de categoriekop is sterker dan die onder een handleiding. Zonder dat
     verschil loopt de kop op in de lijst eronder en lijkt het één lange reeks. */
  border-bottom: 1px solid var(--hl-hairline-sterk);
}
.hl-groep-blok { flex: 1 1 auto; min-width: 0; }
.hl-groep-naam {
  margin: 0;
  font-size: 19px;
  /* "Iets dikker" dan de namen eronder: 650 tegen 500. Niet 700 — dan wordt het een
     schreeuw in plaats van een kop. */
  font-weight: 650;
  letter-spacing: -.012em;
  color: var(--hl-ink);
}
.hl-groep-telling {
  margin-left: auto; flex: none;
  font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  color: var(--hl-stil); font-variant-numeric: tabular-nums;
}
.hl-groep-tekst { margin: 7px 0 0; max-width: 72ch; font-size: 14.5px; line-height: 1.55; color: var(--hl-stil); }

.hl-groep-meer { margin: 18px 0 0; font-size: 14px; }
.hl-groep-meer a {
  color: var(--hl-ink); text-decoration: none;
  border-bottom: 1px solid var(--hl-hairline-sterk); padding-bottom: 2px;
  transition: color var(--hl-soepel), border-color var(--hl-soepel);
}
.hl-groep-meer a:hover { color: var(--hl-accent); border-color: var(--hl-accent); }

/* ---------------------------------------------------------------------------
   De lijst
   --------------------------------------------------------------------------- */

.hl-lijst { margin: 0; padding: 0; list-style: none; }

.hl-rij {
  display: flex; align-items: center; gap: 18px;
  /* De hairline onder elke naam. Op de laatste regel blijft hij staan: hij sluit de
     groep af, en zonder die afsluiting hangt de lijst in het wit. */
  border-bottom: 1px solid var(--hl-hairline);
  transition: border-color var(--hl-soepel);
}
.hl-rij:hover { border-bottom-color: var(--hl-hairline-sterk); }

.hl-rij-hoofd {
  flex: 1 1 auto; min-width: 0;
  display: block; padding: 20px 4px 20px 0;
  text-decoration: none; color: inherit;
  /* De naam schuift een paar pixels op bij hover. Dat is de hele beweging op deze
     pagina: genoeg om aanraakbaar te voelen, te weinig om de lijn te laten dansen. */
  transition: transform var(--hl-soepel);
}
.hl-rij:hover .hl-rij-hoofd { transform: translateX(3px); }

.hl-rij-naam {
  display: block;
  font-size: 16.5px; font-weight: 500; line-height: 1.4;
  letter-spacing: -.005em;
  color: var(--hl-ink);
  transition: color var(--hl-soepel);
}
.hl-rij:hover .hl-rij-naam { color: var(--hl-accent); }

.hl-rij-tekst, .hl-rij-fragment {
  display: block; margin-top: 5px;
  font-size: 14px; line-height: 1.55; color: var(--hl-stil);
  /* Twee regels, daarna afbreken: een omschrijving van vijf regels maakt van een
     register een artikel. */
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hl-rij-fragment mark {
  background: color-mix(in srgb, var(--hl-accent) 17%, transparent);
  color: var(--hl-ink); border-radius: 3px; padding: 0 2px;
}

.hl-rij-meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  margin-top: 8px;
  font-size: 12.5px; color: var(--hl-stil); font-variant-numeric: tabular-nums;
}
.hl-punt { opacity: .4; }

.hl-rij-dl {
  flex: none; display: inline-flex; align-items: center; gap: 7px;
  height: 38px; padding: 0 15px;
  border: 1px solid var(--hl-hairline-sterk); border-radius: 9px;
  font-size: 13px; font-weight: 600; letter-spacing: .02em;
  color: var(--hl-tekst); text-decoration: none; background: var(--hl-vlak);
  transition: color var(--hl-soepel), border-color var(--hl-soepel), background var(--hl-soepel);
}
.hl-rij-dl:hover { color: #fff; background: var(--hl-ink); border-color: var(--hl-ink); }

@media (max-width: 640px) {
  .hl-rij { align-items: flex-start; gap: 12px; }
  .hl-rij-dl { align-self: center; padding: 0 12px; }
  .hl-rij-dl span { display: none; }   /* alleen het pictogram; de naam ernaast zegt het al */
}

/* ---------------------------------------------------------------------------
   Zoekresultaten
   --------------------------------------------------------------------------- */

.hl-uitslag { padding: 34px 0 10px; }
.hl-uitslag[hidden] { display: none; }
.hl-uitslag-kop {
  display: flex; align-items: baseline; gap: 16px;
  padding-bottom: 14px; border-bottom: 1px solid var(--hl-hairline-sterk);
}
.hl-uitslag-kop h2 {
  margin: 0; font-size: 19px; font-weight: 650; letter-spacing: -.012em; color: var(--hl-ink);
}
.hl-wis {
  margin-left: auto; border: 0; background: none; cursor: pointer; padding: 0;
  font: inherit; font-size: 13px; color: var(--hl-stil);
  border-bottom: 1px solid transparent; transition: color var(--hl-soepel), border-color var(--hl-soepel);
}
.hl-wis:hover { color: var(--hl-accent); border-bottom-color: var(--hl-accent); }

.hl-geen { padding: 30px 0 10px; }
.hl-geen p { margin: 0 0 10px; font-size: 15px; color: var(--hl-tekst); }
.hl-geen-tips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 14px; padding: 0; list-style: none; }
.hl-geen-tips button {
  border: 1px solid var(--hl-hairline-sterk); background: none; cursor: pointer;
  height: 32px; padding: 0 13px; border-radius: 999px;
  font: inherit; font-size: 13px; color: var(--hl-tekst);
  transition: color var(--hl-soepel), border-color var(--hl-soepel);
}
.hl-geen-tips button:hover { color: var(--hl-accent); border-color: var(--hl-accent); }

.hl-leeg { padding: 60px 0; }
.hl-leeg p { font-size: 16px; color: var(--hl-stil); }

/* ---------------------------------------------------------------------------
   Detailpagina
   --------------------------------------------------------------------------- */

.hl-hero-detail { padding-bottom: 46px; }

.hl-acties { display: flex; flex-wrap: wrap; gap: 12px; margin: 30px 0 0; }

/* De knoppen zelf komen van de site (.btn/.btn-primary/.btn-light). Alleen de twee
   dingen die daar niet in zitten: het pictogram ernaast en de bestandsgrootte erin. */
.hl-knop-dl { display: inline-flex; align-items: center; gap: 10px; }
.hl-knop-bij {
  font-weight: 500; font-size: 13px; opacity: .8;
  font-variant-numeric: tabular-nums; padding-left: 4px;
}

.hl-feiten {
  display: flex; flex-wrap: wrap; gap: 0 46px;
  margin: 34px 0 0; padding: 22px 0 0;
  border-top: 1px solid var(--hl-hairline);
}
.hl-feit { padding: 6px 0; }
.hl-feit dt {
  font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--hl-stil);
  margin-bottom: 5px;
}
.hl-feit dd { margin: 0; font-size: 15px; font-weight: 500; color: var(--hl-ink); }

/* De feitenregel staat IN de hero, dus op donkerblauw. Zonder deze drie regels erft
   hij --hl-ink (donker navy) en is de waarde praktisch onzichtbaar op de achtergrond -
   gemeten op de eerste render: label leesbaar, waarde weg. */
.hl-hero .hl-feiten { border-top-color: rgba(255, 255, 255, .16); }
.hl-hero .hl-feit dt { color: rgba(255, 255, 255, .5); }
.hl-hero .hl-feit dd { color: #fff; }

.hl-lezer { padding: 34px 0 10px; }
.hl-lezer-vlak {
  position: relative;
  border: 1px solid var(--hl-hairline-sterk); border-radius: var(--hl-radius);
  background: var(--hl-paneel);
  overflow: hidden;
  min-height: 220px;
  display: grid; place-items: center;
}
.hl-lezer-vlak.is-open { display: block; min-height: 0; background: var(--hl-vlak); }
.hl-lezer-start {
  display: inline-flex; align-items: center; gap: 10px;
  margin: 44px 0; padding: 0 22px; height: 48px;
  border: 1px solid var(--hl-hairline-sterk); border-radius: 10px;
  background: var(--hl-vlak); cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 500; color: var(--hl-ink);
  transition: border-color var(--hl-soepel), color var(--hl-soepel);
}
.hl-lezer-start:hover { border-color: var(--hl-accent); color: var(--hl-accent); }
.hl-lezer-object, .hl-lezer-vlak iframe {
  display: block; width: 100%; height: min(82vh, 980px); border: 0;
}

/* ---------------------------------------------------------------------------
   Donker
   ---------------------------------------------------------------------------
   De site zet data-theme op <html> (zie het scriptje in de <head> van elke pagina).
   Alleen de tokens worden hier omgezet; geen enkele regel hierboven wordt herhaald.
   --------------------------------------------------------------------------- */

[data-theme="dark"] .hl {
  --hl-ink:    var(--ink, #EEF3F9);
  --hl-tekst:  var(--text, #AFBDCE);
  --hl-stil:   var(--muted, #7E8EA3);
  --hl-lijn:   var(--line, #24354B);
  --hl-vlak:   var(--surface, #0D1826);
  --hl-paneel: var(--panel, #142335);
  --hl-hairline: color-mix(in srgb, var(--hl-lijn) 86%, transparent);
}
[data-theme="dark"] .hl-suggesties { box-shadow: 0 22px 50px -20px rgba(0, 0, 0, .7); }
[data-theme="dark"] .hl-zoek-knop { background: var(--hl-accent); }
[data-theme="dark"] .hl-zoek-knop:hover { background: var(--hl-accent-diep); }
[data-theme="dark"] .hl-filter.is-actief { background: var(--hl-accent); border-color: var(--hl-accent); color: #fff; }
[data-theme="dark"] .hl-rij-dl:hover { background: var(--hl-accent); border-color: var(--hl-accent); }

/* ---------------------------------------------------------------------------
   Afdrukken
   ---------------------------------------------------------------------------
   Een monteur print deze lijst. Dan is een zoekveld dat niet werkt op papier alleen
   maar ruis, en een lijstregel hoort niet over een paginaovergang te breken.
   --------------------------------------------------------------------------- */
@media print {
  .hl-zoek, .hl-filters, .hl-uitslag, .hl-rij-dl, .hl-lezer, .hl-groep-meer { display: none !important; }
  .hl-rij { break-inside: avoid; }
  .hl-rij-hoofd { padding: 10px 0; }
  /* Een donkerblauw vlak over de volle breedte kost een halve inktpatroon en levert op
     papier niets op. Op wit, met zwarte tekst. */
  .hl-hero { padding: 0 0 16px; background: none !important; color: #000; }
  .hl-hero .hl-titel, .hl-hero .hl-lead, .hl-hero .hl-kruimels { color: #000; }
  .hl-hero-voet, .hl-hero-knoppen { display: none !important; }
}