/* ============================================================
   Header 2026 — Ed Controls
   Inhoudsvlak 1224px, gelijk aan de oude header.
   Kleuren en maten komen uit de stijltab, zie module.html.
   ============================================================ */

/* Zonder border-box telt padding bij de breedte op, waardoor het
   inhoudsvlak breder uitvalt dan bedoeld. Het thema garandeert dit
   niet, dus zetten we het hier voor alles binnen de header. */
.ec-nav,
.ec-nav *,
.ec-nav *::before,
.ec-nav *::after,
.ec-mob,
.ec-mob * {
  box-sizing: border-box;
}

.ec-nav {
  --ec-light: #F2F5F9;
  --ec-tint: #E8F1FE;
  --ec-border: var(--border-subtle, #E3E8EF);
  --ec-text: #0B1B2B;
  --ec-muted: var(--text-muted, #77808C);
  --ec-navy: var(--ed-navy-700, #122E44);

  position: relative;
  z-index: 50;
  font-family: var(--font-family, 'Montserrat', system-ui, sans-serif);
  color: var(--ec-text);
}

/* Plakken bij het scrollen.
   Sticky werkt hier niet: tussen de header en .page zitten twee
   wrappers die allebei precies zo hoog zijn als de header zelf, en
   een sticky element kan niet buiten zijn eigen ouder plakken. Die
   wrappers hebben geen klasse die ik van hieruit kan aanspreken.
   Daarom fixed, met een opvulling eronder zodat de pagina niet
   omhoog springt onder de balk. */
.ec-nav--sticky {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* De opvulling: even hoog als de balk, zodat de inhoud eronder begint.
   De hoogte komt uit module.html, want deze wrapper is geen kind van
   .ec-nav en kent de variabele daarvan niet. */
.header_partial_wrapper:has(.ec-nav--sticky) {
  height: var(--ec-bar-space, 88px);
}

.ec-nav a { text-decoration: none; }
.ec-nav a:hover { text-decoration: none; }

.ec-nav__inner {
  position: relative;
  /* Gelijk aan de oude header: inhoudsvlak 1224px. Dat is 6px breder
     dan de footer en de andere modules, die op 1218 zitten. */
  max-width: 1288px;
  margin: 0 auto;
  padding: 0 32px;
  height: var(--ec-bar-h, 88px);
  display: flex;
  align-items: center;
  gap: 40px;
}

/* ---------- Logo ---------- */

.ec-nav__logo {
  flex: 0 0 auto;
  display: block;
  transition: transform .18s ease;
}

.ec-nav__logo img { display: block; }
.ec-nav__logo:hover { transform: scale(1.04); }

/* ---------- Hoofdmenu ---------- */

.ec-nav__menu {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
  height: 100%;
}

.ec-nav__item {
  position: static;
  height: 100%;
  display: flex;
  align-items: center;
}

.ec-nav__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  height: 100%;
  padding: 0 14px;
  font-size: 16px;
  color: var(--ec-text);
  background: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  transition: color .15s ease;
}

.ec-nav__link:hover,
.ec-nav__item.is-open > .ec-nav__link { color: var(--ec-accent); }

.ec-nav__link::after {
  content: "";
  position: absolute;
  left: 14px;
  right: 14px;
  bottom: 22px;
  height: 2px;
  background: var(--ec-accent);
  border-radius: 2px;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s cubic-bezier(.22,.61,.36,1);
}

.ec-nav__link:hover::after,
.ec-nav__item.is-open > .ec-nav__link::after { transform: scaleX(1); }

/* ---------- Rechterkant ---------- */

.ec-nav__right {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 24px;
  height: 100%;
}

.ec-nav__icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--ec-muted);
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.ec-nav__icon-btn:hover { background: var(--ec-light); color: var(--ec-accent); }

.ec-nav__meta {
  font-size: 15px;
  font-weight: 500;
  color: var(--ec-muted);
  background: none;
  border: 0;
  font-family: inherit;
  padding: 6px 2px;
  cursor: pointer;
  transition: color .15s ease;
}

.ec-nav__meta:hover,
.ec-nav__item.is-open > .ec-nav__meta { color: var(--ec-accent); }

.ec-nav__login {
  font-size: 15px;
  font-weight: 600;
  color: var(--ec-text);
  transition: color .15s ease;
}

.ec-nav__login:hover { color: var(--ec-accent); }

.ec-nav__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 30px;
  border-radius: 100px;
  background: var(--ec-accent);
  color: #fff;
  font-size: 16px;
  font-weight: 600;
  white-space: nowrap;
  transition: background .18s ease, transform .18s ease, box-shadow .18s ease;
}

.ec-nav__cta:hover {
  background: #0059C9;
  color: #fff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 110, 245, .32);
}

.ec-nav__cta:active { transform: translateY(0); }

/* ---------- Zoeken ---------- */

/* De zoekknop is een link naar de zoekpagina. */
a.ec-nav__icon-btn { color: var(--ec-muted); }

.ec-mob__searchlink {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 4px;
  margin-bottom: 8px;
  font-size: 16px;
  font-weight: 600;
  color: var(--ec-text);
}

.ec-mob__searchlink:hover { color: var(--ec-accent); }

/* ---------- Uitklapmenu ---------- */

.ec-drop {
  position: absolute;
  top: calc(100% + var(--ec-drop-offset, 12px));
  z-index: 40;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 18px 48px rgba(19, 38, 73, .12);
  padding: 28px;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: opacity .2s ease, transform .22s cubic-bezier(.22,.61,.36,1), visibility .22s;
}

.ec-nav__item.is-open .ec-drop {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Onzichtbare brug, zodat het menu niet dichtvalt terwijl je muis
   de tussenruimte passeert. Altijd hoger dan de ingestelde afstand. */
.ec-drop::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: calc(var(--ec-drop-offset, 12px) * -1 - 8px);
  height: calc(var(--ec-drop-offset, 12px) + 8px);
}

.ec-drop--narrow { width: var(--ec-drop-narrow, 520px); }
.ec-drop--medium { width: var(--ec-drop-medium, 700px); }
/* Loopt precies van de linkerrand van het logo tot de rechterrand van
   de knop, want het inhoudsvlak is nu het ankerpunt. */
.ec-drop--wide {
  left: 32px;
  right: 32px;
  width: auto;
  max-width: none;
}
/* Gecentreerd onder de NL-knop. De translate op de x-as hoort bij het
   centreren, die op de y-as bij het open- en dichtgaan, dus staan ze
   samen in een regel. */
.ec-drop--lang {
  width: 220px;
  padding: 20px;
  left: 50%;
  right: auto;
  transform: translate(-50%, -8px);
}

.ec-nav__item.is-open .ec-drop--lang {
  transform: translate(-50%, 0);
}

.ec-drop__grid {
  display: grid;
  gap: 40px;
  /* stretch zorgt dat elke kolom even hoog wordt als de hoogste,
     zodat het klantverhaal niet onder de kaart uitsteekt */
  align-items: stretch;
}

.ec-drop__grid--1 { grid-template-columns: 1fr; }
.ec-drop__grid--2 { grid-template-columns: 1fr 1fr; gap: 32px; }
.ec-drop__grid--3 { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 300px; }

.ec-drop__col { display: flex; flex-direction: column; }
.ec-drop__col > .ec-story { flex: 1; }

.ec-drop__eyebrow {
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--ec-muted);
  margin: 0 0 16px;
}

