/* ============================================================
   AEMA Booking — Delt mobilnav-mekanisme (meny-knapp + panel)
   Inkluder med: <link rel="stylesheet" href="/css/nav.css">
                 <script src="/js/nav.js"></script>

   Forventet markup (se js/nav.js for oppførsel):
     <button id="nav-meny-knapp" class="lg:hidden" aria-expanded="false" aria-controls="<panel-id>">...</button>
     <div id="<panel-id>" class="hidden"> ... mobil-lenker ... </div>

   Knappens aria-controls peker på panelet js/nav.js skal åpne/lukke —
   selve mekanismen bryr seg aldri om hvilket element det er, kun at
   det finnes. Panelets INNHOLD kan derfor være helt uavhengig av en
   eventuell separat desktop-lenkeliste (f.eks. "#nav-lenker" for
   desktop, "#nav-lenker-mobil" for mobil, med ulikt lenkesett) —
   regelen under styrer kun VISNING via klassen "nav-apen", uansett
   hvilket element den havner på. Media queryen garanterer at ingen
   JS-tilstand noensinne kan påvirke visningen ved >=1024px (desktop
   urørt uansett).

   VIKTIG — #nav-meny-knapp sin display-verdi eies UTELUKKENDE av
   denne filen, ikke av HTML-markupets "lg:hidden"-klasse. En
   ID-selektor (#nav-meny-knapp) har alltid høyere spesifisitet enn
   en klasse-selektor (.lg\:hidden), UANSETT hvilken av dem som står
   inni en media query — spesifisitet sammenlignes uavhengig av
   media queries. Et tidligere forsøk på å la Tailwind sin "lg:hidden"
   skjule knappen ble derfor alltid overstyrt av en ubetinget
   "#nav-meny-knapp { display:flex }" her i filen, slik at knappen
   feilaktig forble synlig også på desktop. Løsningen er at denne
   filen selv definerer BEGGE tilstandene eksplisitt (skjult som
   grunnregel, display:flex kun inne i @media (max-width:1023px)) —
   ingen konkurrerende kilde à la Tailwind-klassen er lenger involvert
   i utfallet.

   Brytepunkt: 1024px (Tailwind sin innebygde "lg:"), IKKE Tailwind
   sin "sm:" (640px). En mobiltelefon i liggende retning er ofte
   640–926px bred — med "sm:" ville den feilaktig blitt klassifisert
   som desktop og vist hele lenkelisten + språkvelger uten meny-knapp.
   Markup på sidene som bruker denne mekanismen setter derfor
   "hidden lg:flex"/"lg:hidden" på nav-elementene, ikke "sm:". Dette
   endrer ALDRI selve "sm"-verdien i noen tailwind.config — kun hvilket
   brytepunkt-prefiks nav-elementene bruker. Andre "sm:"-baserte
   layouter på samme side (f.eks. datovelgere) er upåvirket.
   ============================================================ */

#nav-meny-knapp {
  display: none;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: none;
  background: none;
  cursor: pointer;
  color: #43474a;
  border-radius: 8px;
  transition: background 0.15s;
  -webkit-tap-highlight-color: transparent;
}
#nav-meny-knapp:hover { background: rgba(105,93,73,0.08); }
#nav-meny-knapp:focus-visible { outline: 2px solid #695d49; outline-offset: 2px; }

/* Hamburger→X-morf — tre linjer som roterer/forsvinner til et X når
   menyen åpnes. Drevet KUN av aria-expanded, som js/nav.js allerede
   setter til "true"/"false" ved åpne()/lukk() — ingen egen JS trengs
   for selve animasjonen. Erstatter den tidligere statiske Material
   Symbols "menu"-glyfen (ren ikon-BYTTE, ikke en animasjon). */
.hamburger-icon {
  position: relative;
  display: inline-block;
  width: 20px;
  height: 14px;
}
.hamburger-linje {
  position: absolute;
  left: 0;
  width: 100%;
  height: 2px;
  background: currentColor;
  border-radius: 1px;
  transition: transform 0.3s ease, opacity 0.2s ease, top 0.3s ease;
}
.hamburger-linje:nth-child(1) { top: 0; }
.hamburger-linje:nth-child(2) { top: 6px; }
.hamburger-linje:nth-child(3) { top: 12px; }
#nav-meny-knapp[aria-expanded="true"] .hamburger-linje:nth-child(1) {
  top: 6px;
  transform: rotate(45deg);
}
#nav-meny-knapp[aria-expanded="true"] .hamburger-linje:nth-child(2) {
  opacity: 0;
}
#nav-meny-knapp[aria-expanded="true"] .hamburger-linje:nth-child(3) {
  top: 6px;
  transform: rotate(-45deg);
}

@media (max-width: 1023px) {
  #nav-meny-knapp {
    display: flex;
  }

  .nav-apen {
    display: flex !important;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    z-index: 61;
    background: #f8f9fa;
    border-bottom: 1px solid #c3c7ca;
    padding: 8px 20px 16px;
    box-shadow: 0 12px 24px rgba(0,0,0,0.08);
  }
  .nav-apen a {
    display: block;
    width: 100%;
    padding: 12px 4px;
    font-size: 0.8rem;
    border-bottom: 1px solid rgba(195,199,202,0.4);
  }
  .nav-apen a:last-child { border-bottom: none; }
}

