/* Site-header met megamenu — redesign 2026.
   Opbouw volgt de <nav> uit de wireframes: logo links, menu met megapanelen,
   twee CTA's rechts. Op telefoonbreedte wordt het een uitklapbaar paneel.
   Werkt zonder JS (details/summary-achtig gedrag via :focus-within); nav.js
   voegt alleen toetsenbord- en Escape-gedrag toe. */

.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  background: var(--c-sheet);
  border-bottom: 1px solid var(--c-line);
}

.site-header__bar {
  display: flex;
  align-items: center;
  gap: var(--space-5);
  min-height: 68px;
  padding-block: var(--space-3);
}

/* --- logo --- */
.site-logo { display: inline-flex; align-items: center; flex: none; }
.site-logo img { width: 152px; height: auto; }

/* --- hoofdmenu --- */
.site-nav { flex: 1 1 auto; }
.site-nav__list { display: flex; align-items: center; gap: var(--space-1); flex-wrap: wrap; }

.site-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-2) var(--space-3);
  border-radius: var(--radius-sm);
  font-family: var(--font-display);
  font-size: var(--text-sm);
  font-weight: var(--fw-medium);
  color: var(--c-ink-strong);
  text-decoration: none;
  background: none;
  border: 0;
  cursor: pointer;
}
.site-nav__link:hover { background: var(--c-surface-2); color: var(--c-accent-ink); }
.site-nav__link[aria-current="page"] { color: var(--c-accent-ink); }

.site-nav__caret { width: 8px; height: 8px; border-right: 1.5px solid currentColor; border-bottom: 1.5px solid currentColor; transform: rotate(45deg) translate(-1px, -1px); opacity: .55; }

/* --- megamenu --- */
.site-nav__item { position: relative; }

/* Brug over het gat tussen knop en paneel. Zonder deze strook verliest het item
   zijn :hover zodra de muis de tussenruimte in gaat en klapt het menu dicht
   voordat je het paneel bereikt. */
.site-nav__item[data-has-mega]::after {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: var(--space-3);
  display: none;
}
.site-nav__item[data-has-mega]:hover::after,
.site-nav__item[data-has-mega]:focus-within::after,
.site-nav__item[data-has-mega][data-open="true"]::after { display: block; }

.mega {
  position: absolute;
  top: calc(100% + var(--space-3));
  /* Blijft open zolang de muis op de brug of het paneel zelf staat. */
  left: 0;
  min-width: min(680px, 90vw);
  padding: var(--space-5);
  background: var(--c-surface);
  border: 1px solid var(--c-line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  display: none;
}
.site-nav__item:hover > .mega,
.site-nav__item:focus-within > .mega,
.site-nav__item[data-open="true"] > .mega { display: block; }

/* Onzichtbare strook bóven het paneel, die de ruimte tussen het menu-item en
   het paneel overbrugt. Hij hoort bij het paneel, dus zolang de muis eroverheen
   gaat blijft de hover op het menu-item staan en klapt het menu niet dicht.
   Ruim genomen: hij moet ook de onderrand van de headerbalk dekken. */
.mega::before {
  content: "";
  position: absolute;
  left: 0; right: 0;
  bottom: 100%;
  /* Precies de kloof (27px bij een breed paneel), niet meer: de strook ligt
     over de balk heen en zou anders de andere menu-items afdekken. */
  height: 28px;
}

.mega__title {
  font-family: var(--font-display);
  font-size: var(--text-xs);
  font-weight: var(--fw-medium);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  color: var(--c-ink-muted);
  margin-bottom: var(--space-3);
}

.mega__cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: var(--space-2) var(--space-5); }

/* Vier groepen naast elkaar passen niet onder één menu-item. Zo'n paneel hangt
   daarom aan de hele navigatiebalk (het item staat dan `static`), waardoor het
   ook bij het laatste menu-item niet buiten het vel valt. */
.site-header__bar { position: relative; }
.site-nav__item--wide { position: static; }
.mega--wide { left: 0; right: 0; min-width: 0; }

.mega__body { display: grid; gap: var(--space-6); }
.mega__body--promo { grid-template-columns: minmax(0, 1fr) minmax(0, 15rem); }

