/* 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.
   Op gewone pagina's kleeft de balk bovenaan (sticky, in de flow); op de homepage legt reel.css hem vast (fixed). */

.balk {
  --b-ivory: #F2E8DA; --b-ivorydof: #ADA79C; --b-goud: #D3B27E; --b-charcoal: #1A1A1A;
  position: sticky; top: 0; z-index: 9990; display: flex; align-items: center; gap: 14px; height: 68px;
  padding: 0 clamp(16px, 4vw, 48px); box-sizing: border-box; width: 100%;
  background: rgba(26,26,26,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  color: var(--b-ivory); font-family: "Manrope", system-ui, sans-serif;
}
.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: var(--b-ivory); }
.balk .plateman-lus { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; display: block; background: var(--b-charcoal); max-width: none; }
.balk-naam { font-family: "Cal Sans", system-ui, sans-serif; font-size: 15px; line-height: 1.02; letter-spacing: -.01em; white-space: nowrap; }
.balk .grafiek { width: 120px; height: 26px; flex: none; overflow: visible; opacity: .95; }
.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 { font-size: 14.5px; font-weight: 600; text-decoration: none; color: var(--b-ivory); opacity: .85; white-space: nowrap; }
.balk .menu-in > a:hover { opacity: 1; color: var(--b-goud); }
.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; }
.balk .talen a { display: inline-flex; align-items: center; gap: 6px; text-decoration: none; color: var(--b-ivorydof); }
.balk .talen a[aria-current] { color: var(--b-ivory); }
.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 span { display: block; height: 2px; background: var(--b-ivory); 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); }
@media (min-width: 1024px) and (max-width: 1180px) { .balk .grafiek { width: 80px; } .balk .menu-in > a { 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; }
  .balk .menu { position: absolute; top: 100%; left: 0; right: 0; height: calc(100svh - 68px); margin: 0; z-index: 60;
    background: rgba(26,26,26,.97); backdrop-filter: blur(14px); padding: 32px 24px;
    transform: translateY(-8px); opacity: 0; pointer-events: none; transition: opacity .3s ease, transform .3s ease; }
  .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; }
  .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); }
}
@media (max-width: 560px) { .balk .grafiek, .balk-naam { display: none; } .balk .knop.klein { display: none; } }
@media (prefers-reduced-motion: reduce) { .balk .grafiek-lijn, .balk .grafiek-punt { animation: none; stroke-dashoffset: 0; } .balk .menu { transition: none; } }

/* 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: var(--b-ivory); 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: var(--b-ivory); }