.menu-dropdown {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  background-color: rgba(133, 158, 199, 0.932);
  z-index: 1000;
  overflow: hidden;
  max-height: 60px;           /* stängd höjd */
  transition: max-height 0.7s ease;
  display: block;              /* block för att underlätta vertikal meny */
}

/* Rad med hamburgare + logotyp */
.menu-header {
  display: flex;
  min-height: 60px;
  align-items: center;
}

.menylogo {
  position: fixed;
  top: 5px;      /* justera vertikalt */
  right: 20px;    /* avstånd från höger */
  height: 50px;
  width: auto;
  margin: 0;
}

.menu-dropdown.menu-active {
  height: auto;
  min-height: 60px;
  border-radius: 5px;
  max-height: 1000px; /* större än vad som behövs */
  overflow-y: auto; /* Tillåt vertikal scrollning */
}

.menu-content {
  width: 100%;
  padding: 10px 20px 20px 20px;
  display: block;
}

.menu-content ul {
  margin: 0;
  padding: 0px;  /* 70px från toppen, resten som innan */
  list-style: none;
  text-align: left;
}

.menu-content ul li {
  
  display: block;
  margin: 2px;
  padding: 5px 0;
  font-size: 20px;
  color: rgb(31, 60, 88);
  text-align: left;      /* säkerställer vänsterställt */
  width: 100%; /* Säkerställ att li fyller hela bredden */
  box-sizing: border-box; /* Förhindra att padding ökar bredden */
}

.menu-content ul li:hover {
  color: lightsteelblue;
}

.menu-content ul li a {
  display: block; /* Gör hela länkens område klickbart */
  width: 100%; /* Fyll hela radens bredd */
  color: inherit;
  font-size: 20px; /* Adjust the font size */
  text-decoration: none;
  transition: color 0.7s ease;
}

.menu-content ul li a:hover {
  color: lightsteelblue;
}

.menu-content ul li ul li a {
  color: rgb(31, 60, 88); /* Default color */
  font-size: 18px; /* Adjust the font size */
  text-decoration: none;
}                       

/* Lägg till pil för menyobjekt med undermeny */
.menu-content ul li.has-submenu {
  position: relative; /* För att säkerställa korrekt positionering */
}

.menu-content ul li.has-submenu > a::after {
  content: "\25B6"; /* Unicode för vänsterpil (◄) */
  display: inline-block;
  margin-left: 5px; /* Avstånd mellan text och pil */
  font-size: 14px;
  color: rgb(31, 60, 88);
  transition: transform 0.5s ease; /* Smidig rotation */
  vertical-align: middle; /* Centrera pilen vertikalt med texten */
}

/* Rotera pilen motsols när undermenyn är öppen */
.menu-content ul li.has-submenu.active > a::after {
  transform: rotate(90deg); /* Rotera 90 grader motsols */
}

/* Animera undermeny */
.menu-content ul ul {
  display: block; /* Ändra från display: none för att möjliggöra animation */
  max-height: 0; /* Stängd höjd */
  opacity: 0; /* Osynlig när stängd */
  visibility: hidden; /* Extra kontroll för synlighet */
  overflow: hidden; /* Dölj innehåll som inte ryms */
  transition: max-height 0.7s ease, opacity 0.7s ease, visibility 0.7s ease; /* Smidig animation */
  padding: 2px 2px;
  box-sizing: border-box; /* Säkerställ att padding inte stör max-height */
}

/* Visa undermeny när den är aktiv */
.menu-content ul li.has-submenu.active > ul {
  max-height: 1000px; /* Ökat värde för att rymma större undermenyer */
  opacity: 1; /* Fullt synlig när öppen */
  visibility: visible; /* Synlig när öppen */
}

.con,
.special-con {
  cursor: pointer;
  display: inline-block;
  position: fixed;
  top: 12px;
  left: 29px;
}

.bar {
  display: block;
  height: 5px;
  width: 35px;
  background: rgb(31, 60, 88); /* Default color */
  margin: 6px auto;
  position: relative;
  top: 0px;
  left: 0px;
  border-radius: 5px;
}

.con {
  width: auto;
  margin: 0 auto;
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.middle {
  margin: 0 auto;
}

.bar {
  -webkit-transition: all .7s ease;
  -moz-transition: all .7s ease;
  -ms-transition: all .7s ease;
  -o-transition: all .7s ease;
  transition: all .7s ease;
}

.con.menu-active .top {
  transform: translateY(11px) rotateZ(45deg);
}

.con.menu-active .bottom {
  transform: translateY(-11px) rotateZ(-45deg);
}

.con.menu-active .middle {
  opacity: 0;
}

.hidden {
  display: none;
}

/* Responsiv justering för mobil: Begränsa höjd till viewport och aktivera scroll */
@media screen and (max-width: 768px) {
  .menu-dropdown.menu-active {
    max-height: 100vh; /* Begränsa till skärmens höjd för att tvinga scrollning om innehållet är längre */
    overflow-y: auto; /* Scrolla vertikalt om nödvändigt */
  }
  .menu-content {
    padding-bottom: 60px; /* Extra padding längst ner för att undvika att sista objektet skärs av */
  }
}