/* ============================================================
   balk.css, 20 september 2026

   De navigatiebalk kreeg twee dingen die ze vroeger niet had: twee
   uitklapmenu's op desktop, en een paar extra's onderaan het menu op
   een telefoon. Die styling staat hier en niet in blog.css of in het
   stijlblok van een losse pagina, want de balk staat op alle 70
   pagina's en die hebben twee verschillende stijlbronnen.

   De regel is dezelfde als voor mobiel.css: alles wat hier staat geldt
   alleen voor elementen die er vroeger niet waren (.nav-groep,
   .nav-uit, .nav-onder, .nav-extra, .nav-routes). Daarom kan er niets
   van de bestaande vormgeving door breken, en is de hele ronde terug
   te draaien door dit bestand en de link ernaartoe weg te halen.

   Volgorde in de head: lettertypes.css, het stijlblok of blog.css,
   dán balk.css, en mobiel.css helemaal achteraan. Zo kan mobiel.css
   nog altijd het laatste woord hebben op een telefoon.

   Tokens die in beide stijlbronnen bestaan: --randje, --marine,
   --inkt, --accent-diep, --accent-hover, --pad, --bijtekst-dk,
   --accent-licht. Alles wat maar in één van de twee bestaat, staat
   hier met een terugval erachter.
   ============================================================ */

/* ---- landen onder de vaste balk ---- */
/* Een anker als /#gratis scrolt anders tot precies de bovenrand van het blok,
   en dan staat de vaste balk erbovenop. blog.css deed dit al voor de blog;
   hier geldt het voor elke pagina, want de balk staat overal. */
html{scroll-padding-top:86px}
@media (max-width:640px){html{scroll-padding-top:72px}}

/* ---- de groep: een link plus een knopje dat het menu opent ---- */
.nav-links .nav-groep{position:relative;display:flex;align-items:center;gap:2px}
.nav-links .nav-groep > a{white-space:nowrap}