/* #nav-lenker sine lenker skal aldri brytes internt ("Kontakt oss"
   brøt til to linjer ved smalere desktopbredder) — kombinert med
   moderat redusert gap/padding i selve sidenes markup (lg:gap-4,
   lg:px-10 — se booking/rom/camping/aktiviteter/bord/kontakt.html)
   for å gi nok bredde til at hele menyen fortsatt vises på vanlig
   bærbar PC, i stedet for å utsette visningen til et bredere
   brytepunkt. */
#nav-lenker a {
  white-space: nowrap;
}

/* Animert understrek (vokser fra midten ved hover, eller står fast på
   aktiv side) — adoptert fra index.html sitt eget premium-nav
   (.nav-premium-link i index.html sin egen <style>) til de andre 6
   sidene med #nav-lenker. Erstatter den tidligere statiske
   border-b/pb-0.5-klassen som satt fast på aria-current="page"-lenken
   (fjernet fra selve HTML-en på disse 6 sidene, se commit) — samme
   visuelle sluttresultat i hvile, men nå animert og felles med hover.

   :not(.nav-premium-link) er nødvendig fordi index.html sitt eget
   #nav-lenker også matches av "#nav-lenker a"-selektoren over — uten
   unntaket ville denne regelen og index.html sin egen (annen
   fargekontekst: hvit tekst over hero-bilde) begge forsøkt å style
   samme ::after-pseudoelement. */
#nav-lenker a:not(.nav-premium-link) {
  position: relative;
  padding-bottom: 3px;
}
#nav-lenker a:not(.nav-premium-link)::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: center;
  transition: transform .3s ease;
}
#nav-lenker a:not(.nav-premium-link):hover::after,
#nav-lenker a:not(.nav-premium-link)[aria-current="page"]::after {
  transform: scaleX(1);
}

/* ============================================================
   Sticky mobilheader — felles klasse, ALDRI kopiert som egne
   regler per side (11 offentlige sider bruker denne ene klassen).

   Legges PÅ SAMME element som allerede bærer #nav-meny-knapp sin
   forelder (den ene <nav>/<header> som utgjør mobilheaderen). Noen
   sider (aktiviteter/camping/bord/kontakt/tillegg/enhet) har FRA FØR
   sticky top-0 z-50 bg-background/95 backdrop-blur-sm på dette
   elementet — DER er baren i bruk på alle bredder (ingen egen
   hero-nav), og disse Tailwind-klassene skal fortsatt eie
   >=1024px-oppførselen uendret. Denne klassen legges KUN til for å
   garantere solid (ugjennomsiktig) bakgrunn og tilstrekkelig lag
   under 1024px — den overstyrer aldri noe ved >=1024px (media query).

   Andre sider (index/booking/rom sin mobil-only topbar, og
   bekreftelse.html/min-booking.html som tidligere ikke var sticky i
   det hele tatt) får HELE sin sticky/z-index/bakgrunn fra akkurat
   denne ene regelen.

   !important er nødvendig fordi rekkefølgen mellom denne fila og
   Tailwind CDN sin dynamisk injiserte <style> (bg-background/95 osv.)
   ikke er garantert — samme begrunnelse som #nav-meny-knapp over. */
@media (max-width: 1023px) {
  .mobilnav-header {
    position: sticky !important;
    top: 0 !important;
    z-index: 60 !important;
    background-color: #f8f9fa !important;
  }
}

/* ============================================================
   Global footer-navigasjon (Hjem/Rorbuer/Hotellrom/Camping/
   Aktiviteter/Middag/Kontakt/Min booking) dupliserer nå den nye
   mobilheaderen sin meny under 1024px — skjules derfor der. Legges
   KUN på selve lenkegruppen (aldri hele <footer>), slik at
   copyright/adresse/Personvern/handlingsknapper ("Til forsiden" osv.)
   alltid forblir synlige. Sidene som bruker klassen setter
   "display:contents" inline på wrapperen, slik at lenkene ved
   >=1024px oppfører seg som om de sto direkte i forelderen sin
   flex/gap-layout (helt uendret desktop-utseende) — denne regelen
   overstyrer kun det under 1024px. */
@media (max-width: 1023px) {
  .footer-nav-global {
    display: none !important;
  }
}

/* ============================================================
   Dynamisk overnatting-meny — se js/tenant.js sin
   AEMA_byggOvernattingNav(). Slot-en (.nav-overnatting-slot) erstatter de
   tidligere statiske Rorbuer/Hotellrom-lenkene i #nav-lenker/#nav-lenker-
   mobil/.footer-nav-global på alle gjestesider. display:contents sikrer at
   det ENE lenke-elementet (0 typer → tom slot, 1 type → typen selv, 2+
   typer → «Overnatting» til /overnatting) flyter helt likt med de andre,
   faste nav-elementene i samme flex/gap-rad — ingen ekstra boks/innrykk.
   MERK: en tidligere hover-styrt dropdown-variant (nedtrekkspanel med
   pil-ikon) er bevisst fjernet — «Overnatting» er nå ETT vanlig menypunkt
   som lenker videre til en egen oversiktsside, akkurat som Camping. Selve
   lenken trenger derfor INGEN egen CSS her — den gjenbruker uendret de
   samme klassene (NAV_STANDARD_KLASSE/NAV_FOOTER_KLASSE/nav-premium-link)
   som ethvert annet menypunkt, satt av js/tenant.js. */
.nav-overnatting-slot {
  display: contents;
}