.site-header {
  background: #1a1a1a;
  padding: 0.5rem 1rem;
}

.site-nav {
  position: relative;
}

.menu-btn {
  background: none;
  border: 0;
  padding: .25rem;
  cursor: pointer;
}

/* Hamburger ↔ X toggle */
.menu-icon .state-hamburger,
.menu-icon .state-cross {
  transition: opacity 200ms ease;
}

.menu-icon .state-cross {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] .state-hamburger {
  opacity: 0;
}

.menu-btn[aria-expanded="true"] .state-cross {
  opacity: 1;
}

.menu {
  list-style: none;
  margin: 0;
  padding: 0.25rem 0;
  position: absolute;
  right: 0;
  top: 100%;
  background: #1a1a1a;
  border-radius: 8px;
  min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}

.menu li {
  border-bottom: 1px solid #2b2b2b;
}
.menu li:last-child {
  border-bottom: 0;
}

.menu a {
  display: block;
  padding: 0.6rem 0.9rem;
  color: #B6A15F; /* guldfärg */
  text-decoration: none;
}
.menu a:hover {
  background: #2b2b2b;
}

/* Desktop: visa länkar inline och göm knappen */
@media (min-width: 801px) {
  .menu-btn {
    display: none;
  }

  /* Containern är 120px på mobil – på desktop centreras menyn
     som egen rad under logon, så bredden släpps loss */
  .main-header .meny {
    width: auto;
    padding: 0;
  }

  /* .site-nav .menu = specificitet (0,2,0) → slår [hidden] (0,1,0) */
  .site-nav .menu {
    position: static;
    display: flex !important;
    flex-wrap: nowrap;
    align-items: center;
    background: transparent;
    box-shadow: none;
    min-width: 0;
  }

  .menu li {
    border: 0;
    margin-right: 1.2rem;
    white-space: nowrap;
  }
  .menu li:last-child {
    margin-right: 0;
  }

  .menu a {
    color: #E2C879;
    padding: 0;
  }
}

/* === Undermeny "Fler städer" === */
.has-submenu {
  position: relative;
}

.submenu-toggle {
  display: block;
  width: 100%;
  text-align: left;
  background: none;
  border: 0;
  padding: 0.6rem 0.9rem;
  color: #B6A15F;
  font: inherit;
  cursor: pointer;
}

.submenu-toggle:hover {
  background: #2b2b2b;
}

.submenu-toggle::after {
  content: " ▾";
  font-size: 0.75em;
}

.submenu-toggle[aria-expanded="true"]::after {
  content: " ▴";
}

.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: none;
  background: #222;
  border-radius: 0 0 8px 8px;
}

.submenu[data-open="true"] {
  display: block;
}

.submenu li {
  border-bottom: 1px solid #2b2b2b;
}

.submenu li:last-child {
  border-bottom: 0;
}

.submenu a {
  display: block;
  padding: 0.5rem 1.4rem;
  color: #B6A15F;
  text-decoration: none;
  font-size: 0.95em;
}

.submenu a:hover {
  background: #2b2b2b;
}

/* Desktop undermeny */
@media (min-width: 801px) {
  .has-submenu {
    position: relative;
  }

  .submenu-toggle {
    color: #E2C879;
    padding: 0;
  }

  .submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 160px;
    background: #1a1a1a;
    border-radius: 8px;
    box-shadow: 0 8px 24px rgba(0,0,0,.2);
    margin-top: 0.5rem;
  }

  .submenu a {
    color: #E2C879;
    padding: 0.5rem 0.9rem;
  }
}

/* Döljer med [hidden] */
[hidden] {
  display: none !important;
}