.mega__groups {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
  gap: var(--space-2) var(--space-5);
  align-items: start;
}
.mega__group { display: flex; flex-direction: column; }
.mega__group .mega__link { margin-inline: calc(var(--space-2) * -1); }

.mega__cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(240px, 100%), 1fr)); gap: var(--space-4); }
.mega__card {
  display: flex; flex-direction: column; gap: var(--space-2);
  padding: var(--space-4);
  border: 1px solid var(--c-line); border-radius: var(--radius-lg);
  color: inherit; text-decoration: none;
}
.mega__card:hover { border-color: var(--c-accent); }
.mega__card b { font-family: var(--font-display); color: var(--c-ink-strong); font-weight: var(--fw-medium); }
.mega__card span:not(.shot) { font-size: var(--text-xs); color: var(--c-ink-muted); }
.mega__card-img { min-height: 92px; }

.mega__promo { display: flex; flex-direction: column; gap: var(--space-3); align-items: flex-start; }
.mega__promo-img { min-height: 110px; width: 100%; }
.mega__promo p { font-size: var(--text-sm); color: var(--c-ink-muted); }

.mega__note { margin-left: auto; font-size: var(--text-xs); color: var(--c-ink-muted); }

.mega__link {
  display: block;
  padding: var(--space-2) var(--space-2);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  text-decoration: none;
  font-size: var(--text-sm);
}
.mega__link:hover { background: var(--c-surface-2); color: var(--c-accent-ink); }
.mega__link small { display: block; color: var(--c-ink-muted); font-size: var(--text-xs); line-height: 1.4; }

/* Sectoren staan met een icoon in het menu (wireframe). Het icoon volgt de tekstkleur en
   krijgt geen eigen kolom-breedte mee: 20px en klaar, zodat de labels uitgelijnd blijven. */
.mega__link--ico { display: flex; align-items: center; gap: var(--space-2); }
.mega__link--ico .ico { flex: 0 0 auto; width: 20px; height: 20px; color: var(--c-accent); }
.mega__link--ico:hover .ico { color: currentColor; }

.mega__foot {
  display: flex; flex-wrap: wrap; gap: var(--space-4);
  align-items: center;   /* anders rekt de Trustpilot-noot op tot de knophoogte en staat zijn tekst bovenin */
  margin-top: var(--space-4); padding-top: var(--space-4);
  border-top: 1px solid var(--c-line-soft);
}
/* De tekst van de voetlinks lijnt uit met die van de items erboven (btn--quiet heeft 0.4em opvulling). */
.mega__foot .btn--quiet { margin-inline-start: -0.4em; }
/* Twee labels voor één link, of een link die alleen op desktop hoort: zie _header.php */
.mega__mob { display: none; }

/* --- acties --- */
.site-header__actions { display: flex; align-items: center; gap: var(--space-2); flex: none; }

/* --- smal desktop (941–1080px): strakker, zodat het menu op één regel blijft ---
   Anders viel het laatste item (Kennis) naar een tweede rij en werd de header 106px hoog:
   NL onder 989px, FR onder 1038px, PT onder 1065px. */
@media (min-width: 941px) and (max-width: 1080px) {
  .site-header__bar { gap: var(--space-3); }
  .site-nav__list { gap: 0; }
  .site-nav__link { padding-inline: 6px; }   /* space-2 (8px) was voor FR "Ressources" op 941px nét te krap */
}

/* --- schakelaar voor telefoon --- */
.site-header__toggle { display: none; }

/* --- proefknop naast de menuknop (721–940px) ---
   Onder 940px zitten de acties in het dichte menu; de onderbalk (base.css) komt pas onder
   720px. Daartussen stond er nergens een CTA in beeld. Volgorde: vergrootglas · proef · Menu. */
.site-header__trial { display: none; }
@media (min-width: 721px) and (max-width: 940px) {
  .site-header__trial { display: inline-flex; order: 1; }
  .site-header[data-menu="open"] .site-header__trial { display: none; }   /* staat dan al in het menu */
  .site-header__bar { gap: var(--space-3); }
  /* Zonder vergrootglas (zoeken uit) duwt de proefknop het rijtje naar rechts. */
  .site-header:not(:has(.site-search-toggle)) .site-header__trial { margin-left: auto; }
  .site-header:not(:has(.site-search-toggle)) .site-header__toggle { margin-left: 0; }
}

