/* De navigatiebalk van de homepage op elke pagina (13 okt 2026, Timon). HTML: balk_html() in technisch/bouw.py.
   Zelfde regels als de balk in reel.css (homepage), hier op zichzelf staand zodat elke pagina hem kan laden.
   Kleuren en letters uit tokens.json (ronde 3): charcoal, ivory, ivorydof, goud, Cal Sans en Manrope.
   13 okt 2026, naar joincellular.com: de balk ligt vast (fixed) en is bovenaan volledig doorzichtig. Bij het
   scrollen wordt hij een zwevende pil in het midden (.pil, gezet door BALK_SCRIPT), verdwijnt hij bij verder
   naar beneden scrollen (.weg) en komt hij terug zodra je omhoog scrolt. data-top="licht" (gemeten door het
   script, of via :has als terugval) zet donkere tekst op een pagina met een lichte bovenkant. */

.balk {
  --b-ivory: #F2E8DA; --b-ivorydof: #ADA79C; --b-goud: #D3B27E; --b-charcoal: #1A1A1A;
  --b-ease: cubic-bezier(.2,.8,.2,1); --b-duur: .55s; --pil-b: 760px;
  position: fixed; top: 0; left: 50%; z-index: 9990; display: flex; align-items: center; gap: 14px; height: 68px;
  padding: 0 clamp(16px, 4vw, 48px); box-sizing: border-box; width: 100%; max-width: 100%; transform: translateX(-50%);
  background: rgba(26,26,26,0); border: 1px solid rgba(242,232,218,0); border-radius: 0; box-shadow: 0 12px 32px rgba(0,0,0,0);
  color: var(--b-ivory); font-family: "Manrope", system-ui, sans-serif;
  /* Eén element dat morpht (naar joincellular.com): breedte, hoogte, hoeken, achtergrond, blur en positie lopen samen
     met dezelfde zachte uitloop; de inhoud krimpt mee (naam, lijngrafiek en talen vouwen dicht). */
  transition: max-width var(--b-duur) var(--b-ease), height var(--b-duur) var(--b-ease), top var(--b-duur) var(--b-ease),
    padding var(--b-duur) var(--b-ease), gap var(--b-duur) var(--b-ease), border-radius var(--b-duur) var(--b-ease),
    background-color var(--b-duur) var(--b-ease), border-color var(--b-duur) var(--b-ease), box-shadow var(--b-duur) var(--b-ease),
    transform var(--b-duur) var(--b-ease), color .3s ease;
  will-change: max-width, transform;
}
.balk.meet, .balk.meet * { transition: none !important; animation: none !important; }
.balk * { box-sizing: border-box; }
.balk .sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.balk a { color: inherit; }
.balk-logo { display: flex; align-items: center; gap: 10px; flex: none; text-decoration: none; color: inherit; }
.balk .plateman-lus { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; background: var(--b-charcoal); max-width: none; transition: width var(--b-duur) var(--b-ease), height var(--b-duur) var(--b-ease); }
.balk-naam { font-family: "Cal Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.02; letter-spacing: -.01em; white-space: nowrap; overflow: hidden; max-width: 80px;
  transition: max-width var(--b-duur) var(--b-ease), opacity .3s ease, margin var(--b-duur) var(--b-ease); }
.balk .grafiek { width: 120px; height: 26px; flex: none; overflow: visible; opacity: .95; transition: width var(--b-duur) var(--b-ease), opacity .3s ease, margin var(--b-duur) var(--b-ease); }
.balk .grafiek-lijn { fill: none; stroke: var(--b-goud); stroke-width: 1.6; stroke-linecap: round; stroke-dasharray: 1; stroke-dashoffset: 1;
  animation: balk-grafiek 6s cubic-bezier(.4,0,.2,1) infinite; }
.balk .grafiek-punt { fill: var(--b-goud); offset-path: path("M0 34 C 30 33, 50 30, 70 27 S 110 24, 130 18 S 170 14, 200 8 S 225 4, 240 3");
  animation: balk-grafiekpunt 6s cubic-bezier(.4,0,.2,1) infinite; }
