/* Hamburger-knop stijl */
.hamburger-menu {
  display: none;  /* Verborgen op desktop */
  position: absolute;
  top: 20px;
  right: 20px;
}

.hamburger-icon {
  display: block;
  cursor: pointer;
  background: transparent;
  border: none;
  z-index: 1000;
}

.bar {
  display: block;
  width: 25px;
  height: 3px;
  background-color: #4a2c1f;
  margin: 5px 0;
  transition: 0.3s;
}

/* Mobiele menu instellingen */
@media screen and (max-width: 768px) {
  nav ul.menu {
    display: none; /* Menu is verborgen standaard */
    flex-direction: column;
    gap: 15px;
    width: 100%;
    text-align: center;
    padding: 20px 0;
  }

  nav ul.menu.show-menu {
    display: flex;  /* Menu wordt zichtbaar als show-menu is toegevoegd */
  }

  nav ul.menu li {
    width: 100%;
  }

  nav ul.menu a {
    padding: 14px 20px;
    font-size: 18px;
  }

  /* Submenu voor mobiel */
  nav ul.menu .submenu {
    position: static;
    display: none;
    box-shadow: none;
    background-color: #fafafa;
  }

  nav ul.menu .submenu.open {
    display: block;
  }

  /* Iconen tonen voor items met submenu op mobiel */
  nav ul.menu .menu-item > a::after {
    content: '▾';
    float: right;
    font-size: 20px;
  }
}