/* Basis menu styling */
.header { display:flex; justify-content:space-between; align-items:center; background:#2c7c31; padding:15px; color:white; position:relative; }
.logo { font-weight:bold; font-size:18px; }
.nav ul { list-style:none; display:flex; gap:15px; }
.nav a { color:white; text-decoration:none; padding:8px 12px; display:block; transition: background 0.3s; }
.nav a:hover { background: #1f5a23; border-radius:4px; }

/* Desktop submenu */
.nav ul li { position:relative; }
.nav ul li ul { display:none; position:absolute; top:100%; left:0; background:#2c7c31; flex-direction:column; min-width:200px; border-radius:4px; overflow:hidden; }
.nav ul li:hover > ul { display:flex; }
.nav ul li ul li a:hover { background:#1f5a23; }

/* Submenu indicator */
.nav ul li.has-submenu > a::after { content:" ▼"; font-size:12px; }

/* Hamburger */
.hamburger { display:none; font-size:26px; background:none; border:none; color:white; cursor:pointer; }

/* Mobiel menu */
@media(max-width:768px){
  .hamburger { display:block; }

  .nav { display:none; flex-direction:column; position:absolute; top:60px; left:0; width:100%; background:#2c7c31; z-index:1000; }
  .nav.active { display:flex; }
  .nav ul { flex-direction:column; gap:0; }

  /* Mobiel submenu standaard verborgen */
  .nav ul li ul { display:none; flex-direction:column; position:relative; top:0; left:0; background:#2c7c31; }
  .nav ul li.active > ul { display:flex; }

  .nav a { padding:12px 15px; border-bottom:1px solid #1f5a23; }

  /* Submenu pijltjes mobiel */
  .nav ul li.has-submenu > a::after { content:" ►"; float:right; }
}
/* Hamburger en nav */
.hamburger {
  display: none;
  cursor: pointer;
}

.nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
}

.nav li {
  position: relative;
}

.nav li ul {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  background: #fff;
  padding: 0;
}

.nav li:hover > ul {
  display: block; /* Desktop hover */
}

.nav.open {
  display: block; /* Mobiel menu open */
}

@media (max-width: 768px) {
  .hamburger {
    display: block;
  }
  .nav {
    display: none;
    flex-direction: column;
  }
  .nav li ul {
    position: static;
  }
  .has-submenu.submenu-open > ul {
    display: block;
  }
}