/* ---------- Rij met icoon ---------- */

.ec-row {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  transition: background .16s ease;
}

.ec-row:hover { background: var(--ec-light); }

.ec-row__icon {
  flex: 0 0 auto;
  width: 46px;
  height: 46px;
  border-radius: 12px;
  background: var(--ec-tint);
  color: var(--ec-accent);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background .16s ease, color .16s ease, transform .16s ease;
}

.ec-row:hover .ec-row__icon {
  background: var(--ec-accent);
  color: #fff;
  transform: translateY(-1px);
}

.ec-row__icon svg,
.ec-row__icon img { width: 22px; height: 22px; }

.ec-row__text { display: block; }

.ec-row__title {
  display: block;
  font-size: 16px;
  font-weight: 600;
  margin: 2px 0 2px;
  color: var(--ec-text);
  transition: color .16s ease;
}

.ec-row:hover .ec-row__title { color: var(--ec-accent); }

.ec-row__desc {
  display: block;
  font-size: 14px;
  line-height: 1.45;
  color: var(--ec-muted);
  max-width: 320px;
}

/* ---------- Kale links ---------- */

/* Twee tekstkolommen in plaats van een raster. In een raster deelt
   elke rij zijn hoogte met de cel ernaast, dus zodra een label over
   twee regels breekt schuift de buur mee. Per taal breken andere
   labels af, en dan oogt elke variant anders. Zo houdt elk item zijn
   eigen hoogte en is de afstand overal gelijk. */