@media (max-width: 940px) {
  .site-header__toggle {
    display: inline-flex; align-items: center; gap: var(--space-2);
    margin-left: auto;
    padding: var(--space-2) var(--space-3);
    background: var(--c-surface); color: var(--c-ink-strong);
    border: 1px solid var(--c-line); border-radius: var(--radius-sm);
    font-family: var(--font-display); font-size: var(--text-sm); cursor: pointer;
  }
  /* ☰ als het dicht is, ✕ als het open is: in _header.php staan ze allebei. */
  .site-header__toggle .ico { width: 18px; height: 18px; }
  .site-header__toggle .ico + .ico,
  .site-header__toggle[aria-expanded="true"] .ico:first-child { display: none; }
  .site-header__toggle[aria-expanded="true"] .ico + .ico { display: block; }
  .site-nav,
  .site-header__actions { display: none; width: 100%; }
  .site-header[data-menu="open"] .site-nav,
  .site-header[data-menu="open"] .site-header__actions {
    display: flex;
    padding-bottom: var(--space-4);
  }
  .site-header[data-menu="open"] .site-header__bar { flex-wrap: wrap; }
  .site-nav__list { flex-direction: column; align-items: stretch; width: 100%; }
  .site-nav__link { width: 100%; justify-content: space-between; }
  .site-header__actions { flex-direction: column; align-items: stretch; }
  .site-header__actions .btn { width: 100%; }

  /* Open menu: de header is sticky, dus zonder dit valt alles onder de schermrand
     buiten bereik. Hij scrolt zelf, en de pagina eronder staat stil. */
  .site-header[data-menu="open"] {
    max-height: 100vh; max-height: 100dvh;
    overflow-y: auto; overscroll-behavior: contain;
  }
  html:has(.site-header[data-menu="open"]) { overflow: hidden; }

  /* Megapanelen als accordeon: dicht, tot je op het kopje tikt (nav.js zet data-open).
     :hover en :focus-within openen hier niets: op touch blijven die na een tik plakken. */
  .mega {
    position: static; min-width: 0;
    border: 0; box-shadow: none; padding: 0 0 var(--space-3) var(--space-3);
  }
  .site-nav__item:is(:hover, :focus-within) > .mega { display: none; }
  .site-nav__item[data-open="true"] > .mega { display: block; }
  .site-nav__link[aria-expanded="true"] .site-nav__caret { transform: rotate(-135deg) translate(-1px, -1px); }

  /* De muisbruggen horen bij het zwevende paneel. Hier liggen ze over de items
     erboven en eronder en vangen ze tikken af. */
  .site-nav__item[data-has-mega]::after,
  .mega::before { display: none !important; }

  /* Smal scherm: alleen de links. Het promoblok (beeld + tekst) valt weg, "Alles
     bekijken" eronder gaat naar dezelfde plek; de kaarten verliezen hun beeldvlak. */
  .mega__body--promo { grid-template-columns: minmax(0, 1fr); }
  .mega__promo,
  .site-header .mega__card-img { display: none; }   /* .site-header erbij: home.css (.shot) laadt later */

  /* Groepen (Product, Kennis): in één kolom liep alles in elkaar over. Kop dicht op zijn
     items, flink wat lucht boven de volgende kop — dan zie je welk rijtje bij welke kop hoort. */
  .mega__groups { row-gap: var(--space-6); }
  .mega__group .mega__title { margin-bottom: var(--space-1); }
  .mega__group .mega__link { padding-block: var(--space-2); }

  /* Voet: links onder elkaar in plaats van naast elkaar; wat alleen op desktop hoort valt weg.
     Klanten (link + Trustpilot-noot) blijft één rij: de noot hoort rechts naast de link. */
  .mega__foot:not(:has(.mega__note)) { flex-direction: column; align-items: flex-start; gap: var(--space-2); }
  .mega__desk { display: none; }
  .mega__mob { display: inline; }
}