@keyframes balk-grafiek { 0% { stroke-dashoffset: 1; opacity: 0 } 8% { opacity: 1 } 60% { stroke-dashoffset: 0; opacity: 1 } 88% { stroke-dashoffset: 0; opacity: 1 } 100% { stroke-dashoffset: 0; opacity: 0 } }
@keyframes balk-grafiekpunt { 0% { offset-distance: 0%; opacity: 0 } 8% { opacity: 1 } 60% { offset-distance: 100%; opacity: 1 } 88% { offset-distance: 100%; opacity: 1 } 100% { offset-distance: 100%; opacity: 0 } }
.balk .menu { margin-left: auto; }
.balk .menu-in { display: flex; align-items: center; gap: 16px; }
.balk .menu-in > a, .balk .menu-sub { font-size: 14.5px; font-weight: 600; text-decoration: none; color: inherit; opacity: .85; white-space: nowrap; }
.balk .menu-in > a:hover, .balk .menu-sub:hover, .balk .menu-sub[aria-expanded="true"] { opacity: 1; color: var(--b-goud); }
.balk .menu-sub { display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; padding: 0; margin: 0; font-family: inherit; line-height: inherit; cursor: pointer; }
.balk .menu-sub svg { width: 14px; height: 14px; transition: transform .25s ease; }
.balk .menu-sub[aria-expanded="true"] svg { transform: rotate(180deg); }
.balk .talen { display: flex; gap: 10px; margin-left: 10px; padding-left: 16px; border-left: 1px solid rgba(242,232,218,.2);
  font-size: 13px; font-weight: 600; letter-spacing: .06em; overflow: hidden; max-width: 160px; white-space: nowrap;
  transition: max-width var(--b-duur) var(--b-ease), opacity .3s ease, margin var(--b-duur) var(--b-ease), padding var(--b-duur) var(--b-ease), border-color .3s ease; }
.balk .talen a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--b-ivorydof); }
.balk .talen a[aria-current] { color: inherit; }
.balk .talen .vlag { width: 18px; height: 12px; flex: none; border-radius: 2px; box-shadow: 0 0 0 1px rgba(242,232,218,.25); }
.balk .talen a:not([aria-current]) .vlag { opacity: .75; }
.balk .talen-balk { display: none; }
.balk .knop.klein { display: inline-flex; align-items: center; gap: 10px; flex: none; white-space: nowrap; border: 0; border-radius: 999px;
  padding: 10px 18px; font: 600 14px/1.2 "Manrope", system-ui, sans-serif; text-decoration: none;
  background: var(--b-goud); color: var(--b-charcoal); transition: background .25s ease; }
.balk .knop.klein:hover { background: var(--b-ivory); color: var(--b-charcoal); }
.balk a:focus-visible, .balk button:focus-visible, .balk summary:focus-visible { outline: 2px solid var(--b-goud); outline-offset: 3px; border-radius: 6px; }
.balk .menu-knop { display: none; width: 44px; height: 44px; border: 0; background: none; padding: 10px; cursor: pointer; flex: none; }
.balk .menu-knop { color: inherit; }
.balk .menu-knop span { display: block; height: 2px; background: currentColor; margin: 7px 0; transition: transform .3s ease; }
.balk .menu-knop[aria-expanded="true"] span:first-child { transform: translateY(4.5px) rotate(45deg); }
.balk .menu-knop[aria-expanded="true"] span:last-child { transform: translateY(-4.5px) rotate(-45deg); }

/* Lichte bovenkant: donkere tekst zolang de balk bovenaan en doorzichtig is. Het script meet (data-top);
   zonder script kijkt :has naar wat er onder de balk volgt (een hero of donker blok is donker). */