.ec-links {
  columns: 2;
  column-gap: 32px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ec-links li {
  break-inside: avoid;
  -webkit-column-break-inside: avoid;
}

.ec-links a {
  display: block;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ec-text);
  transition: background .16s ease, color .16s ease, padding-left .16s ease;
}

.ec-links a:hover {
  background: var(--ec-light);
  color: var(--ec-accent);
  padding-left: 18px;
}

.ec-links a.is-muted { color: var(--ec-muted); }

/* ---------- Voetregel ---------- */

.ec-drop__foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid var(--ec-border);
  font-size: 14px;
  color: var(--ec-muted);
}

.ec-drop__foot-link {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ec-accent);
  font-weight: 700;
  white-space: nowrap;
  transition: gap .16s ease;
}

.ec-drop__foot-link:hover { gap: 12px; }

/* ---------- Klantverhaal ---------- */

.ec-story {
  background: var(--ec-tint);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
}

.ec-story__quote {
  font-size: 18px;
  line-height: 1.35;
  font-weight: 700;
  margin: 0 0 16px;
}

.ec-story__who {
  font-size: 13px;
  line-height: 1.45;
  color: var(--ec-muted);
  margin: 0;
}

.ec-story__link {
  margin-top: auto;
  padding-top: 20px;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--ec-accent);
  font-weight: 700;
  font-size: 15px;
  transition: gap .16s ease;
}

.ec-story__link:hover { gap: 12px; }

/* ---------- Taalkeuze ---------- */

.ec-nav__item--lang { position: relative; }

/* ---------- De automatische taalkiezer van HubSpot ----------
   HubSpot levert zijn eigen opbouw aan, met een wereldbol en een
   lijst die normaal pas bij hover verschijnt, in een eigen kader.
   Binnen onze dropdown moet dat alles weg en moet de lijst er
   uitzien als de handmatige variant. Vandaar de harde reset: dit
   is opmaak over markup die we niet zelf schrijven. */

.ec-langs--auto,
.ec-langs--auto * {
  box-sizing: border-box;
}

.ec-langs--auto .hs_cos_wrapper,
.ec-langs--auto .lang_switcher_class,
.ec-langs--auto .globe_class,
.ec-langs--auto .lang_list_class,
.ec-langs--auto .lang_list_class li {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  position: static !important;
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  transform: none !important;
  background: none !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  height: auto !important;
  list-style: none !important;
  text-align: left !important;
}

/* De bol en de labels die het thema erbij zet blijven weg. */
.ec-langs--auto .globe_class::before,
.ec-langs--auto .globe_class::after,
.ec-langs--auto .lang_switcher_label,
.ec-langs--auto .header__language-switcher-label-current {
  display: none !important;
}

/* De regels zelf, in dezelfde vorm als de handmatige lijst. */
.ec-langs--auto .lang_switcher_link {
  display: flex !important;
  align-items: center;
  gap: 12px;
  padding: 10px 12px !important;
  border-radius: 10px !important;
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
  color: var(--ec-text) !important;
  background: none !important;
  text-decoration: none !important;
  white-space: nowrap;
  text-align: left !important;
  transition: background .16s ease, color .16s ease;
}

