/* menu-style.css */

/* Menu vult de hele nav bar */
.class-menu-container {
  width: 100%;
}

.classic-language-menu {
  /* List items worden gelijk verspreidt over de beschikbare ruimte */
  display: flex;
  justify-content: space-between;
  gap: rem;
  /* Geen ingebouwde HTML stijlen voor de lijsten */
  list-style: none;
  padding: 0;
  margin: 0;
}

/* Hamburger icoontje voor menu's op telefoon. */
.hamburger {
  /* Onzichtbaar op desktop*/
  display: none;
  /* De rest van de stijl */
  font-size: 2rem;
  background: none;
  border: none;
  color: white;
  cursor: pointer;
}

.classic-language-menu li {
  position: relative;
  /* tekst kleur */
  color: #ffffff;
}

.classic-language-menu a {
  text-decoration: none;
  color: var(--wp--preset--color--foreground, #f8f7f7);
  font-weight: bold;
}

.classic-language-menu li ul {
  pointer-events: auto;
  display: none;
  padding-top: 0px;
  margin-top: -10px;
  position: absolute;
  /* Hoe ver naar beneden submenu opent als je hovert */
  top: calc(100% + 10px);
  left: 0;
  list-style: none;
  z-index: 999;
  /* Wijdte van de `popup` */
  min-width: 300px;
  padding-left: 0px;


  /* Achtergrond kleur van de popup (nu: zelfde als bij oude website) */
  background-color: #1e8914;
}

/* Lijntje boven menu popup */
.classic-language-menu li ul::before {
  content: '';
  position: absolute;
  top: -3px;
  left: 0;
  width: 60%;
  height: 3px;
  background-color: #1eaf11;
}

/* Zorgt ervoor dat het menu openblijft als je hovert en je muis naar beneden verplaatst. */
.classic-language-menu li:hover>ul,
.classic-language-menu li ul:hover {
  display: block;
}

/* Voegt pijltje toe aan items met een submenu (zoals bestuur) */
.classic-language-menu li ul li.menu-item-has-children>a::after {
  content: '▶';
  /* or use ▸ or a custom icon */
  float: right;
  margin-left: 0.5rem;
  font-size: 0.8rem;
  color: #ffffff;
}

/* Voegt pijltje toe aan items in de nav bar */
.classic-language-menu>li.menu-item-has-children>a::after {
  content: '▼';
  margin-left: 0.5rem;
  font-size: 0.75rem;
}


.classic-language-menu li ul li {
  /* Zorgt voor lijn onder de sub-items in de popup */
  border-bottom: 1px solid #ccc;

  position: relative;
}

/* Positionering van sub-sub-menu (zoals bij bestuur) */
.classic-language-menu li ul li ul {
  position: absolute;
  /* Zelfde hoogte als item ernaast */
  top: 0; 
  /* Direct rechts van item */
  left: 100%;
  /* Niet de margin overnemen van parent (die was voor hover en is hier niet relevant) */
  margin-top: 0px;
}

/* Laatste item in de lijst moet geen lijn hebben */
.classic-language-menu li ul li:last-child {
  border-bottom: none;
}

/* Text in submenus */
.classic-language-menu li ul li a {
  display: block;
  padding: 1rem 1rem;
  text-align: left;
  margin: 0;
  text-decoration: none;
}

/* Hele container, zorgt voor goede layout van logo en menu */
.custom-header-container {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  gap: 2rem;
  width: 100%;
}

/* Geen idee wat deze twee doen maar het werkt, ook nodig voor layout logo en menu*/
.custom-logo-container {
  flex-shrink: 0;
}
.classic-menu-container {
  flex-grow: 1;
}

/* Formaat van logo */
.custom-logo {
  max-height: 100px;
  width: auto;
}

/* Layout for op de telefoon */
@media (max-width: 768px) {
  .custom-header-container {
    flex-wrap: wrap;
  }

  /* Laat op telefoon het hamburger icoontje wel zien */
  .hamburger {
    display: block;
  }

  /* Alles is standaard onzichtbaar */
  .classic-menu-container {
    width: 100%;
    display: none;
  }

  /* Als het actief is is het wel zichtbaar */
  .classic-menu-container.active {
    display: block;
  }

  /* Kolom ipv rij */
  .classic-language-menu {
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
  }

  .classic-language-menu li ul,
  .classic-language-menu li ul li ul {
    position: static;
    top: auto;
    left: auto;
    display: none;
    padding-left: 1rem;
    background-color: #1e8914;
  }

  /* Laat de submenus alleen zien als ze open zijn */
  .classic-language-menu li ul.open,
  .classic-language-menu li ul li ul.open {
    display: block;
  }

  .classic-language-menu li {
    width: 100%;
  }

  .classic-language-menu li a {
    display: block;
    width: 100%;
    padding: 1rem;
  }

  .classic-language-menu li:hover>ul,
  .classic-language-menu li ul:hover {
    display: none;
  }

  /* Focus is de mobiel variant van hover */
  .classic-language-menu li:focus-within>ul {
    display: block;
  }
}