/* ==========================================================================
   Neele-Vat Mega Menu — nv-mega-menu.css
   Versie: 1.0.17
   Alle selectors beginnen met .nv- om conflicten met Enfold te vermijden.
   ========================================================================== */

/* ── Design tokens ──────────────────────────────────────────────────────── */
/*
 * Alle tokens zijn overschrijfbaar in het child theme via style.css:
 *
 *   .nv-mega-wrap {
 *     --nv-font-body:        'Open Sans', sans-serif;
 *     --nv-font-mono:        'Roboto Mono', monospace;
 *     --nv-size-nav:         13px;
 *     --nv-size-label:       14px;
 *     --nv-nav-height:       60px;
 *   }
 *
 * Kleuren overschrijf je via :root of body (zodat ze ook buiten de wrap werken).
 */
:root {
  /* ── Kleuren ──────────────────────────────────────────────────────────── */
  --nv-navy:        #0B3D6B;   /* hoofdkleur (links, titels, accenten)  */
  --nv-navy-mid:    #266791;   /* middenkleur (hover, focus-ring)       */
  --nv-ink:         #10243A;   /* basistekstkleur links (niveau-2)      */
  --nv-muted:       #6B7F92;   /* gedempte kleur (nav-labels, desc)     */
  --nv-line:        rgba(38, 103, 145, 0.14); /* scheidingslijnen       */
  --nv-hover-bg:    rgba(38, 103, 145, 0.06); /* hover-achtergrond link */
  --nv-badge-bg:    rgba(38, 103, 145, 0.10); /* badge-achtergrond      */
  --nv-shadow:      0 24px 48px -20px rgba(11, 61, 107, 0.28);

  /* ── Lettertypes ─────────────────────────────────────────────────────── */
  --nv-font-body:   'Inter', system-ui, sans-serif;          /* broodtekst   */
  --nv-font-mono:   'JetBrains Mono', 'Courier New', monospace; /* labels/badges */
  --nv-font-ui:     Tahoma, Geneva, Verdana, sans-serif;     /* menu titels en subtitels */

  /* ── Lettergroottes ──────────────────────────────────────────────────── */
  --nv-size-nav:        12px;    /* niveau-0 nav-items (WEGTRANSPORT …)  */
  --nv-size-col-title:  10.5px;  /* kolomtitels [ BENELUX / DACH ]       */
  --nv-size-label:      13.5px;  /* links niveau-2 (Nederland, België …) */
  --nv-size-desc:       11.5px;  /* beschrijving onder een nv-featured   */
  --nv-size-badge:      9px;     /* landcode-badge (NL, BE …)            */
  --nv-size-cta:        11px;    /* CTA-knop label                       */
  --nv-size-featured:   15px;    /* nv-featured hoofd-label              */

  /* ── Afmetingen ──────────────────────────────────────────────────────── */
  --nv-nav-height:       68px;   /* hoogte van de nav-balk               */
  --nv-panel-pad-top:    34px;   /* ruimte boven in het dropdown-paneel  */
  --nv-panel-pad-bottom: 40px;   /* ruimte onder in het dropdown-paneel  */
  --nv-max-w:            1280px; /* maximale breedte nav + paneel-inhoud */

  /* ── Overig ──────────────────────────────────────────────────────────── */
  --nv-ease:        cubic-bezier(0.22, 1, 0.36, 1);
}


/* ══════════════════════════════════════════════════════════════════════════
   1. HARDE RESETS — Enfold's globale ul/li/a stijlen neutraliseren
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Enfold past padding, margin, line-height en border toe op alle
 * nav-gerelateerde lijsten. Dit blok gooit die resets weg zodat onze
 * eigen stijlen het overnemen.
 */
.nv-mega-wrap,
.nv-mega-wrap *,
.nv-mega-wrap *::before,
.nv-mega-wrap *::after {
  box-sizing: border-box;
}

.nv-mega-wrap ul,
.nv-mega-wrap li {
  list-style:   none !important;
  margin:       0    !important;
  padding:      0    !important;
  border:       none !important;
  background:   none !important;
  float:        none !important;
  line-height:  normal !important;
}

