.nav {
  position: relative;
  padding: 10px;
}

/* Hamburger icon */
.menu-icon {
  font-size: 28px;
  cursor: pointer;
  display: none; /* hidden on desktop */
  position: absolute;
  top: 0px;
  right: 10px; /* move to upper right */
}

#menu-toggle {
  display: none;
}

/* Desktop menu */
.menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  gap: 10px;
}

.nav .menu .divider {
    height: 1px;
    background: #ccc;
    margin: 3px 0;
    list-style: none;
}



/* MOBILE */
@media (max-width: 700px) {
  .menu {
    display: none;
    flex-direction: column;
    background: #070707d3;
    padding: 10px;
    position: absolute;
    top: 35px;   /* dropdown under the icon */
    right: 10px; /* align to right side */
    width: 180px;
    border-radius: 6px;
  }

  .menu-icon {
    display: block;
  }

  #menu-toggle:checked + .menu-icon + .menu {
    display: flex;
  }
}