/**********************************************************
 NVAVG – Hamburger menu (ALLEEN Main menu)
 Opschoon + pijlen op subcategorieën
**********************************************************/

/* 0) Basis van de mobiele (desktop-hidden) navigatie */
.main_menu_wrap .main-navigation.desktop-hidden {
  position: relative;
  z-index: 9999;
}

.main_menu_wrap .main-navigation.desktop-hidden > ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  position: absolute;
  right: 0;
  top: 48px;
  width: 320px;
  background: #fff;
  box-shadow: 0 8px 16px rgba(0,0,0,.06);
  border-radius: 2px;
  overflow: hidden;
}

/* (alleen als er ergens JS 'hover-open' gebruikt wordt) */
.main_menu_wrap .main-navigation.desktop-hidden.hover-open > ul{
  display:block;
}

.main_menu_wrap .main-navigation.desktop-hidden ul li{
  border-bottom: 1px solid #e6edf0;
}

.main_menu_wrap .main-navigation.desktop-hidden ul li > a{
  display:block;
  padding:14px 18px;
  font-weight:600;
  text-decoration:none;
  color:#003b5c;
}

/* 1) Desktop: hamburger dropdown op HOVER openen (alleen hamburger item) */
@media (min-width: 1024px){
  #nv-main-menu li.hamburger-icon-menu-link:hover > ul{
    display:block !important;
  }
}

/* 2) Visuele lagen per niveau in de dropdown */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > a{
  /* 1e niveau in dropdown = oranje balken */
  background:#f59632;
  color:#fff;
}

#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > a{
  /* 2e niveau = licht oranje */
  background:#ffe5c7;
  color:#003b5c;
}

#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a{
  /* 3e niveau = nog iets lichter */
  background:#ffe0bf;
  color:#003b5c;
}

/* 3) VERWIJDER ALLE THEMA-PIJLEN / BG-IMAGES in de hamburger dropdown */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu a::after{
  content:none !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  opacity:0 !important;
}

/* 4) EIGEN PIJL met ::before — alleen op items met children */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li.menu-item-has-children > a{
  position:relative;          /* referentie voor ::before */
  padding-right:36px;         /* ruimte voor het pijltje */
}

/* 4a) 1e niveau in dropdown (oranje achtergrond) -> wit pijltje */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li.menu-item-has-children > a::before{
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:10px; height:10px;
  transform:translateY(-60%) rotate(45deg);    /* pijl naar beneden */
  border-right:2px solid #fff;
  border-bottom:2px solid #fff;
  box-sizing:border-box;
  pointer-events:none;
  z-index:2;
}

/* 4b) Diepere niveaus (lichte achtergrond) -> blauw pijltje */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu ul.sub-menu li.menu-item-has-children > a::before{
  content:"";
  position:absolute;
  right:14px; top:50%;
  width:10px; height:10px;
  transform:translateY(-60%) rotate(45deg);
  border-right:2px solid #003b5c;
  border-bottom:2px solid #003b5c;
  box-sizing:border-box;
  pointer-events:none;
  z-index:2;
}

/* 4c) Pijl draaien wanneer submenu open is (klassenaam komt uit JS) */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li.submenu-open > a::before{
  transform:translateY(-40%) rotate(-135deg);  /* pijl omhoog */
}

/* 5) Maak duidelijk onderscheid tussen items met/zonder children */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li:not(.menu-item-has-children) > a::before{
  content:none; /* geen pijl op leaf items */
}

/* 6) Verberg de pijl die op de HAMBURGER-knop zelf stond in het hoofdmenu */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > a::after{
  display:none !important;
}

/* 7) Haal eventuele outline/gele rand van de MENU-knop weg (alleen hamburger) */
#nv-main-menu li.hamburger-icon-menu-link > a{
  outline:none !important;
  box-shadow:none !important;
}

/* 8) Mobile: dropdown mag standaard zichtbaar zijn in mobiel stack */
@media (max-width: 768px){
  .main_menu_wrap .main-navigation.desktop-hidden > ul{
    position:static;
    display:block;
    width:auto;
    box-shadow:none;
    border-radius:0;
  }
  .main_menu_wrap .main-navigation.desktop-hidden ul li{
    border-bottom:1px solid #eee;
  }
}

/* 9) (optioneel) subtiele hover/focus zonder kleurbreuk */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li > a:hover,
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li > a:focus{
  filter:brightness(0.97);
}

/* Thema-pijlen overal UIT in hamburger dropdown */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu a::after{
  content:none !important;
  background:none !important;
  box-shadow:none !important;
  border:0 !important;
  opacity:0 !important;
}

/* Onze eigen pijlpunt */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li.menu-item-has-children > a{
  position: relative;
  padding-right: 36px; /* ruimte voor pijl */
}

.nv-arrow{
  position: absolute;
  right: 14px; top: 50%;
  width: 10px; height: 10px;
  transform: translateY(-60%) rotate(45deg); /* omlaag */
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  box-sizing: border-box;
  pointer-events: none;
  z-index: 2;
}

/* Kleur: 1e niveau (oranje achtergrond) -> wit */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li.menu-item-has-children > a > .nv-arrow{
  color: #fff;
}

/* Diepere niveaus (lichte achtergrond) -> blauw */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu ul.sub-menu li.menu-item-has-children > a > .nv-arrow{
  color: #003b5c;
}

/* Draaien bij openklappen */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li.submenu-open > a > .nv-arrow{
  transform: translateY(-40%) rotate(-135deg); /* omhoog */
}

/* MENU-knop randje weg */
#nv-main-menu li.hamburger-icon-menu-link > a{ outline:none !important; box-shadow:none !important; }

/* (je bestaande kleur/vlak-regels voor 1e/2e/3e niveau kun je laten staan) */

/* FIX: behoud kleuren op hover/focus binnen hamburger-dropdown */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > a:hover,
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > a:focus{
  color:#fff !important;
  background:#f59632 !important;   /* blijf oranje */
}

/* 2e niveau */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > a:hover,
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > a:focus{
  color:#003b5c !important;
  background:#ffe5c7 !important;
}

/* 3e niveau en dieper */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:hover,
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link > ul.sub-menu > li > ul.sub-menu > li > ul.sub-menu > li > a:focus{
  color:#003b5c !important;
  background:#ffe0bf !important;
}

/* veiligheid: zet thema-hover uit specifiek in hamburger-dropdown */
#bottom_menu .main_menu_wrap #nv-main-menu #primary-menu
> li.hamburger-icon-menu-link ul.sub-menu li > a:hover{
  box-shadow:none !important;
  text-decoration:none !important;
}