.balk[data-top="licht"]:not(.pil), .balk:not([data-top]):not(.pil):has(+ #inhoud + :not(.hero, .donker, .donker-groep, main)) { color: var(--b-charcoal); }
.balk[data-top="licht"]:not(.pil) .talen, .balk:not([data-top]):not(.pil):has(+ #inhoud + :not(.hero, .donker, .donker-groep, main)) .talen { border-color: rgba(26,26,26,.18); }
.balk[data-top="licht"]:not(.pil) .talen a, .balk:not([data-top]):not(.pil):has(+ #inhoud + :not(.hero, .donker, .donker-groep, main)) .talen a { color: rgba(26,26,26,.6); }
.balk[data-top="licht"]:not(.pil) .talen a[aria-current] { color: var(--b-charcoal); }
.balk[data-top="licht"]:not(.pil) .menu-in > a:hover, .balk[data-top="licht"]:not(.pil) .menu-sub:hover { color: #8A6D39; }
/* Een pagina zonder hero begint onder de vaste balk; de tussenruimte krijgt de kleur van het blok eronder. */
#inhoud:has(+ :not(.hero, .donker, .donker-groep, main)) { display: block; height: 68px; }
#inhoud:has(+ .creme) { background: var(--creme-200, #F6F6F6); }

/* De pil: zodra er gescrold is (y > 40, terug onder 12). Dezelfde balk krimpt tot een gecentreerde pil (--pil-b, door het
   script gemeten op de inhoud), op een doorschijnend donker vlak met blur, afgeronde hoeken, dunne rand en zachte schaduw. */
.balk.pil {
  top: 14px; max-width: var(--pil-b); height: 56px; gap: 10px; padding: 0 8px 0 10px; border-radius: 999px; color: var(--b-ivory);
  background: rgba(26,26,26,.78); backdrop-filter: blur(16px) saturate(1.2); -webkit-backdrop-filter: blur(16px) saturate(1.2);
  border-color: rgba(242,232,218,.14); box-shadow: 0 12px 32px rgba(0,0,0,.28);
}
.balk.pil .plateman-lus { width: 36px; height: 36px; }
.balk.pil .balk-naam, .balk.pil .grafiek, .balk.pil .menu-in > .talen { max-width: 0; width: 0; opacity: 0; margin: 0; padding: 0; border-color: transparent; pointer-events: none; }
.balk.pil .grafiek { width: 0; }
.balk.pil .menu { margin-left: 6px; }
.balk.pil .menu-in { gap: 4px; }
.balk .menu-in > a, .balk .menu-sub { padding: 8px 12px; margin: 0 -6px; border-radius: 999px; transition: background .2s ease, color .2s ease, margin var(--b-duur) var(--b-ease); }
.balk.pil .menu-in > a, .balk.pil .menu-sub { margin: 0; }
.balk.pil .menu-in > a:hover, .balk.pil .menu-sub:hover, .balk.pil .menu-sub[aria-expanded="true"] { background: rgba(242,232,218,.08); color: var(--b-ivory); }
.balk.pil .knop.klein { margin-left: 6px; padding: 9px 16px; font-size: 13.5px; }
/* Verder naar beneden scrollen: de pil schuift omhoog weg; een stukje terug omhoog en hij komt terug, met dezelfde easing. */
.balk.weg { transform: translate(-50%, -130%); pointer-events: none; }
.balk.pil.weg { transform: translate(-50%, -160%); }
.menu-open .balk.weg, .balk.sub-open.weg { transform: translateX(-50%); pointer-events: auto; }

/* Het klapmenu Resources (balk_resources in bouw.py): paneel met vier kaarten (beeld, titel, één regel).
   Open via hover, klik of toetsenbord (aria-expanded op de knop); het script zet .sub-open op de balk. */
.balk .menu-groep { position: static; }
.balk .menu-paneel {
  position: absolute; top: calc(100% + 10px); left: 50%; z-index: 5; width: min(880px, calc(100vw - 32px));
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; box-sizing: border-box;
  background: rgba(26,26,26,.9); backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2);
  border: 1px solid rgba(242,232,218,.14); border-radius: 22px; box-shadow: 0 24px 60px rgba(0,0,0,.35); color: var(--b-ivory);
  opacity: 0; visibility: hidden; transform: translate(-50%, -6px); transition: opacity .22s ease, transform .22s ease, visibility 0s linear .22s;
}
.balk .menu-groep.open .menu-paneel { opacity: 1; visibility: visible; transform: translate(-50%, 0); transition-delay: 0s; }
.balk .menu-paneel[data-n="3"] { width: min(680px, calc(100vw - 32px)); grid-template-columns: repeat(3, 1fr); }
.balk .menu-paneel[data-n="5"] { width: min(1080px, calc(100vw - 32px)); grid-template-columns: repeat(5, 1fr); }
.balk .menu-paneel::before { content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px; }
.balk .menu-kaart { display: flex; flex-direction: column; gap: 10px; padding: 8px; border-radius: 16px; text-decoration: none; color: inherit; transition: background .2s ease; }
.balk .menu-kaart:hover, .balk .menu-kaart:focus-visible { background: rgba(242,232,218,.07); }
.balk .menu-kaart img { width: 100%; height: auto; aspect-ratio: 3 / 2; object-fit: cover; border-radius: 10px; display: block; filter: saturate(.92); }
.balk .menu-kaart-tekst { display: flex; flex-direction: column; gap: 3px; padding: 0 4px 4px; }
.balk .menu-kaart b { font-family: "Cal Sans", system-ui, sans-serif; font-weight: 400; font-size: 15.5px; letter-spacing: -.005em; line-height: 1.2; }
.balk .menu-kaart small { font-size: 12.5px; line-height: 1.45; color: var(--b-ivorydof); }
.balk .menu-kaart:hover b { color: var(--b-goud); }

@media (min-width: 1024px) and (max-width: 1180px) { .balk .grafiek { width: 80px; } .balk .menu-in > a, .balk .menu-sub { font-size: 13.5px; } .balk .knop.klein { padding: 9px 14px; font-size: 13px; } }
@media (max-width: 1023px) {
  .balk .grafiek { width: 70px; }
  .balk .menu-knop { display: block; }
  /* Gsm: geen pil maar een compacte, doorschijnende balk over de volle breedte; verdwijnt eveneens bij
     naar beneden scrollen. Het menu opent als laag onder de balk. */
  .balk.pil { top: 0; max-width: 100%; height: 60px; padding: 0 16px; border-radius: 0; border-color: transparent; border-bottom-color: rgba(242,232,218,.1);
    box-shadow: 0 8px 24px rgba(0,0,0,.18); gap: 10px; }
  .balk.pil.weg { transform: translate(-50%, -110%); }
  .menu-open .balk.pil.weg { transform: translateX(-50%); }
  .balk.pil .menu { margin-left: auto; }
  .balk.pil .knop.klein { margin-left: 0; }
  .balk.pil .balk-naam { max-width: 80px; width: auto; opacity: 1; }
  .balk .menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100svh - 68px); margin: 0; z-index: 60; overflow: auto;
    background: rgba(26,26,26,.97); backdrop-filter: blur(14px); padding: 32px 24px; color: var(--b-ivory);
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
  .balk.pil .menu { height: calc(100svh - 60px); }
  .balk .menu.open { opacity: 1; transform: none; pointer-events: auto; }
  .balk .menu-in { flex-direction: column; align-items: flex-start; gap: 8px; }
  .balk .menu-in > a { font-family: "Cal Sans", system-ui, sans-serif; font-size: 34px; opacity: 1; padding: 0; margin: 0; background: none; }
  /* Resources-items staan gewoon in het uitklapmenu: geen knop, geen paneel, geen beelden. */
  /* het label van de groep wordt een klein kopje, de kaarten eronder gewone regels */
  .balk .menu-sub { display: block; pointer-events: none; margin: 18px 0 2px; font-size: 11px; letter-spacing: .14em; text-transform: uppercase; color: var(--b-ivorydof); opacity: 1; }
  .balk .menu-sub svg { display: none; }
  .balk .menu-groep { display: contents; }
  .balk .menu-paneel { position: static; width: auto; display: contents; opacity: 1; visibility: visible; transform: none; background: none; border: 0; box-shadow: none; padding: 0; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .balk .menu-paneel::before { content: none; }
  .balk .menu-kaart { padding: 0; gap: 0; border-radius: 0; background: none; }
  .balk .menu-kaart img, .balk .menu-kaart small { display: none; }
  /* Transformaties staat al in het hoofdmenu; op gsm niet twee keer. */
  .balk .menu-kaart[data-slug="transformaties"] { display: none; }
  .balk .menu-kaart-tekst { padding: 0; }
  .balk .menu-kaart b { font-family: "Cal Sans", system-ui, sans-serif; font-size: 24px; color: var(--b-ivory); opacity: .9; }
  .balk .menu-in .talen { margin: 24px 0 0; padding: 20px 0 0; border-left: 0; border-top: 1px solid rgba(242,232,218,.2); font-size: 14px; }
  .balk .talen-balk { display: flex; gap: 2px; margin: 0 0 0 auto; padding: 0; border: 0; font-size: 12px; }
  .balk .talen-balk a { padding: 6px; gap: 4px; }
  .balk .talen-balk .vlag { width: 16px; height: 11px; }
  .balk .talen-balk + .knop.klein, .balk .talen-balk + * + .knop.klein { margin-left: 8px; }
  .menu-open .balk { background: var(--b-charcoal); color: var(--b-ivory); }
  .menu-open .balk .talen a { color: var(--b-ivorydof); }
}
@media (max-width: 560px) { .balk .grafiek, .balk-naam, .balk.pil .balk-naam { display: none; } .balk .knop.klein { display: none; } }
@media (prefers-reduced-motion: reduce) {
  .balk, .balk *, .balk .menu-paneel { transition: none !important; animation: none !important; }
  .balk .grafiek-lijn, .balk .grafiek-punt { animation: none; stroke-dashoffset: 0; }
}

/* De zeven-talenkeuze van de app-pagina staat in de balk, voor de knop (bouw-app.py). Op donker. */
.balk .a-taal { flex: none; margin: 0; }
header.balk .a-taal summary { color: inherit; background: transparent; border: 1px solid rgba(242,232,218,.3); box-shadow: none; }
header.balk .a-taal summary:hover { background: rgba(242,232,218,.08); }
header.balk .a-taal summary:focus-visible { outline: 2px solid var(--b-goud); }
header.balk .a-taal .a-taal__code { color: inherit; }
.balk.pil .a-taal { display: none; }

/* Crowdfunding-link op de app-pagina's (14 okt 2026): klein, gouden lijn eronder, naast de taalkeuze. */
.balk .balk-crowd { flex: none; font-size: 13.5px; font-weight: 600; letter-spacing: .02em; text-decoration: none; color: inherit; opacity: .9;
  border-bottom: 1px solid var(--b-goud); padding-bottom: 1px; white-space: nowrap; transition: color .25s ease, opacity .25s ease; }
.balk .balk-crowd:hover { color: var(--b-goud); opacity: 1; }
@media (max-width: 1023px) { .balk .balk-crowd { font-size: 13px; } }