/* Header, navigatie en mobiel menu */

/* ── HEADER ─────────────────────────────────────────────────── */
.header{
  position:fixed;top:0;left:0;right:0;z-index:200;
  height:var(--header-h);
  display:flex;align-items:center;
  transition:height .35s cubic-bezier(.2,.7,.2,1),background .35s,box-shadow .35s,border-color .35s;
  background:transparent;
  border-bottom:1px solid transparent;
}

/* ── Scrolled: frosted glass (dark hero = white tint, light bg = white+border) */
.header.scrolled{
  --header-h:66px;
  background:rgba(255,255,255,.10);
  backdrop-filter:saturate(140%) blur(18px);
  -webkit-backdrop-filter:saturate(140%) blur(18px);
  border-bottom:1px solid rgba(255,255,255,.16);
}
.header.scrolled.past-hero{
  background:rgba(251,251,249,.88);
  backdrop-filter:saturate(160%) blur(20px);
  -webkit-backdrop-filter:saturate(160%) blur(20px);
  border-bottom:1px solid var(--line);
}

/* ── NAV THEME: DARK (default = over dark hero) */
.header .brand__logo--white{display:block}
.header .brand__logo--ink{display:none}
.header .nav__link{color:#fff;font-family:var(--ff-display);font-weight:500;font-size:.95rem;letter-spacing:-.01em;position:relative;padding:4px 0;transition:color .3s}
.header .nav__link::after{content:"";position:absolute;left:0;bottom:-2px;height:2px;width:0;background:var(--magenta);transition:width .28s cubic-bezier(.2,.7,.2,1)}
.header .nav__link:hover::after,.header .nav__link.active::after{width:100%}
.header .nav__link:hover{color:var(--magenta)}
.header .nav__toggle span{background:#fff}
.header .btn--cta{color:#fff;border:1px solid rgba(255,255,255,.45);background:rgba(255,255,255,.06);padding:11px 20px;transition:all .3s}
.header .btn--cta:hover{background:#fff;color:var(--ink);border-color:#fff}

/* ── NAV THEME: LIGHT (past-hero OR subpage with light top) */
.header.past-hero .brand__logo--white{display:none}
.header.past-hero .brand__logo--ink{display:block}
.header.past-hero .nav__link{color:var(--ink)}
.header.past-hero .nav__link:hover{color:var(--magenta)}
.header.past-hero .nav__toggle span{background:var(--ink)}
.header.past-hero .btn--cta{background:var(--ink);color:#fff;border-color:var(--ink)}
.header.past-hero .btn--cta:hover{background:var(--magenta);border-color:var(--magenta)}

/* ── SUBPAGE: force light nav from scroll=0 via body[data-nav-theme=light] */
body[data-nav-theme="light"] .header{background:rgba(251,251,249,.92);border-bottom:1px solid var(--line)}
body[data-nav-theme="light"] .header .brand__logo--white{display:none}
body[data-nav-theme="light"] .header .brand__logo--ink{display:block}
body[data-nav-theme="light"] .header .nav__link{color:var(--ink)}
body[data-nav-theme="light"] .header .nav__link:hover{color:var(--magenta)}
body[data-nav-theme="light"] .header .nav__toggle span{background:var(--ink)}
body[data-nav-theme="light"] .header .btn--cta{background:var(--ink);color:#fff;border-color:var(--ink)}
body[data-nav-theme="light"] .header .btn--cta:hover{background:var(--magenta);border-color:var(--magenta)}
/* subpage scrolled — keep ink but use frosted */
body[data-nav-theme="light"] .header.scrolled{
  background:rgba(251,251,249,.92);
  border-bottom:1px solid var(--line);
}

/* ── SUBPAGES WITH DARK HERO: allow white nav until scrolled past it */
body[data-nav-theme="dark-hero"] .header{background:transparent;border-bottom:none}

.header__inner{width:100%;max-width:var(--maxw);margin:0 auto;padding:0 28px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.brand{display:flex;align-items:center;position:relative;flex-shrink:0}
.brand__logo{height:44px;width:auto;flex-shrink:0;transition:height .35s cubic-bezier(.2,.7,.2,1)}
.header.scrolled .brand__logo{height:33px}

.nav{display:flex;align-items:center;gap:34px}
.nav__links{display:flex;align-items:center;gap:30px;list-style:none}
.nav__link.active{color:var(--magenta) !important}
.header.past-hero .nav__link.active{color:var(--magenta) !important}
body[data-nav-theme="light"] .header .nav__link.active{color:var(--magenta) !important}

.nav__toggle{display:none;background:none;border:0;cursor:pointer;width:42px;height:42px;flex-direction:column;justify-content:center;gap:5px;align-items:center;padding:0}
.nav__toggle span{display:block;width:24px;height:2px;transition:all .3s}

/* Mobile menu */
.mobile-menu{position:fixed;inset:0;background:var(--ink);z-index:300;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:32px;opacity:0;pointer-events:none;transition:opacity .3s}
.mobile-menu.open{opacity:1;pointer-events:all}
.mobile-menu a{font-size:1.8rem;font-weight:700;color:#fff;letter-spacing:-.02em}
.mobile-menu a:hover{color:var(--magenta)}
.mobile-menu .btn{font-size:1rem;letter-spacing:normal}
.mobile-menu .btn--light{color:var(--ink)}
.mobile-menu .btn--light:hover{color:#fff}
.mobile-menu__close{position:absolute;top:28px;right:28px;background:none;border:0;color:#fff;font-size:2rem;cursor:pointer;line-height:1}

/* ── RESPONSIVE ─────────────────────────────────────────────── */
@media(max-width:800px){
  :root{--header-h:68px}
  .nav__links,.nav .btn--cta{display:none}
  .nav__toggle{display:flex}
}

/* ── SPOREN ───────────────────────────────────────────────────────────────
   Twee kanten van de site, één set markup in header.html en footer.html.
   build.js zet data-spoor op de body:
     mfo      kantorenkant (standaard, leidend)
     sf       Single family
     gedeeld  pagina's voor beide (contact, over, bedankpagina's); een klein
              script in layout.html zet hier het spoor dat de bezoeker het
              laatst zag, zodat menu en voet niet ineens van kant wisselen.
   Alles wat bij de andere kant hoort, is standaard verborgen; er bestaat
   geen tweede logo of tweede startpagina. Het merk wijst altijd naar index.html. */
.nav__switch{position:relative;display:inline-block;font-size:.82rem;font-weight:600;color:var(--magenta);opacity:1;white-space:nowrap;transition:opacity .2s,color .2s}
.nav__switch::after{content:"";position:absolute;left:0;bottom:-4px;height:2px;width:0;background:var(--magenta);transition:width .28s cubic-bezier(.2,.7,.2,1)}
.nav__switch:hover{color:var(--magenta)}
.nav__switch:hover::after{width:100%}
.nav__switch span[aria-hidden]{font-size:.9em}
.nav__switch-kort{display:none}
.mobile-menu__switch{font-size:1rem !important;font-weight:600 !important;opacity:.7}

/* Standaard (spoor mfo): alleen de kantorenkant zichtbaar */
.nav__links--sf,.nav__switch--mfo,.btn--cta--sf,.mm--sf,.brand--sf{display:none}
body[data-spoor="sf"] .brand--mfo,
body[data-spoor="sf"] .nav__links--mfo,
body[data-spoor="sf"] .nav__switch--sf,
body[data-spoor="sf"] .btn--cta--mfo,
body[data-spoor="sf"] .mm--mfo{display:none}
body[data-spoor="sf"] .brand--sf{display:flex}
body[data-spoor="sf"] .nav__links--sf{display:flex}
body[data-spoor="sf"] .nav__switch--mfo{display:inline-block}
body[data-spoor="sf"] .btn--cta--sf{display:inline-flex}
body[data-spoor="sf"] .mm--sf{display:block}
body[data-spoor="sf"] .mm--sf.btn{display:inline-flex}

/* Inhoud per spoor op gedeelde pagina's (bijv. bedankpagina's):
   .spoor-alleen-mfo  zichtbaar op de kantorenkant (standaard)
   .spoor-alleen-sf   zichtbaar op de kant Single family */
.spoor-alleen-sf{display:none}
body[data-spoor="sf"] .spoor-alleen-mfo{display:none}
body[data-spoor="sf"] .spoor-alleen-sf{display:block}

/* De algemene mobiele regel (.nav__links{display:none} op 800px) is minder
   specifiek dan de spoorregels hierboven; zonder deze regels blijft het
   desktopmenu op mobiel naast het hamburgermenu staan. */
@media(max-width:800px){
  body .nav .nav__links,
  body .nav .btn--cta{display:none}
}
/* Op tussenbreedtes wordt het krap naast de gespreksknop. De wissel blijft
   staan (het is de enige route naar de andere kant in de kop), maar de lange
   tekst "Voor kantoren en MFO's" wordt "Kantoren" en de ruimtes worden kleiner.
   Onder 801px neemt het hamburgermenu het over; daar staat de wissel ook in. */
@media(max-width:1180px){
  .nav__switch-lang{display:none}
  .nav__switch-kort{display:inline}
  .nav{gap:24px}
  .nav__links{gap:20px}
}
@media(max-width:960px){
  .nav{gap:18px}
  .nav__links{gap:14px}
  .nav .btn--cta{padding-left:16px;padding-right:16px}
  .header__inner{padding:0 20px}
  .brand__logo,.header.scrolled .brand__logo{height:30px}
}
@media(max-width:840px){
  .nav{gap:14px}
  .nav__links{gap:12px}
}

/* ── Taalkiezer (NL | EN). Alleen aanwezig als er een Engelse kant is. */
.nav__lang{display:inline-flex;align-items:center;gap:2px;font-size:.78rem;font-weight:700;letter-spacing:.04em;margin:0 4px 0 2px}
.nav__lang a{padding:4px 6px;border-radius:6px;color:#fff;opacity:.65;transition:opacity .2s,color .2s}
.nav__lang a:hover{opacity:1}
.nav__lang a.is-active{opacity:1;color:#fff;box-shadow:inset 0 -2px 0 var(--magenta)}
.header.past-hero .nav__lang a,body[data-nav-theme="light"] .header .nav__lang a{color:var(--ink)}
.header.past-hero .nav__lang a.is-active,body[data-nav-theme="light"] .header .nav__lang a.is-active{color:var(--ink)}
.mobile-menu__lang{display:flex;gap:8px;margin-top:24px}
.mobile-menu .mobile-menu__lang a{font-size:1rem;font-weight:700;padding:6px 14px;border:1px solid rgba(255,255,255,.35);border-radius:999px;opacity:.7}
.mobile-menu .mobile-menu__lang a.is-active{opacity:1;border-color:var(--magenta)}
@media(max-width:800px){.nav__lang{display:none}}