/* /static/css/styles.css
/* Grunnoppsett for menyen */
.site-nav {
  background: linear-gradient(90deg, magenta 0%, magenta 40%, blue 60%, blue 100%);
  border-bottom: 1px solid #e6e6e6;
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  position: sticky;
  top: 0;
  z-index: 1000;
  padding: 0.1rem 1rem; /* Betydelig redusert vertikal padding */
  display: flex; /* Legg til flex for å håndtere menyelementer og den nye info-boksen */
  align-items: center; /* Sentrerer innhold vertikalt */
  justify-content: space-between; /* Fordeler elementene til hver sin side */

  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  /* Tvinger menyen til å alltid være minst 1200px */
  min-width: 1760px; 
  width: 100%;
  box-sizing: border-box;  
}

/* 2. Sørg for at body/container tillater rulling */
body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}


.site-nav .menu {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  gap: 0.75rem; /* Litt mindre avstand mellom elementer */
  align-items: center;
}

/* Hovedlenker og Submenu-toggles */
.menu-item > .menu-link, .menu-item > a, .menu-link, button.submenu-toggle {
  display: inline-flex;
  align-items: center;
  padding: 6px 10px; /* Redusert padding for å minske høyden på hvert element */
  text-decoration: none;
  color: #1a1a1a;
  border-radius: 4px; /* Litt mindre avrundede hjørner for mindre visuell vekt */
  border: 0;
  background: transparent;
  transition: background 0.2s ease;
  cursor: pointer;
  font-weight: 500;
  font-size: 13px; /* Justert skriftstørrelse */
  line-height: 1.15; /* Justert line-height for å minske vertikal plass */

  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  margin: 0;
}

.menu-item > .menu-link:hover, .menu-item > .menu-link:focus, button.submenu-toggle:hover, button.submenu-toggle:focus {
  background: #f3f3f3;
  outline: none;
}

.menu-item > .menu-link:focus-visible, button.submenu-toggle:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Undermenyer (initialt skjult) */
.submenu {
  list-style: none;
  margin: 0;
  padding: 0;
  position: absolute;
  background: MistyRose;
  border: 1px solid #ddd;
  border-radius: 4px; /* Matcher hovedmenyen for konsistens */
  min-width: 180px; /* Litt smalere standardbredde */
  box-shadow: 0 6px 12px rgba(0, 0, 0, 0.07); /* Litt mindre skygge */
  display: none;
  z-index: 1000;
}

.submenu-item > .submenu-link, .submenu-item > a {
  display: block;
  padding: 6px 10px; /* Redusert padding for å minske høyden på hvert undermenyelement */
  color: #333;
  text-decoration: none;
  font-size: 12px; /* Justert skriftstørrelse for undermeny */
  line-height: 1.15; /* Justert line-height */
}

.submenu-item > .submenu-link:hover, .submenu-item > .submenu-link:focus {
  background: #f5f5f5;
}

.submenu-item > .submenu-link:focus-visible {
  outline: 2px solid #4a90e2;
  outline-offset: 2px;
}

/* Vis undermeny når åpen (aria-expanded) */
.has-submenu[aria-expanded="true"] > .submenu {
  display: block;
}

/* Nivå 1 undermeny (plassering rett under) */
.has-submenu > .submenu {
  top: 100%;
  left: 0;
}

/* Nivå 2+ undermenyer (plassering ved siden av) */
.submenu-item.has-submenu > .submenu {
  top: 0; /* Align med toppen av det overordnede submenu-elementet */
  left: 100%; /* Plasser til høyre for det overordnede elementet */
  margin-left: 5px; /* Liten avstand fra overordnet element for visuell separasjon */
}

/* Styling for den nye "Season | Round"-informasjonen */
.site-nav .season-round-info {
  color: #ffffff; /* Hvit tekstfarge for kontrast mot den blå bakgrunnen */
  font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-weight: 500;
  font-size: 13px; /* Samme fontstørrelse som meny-lenkene */
  line-height: 1.15; /* Matche linjehøyden */
  padding: 6px 10px; /* Samme indre luft som meny-lenkene */
  white-space: nowrap; /* Forhindrer tekstombrytning */
  margin-left: auto; /* Skyver dette elementet helt til høyre */
}

/* 3. Fjern eller nøytraliser de gamle reglene i media-queryen */
@media (max-width: 500px) {
    .site-nav {
        /* Vi beholder row og flex-start for mobil */
        flex-direction: row !important;
        justify-content: space-between !important;
        padding: 0.1rem 1rem;
    }

    .site-nav .menu {
        display: flex !important;
        flex-direction: row !important;
        width: auto !important;
    }

    .site-nav .season-round-info {
        margin-left: auto !important;
        display: block !important;
        text-align: right !important;
        border-top: none !important;
        padding: 6px 10px !important;
    }

    .menu-item {
        width: auto !important;
    }
}