/* =====================================================================
   balk.css — de vaste navbalk van klyo.nl (besluit Steven, 25 aug 2026).

   Vervangt de zwevende pil op alle sitepagina's: een balk over de
   volle breedte die bovenaan transparant is (de pagina kleurt er
   doorheen) en zich bij het scrollen vult met licht glas, zodat het
   menu leesbaar blijft. Mobiel: logo links, hamburger rechts in een
   afgerond vakje van 44px (tapdoel-wet).

   Dit bestand laadt NA de paginastijl (vlak voor </head>), zodat het
   met gelijke specificiteit de oude pil-regels overschrijft. De oude
   regels blijven als dode code staan — zelfde afspraak als bij de
   voet (voet.css). De landingspagina /website-laten-maken heeft een
   eigen donkere variant en laadt dit bestand bewust niet.
   ===================================================================== */

header nav {
  top: 0;
  left: 0;
  right: 0;
  transform: none;
  width: 100%;
  max-width: 100%;
  margin: 0;
  border-radius: 0;
  border: none;
  border-bottom: 1px solid transparent;
  background: transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: none;
  justify-content: space-between;
  align-items: center;
  padding: 14px max(32px, calc((100vw - 1240px) / 2));
  transition: background 0.35s, border-color 0.35s, box-shadow 0.35s;
}
header nav.scrolled {
  background: rgba(255, 255, 255, 0.82);
  backdrop-filter: blur(16px) saturate(180%);
  -webkit-backdrop-filter: blur(16px) saturate(180%);
  border-bottom-color: rgba(26, 26, 24, 0.08);
  box-shadow: 0 10px 30px rgba(26, 26, 24, 0.06);
}
/* Zonder backdrop-filter geen doorschijnend glas maar een dichte balk
   (glas-voorwaarde uit DESIGN.md) */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  header nav.scrolled { background: rgba(255, 255, 255, 0.97); }
}
header nav .nav-logo { margin-right: 0; }

@media (max-width: 900px) {
  header nav {
    top: 0;
    max-width: 100%;
    background: transparent;
    box-shadow: none;
    padding: calc(10px + env(safe-area-inset-top)) 18px 10px 18px;
  }
  header nav.scrolled {
    background: rgba(255, 255, 255, 0.92);
    box-shadow: 0 10px 30px rgba(26, 26, 24, 0.08);
  }
  /* Alleen logo en hamburger; de menuknop "Project starten" zit al in
     het uitklapmenu zelf. */
  header nav .nav-links { display: none; }
  header nav .nav-cta { display: none; }
  .nav-hamburger {
    display: flex;
    width: 44px;
    height: 44px;
    margin-left: 0;
    border: 1px solid rgba(26, 26, 24, 0.16);
    border-radius: 12px;
    background: rgba(26, 26, 24, 0.04);
  }
  .nav-hamburger span { left: 11px; width: 20px; }
  .nav-hamburger span:nth-child(1) { top: 15px; }
  .nav-hamburger span:nth-child(2) { top: 21px; }
  .nav-hamburger span:nth-child(3) { top: 27px; }
  .nav-hamburger.is-open span:nth-child(1),
  .nav-hamburger.is-open span:nth-child(3) { top: 21px; }
}