.nv-mega-wrap a {
  text-decoration: none        !important;
  outline:         none        !important;
  line-height:     normal      !important;
  height:          auto        !important;
  min-height:      0           !important;
}

/* Verberg Enfold's dropdown-pijltjes die via JS of CSS worden ingevoegd */
.nv-mega-wrap .avia_arrow,
.nv-mega-wrap .av-submenu-indicator,
.nv-mega-wrap [class*="avia_menu_arrow"],
.nv-mega-wrap [class*="av-arrow"] {
  display: none !important;
}

/* Onze eigen ::after-stip mag nooit door Enfold worden overschreven */
.nv-mega-wrap li.nv-top > a::after {
  all: unset;
  content:     '•';
  font-size:   9px;
  /* color via all:unset → inherited (volgt kleur van de <a> link) */
  opacity:     0.6;
  margin-left: 4px;
  line-height: 1;
  transition:  opacity 0.15s ease;
}


/* ══════════════════════════════════════════════════════════════════════════
   2. WRAPPER & NAV
   ══════════════════════════════════════════════════════════════════════════ */

.nv-mega-wrap {
  /*
   * Geen eigen achtergrond of border: Enfold's header-styling schijnt door,
   * zodat het NV-menu visueel op de plek van het oude Enfold-menu staat.
   * Wil je toch een witte balk? Voeg in child theme style.css toe:
   *   .nv-mega-wrap { background: #fff; border-bottom: 1px solid #dde5ed; }
   */
  width:    100%;
  position: relative;
  z-index:  9000;

  /*
   * Fijnafstemming verticale positie ten opzichte van de Enfold-header.
   * Standaard 0 — pas aan in child theme:
   *   .nv-mega-wrap { --nv-wrap-margin-top: -4px; }
   */
  margin-top: var(--nv-wrap-margin-top, 0px);
}

.nv-mega-nav {
  max-width: var(--nv-max-w);
  margin:    0 auto;
  padding:   0 24px;
}


/* ══════════════════════════════════════════════════════════════════════════
   3. ROOT-LIJST (niveau 0)
   ══════════════════════════════════════════════════════════════════════════ */

ul.nv-mega-root {
  display:     flex !important;
  align-items: stretch !important;
  flex-wrap:   nowrap;
  gap:         0;
}


/* ══════════════════════════════════════════════════════════════════════════
   4. NIVEAU-0 ITEMS (hoofdonderwerpen)
   ══════════════════════════════════════════════════════════════════════════ */

li.nv-top {
  /*
   * GEEN position:relative hier. Door position:static te laten staan
   * zoekt .nv-mega-panel (position:absolute) zijn containing block
   * omhoog naar .nv-mega-wrap (position:relative).
   * Dat garandeert een full-width paneel dat altijd correct uitlijnt.
   */
  position:       static !important;
  display:        flex   !important;
  align-items:    stretch !important;
  flex-direction: row;
}

li.nv-top > a {
  display:         inline-flex !important;
  align-items:     center;
  position:        relative   !important; /* bevat de ::before streep */
  padding:         0 17px;
  height:          var(--nv-nav-height)  !important;
  font-family:     var(--nv-font-ui)   !important;
  font-size:       var(--nv-size-nav)    !important;
  font-weight:     700                   !important;
  letter-spacing:  0.12em                !important;
  text-transform:  none    !important;
  color:           var(--nv-muted)       !important;
  text-decoration: none                  !important;
  border-bottom:   none !important;      /* streep via ::before (zie hieronder) */
  transition:      color 0.15s ease;
  white-space:     nowrap;
  line-height:     1 !important;
}

/*
 * Actieve/hover-streep: position:absolute; bottom:0 = letterlijk de onderkant
 * van de header. left/right = 17px (= de padding) zodat de streep niet breder
 * is dan het woord + bolletje.
 */
li.nv-top > a::before {
  content:    '';
  position:   absolute;
  bottom:     0;
  left:       17px;
  right:      17px;
  height:     2px;
  background: transparent;
  transition: background 0.15s ease;
}

