.site-header { position: sticky; top: 0; z-index: 50; background: rgba(255,255,255,0.72); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border-bottom: 1px solid rgba(214,214,214,0.45); transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease); }
.site-header.is-scrolled { background: rgba(255,255,255,0.86); border-bottom-color: rgba(214,214,214,0.65); box-shadow: 0 6px 24px -12px rgba(20,20,100,0.18); }
.nav { display: flex; align-items: center; gap: 32px; height: 76px; transition: height .28s var(--ease); }
/* Compacte witte balk zodra er gescrold is (bron-gedrag: header krimpt). */
.site-header.is-scrolled .nav { height: 60px; }
.site-header.is-scrolled .nav-brand img { height: 28px; }
.nav-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.nav-brand img { height: 32px; width: auto; display: block; }
.nav-links { display: flex; align-items: center; gap: 8px; margin-left: 12px; }
.nav-links > a, .nav-links .nav-trigger { font-family: var(--font-head); font-size: 15px; font-weight: 500; color: var(--c-text); text-decoration: none; background: none; border: 0; padding: 8px 14px; border-radius: 10px; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; position: relative; transition: color .15s var(--ease), background .15s var(--ease); }
.nav-links > a:hover, .nav-links .nav-trigger:hover { color: var(--c-navy); background: rgba(20,20,100,0.06); }
.nav-links a.is-active { color: var(--c-navy); font-weight: 600; }
.nav-cta { margin-left: auto; display: flex; align-items: center; gap: 12px; }
.has-menu { position: relative; }
.dropdown { position: absolute; top: calc(100% + 10px); left: -8px; background: rgba(255,255,255,0.96); backdrop-filter: saturate(160%) blur(14px); -webkit-backdrop-filter: saturate(160%) blur(14px); border: 1px solid var(--c-border); border-radius: 14px; box-shadow: 0 30px 60px -20px rgba(20,20,100,0.28), 0 6px 14px rgba(20,20,100,0.08); padding: 10px; min-width: 280px; display: none; flex-direction: column; gap: 2px; opacity: 0; transform: translateY(-4px); transition: opacity .15s var(--ease), transform .15s var(--ease); }
/* Hier stond `.has-menu:hover .dropdown, .has-menu:focus-within .dropdown`.
   Die regel deed niets: `.site-header .has-menu .dropdown { display:none
   !important }` verderop in dit bestand won er altijd van. Openen op hover
   gebeurt sinds 26-08-2026 in header.js, dat met een korte intentiedrempel
   dezelfde `.is-open` zet als de klik — één bron van waarheid, en zo blijft
   de hamburger (waar hover niet bestaat) op klik werken. */
.dropdown a { padding: 10px 12px; border-radius: 10px; font-size: 14px; font-weight: 500; color: var(--c-text); display: flex; flex-direction: column; gap: 2px; }
.dropdown a:hover { background: var(--c-bg-tint); color: var(--c-navy); }
.dropdown a small { display: block; color: var(--c-text-muted); font-size: 12px; font-weight: 400; }
button.nav-toggle { display: none; margin-left: auto; width: 40px; height: 40px; border: 1px solid var(--c-border); border-radius: 10px; background: white; cursor: pointer; }
.nav-toggle span, .nav-toggle span::before, .nav-toggle span::after { content: ""; display: block; width: 18px; height: 2px; background: var(--c-navy); margin: 0 auto; position: relative; }
.nav-toggle span::before { top: -6px; position: absolute; left: 0; right: 0; }
.nav-toggle span::after { top: 6px; position: absolute; left: 0; right: 0; }
.site-footer .nav-brand img { filter: brightness(0) invert(1); height: 30px; }

@media (max-width: 1024px) {
  .nav-links { display: none; }
  button.nav-toggle { display: grid; place-items: center; }
  .nav-cta .btn-secondary { display: none; }
  .nav.open .nav-links { display: flex; flex-direction: column; align-items: flex-start; gap: 4px; position: absolute; top: 76px; left: 0; right: 0; background: white; padding: 16px 24px 24px; border-bottom: 1px solid var(--c-border); box-shadow: var(--shadow-card); }
}

@media (max-width: 720px) {
  .nav-cta { width: 100%; }
  .nav-cta { flex-direction: column; }
}

.site-header .header-container { max-width: none; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }

@media (min-width: 1025px) {
  .site-header .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .site-header .nav-brand { justify-self: start; }
  .site-header .nav-links { justify-self: center; margin-left: 0; }
  .site-header .nav-cta { justify-self: end; margin-left: 0; }
}

button.hdr-search { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--c-border); background: var(--c-white); color: var(--c-navy); display: grid; place-items: center; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
button.hdr-search:hover { border-color: var(--c-navy); background: rgba(20,20,100,.05); }
.search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(11,10,61,.32); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 24px 0; animation: ovIn .2s var(--ease) both; }
.search-panel { width: 100%; max-width: 640px; background: var(--c-white); border-radius: 18px; box-shadow: 0 40px 80px -20px rgba(20,20,100,.5); padding: 22px; animation: cwIn .24s var(--ease) both; }
.search-bar { display: flex; align-items: center; gap: 12px; color: var(--c-navy); }
.search-bar input { flex: 1; border: 0; outline: 0; font-size: 18px; font-family: var(--font-head); color: var(--c-text); background: transparent; }
button.search-close { width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--c-bg-tint); color: var(--c-navy); cursor: pointer; display: grid; place-items: center; }
button.search-close:hover { background: var(--c-border); }
.site-header .header-container { max-width: none; width: 100%; padding-left: var(--gutter); padding-right: var(--gutter); }

@media (min-width: 1025px) {
  .site-header .nav { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 24px; }
  .site-header .nav-brand { justify-self: start; }
  .site-header .nav-links { justify-self: center; margin-left: 0; }
  .site-header .nav-cta { justify-self: end; margin-left: 0; }
}

button.hdr-search { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--c-border); background: var(--c-white); color: var(--c-navy); display: grid; place-items: center; cursor: pointer; transition: border-color .15s var(--ease), background .15s var(--ease), color .15s var(--ease); }
button.hdr-search:hover { border-color: var(--c-navy); background: rgba(20,20,100,.05); }
.search-overlay { position: fixed; inset: 0; z-index: 300; background: rgba(11,10,61,.32); backdrop-filter: blur(6px); display: flex; align-items: flex-start; justify-content: center; padding: 14vh 24px 0; animation: ovIn .2s var(--ease) both; }
.search-panel { width: 100%; max-width: 640px; background: var(--c-white); border-radius: 18px; box-shadow: 0 40px 80px -20px rgba(20,20,100,.5); padding: 22px; animation: cwIn .24s var(--ease) both; }
.search-bar { display: flex; align-items: center; gap: 12px; color: var(--c-navy); }
.search-bar input { flex: 1; border: 0; outline: 0; font-size: 18px; font-family: var(--font-head); color: var(--c-text); background: transparent; }
button.search-close { width: 34px; height: 34px; border-radius: 999px; border: 0; background: var(--c-bg-tint); color: var(--c-navy); cursor: pointer; display: grid; place-items: center; }
button.search-close:hover { background: var(--c-border); }

@media (max-width: 767px) {
  .site-header .header-container { max-width: 100%; padding-left: 20px; padding-right: 20px; }
  .site-header .nav-cta { width: auto; flex-direction: row; gap: 10px; margin-left: auto; }
  .site-header .nav-cta .btn { width: auto; }
  .site-header .nav-cta .hdr-search { display: none; }
  .site-header .nav-toggle { margin-left: 12px; }
}