.ec-langs--auto .lang_switcher_link:hover {
  background: var(--ec-light) !important;
  color: var(--ec-accent) !important;
}

/* De vlag ervoor, op basis van het lang-attribuut van HubSpot. */
.ec-langs--auto .lang_switcher_link::before {
  font-size: 18px;
  line-height: 1;
  flex: 0 0 auto;
}

.ec-langs--auto .lang_switcher_link[lang="nl"]::before { content: "\1F1F3\1F1F1"; }
.ec-langs--auto .lang_switcher_link[lang="de"]::before { content: "\1F1E9\1F1EA"; }
.ec-langs--auto .lang_switcher_link[lang="en"]::before { content: "\1F1EC\1F1E7"; }
.ec-langs--auto .lang_switcher_link[lang="en-us"]::before { content: "\1F1FA\1F1F8"; }

/* Korte codes in plaats van de volledige namen. HubSpot kent geen
   stand met afkortingen, dus de naam wordt met opmaak verborgen en
   de code ervoor in de plaats gezet. De echte tekst blijft in de
   HTML staan, dus schermlezers lezen nog steeds de taalnaam. */
.ec-langs--code .lang_switcher_link {
  font-size: 0 !important;
}

.ec-langs--code .lang_switcher_link::before {
  font-size: 18px;
}

.ec-langs--code .lang_switcher_link::after {
  font-size: 16px;
  font-weight: 500;
  line-height: 1.3;
}

.ec-langs--code .lang_switcher_link[lang="nl"]::after { content: "NL"; }
.ec-langs--code .lang_switcher_link[lang="de"]::after { content: "DE"; }
.ec-langs--code .lang_switcher_link[lang="en"]::after { content: "EN"; }
.ec-langs--code .lang_switcher_link[lang="en-us"]::after { content: "EN - US"; }

.ec-lang {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ec-text);
  transition: background .16s ease, color .16s ease;
}

.ec-lang:hover { background: var(--ec-light); color: var(--ec-accent); }
.ec-lang.is-current { background: var(--ec-light); font-weight: 600; }
.ec-lang span:first-child { font-size: 18px; line-height: 1; }

/* ---------- Hamburger ---------- */

.ec-nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  border: 0;
  border-radius: 12px;
  background: none;
  cursor: pointer;
}

.ec-nav__burger span {
  display: block;
  height: 2px;
  background: var(--ec-text);
  border-radius: 2px;
  transition: transform .25s ease, opacity .2s ease;
}

.ec-nav__burger[aria-expanded="true"] span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.ec-nav__burger[aria-expanded="true"] span:nth-child(2) { opacity: 0; }
.ec-nav__burger[aria-expanded="true"] span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ---------- Uitschuifpaneel ---------- */

.ec-mob {
  position: fixed;
  inset: var(--ec-bar-h, 88px) 0 0 0;
  z-index: 45;
  background: rgba(11, 27, 43, .35);
  opacity: 0;
  transition: opacity .25s ease;
}

.ec-mob.is-open { opacity: 1; }

.ec-mob__panel {
  background: #fff;
  height: 100%;
  overflow-y: auto;
  padding: 20px;
  transform: translateX(100%);
  transition: transform .3s cubic-bezier(.22,.61,.36,1);
}

.ec-mob.is-open .ec-mob__panel { transform: translateX(0); }

.ec-mob__list { list-style: none; margin: 0; padding: 0; }

.ec-mob__item { border-bottom: 1px solid var(--ec-border); }

.ec-mob__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 18px 4px;
  background: none;
  border: 0;
  font-family: inherit;
  font-size: 18px;
  font-weight: 600;
  color: var(--ec-text);
  text-align: left;
  cursor: pointer;
}

.ec-mob__chev {
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--ec-muted);
  border-bottom: 2px solid var(--ec-muted);
  transform: rotate(45deg);
  transition: transform .25s ease;
}

