/* De menubalk: op elke pagina dezelfde (BEE-637).
   De opmaak staat in scripts/menubalk.mjs en wordt in elke pagina gezet
   tussen <!-- menubalk --> en <!-- /menubalk -->. Pas hem daar aan, niet in
   een pagina: tests/menubalk.test.mjs controleert dat alle pagina's gelijk zijn.

   Richting: een zwevende balk met ronde hoeken, even breed als de inhoud.
   Bovenaan onzichtbaar, na scrollen een witte kaart met zachte schaduw.
   De links staan samen in een zacht bakje; de pagina waar je bent krijgt
   daarin een wit plaatje dat meeglijdt naar de link onder de muis. Op de
   telefoon schuift het menu open in dezelfde kaart. De taalkeuze staat
   onderaan de pagina, niet in de balk (Kees, 02-11-2026).

   Staat op zichzelf: werkt met home.css (homepage, blog) en met de
   juridische pagina's (assets/legal). Kleuren volgen home.css als die er is. */

@font-face {
  font-family: Satoshi;
  src: url(../fonts/satoshi-var.woff2) format('woff2');
  font-weight: 300 900;
  font-display: swap;
}

.menubalk {
  /* Breedte van de inhoud en de rand van de pagina; de blog zet eigen maten. */
  --mb-inhoud: 1064px;
  --mb-rand: clamp(20px, 5vw, 48px);
  /* Zo ver springt het logo in de kaart in; de kaart steekt evenveel buiten
     de inhoud uit, zodat het logo op de linkerrand van de pagina blijft. */
  --mb-in: 16px;
  --mb-hoog: 60px;
  --mb-ink: var(--ink, #17160F);
  --mb-ink2: var(--ink2, #4A473E);
  --mb-ink3: var(--ink3, #6B675D);
  --mb-lijn: var(--line, #ECEBE7);
  --mb-vlak: var(--sheet, #FFFFFF);
  --mb-knop: var(--btn, #1B1A16);
  --mb-op-knop: var(--on-btn, #FBFAF7);
  --mb-amber: #F5B400;
  --mb-bakje: color-mix(in srgb, var(--mb-ink) 4.5%, transparent);
  --mb-pil: var(--mb-vlak);
  --mb-pil-rand: 0 1px 2px rgba(23, 22, 15, .08), 0 0 0 1px rgba(23, 22, 15, .04);
  --mb-snel: 160ms;
  --mb-trans: .22s cubic-bezier(.2, .7, .2, 1);
  --mb-ease: cubic-bezier(.2, .7, .2, 1);

  position: sticky;
  top: 0;
  z-index: 40;
  padding: calc(env(safe-area-inset-top, 0px) + 10px) 0 10px;
  font-family: Satoshi, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  font-size: 15px;
  line-height: 1.2;
  color: var(--mb-ink);
  -webkit-font-smoothing: antialiased;
}
.menubalk *, .menubalk *::before, .menubalk *::after { box-sizing: border-box; }

/* De kaart. Na scrollen wordt hij wit en iets lager (3px boven en onder
   erbij): de hoogte van de hele balk blijft gelijk, de pagina springt niet. */
.menubalk-in {
  position: relative;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  column-gap: 20px;
  width: min(100% - 2 * max(8px, var(--mb-rand) - var(--mb-in)), var(--mb-inhoud) + 2 * var(--mb-in));
  margin: 0 auto;
  padding: 0 10px 0 var(--mb-in);
  border: 1px solid transparent;
  border-radius: 20px;
  background: transparent;
  transition: background-color var(--mb-trans), border-color var(--mb-trans), box-shadow var(--mb-trans), margin var(--mb-trans);
}
.menubalk.is-gescrold .menubalk-in,
.menubalk.is-open .menubalk-in {
  /* Dicht wit, geen doorschijnend glas: tekst die eronder doorschuift bleef
     als een schim zichtbaar en maakte de balk onrustig. */
  background: var(--mb-vlak);
  border-color: color-mix(in srgb, var(--mb-ink) 7%, transparent);
  box-shadow: 0 1px 2px rgba(23, 22, 15, .04), 0 12px 32px -14px rgba(23, 22, 15, .16);
}
.menubalk.is-gescrold .menubalk-in { margin: 3px auto; }
.menubalk.is-gescrold .menubalk-merk { height: calc(var(--mb-hoog) - 6px); }

.menubalk a { color: inherit; text-decoration: none; }
.menubalk :focus-visible { outline: 2px solid var(--mb-amber); outline-offset: 2px; border-radius: 999px; }

/* Logo, zoals overal op de site. Het logo bepaalt de hoogte van de balk. */
.menubalk-merk { display: flex; align-items: center; flex: none; height: var(--mb-hoog); white-space: nowrap; color: var(--mb-ink); transition: height var(--mb-trans), color var(--mb-trans); }
.menubalk-merk img { width: 24px; height: auto; margin-right: 8px; }
.menubalk-merk b { font-weight: 900; font-size: 23px; letter-spacing: -.045em; }
.menubalk-merk i { color: var(--mb-amber); font-style: normal; }
.menubalk-merk small { font-weight: 500; font-size: 15px; color: var(--mb-ink3); margin-left: 8px; transition: color var(--mb-trans); }
.menubalk .menubalk-merk:focus-visible { border-radius: 10px; }

/* Het menu: op de computer in de balk. */
.menubalk-menu { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.menubalk-menu-in { display: contents; }
.menubalk-links { position: relative; display: flex; gap: 2px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: var(--mb-bakje); transition: background-color var(--mb-trans); }
.menubalk-links li { position: relative; z-index: 1; }
.menubalk-links a {
  display: flex; align-items: center; height: 34px; padding: 0 15px; border-radius: 999px;
  font-weight: 500; color: var(--mb-ink2); white-space: nowrap;
  transition: color var(--mb-snel) var(--mb-ease), background-color var(--mb-snel), box-shadow var(--mb-snel);
}
.menubalk-links a:hover, .menubalk-links a.onder-pil { color: var(--mb-ink); }
.menubalk-links a[aria-current] {
  color: var(--mb-ink); font-weight: 600; background: var(--mb-pil);
  box-shadow: var(--mb-pil-rand);
}
/* Het witte plaatje glijdt naar de link onder de muis of met de focus, en
   terug naar de pagina waar je bent (menubalk.js). Zonder script staat het
   plaatje vast op de actieve link (hierboven). */
.menubalk-links.mb-pil a[aria-current] { background: transparent; box-shadow: none; }
.menubalk-links .menubalk-pil {
  position: absolute; z-index: 0; top: 4px; left: 0; height: 34px; width: 0;
  border-radius: 999px; background: var(--mb-pil); pointer-events: none;
  box-shadow: var(--mb-pil-rand);
  opacity: 0;
  transition: transform .22s var(--mb-ease), width .22s var(--mb-ease), opacity .18s var(--mb-ease), background-color var(--mb-trans);
}
.menubalk-links .menubalk-pil.zichtbaar { opacity: 1; }
.menubalk-links .menubalk-pil.direct { transition: none; }

/* De knop naar de wachtlijst: komt iets omhoog, het pijltje schuift mee. */
.menubalk-knop {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px; flex: none;
  height: 40px; padding: 0 16px 0 18px; border-radius: 999px;
  background: var(--mb-knop); color: var(--mb-op-knop) !important;
  font-weight: 700; font-size: 14.5px; white-space: nowrap;
  transition: transform var(--mb-snel) var(--mb-ease), box-shadow var(--mb-snel) var(--mb-ease), background-color var(--mb-trans), color var(--mb-trans);
}
.menubalk-knop svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; transition: transform var(--mb-snel) var(--mb-ease); }
.menubalk-knop:hover { transform: translateY(-1px); background: color-mix(in srgb, var(--mb-knop) 88%, #000); box-shadow: 0 8px 20px -10px rgba(23, 22, 15, .5); }
.menubalk-knop:hover svg, .menubalk-knop:focus-visible svg { transform: translateX(3px); }
.menubalk-knop:active { transform: none; box-shadow: none; }
.menubalk-knop-paneel { display: none; }

/* Menuknop, alleen op telefoon en tablet. */
.menubalk-open {
  display: none; place-items: center; flex: none; width: 44px; height: 44px; margin: 0 -4px 0 0; padding: 0;
  border: 0; border-radius: 999px; background: none; color: var(--mb-ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent; transition: background-color var(--mb-snel), color var(--mb-trans);
}
.menubalk-open:hover { background: var(--mb-bakje); }
.menubalk-open svg { grid-area: 1 / 1; width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; transition: opacity var(--mb-snel), transform .22s var(--mb-ease); }
.menubalk-open .dicht { opacity: 0; transform: rotate(-45deg); }
.menubalk.is-open .menubalk-open .open { opacity: 0; transform: rotate(45deg); }
.menubalk.is-open .menubalk-open .dicht { opacity: 1; transform: none; }

/* Homepage: de balk staat bovenaan op de donkere foto. Lichte letters, een
   bakje van donker glas en een witte knop; voorbij de foto wordt hij de
   witte kaart zoals op elke pagina (menubalk.js zet is-gescrold). */
.menubalk--foto { position: fixed; top: 0; left: 0; right: 0; }
.menubalk--foto.mb-js:not(.is-gescrold):not(.is-open) {
  --mb-ink: #FFFFFF;
  --mb-ink2: rgba(255, 255, 255, .84);
  --mb-ink3: rgba(255, 255, 255, .7);
  --mb-bakje: rgba(16, 14, 10, .28);
  --mb-pil: rgba(255, 255, 255, .16);
  --mb-pil-rand: inset 0 0 0 1px rgba(255, 255, 255, .12);
  --mb-knop: #FFFFFF;
  --mb-op-knop: #17160F;
}
.menubalk--foto.mb-js:not(.is-gescrold):not(.is-open) .menubalk-links {
  -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .1);
}
.menubalk--foto.is-weg:not(.is-gescrold):not(.is-open) .menubalk-in {
  background: rgba(16, 14, 10, .55);
  -webkit-backdrop-filter: blur(18px) saturate(1.2); backdrop-filter: blur(18px) saturate(1.2);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 12px 32px -14px rgba(0, 0, 0, .45);
}
.menubalk--foto.is-weg:not(.is-gescrold):not(.is-open) .menubalk-links { -webkit-backdrop-filter: none; backdrop-filter: none; --mb-bakje: rgba(255, 255, 255, .08); }
.menubalk--foto.mb-js:not(.is-gescrold):not(.is-open) .menubalk-knop:hover { background: #FFFFFF; box-shadow: 0 8px 22px -10px rgba(0, 0, 0, .6); }

/* Waas over de pagina als het menu open is. */
.menubalk-waas { display: none; }

@media (max-width: 879px) {
  .menubalk { --mb-hoog: 56px; --mb-in: 14px; }
  .menubalk-in { column-gap: 8px; padding-right: 8px; }
  .menubalk-knop { margin-left: auto; height: 38px; padding: 0 14px 0 16px; font-size: 14px; }
  .menubalk-open { display: grid; }
  .menubalk-links .menubalk-pil { display: none; }

  /* Het menu schuift open onder de balk, in dezelfde kaart. Dicht is het
     onzichtbaar en niet bereikbaar met Tab. */
  .menubalk-menu {
    order: 9; flex-basis: 100%; margin: 0;
    display: grid; grid-template-rows: 0fr; opacity: 0; visibility: hidden;
    transition: grid-template-rows .24s var(--mb-ease), opacity .18s var(--mb-ease), visibility 0s linear .24s;
  }
  .menubalk.is-open .menubalk-menu {
    grid-template-rows: 1fr; opacity: 1; visibility: visible;
    transition: grid-template-rows .24s var(--mb-ease), opacity .2s var(--mb-ease), visibility 0s;
  }
  .menubalk-menu-in { display: flex; flex-direction: column; min-height: 0; overflow: hidden; padding: 0 6px 0 calc(var(--mb-in) - 14px); }
  .menubalk-links { flex-direction: column; gap: 0; margin-top: 4px; padding: 6px 0 0; border-radius: 0; background: none; border-top: 1px solid var(--mb-lijn); }
  .menubalk-links a:focus-visible { border-radius: 12px; outline-offset: -2px; }
  .menubalk-links a { height: 52px; padding: 0 14px; border-radius: 12px; font-size: 19px; font-weight: 550; color: var(--mb-ink); }
  .menubalk-links a:hover { background: var(--mb-bakje); }
  .menubalk-links.mb-pil a[aria-current], .menubalk-links a[aria-current] { font-weight: 700; background: var(--mb-bakje); box-shadow: none; }
  .menubalk-knop-paneel { display: flex; height: 50px; margin: 8px 0 14px; font-size: 15.5px; }
  .menubalk-in > .menubalk-knop { transition: transform var(--mb-snel) var(--mb-ease), box-shadow var(--mb-snel), opacity var(--mb-snel); }
  .menubalk.is-open .menubalk-in > .menubalk-knop { opacity: 0; visibility: hidden; }

  .menubalk-waas {
    display: block; position: fixed; inset: 0; z-index: -1; background: rgba(23, 22, 15, .22);
    opacity: 0; visibility: hidden; transition: opacity .22s var(--mb-ease), visibility 0s linear .22s;
  }
  .menubalk.is-open .menubalk-waas { opacity: 1; visibility: visible; transition: opacity .22s var(--mb-ease), visibility 0s; }

}
/* Zonder script blijft het menu gewoon zichtbaar onder de balk. Via de
   mediaregel en niet via een klasse van het script: anders klapt het menu bij
   het laden zichtbaar dicht. */
@media (max-width: 879px) and (scripting: none) {
  .menubalk-menu { grid-template-rows: 1fr; opacity: 1; visibility: visible; }
  .menubalk-open { display: none; }
}
/* Kleine telefoons: zonder "Business" achter het logo. */
@media (max-width: 420px) {
  .menubalk-merk small { display: none; }
}
/* De kleinste telefoons (320 breed): de knop staat dan in het menu, zodat
   niets buiten beeld valt (BEE-627). */
@media (max-width: 359px) {
  .menubalk-in > .menubalk-knop { display: none; }
  .menubalk-open { margin-left: auto; }
}

/* Minder beweging gevraagd: alles springt meteen naar zijn plek. */
@media (prefers-reduced-motion: reduce) {
  .menubalk *, .menubalk-in, .menubalk-waas { transition: none !important; }
  .menubalk-knop:hover, .menubalk-knop:hover svg, .menubalk-knop:focus-visible svg { transform: none; }
}
/* Vanaf 1100 breed is de hele site iets verkleind (home.css). De balk krijgt
   dezelfde maat op elke pagina, ook op de juridische. Alleen de binnenkant:
   zoom op de meelopende balk zelf laat hem in Safari schuiven (BEE-637). */
@media (min-width: 1100px) {
  .menubalk > .menubalk-in { zoom: .82; }
}