.site-header .nav-brand img { height: 32px; transition: height .28s var(--ease), filter .25s var(--ease); }
.site-header.header-on-dark:not(.is-scrolled) { background: transparent; border-bottom-color: transparent; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
.site-header.header-on-dark:not(.is-scrolled) .nav-brand img { filter: none; }
.site-header.header-on-dark:not(.is-scrolled) .nav-links > a, .site-header.header-on-dark:not(.is-scrolled) .nav-links .nav-trigger { color: var(--c-navy); }
.site-header.header-on-dark:not(.is-scrolled) .nav-links > a:hover, .site-header.header-on-dark:not(.is-scrolled) .nav-links .nav-trigger:hover { color: var(--c-navy); background: rgba(20,20,100,0.06); }
.site-header.header-on-dark:not(.is-scrolled) .nav-links a.is-active { color: var(--c-navy); }
.site-header.header-on-dark:not(.is-scrolled) .hdr-search { background: rgba(20,20,100,0.04); border-color: rgba(20,20,100,0.18); color: var(--c-navy); }
.site-header.header-on-dark:not(.is-scrolled) .hdr-search:hover { background: rgba(20,20,100,0.08); border-color: rgba(20,20,100,0.35); }
.site-header.header-on-dark:not(.is-scrolled) .nav-toggle { background: rgba(20,20,100,0.04); border-color: rgba(20,20,100,0.18); }
.site-header.header-on-dark:not(.is-scrolled) .nav-toggle span, .site-header.header-on-dark:not(.is-scrolled) .nav-toggle span::before, .site-header.header-on-dark:not(.is-scrolled) .nav-toggle span::after { background: var(--c-navy); }
.site-header .has-menu .dropdown { background: #fff; backdrop-filter: none; -webkit-backdrop-filter: none; z-index: 60; }
.site-header .has-menu .dropdown { display: none !important; }
.site-header .has-menu.is-open .dropdown { display: flex !important; opacity: 1 !important; transform: translateY(0) !important; }

@keyframes ovIn { from { opacity: 0; } to { opacity: 1; } }

@keyframes cwIn { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }

/* ============================================================
   WordPress-context: vaste header + spacer.
   In de bron is de header sticky bovenin de SPA-body. In een
   Elementor Theme Builder-template zit de header in een eigen
   wrapper; position: sticky heeft daar geen scrollruimte.
   Daarom fixed + spacer (spacer vervalt bij header-on-dark,
   zodat de header transparant over de donkere hero ligt).
   ============================================================ */
.site-header.bc-header-fixed {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 90;
	border-bottom: none;
}
/* Volle-viewport-brede opake ondergrondlaag achter de container-brede
   menu-card: full-bleed content dat achter de header langs scrolt is
   anders zichtbaar in de zij-gutters en door het halftransparante glas. */
.site-header.bc-header-fixed::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 50%;
	width: 100vw;
	transform: translateX(-50%);
	background: #ffffff;
	border-bottom: 1px solid rgba(214, 214, 214, 0.55);
	z-index: -1;
	opacity: 1;
	transition: opacity .28s var(--ease), box-shadow .28s var(--ease);
}
.site-header.bc-header-fixed.is-scrolled { box-shadow: none; }
.site-header.bc-header-fixed.is-scrolled::before {
	box-shadow: 0 6px 24px -12px rgba(20, 20, 100, 0.18);
}
/* Transparante variant boven een donkere hero: geen ondergrondlaag tot er gescrold is. */
.site-header.header-on-dark:not(.is-scrolled)::before { opacity: 0; }
body.admin-bar .site-header.bc-header-fixed { top: 32px; }
@media (max-width: 782px) {
	body.admin-bar .site-header.bc-header-fixed { top: 46px; }
}
.bc-header-spacer { height: 76px; }

/* Elementor geeft widget-wrappers soms marges; neutraliseer die hier. */
.elementor-widget-bconnect_header { margin: 0 !important; }

/* ===== HARDENING — CTA-knop tegen theme-resets ===== */
.elementor-widget-bconnect_header .btn-primary {
	background: linear-gradient(90deg, #2301fb 0%, #a80290 100%) !important;
	color: #fff !important;
}
.elementor-widget-bconnect_header .btn-primary:hover {
	background: linear-gradient(90deg, #3a1eff 0%, #c213ad 100%) !important;
	color: #fff !important;
}

/* Overlay gesloten houden zolang het hidden-attribuut erop staat
   (de display:flex van .search-overlay wint anders van [hidden]). */
.search-overlay[hidden] { display: none; }

/* ===== MOBIEL: header-verhoudingen (logo groter, CTA compacter + rechts) =====
   Op mobiel stond de CTA-knop groot en gecentreerd tussen logo en hamburger,
   waardoor het logo klein/verdrukt oogde. Nu: kleinere nav-gap, groter logo,
   compactere knop en margin-left:auto zodat de knop naar rechts (bij de
   hamburger) schuift i.p.v. in het midden. Staat achteraan zodat het van de
   basis .site-header .nav-brand img (height:32px) wint. Desktop ongewijzigd. */
@media (max-width: 767px) {
  .site-header .nav { gap: 12px; }
  .site-header .nav-brand img { height: 42px; }
  /* knop compacter + naar rechts: margin-left:auto slokt de vrije ruimte vóór de
     knop op zodat 'ie richting de hamburger schuift (weg van het logo). De extra
     marge op de toggle weghalen zodat die vrije ruimte er ook echt is. */
  .site-header .nav-cta { margin-left: auto; }
  .site-header .nav-cta .btn { padding: 10px 16px; font-size: 13.5px; }
  .site-header .nav-toggle { margin-left: 0; }
}

/* ============================================================
   TAALKIEZER (31-07-2026) — port van upgrade-lang.css uit de bron
   "Privacyverklaring (standalone) (1).html". Vlagknop links van de
   zoekknop met een uitklapmenu; verving de NL/EN/FR/DE-pillen die
   eerder in de footer stonden.
   Twee WP-aanvullingen op de bron: het menu staat in de HTML met
   [hidden] i.p.v. dat React het mount, dus `[hidden]{display:none}`
   is nodig omdat een eigen display de UA-regel zou verslaan; en de
   knoppen krijgen de .hdr-lang-prefix zodat Hello's reset.css
   (`[type=button], button` op #c36 — óók in de ruststand) ze niet
   roze maakt, ongeacht de laadvolgorde.
   ============================================================ */
.hdr-lang { position: relative; }
.hdr-lang .hdr-lang-btn { width: 42px; height: 42px; border-radius: 999px; border: 1.5px solid var(--c-border, #E2E4EC); background: var(--c-white, #fff); display: grid; place-items: center; cursor: pointer; padding: 0; transition: border-color .15s var(--ease), background .15s var(--ease); }
.hdr-lang .hdr-lang-btn:hover, .hdr-lang .hdr-lang-btn:focus { border-color: var(--c-navy, #141464); background: rgba(20,20,100,.05); color: var(--c-navy, #141464); }
.hdr-lang .hdr-lang-btn:active { transform: translateY(1px) scale(.99); }
.lg-flag { display: block; width: 20px; height: 14px; border-radius: 3px; overflow: hidden; box-shadow: 0 0 0 1px rgba(20,20,100,.12); }
.lg-flag svg { display: block; width: 100%; height: 100%; }
.hdr-lang-menu { position: absolute; top: calc(100% + 10px); right: 0; min-width: 212px; background: rgba(255,255,255,.94); backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px); border: 1px solid var(--c-border, #E2E4EC); border-radius: 14px; padding: 6px; box-shadow: 0 2px 6px rgba(20,20,100,.08), 0 18px 44px rgba(20,20,100,.16); z-index: 60; animation: lgIn .16s cubic-bezier(.2,.7,.2,1); }
.hdr-lang-menu[hidden] { display: none; }
@keyframes lgIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } }
.hdr-lang .hdr-lang-item { display: flex; align-items: center; gap: 10px; width: 100%; border: 0; background: transparent; padding: 9px 10px; border-radius: 10px; cursor: pointer; text-align: left; transition: background .15s cubic-bezier(.2,.7,.2,1); }
.hdr-lang .hdr-lang-item:hover, .hdr-lang .hdr-lang-item:focus { background: #F4F5FA; }
.hdr-lang .hdr-lang-item.is-on { background: rgba(35,1,251,.06); }
.hdr-lang-name { font-family: var(--font-head, "Roc Grotesk", system-ui); font-size: 14px; color: var(--c-navy, #141464); flex: 1; }
.hdr-lang-short { font-family: var(--font-head, "Roc Grotesk", system-ui); font-size: 11px; letter-spacing: .08em; color: #7B8190; }
.hdr-lang .hdr-lang-item.is-on .hdr-lang-short { color: var(--c-magenta, #AA028E); }
.hdr-lang-note { font-size: 11.5px; color: #7B8190; padding: 8px 10px 4px; margin-top: 4px; border-top: 1px solid #ECEEF4; }

/* Transparante header boven een donkere hero: knop iets ingetogener. */
.site-header.header-on-dark:not(.is-scrolled) .hdr-lang .hdr-lang-btn { background: rgba(20,20,100,.04); border-color: rgba(20,20,100,.18); }
.site-header.header-on-dark:not(.is-scrolled) .hdr-lang .hdr-lang-btn:hover { background: rgba(20,20,100,.08); border-color: rgba(20,20,100,.35); }

/* Onder 1025px zit de navigatie in het hamburgermenu; de taalkiezer
   valt daar weg (zelfde keuze als in de bron). */
@media (max-width: 1024px) { .site-header .nav-cta .hdr-lang { display: none; } }

/* ============================================================
   Dropdown in twee kolommen (11-08-2026).

   Alleen voor dropdowns met kolomkoppen (# in de textarea-control);
   .dropdown-cols wordt dan naast .dropdown gezet. Branches heeft geen
   koppen en krijgt deze class niet, dus die blijft de smalle
   één-koloms lijst die hij was.

   Staat bewust achteraan het bestand: de blokken hierboven zetten
   display met !important op .dropdown, en flex-direction hoort daar
   niet bij. Deze regels vullen aan, ze vechten niet.
   ============================================================ */
.dropdown-cols { flex-direction: row; align-items: flex-start; gap: 4px; padding: 14px; }
.dropdown-cols .dd-col { display: flex; flex-direction: column; gap: 2px; min-width: 244px; }
.dropdown-cols .dd-col + .dd-col { border-left: 1px solid var(--c-border); padding-left: 10px; margin-left: 6px; }
.dropdown-cols .dd-col-title { font-family: var(--font-head); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--c-text-muted); padding: 4px 12px 6px; }

/* "Over ons" is het laatste menu-item en de nav staat gecentreerd; een
   dubbelbrede dropdown die vanaf links uitklapt zou rechts buiten beeld
   vallen. Daarom vanaf de rand van de knop naar links openen. */
@media (min-width: 1025px) {
  .site-header .has-menu .dropdown-cols { left: auto; right: -8px; }
}

/* Onder 1025px zit het menu in de hamburger en is er geen ruimte voor
   twee kolommen naast elkaar: terug naar één kolom, met de koppen als
   scheiding in plaats van de verticale streep. */
@media (max-width: 1024px) {
  .dropdown-cols { flex-direction: column; padding: 10px; }
  .dropdown-cols .dd-col { min-width: 0; }
  .dropdown-cols .dd-col + .dd-col { border-left: 0; padding-left: 0; margin-left: 0; border-top: 1px solid var(--c-border); margin-top: 6px; padding-top: 6px; }
}

/* ============================================================
   Mobiel uitklapmenu: dropdowns in de flow, paneel scrollbaar
   (11-08-2026).

   Twee dingen gingen mis zodra "Over ons" of "Branches" openging.

   1) .dropdown is position:absolute. Op desktop hoort dat zo — hij
      zweeft als kaartje onder de knop. In het uitklapmenu staat hij
      daardoor búiten de flow: het paneel groeit niet mee, alles onder
      de kop "Samenwerken" viel buiten beeld, en er was niets om naar
      te scrollen omdat het paneel zelf niet hoger werd. Hier zetten
      we hem terug in de flow.

   2) Diezelfde absolute plaatsing hangt aan .has-menu, en dat staat
      binnen de 24px zijpadding van het paneel. Met left:-8px begon de
      dropdown dus 16px van de paneelrand: dat was de lege strook
      links. In de flow op volle breedte is die weg.

   Het paneel krijgt daarnaast een maximale hoogte en eigen scroll, zodat
   een lange lijst ook op een kort scherm bereikbaar blijft. 76px is de
   hoogte van de headerbalk, waar het paneel met top:76px onder hangt.

   Het kaartje (rand, schaduw, blur, eigen achtergrond) vervalt hier: in
   het paneel staat het al op wit en zou het een doos-in-een-doos zijn.
   De scheidingslijn tussen de twee kolomkoppen blijft wel staan — die
   komt uit de .dd-col + .dd-col-regel hierboven.

   Waarom hier en niet in bconnect-mobile.css: die laag is per afspraak
   uitsluitend max-width:767px en per pagina gescoped. Dit speelt vanaf
   1024px, waar de navigatie in de hamburger schuift, en geldt sitewide.
   ============================================================ */
@media (max-width: 1024px) {
  /* margin-left:12px komt van de desktop-navigatie (.nav-links, regel 9) en
     blijft ook op het absolute paneel staan. Met left:0 én right:0 schuift
     dat het paneel 12px naar rechts terwijl de rechterkant vastgepind blijft:
     precies de lege strook links. Boven 1025px wordt de marge al op 0 gezet;
     hier dus ook. */
  .site-header .nav.open .nav-links { margin-left: 0; max-height: calc(100vh - 76px); overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .site-header .nav.open .nav-links .has-menu { width: 100%; }
  .site-header .nav.open .nav-links .dropdown { position: static; width: 100%; min-width: 0; margin: 2px 0 6px; padding: 4px 0 6px; background: none; border: 0; border-radius: 0; box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none; }
  .site-header .nav.open .nav-links .dropdown-cols { padding: 4px 0 6px; }
}