.ec-mob__item.is-open .ec-mob__chev { transform: rotate(-135deg); }

.ec-mob__sub {
  display: grid;
  grid-template-rows: 0fr;
  transition: grid-template-rows .3s cubic-bezier(.22,.61,.36,1);
}

.ec-mob__item.is-open .ec-mob__sub { grid-template-rows: 1fr; }

.ec-mob__sub-inner { overflow: hidden; }

.ec-mob__link {
  display: block;
  padding: 12px 4px 12px 12px;
  font-size: 16px;
  font-weight: 500;
  color: var(--ec-text);
}

.ec-mob__link:hover { color: var(--ec-accent); }

.ec-mob__foot {
  display: flex;
  flex-direction: column;
  gap: 16px;
  padding: 24px 4px 40px;
}

.ec-mob__login { font-size: 16px; font-weight: 600; color: var(--ec-text); }

.ec-mob__langs { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Toetsenbord ---------- */

.ec-nav :focus-visible {
  outline: 3px solid var(--ec-accent);
  outline-offset: 2px;
  border-radius: 8px;
}

.ec-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ---------- Kleine schermen ---------- */

@media (max-width: 1023px) {
  .ec-nav__menu,
  .ec-nav__item--lang,
  .ec-nav__meta--link,
  .ec-nav__login { display: none; }

  .ec-nav__burger { display: flex; }
  .ec-nav__inner { gap: 16px; padding: 0 20px; }
  .ec-nav__cta { padding: 0 20px; font-size: 15px; }
}

@media (min-width: 1024px) {
  .ec-mob { display: none; }
}

@media (max-width: 480px) {
  .ec-nav__cta { display: none; }
}

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  .ec-nav *,
  .ec-mob * { transition: none !important; }
}

/* ============================================================
   Taalkiezer: niet in de weg zitten als hij dicht is
   De talenlijst van HubSpot zit in het taalpaneel. Hierboven zetten we
   die met een uitroepteken op zichtbaar, om de standaardopmaak van
   HubSpot te overrulen. Gevolg: ook met een gesloten paneel blijft die
   lijst muisbewegingen opvangen, midden in het gebied waar de andere
   uitklapmenu's staan. Ging je daar met je muis langs, dan opende het
   taalmenu ongevraagd.
   Zolang het paneel dicht is laat de lijst de muis nu door. Zodra het
   open staat vervalt deze regel en werkt alles als voorheen.
   ============================================================ */

.ec-nav__item:not(.is-open) .ec-drop--lang,
.ec-nav__item:not(.is-open) .ec-drop--lang * {
  pointer-events: none !important;
}

/* ============================================================
   Glaseffect bij scrollen, en meekleuren met de achtergrond
   De twee klassen komen uit het stuk dat onderaan module.js is
   toegevoegd. Zonder script blijft de balk zoals hij was.
   ============================================================ */

/* ---------- Glas bij scrollen ---------- */

.ec-nav--sticky {
  transition:
    background-color .3s ease,
    backdrop-filter .3s ease,
    box-shadow .3s ease;
}

.ec-nav--sticky.is-scrolled {
  background-color: rgba(255, 255, 255, .72) !important;
  backdrop-filter: blur(16px) saturate(160%);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  box-shadow: 0 1px 0 rgba(19, 38, 73, .08), 0 8px 28px rgba(19, 38, 73, .06);
}

/* ---------- Donkere achtergrond eronder ---------- */

.ec-nav--sticky.is-dark.is-scrolled {
  background-color: rgba(11, 30, 58, .62) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .10), 0 8px 28px rgba(0, 0, 0, .18);
}

.ec-nav--sticky.is-dark:not(.is-scrolled) {
  background-color: transparent !important;
}

/* De teksten in de balk worden wit. Het uitroepteken is nodig omdat de
   kleuren uit de stijltab worden geïnjecteerd. */