li.nv-top > a:hover,
li.nv-top.nv-active > a,
li.nv-top.nv-open > a {
  color:   var(--nv-navy) !important;
  outline: none           !important;
}

li.nv-top > a:hover::before,
li.nv-top.nv-active > a::before,
li.nv-top.nv-open > a::before {
  background: var(--nv-navy);
}

li.nv-top > a:focus-visible {
  outline:        2px solid var(--nv-navy-mid) !important;
  outline-offset: -2px !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   5. MEGA-PANEEL
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Positionering ten opzichte van .nv-mega-wrap (de full-width balk).
 * left:0 + width:100% zorgt voor exacte aansluiting links én rechts,
 * ongeacht op welk menu-item de gebruiker hovert.
 */
.nv-mega-panel {
  position:   absolute;
  top:        100%;           /* direct onder de nav-balk */
  left:       0;
  width:      100%;
  background: #ffffff;
  border-top: 1px solid var(--nv-line);
  box-shadow: var(--nv-shadow);
  z-index:    9999;

  /* Verborgen toestand */
  opacity:        0;
  pointer-events: none;
  transform:      translateY(-8px);
  transition:
    opacity   0.18s var(--nv-ease),
    transform 0.18s var(--nv-ease);
}

li.nv-top.nv-open > .nv-mega-panel {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.nv-mega-inner {
  max-width: var(--nv-max-w);
  margin:    0 auto;
  padding:   var(--nv-panel-pad-top) 24px var(--nv-panel-pad-bottom);
}


/* ══════════════════════════════════════════════════════════════════════════
   6. KOLOMMEN-GRID (niveau 1)
   ══════════════════════════════════════════════════════════════════════════ */

ul.nv-mega-cols {
  display:               grid !important;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap:                   28px 32px;
  align-items:           start;
}

li.nv-col {
  min-width: 0;
}

/* ── Kolomtitel ─────────────────────────────────────────────────────────── */
.nv-col-title {
  display:        block        !important;
  margin-bottom:  12px         !important;
  padding-bottom: 10px         !important;
  border-bottom:  1px solid var(--nv-line) !important;
  background:     none         !important;
}

.nv-col-title a {
  font-family:     var(--nv-font-ui)      !important;
  font-size:       var(--nv-size-col-title) !important;
  font-weight:     700                      !important;
  letter-spacing:  0.16em                   !important;
  text-transform:  none    !important;
  color:           var(--nv-navy)           !important;
  text-decoration: none                     !important;
  pointer-events:  none;
  cursor:          default;
}

.nv-col-title a::before { content: '[ '; white-space: pre; }
.nv-col-title a::after  { content: ' ]'; white-space: pre; }


/* ══════════════════════════════════════════════════════════════════════════
   7. LINKS-LIJST (niveau 2)
   ══════════════════════════════════════════════════════════════════════════ */

ul.nv-mega-links {
  display:        flex !important;
  flex-direction: column;
  gap:            0;
}

li.nv-link > a {
  display:         flex !important;
  align-items:     flex-start;
  gap:             8px;
  padding:         5px 6px 5px 0 !important;
  border-radius:   3px;
  color:           var(--nv-ink) !important;
  text-decoration: none !important;
  transition:
    color        0.12s ease,
    background   0.12s ease,
    padding-left 0.12s ease;
}

li.nv-link > a:hover,
li.nv-link > a:focus-visible {
  color:        var(--nv-navy)    !important;
  background:   var(--nv-hover-bg) !important;
  padding-left: 8px               !important;
  outline:      none              !important;
}

/* ── Landcode-badge ─────────────────────────────────────────────────────── */
span.nv-badge {
  display:         inline-flex;
  align-items:     center;
  justify-content: center;
  flex-shrink:     0;
  font-family:     var(--nv-font-mono);
  font-size:       var(--nv-size-badge);
  font-weight:     700;
  letter-spacing:  0.04em;
  color:           var(--nv-navy);
  background:      var(--nv-badge-bg);
  border-radius:   3px;
  min-width:       26px;
  height:          18px;
  padding:         0 4px;
  margin-top:      1px;
  line-height:     1;
}

/* ── Tekst-wrapper ──────────────────────────────────────────────────────── */
span.nv-text {
  display:        flex;
  flex-direction: column;
  gap:            1px;
  min-width:      0;
}

span.nv-label {
  font-family: var(--nv-font-ui);
  font-size:   var(--nv-size-label);
  line-height: 1.35;
  color:       inherit;
}

span.nv-desc {
  font-family: var(--nv-font-ui);
  font-size:   var(--nv-size-desc);
  line-height: 1.3;
  color:       var(--nv-navy-mid);  /* #266791 — NV blauw */
}

/* ── nv-featured ────────────────────────────────────────────────────────── */
li.nv-link.nv-featured > a {
  padding-top:    6px !important;
  padding-bottom: 6px !important;
}

li.nv-link.nv-featured span.nv-label {
  font-size:   var(--nv-size-featured);
  font-weight: 600;
  color:       var(--nv-navy);
}

li.nv-link.nv-featured span.nv-desc {
  font-size:  var(--nv-size-desc);
  margin-top: 2px;
}

/* ── nv-cta ─────────────────────────────────────────────────────────────── */
li.nv-link.nv-cta {
  margin-top: 14px !important;
}

li.nv-link.nv-cta > a {
  display:         flex !important;
  justify-content: center;
  align-items:     center;
  padding:         11px 18px !important;
  background:      var(--nv-navy) !important;
  border-radius:   4px;
  transition:      background 0.15s ease;
}

li.nv-link.nv-cta > a:hover,
li.nv-link.nv-cta > a:focus-visible {
  background:   #0d4a82 !important;
  padding-left: 18px    !important;
  color:        #ffffff !important;
}

li.nv-link.nv-cta span.nv-label {
  font-family:    var(--nv-font-ui);
  font-size:      var(--nv-size-cta);
  font-weight:    700;
  letter-spacing: 0.10em;
  text-transform: none;
  color:          #ffffff;
}


/* ══════════════════════════════════════════════════════════════════════════
   8. HIGHLIGHT-KOLOM
   ══════════════════════════════════════════════════════════════════════════ */

li.nv-col.nv-highlight {
  background:    var(--nv-navy) !important;
  border-radius: 4px;
  padding:       20px 20px 22px !important;
}

li.nv-col.nv-highlight .nv-col-title {
  border-bottom-color: rgba(255, 255, 255, 0.18) !important;
  background: none !important;
}

li.nv-col.nv-highlight .nv-col-title a {
  color: #ffffff !important;
}

li.nv-col.nv-highlight ul.nv-mega-links li.nv-link > a {
  color: rgba(255, 255, 255, 0.88) !important;
}

li.nv-col.nv-highlight ul.nv-mega-links li.nv-link > a:hover,
li.nv-col.nv-highlight ul.nv-mega-links li.nv-link > a:focus-visible {
  color:      #ffffff !important;
  background: rgba(255, 255, 255, 0.10) !important;
}

li.nv-col.nv-highlight span.nv-badge {
  color:      rgba(255, 255, 255, 0.92);
  background: rgba(255, 255, 255, 0.14);
}

li.nv-col.nv-highlight span.nv-desc {
  color: rgba(255, 255, 255, 0.62);
}

li.nv-col.nv-highlight li.nv-link.nv-featured span.nv-label {
  color: #ffffff;
}

li.nv-col.nv-highlight li.nv-link.nv-cta > a {
  background: #ffffff !important;
}

li.nv-col.nv-highlight li.nv-link.nv-cta > a:hover,
li.nv-col.nv-highlight li.nv-link.nv-cta > a:focus-visible {
  background: rgba(255, 255, 255, 0.90) !important;
}

li.nv-col.nv-highlight li.nv-link.nv-cta span.nv-label {
  color: var(--nv-navy);
}


/* ══════════════════════════════════════════════════════════════════════════
   9. WIDGET-KOLOM
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Kolom die een WordPress widget-gebied bevat.
 * Activeer via CSS-klasse nv-panel-X op een niveau-0 menu-item.
 * Voeg inhoud toe via Weergave → Widgets → "Mega Menu paneel X".
 */
li.nv-col.nv-col-widget {
  min-width: 0;
}

/* Individuele widget binnen de kolom */
.nv-col-widget .nv-widget-item {
  margin-bottom: 16px;
}
.nv-col-widget .nv-widget-item:last-child {
  margin-bottom: 0;
}

/* Widget-titel: zelfde stijl als een kolomtitel */
.nv-col-widget .nv-widget-title {
  display:         block        !important;
  font-family:     var(--nv-font-ui)      !important;
  font-size:       var(--nv-size-col-title) !important;
  font-weight:     700          !important;
  letter-spacing:  0.16em       !important;
  text-transform:  none    !important;
  color:           var(--nv-navy) !important;
  margin:          0 0 12px     !important;
  padding-bottom:  10px         !important;
  border-bottom:   1px solid var(--nv-line) !important;
  background:      none         !important;
}

/* Tekst binnen een widget */
.nv-col-widget p,
.nv-col-widget span {
  font-family: var(--nv-font-body);
  font-size:   13.5px;
  line-height: 1.55;
  color:       var(--nv-ink);
  margin:      0 0 8px;
}

/* Afbeelding binnen een widget */
.nv-col-widget img {
  display:       block;
  max-width:     100%;
  height:        auto;
  border-radius: 4px;
}

/* Links binnen een widget */
.nv-col-widget a {
  color:           var(--nv-navy) !important;
  text-decoration: underline     !important;
}
.nv-col-widget a:hover {
  color: var(--nv-navy-mid) !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   11. HOGE-SPECIFICITEIT ENFOLD-OVERRIDES
   Enfold's selectors gebruiken vaak #header_main of #header als prefix
   waardoor ze specificiteit (1,x,x) hebben. We matchen hier op hetzelfde
   niveau zodat onze !important-regels altijd winnen van Enfold's !important.
   ══════════════════════════════════════════════════════════════════════════ */

/*
 * Verwijder ELKE Enfold li/ul padding en margin binnen het paneel,
 * ook als Enfold ze met !important en een hoge id-selector afdwingt.
 */
#header .nv-mega-panel li,
#header .nv-mega-panel ul,
#header_main .nv-mega-panel li,
#header_main .nv-mega-panel ul {
  list-style:  none        !important;
  padding:     0           !important;
  margin:      0           !important;
  border:      none        !important;
  background:  transparent !important;
  float:       none        !important;
  height:      auto        !important;
  min-height:  0           !important;
  line-height: normal      !important;
}

/* Link-anker hoogte en min-height resetten */
#header .nv-mega-panel li.nv-link > a,
#header_main .nv-mega-panel li.nv-link > a {
  height:      auto   !important;
  min-height:  0      !important;
  line-height: normal !important;
  padding:     5px 6px 5px 0 !important;
}

/* Kolomtitel hoogte resetten */
#header .nv-mega-panel li.nv-col > .nv-col-title,
#header_main .nv-mega-panel li.nv-col > .nv-col-title {
  height:     auto !important;
  min-height: 0    !important;
}


/* ══════════════════════════════════════════════════════════════════════════
   12. MOBIEL (≤ 989px)
   Het NV mega-menu is op mobiel volledig verborgen. Enfold's eigen mobiele
   menu (hamburger + slide-out) neemt het over — dat wordt niet door de
   plugin aangepast en werkt daardoor ongewijzigd.
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 989px) {
  /* NV mega-menu verborgen op mobiel — Enfold's eigen menu neemt het over */
  .nv-mega-wrap {
    display: none !important;
  }

  /* Enfold's nav-wrapper op mobiel zichtbaar (op desktop verborgen via PHP CSS) */
  .nv-enfold-nav-wrap {
    display: block !important;
  }
}


/* ══════════════════════════════════════════════════════════════════════════
   13. MOTION PREFERENCE
   ══════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .nv-mega-panel,
  li.nv-top > a,
  li.nv-link > a,
  li.nv-link.nv-cta > a {
    transition: none !important;
  }
}