.nav-uit{display:flex;align-items:center;justify-content:center;
  background:none;border:0;cursor:pointer;padding:6px 2px;margin:0;
  width:24px;height:24px;color:var(--accent-diep,#87521C);line-height:0}
.nav-uit .nav-pijl{display:block;width:8px;height:8px;border-right:2px solid currentColor;
  border-bottom:2px solid currentColor;transform:translateY(-2px) rotate(45deg);
  transition:transform .18s ease}
.nav-uit[aria-expanded="true"] .nav-pijl{transform:translateY(1px) rotate(-135deg)}
.nav-uit:focus-visible{outline:2px solid var(--marine,#0E1F2E);outline-offset:2px;border-radius:4px}
@media (prefers-reduced-motion:reduce){.nav-uit .nav-pijl{transition:none}}

/* ---- het paneel ---- */
.nav-onder{display:none;position:absolute;top:100%;left:-14px;min-width:246px;
  background:var(--pagina,var(--bg,#F7F3EE));border:1px solid var(--randje,#E0D7C9);
  border-radius:14px;padding:8px;margin-top:10px;
  box-shadow:0 14px 34px rgba(14,31,46,.11);z-index:70}
.nav-groep.open > .nav-onder{display:block}
.nav-links .nav-onder a{display:block;padding:9px 14px;border-radius:9px;
  font-size:15px;line-height:1.35;border-bottom:0;white-space:normal}
.nav-links .nav-onder a:hover{background:var(--salie,#DEDFD0);color:var(--inkt,#0E1F2E)}
.nav-links .nav-onder a:focus-visible{outline:2px solid var(--marine,#0E1F2E);outline-offset:-2px}
/* de actieve onderpagina: hetzelfde streepje zou hier niet passen, dus een
   linkerkantlijn in amber en een iets zwaardere letter */
.nav-links .nav-onder a[aria-current="page"]{font-weight:500;
  box-shadow:inset 2px 0 0 var(--accent-hover,#CF8C46)}
.nav-links .nav-onder a[aria-current="page"]::after{display:none}
/* een onzichtbare brug, zodat de muis van de link naar het paneel kan
   zonder door een gat van tien pixels te vallen */
.nav-groep.open > .nav-onder::before{content:"";position:absolute;left:0;right:0;top:-12px;height:12px}

/* Op desktop opent hij ook door er met de muis over te gaan. Dat doet
   nav.js en niet css, want anders zou het paneel openstaan terwijl het
   knopje aria-expanded="false" blijft zeggen. */

/* ---- de extra's onderaan het menu op een telefoon ---- */
/* Op desktop horen ze niet in de balk: daar staan ze in de voet en in
   de pagina zelf. Sinds 22 september is dat alleen nog Contact: Gratis
   beginnen en de knop Plan een eerste gesprek zijn uit het menu, want de
   knop Ontdek jouw profiel staat nu in de balk zelf en een gesprek is
   één route naast zelf beginnen, geen vaste hoofdactie meer. De
   css voor .nav-routes blijft staan, voor het geval de route ooit
   terugkomt. */
.nav-links .nav-extra,.nav-links .nav-routes{display:none}

@media (max-width:820px){
  .nav-links .nav-groep{display:block;padding:0}
  .nav-links .nav-groep > a{padding-right:56px}
  .nav-uit{position:absolute;right:-6px;top:0;width:50px;height:50px;padding:0}
  .nav-groep{position:relative}
  .nav-onder{display:none;position:static;min-width:0;border:0;border-radius:0;
    background:transparent;box-shadow:none;padding:0 0 10px;margin:0}
  .nav-groep.open > .nav-onder{display:block}
  .nav-groep.open > .nav-onder::before{display:none}
  .nav-links .nav-onder a{padding:12px 0 12px 16px;min-height:44px;border-radius:0;
    display:flex;align-items:center;border-bottom:0;font-size:15px;
    box-shadow:inset 2px 0 0 var(--randje,#E0D7C9)}
  .nav-links .nav-onder a:hover{background:transparent;
    box-shadow:inset 2px 0 0 var(--accent-hover,#CF8C46)}
  .nav-links .nav-onder a[aria-current="page"]{background:transparent}

  .nav-links .nav-extra{display:block}
  .nav-links .nav-routes{display:block;border-bottom:0;padding:16px 0 4px}
  .nav-links .nav-routes .knop{display:block;width:100%;text-align:center;min-height:50px;
    padding-top:14px;padding-bottom:14px}
  .nav-links .nav-routes .nav-bel{display:flex;align-items:center;min-height:44px;
    margin:6px 0 0;font-size:15px;text-decoration:none;
    color:var(--bijtekst,var(--ink,#4A5A69));
    border-bottom:0}
  .nav-links .nav-routes .nav-bel u{text-decoration:none;
    border-bottom:1.5px solid var(--accent-hover,#CF8C46);padding-bottom:1px}
}

/* ---- je staat in deze tak, maar niet op deze pagina ---- */
/* Zelfde streepje als de actieve pagina, maar half doorzichtig: zo zie
   je in de gesloten balk waar je zit zonder dat het twee actieve
   pagina's lijken. */
.nav-links a.nav-in{position:relative;font-weight:500}
.nav-links a.nav-in::after{content:"";position:absolute;left:0;right:0;bottom:-7px;
  height:2px;border-radius:2px;background:var(--accent-hover,#CF8C46);opacity:.55}
@media (max-width:820px){
  .nav-links a.nav-in::after{left:0;right:auto;width:26px;bottom:10px}
}

/* ---- de knop rechtsboven ---- */
/* 22 september 2026: de knop is Ontdek jouw profiel, naar de test. Die
   tekst is langer dan Kennismaken. Op een breed scherm staat hij voluit;
   onder 480 pixels past logo + knop + hamburger niet meer op één regel en
   toont de knop Jouw profiel. Beide spans staan in de html; de link zelf
   draagt aria-label="Ontdek jouw profiel", dus een schermlezer hoort
   altijd de volledige naam, wat er ook zichtbaar is. */
.nav-actie .nav-kort{display:none}
@media (max-width:480px){
  .nav-actie .nav-lang{display:none}
  .nav-actie .nav-kort{display:inline}
}
@media (max-width:400px){
  .nav-actie .btn,.nav-actie .knop{white-space:nowrap}
}


/* ============================================================
   De fijne regel onderaan de voet, 20 september 2026

   Privacy, Voorwaarden en Cookies stonden er wit in, op grijze tekst.
   Het verschil tussen link en omringende tekst haalde 2,13:1, en WCAG
   vraagt 3:1 zodra kleur het enige verschil is. Een streepje eronder
   lost dat op zonder aan de kleuren te raken.

   Deze regel staat hier en niet in blog.css, want de twintig losse
   pagina's laden blog.css niet: die hebben hun eigen stijlblok. balk.css
   staat wel op alle 70 pagina's.
   ============================================================ */
.voet .fijn a{border-bottom:1px solid rgba(255,255,255,.45)}
.voet .fijn a:hover{border-bottom-color:var(--accent-licht,#D9A066)}


/* ============================================================
   De twee routes, 22 september 2026 (Project 2)

   Het blok "Hoe wil je hiermee verder?" met twee gelijkwaardige kaarten:
   Ik wil zelf beginnen (salie) en Ik wil samen aan de slag (wit met een
   amberen accent). De teksten komen uit gereedschap/routes.py; het blok
   staat op de home, de vijf kamerpagina's en onder de blogartikels.

   Het staat hier en niet in blog.css, want de home laadt blog.css niet.
   Alle kleuren staan hier voluit, met de tokens uit het bouwboek: zo werkt
   het blok in beide stijlbronnen. Geen rood-groen: amber blijft de enige
   actiekleur, salie is een grond en nooit een knop.
   ============================================================ */
.routes{padding:clamp(52px,6vw,84px) 0;--rt-rand:#E0D7C9}
.routes-kop{max-width:40em;margin:0 0 clamp(22px,3vw,30px)}
.routes h2{font-size:clamp(26px,3vw,36px);line-height:1.15;margin:0 0 .4em;color:#0E1F2E;font-weight:600}
.routes-lead{font-size:18.5px;line-height:1.6;color:#4A5A69;margin:0;max-width:36em}
.routes-kaarten{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:clamp(18px,2.4vw,28px);align-items:stretch}
.route-kaart{display:flex;flex-direction:column;border-radius:20px;padding:clamp(26px,3vw,38px);
  background:#fff;border:1px solid var(--rt-rand)}
.route-kaart--zelf{background:#DEDFD0;border-color:#CDCFBC}
.route-kaart--samen{border-top:3px solid #C17F3A}
.route-label{display:flex;align-items:center;gap:10px;font-size:12.5px;font-weight:500;letter-spacing:2.2px;
  text-transform:uppercase;color:#0E1F2E;margin:0 0 14px;max-width:none}
.route-label::before{content:"";width:24px;height:2px;background:#C17F3A;flex:none}
.route-kaart--zelf .route-label{color:#59634F}
.route-kaart h3{font-size:clamp(21px,2vw,24px);line-height:1.25;margin:0 0 10px;color:#0E1F2E;font-weight:600;text-wrap:balance}
.route-kaart p{font-size:16.5px;line-height:1.6;color:#0E1F2E;margin:0 0 22px;max-width:none}
.route-kaart .route-knop,.route-kaart .cj-inschrijf{margin-top:auto}
.route-knop{display:inline-block;width:fit-content;background:#C17F3A;color:#0E1F2E;font-family:inherit;font-size:15.5px;
  font-weight:600;line-height:1.3;padding:14px 26px;border-radius:12px;text-decoration:none;border:0;cursor:pointer;
  transition:background-color .16s ease,transform .16s ease}
.route-knop:hover{background:#CF8C46;transform:translateY(-1px)}
.route-knop:active{transform:translateY(0)}
.route-knop:focus-visible{outline:3px solid #0E1F2E;outline-offset:3px}
@media (prefers-reduced-motion:reduce){.route-knop{transition:none}.route-knop:hover{transform:none}}
/* Regie: het gesprek weegt zichtbaar zwaarder. De zelfkaart houdt een
   lijnknop, de begeleide kaart de gevulde. */
.routes--zwaar .route-kaart--zelf .route-knop{background:transparent;box-shadow:inset 0 0 0 1.5px #0E1F2E}
.routes--zwaar .route-kaart--zelf .route-knop:hover{background:#0E1F2E;color:#fff}
.routes--zwaar .routes-kaarten{grid-template-columns:minmax(0,.9fr) minmax(0,1.1fr)}
/* Het inschrijfformulier in een kaart (spiekblad, werkboek): dezelfde
   component als overal, de knop op de maat van de andere routeknop. */
.route-kaart .cj-inschrijf{margin-bottom:0}
.route-kaart .cj-velden{display:flex;gap:12px;flex-wrap:wrap;align-items:stretch}
.route-kaart .cj-veld{flex:1 1 140px;min-width:0;display:flex}
.route-kaart .cj-veld input{width:100%;font-family:inherit;font-size:16px;font-weight:300;color:#0E1F2E;
  background:#fff;border:1px solid #CDCFBC;border-radius:12px;padding:13px 16px}
.route-kaart .cj-veld input::placeholder{color:#5C6B79;opacity:1}
.route-kaart .cj-veld input:focus-visible{outline:2px solid #87521C;outline-offset:1px}
.route-kaart .cj-velden .route-knop{flex:0 0 auto;white-space:nowrap}
.route-kaart .cj-velden .route-knop[disabled]{opacity:.7;cursor:default;transform:none}
.route-kaart .cj-hp{position:absolute;left:-9999px;width:1px;height:1px;overflow:hidden}
.route-kaart .cj-fout{color:#8F2F2F;font-size:14.5px;margin:10px 0 0;min-height:0}
.route-kaart .cj-fout:empty{display:none}
.route-kaart .cj-fijn{font-size:13.5px;line-height:1.5;color:#4A5A69;margin:12px 0 0}
.route-kaart .cj-inschrijf--klaar{border-left:2px solid #C17F3A;padding:2px 0 2px 18px}
.route-kaart .visueel-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
@media (max-width:860px){
  .routes-kaarten,.routes--zwaar .routes-kaarten{grid-template-columns:1fr}
}
@media (max-width:640px){
  .routes{padding:44px 0 52px}
  .route-kaart{padding:24px 22px}
  .route-kaart .route-knop{width:100%;text-align:center;min-height:48px}
  .route-kaart .cj-veld,.route-kaart .cj-velden .route-knop{flex:1 1 100%}
}
/* Na een inschrijving op het Magazine: twee tekstlinks als kleine bedankstap
   (contact.js, Project 2). Staat hier omdat balk.css op elke pagina laadt. */
.cj-klaar-verder{font-size:15.5px;line-height:1.6;color:#0E1F2E;margin:10px 0 0}
.cj-klaar-verder a{color:#87521C;text-decoration:underline;text-underline-offset:3px;font-weight:500}
.cj-klaar-verder a:hover{color:#0E1F2E}

/* ---- de koepelzin in de voet, 22 september 2026 (project 3) ----
   Een eigen regel met wat lucht eronder, zodat de zin op een smal scherm in twee
   regels mag breken zonder in de regel over Jan te lopen. */
.voet .voet-koepel{display:block;color:#fff;font-weight:400;margin-bottom:6px}

/* ---- de voet compacter, 22 september 2026 (Jan) ----
   Ongeveer een kwart minder hoogte: minder lucht in de merkrij en tussen de
   kolommen en de onderregel. De opmaak van de voet staat per pagina (in index.html
   voor de gebouwde pagina's, in blog.css voor de blog); deze regels laden overal
   erna en winnen dus. De mobiele maten staan in mobiel.css. */
.voet{padding:40px 0 28px}
.voet .voet-merk{padding-bottom:24px;margin-bottom:26px;gap:28px}
.voet .merk--voet img{height:48px}
.voet .voet-koepel{margin-bottom:4px}
.voet .voet-rijen{margin-bottom:26px;gap:22px 28px}
.voet h3{margin-bottom:10px}
.voet li{padding:4px 0}
.voet .fijn{padding-top:18px}
/* Plan een eerste gesprek: de eerste link van Contact, met een klein amberen accent en geen knop */
.voet a.voet-accent{color:var(--accent-licht,#D9A066)}
.voet a.voet-accent:hover{color:#fff}

/* ---- 25 september 2026: Contact staat ook op desktop in de balk ----
   Daardoor wordt het tussen 821 en 1060 pixels krap. Geen woord mag er
   over twee regels gaan, het logo krimpt niet mee, en in die smalle
   strook toont de knop de korte tekst Doe de test. */
@media (min-width:821px){
  .nav-links > a,.nav-groep > a{white-space:nowrap}
  .nav-logo,.nav-logo img{flex:none}
}
@media (min-width:821px) and (max-width:1060px){
  .nav-links{gap:18px}
  .nav-actie .nav-lang{display:none}
  .nav-actie .nav-kort{display:inline}
}
@media (min-width:821px) and (max-width:920px){
  .nav-links{gap:13px}
  .nav-links > a,.nav-groep > a{font-size:14.5px}
  .nav-inner{gap:14px}
}

/* linkregel, regel 7 (Jan, 27 september 2026): een link naar een andere site krijgt een klein
   pijltje, en voor schermlezers een onzichtbare zin. Zie gereedschap/linkregel.py. */
.visueel-weg{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0;padding:0;margin:-1px}
.extern-pijl{font-size:.85em}

/* ---- 28 september 2026: koppen zonder weesje ----
   Een kop die over twee regels gaat, verdeelt de woorden nu evenwichtig over die regels,
   in plaats van één los woord onderaan ("Laten we starten met het / gesprek."). Staat hier
   omdat balk.css op elke pagina geladen wordt; blog.css deed dit al voor de blogpagina's.
   Browsers die het niet kennen, tonen de kop gewoon zoals voorheen. */
h1,h2{text-wrap:balance}
h3,h4{text-wrap:pretty}

/* ---- 28 september 2026: pdf-bladen blijven zichtbaar op elke grond ----
   De beelden van de boekjes (kaft met een blad erachter) en van de waardenkaart hebben
   bladen in salie, duifblauw en crème. Op een grond in dezelfde kleur vielen ze weg. Een
   fijne donkere rand en een zachte schaduw rond de bladen zelf (drop-shadow volgt de vorm
   van de bladen, niet het vierkant van het beeld) houden ze overal leesbaar. */
img[src*="-boekje-"],img[src*="waardenkaart-duo"],img[src*="waardenkaart-blad1"]{
  filter:drop-shadow(0 0 1px rgba(14,31,46,.35)) drop-shadow(0 8px 16px rgba(14,31,46,.14))}

/* Verwijzing naar het privacybeleid onder elk inschrijfformulier (contact.js,
   review 29 september 2026, A6). Neemt de kleur van het blok over, zodat ze op
   een lichte en een donkere grond leesbaar blijft. */
.cj-privacy{font-size:12.5px;line-height:1.45;margin:6px 0 0;color:inherit;opacity:.85}
.cj-privacy a{color:inherit;text-decoration:underline;text-underline-offset:2px}

/* Een knop voor iets dat nog niet te koop is (Maak tijd, 29 september 2026): geen link,
   omlijnd in plaats van gevuld, zodat ze niet als bestelknop leest. */
.knop.knop-binnenkort{background:transparent;color:inherit;border:1.5px solid currentColor;box-shadow:none;cursor:default}
.knop.knop-binnenkort:hover{background:transparent;transform:none}