.ec-nav--sticky.is-dark .ec-nav__link,
.ec-nav--sticky.is-dark .ec-nav__meta,
.ec-nav--sticky.is-dark .ec-nav__login,
.ec-nav--sticky.is-dark .ec-nav__icon-btn {
  color: #FFFFFF !important;
}

/* NL en Support staan normaal in grijs; op donker wordt dat een
   gedempt wit, zodat de rangorde blijft kloppen. */
.ec-nav--sticky.is-dark .ec-nav__meta,
.ec-nav--sticky.is-dark .ec-nav__login {
  color: rgba(255, 255, 255, .78) !important;
}

.ec-nav--sticky.is-dark .ec-nav__meta:hover,
.ec-nav--sticky.is-dark .ec-nav__login:hover {
  color: #FFFFFF !important;
}

/* Het streepje onder een menu-item bij hover. */
.ec-nav--sticky.is-dark .ec-nav__link::after {
  background: #FFFFFF !important;
}

/* Het zoekicoon tekent met currentColor, dus de kleur hierboven is
   genoeg. Geen achtergrond zetten: dat maakte er een wit blokje van. */
.ec-nav--sticky.is-dark .ec-nav__icon-btn svg {
  stroke: currentColor;
}

/* De streepjes van het mobiele menu zijn wel echte vlakjes. */
.ec-nav--sticky.is-dark .ec-nav__burger span {
  background-color: #FFFFFF;
}

/* De gevulde knop blijft in de accentkleur: die leest ook op donker
   goed, en is het belangrijkste element in de balk. */

/* De panelen blijven wit met donkere tekst, ook als de balk donker is.
   Ze liggen op de pagina en niet in de balk. */
.ec-nav--sticky.is-dark .ec-drop {
  color: initial;
}

/* ---------- Het witte logo ----------
   Twee logo's in de balk, waarvan er telkens een zichtbaar is. Het
   omkeren met een filter werkt hier niet: het logo is een PNG met
   kleurvlakken, en dan wordt het een wit blok. */

.ec-nav__logo img { transition: opacity .25s ease; }

.ec-nav__logo .ec-nav__logo--wit { display: none; }

.ec-nav--sticky.is-dark .ec-nav__logo .ec-nav__logo--donker { display: none; }
.ec-nav--sticky.is-dark .ec-nav__logo .ec-nav__logo--wit { display: block; }

/* ---------- Minder beweging ---------- */

@media (prefers-reduced-motion: reduce) {
  .ec-nav--sticky { transition: none; }
}

/* ==========================================================
   Glaseffect dropdowns (nov 2026)

   1. De blur van de menubalk verhuist naar een ::before-laag.
      Visueel identiek, maar nodig omdat een element met
      backdrop-filter zijn kinderen "blind" maakt voor de pagina
      erachter. Zonder deze stap werkt de dropdown-blur niet
      zodra je gescrold hebt.
   2. De dropdowns krijgen een licht glaseffect (86% wit + blur).
      Browsers zonder backdrop-filter houden het massieve wit.
   ========================================================== */

/* 1. Menubalk: glas op een eigen laag */
.ec-nav--sticky.is-scrolled {
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  background-color: transparent !important;
}

.ec-nav--sticky::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
  background-color: transparent;
  transition: background-color .25s;
}

.ec-nav--sticky.is-scrolled::before {
  background-color: rgba(255, 255, 255, .72);
  -webkit-backdrop-filter: blur(16px) saturate(160%);
  backdrop-filter: blur(16px) saturate(160%);
}

.ec-nav--sticky.is-dark.is-scrolled::before {
  background-color: rgba(11, 30, 58, .62);
}

/* 2. Dropdowns: licht glas */
@supports ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .ec-drop {
    background: rgba(255, 255, 255, .86);
    -webkit-backdrop-filter: blur(20px) saturate(160%);
    backdrop-filter: blur(20px) saturate(160%);
    box-shadow:
      inset 0 0 0 1px rgba(255, 255, 255, .6),
      0 18px 48px rgba(19, 38, 73, .12);
  }
}