/* ============================================
   REGION LISTER · header stripe (line 2 under VillageHeader)
   Per the Claude Design handoff. Pure CSS reveal animation —
   no JS required for the animation itself. Mobile drawer
   uses lister-stripe.js.
   ============================================ */

/* ── Wrap with perspective; reveal-fold rotates inside it ────
   Positioned absolutely just under the Freysta header (.site-header
   is position: absolute, top: 0, height ~77 px). Both scroll away
   together with the page. */
/* Fast oeverst, ikke absolutt. Foer forsvant headeren naar man scrollet, og
   naar seksjonsmenyen dokket fantes ingen vei tilbake til Kommuner,
   Arbeidsliv eller spraakbytteren.

   perspective hoerer paa denne forelderen, ikke paa .reveal-fold som roterer
   — legger man begge paa samme element blir brett-inn-en ortografisk og
   folden ser flat ut. */
.lister-stripe-wrap {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  perspective: 520px;
  perspective-origin: 50% 0%;
  z-index: 1000;
  transition: opacity .34s cubic-bezier(.62, 0, .2, 1),
              transform .34s cubic-bezier(.62, 0, .2, 1);
  /* Tidene for utfoldingen. Foer ventet klaffen 1,85 s og brukte 2,1 s; paa
     mobil var menyen borte de foerste ~4 sekundene, akkurat naar folk
     trykker (mobilgjennomgang, okt 2026). Bevegelsen er den samme, den
     starter bare nesten med en gang. Mobilverdiene settes paa egenskapene
     under, ikke paa animasjonene. */
  --strek-forsinkelse: .1s;
  --strek-varighet: .8s;
  --utfolding-forsinkelse: .3s;
  --utfolding-varighet: 1.2s;
}
@media (max-width: 767px) {
  .lister-stripe-wrap {
    --strek-forsinkelse: .05s;
    --strek-varighet: .5s;
    --utfolding-forsinkelse: .15s;
    --utfolding-varighet: .6s;
  }
}

/* DOKKET: seksjonsmenyen har overtatt toppen. Headeren kjoeres opp og maa
   ogsaa slutte aa ta imot klikk — en usynlig stang paa 73 px ville ellers
   fanget museklikk over menyen under. */
html[data-tilstand="dokket"] .lister-stripe-wrap {
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  /* Raskere UT enn INN. Morfen starter som hele stangen paa top:0 — ligger
     headeren igjen bak den, ser man en flate paa en flate og ikke en
     bevegelse. Den skal vaere borte foer formen begynner aa krympe. */
  transition: opacity .16s cubic-bezier(.62, 0, .2, 1),
              transform .16s cubic-bezier(.62, 0, .2, 1);
}

/* FLIK AAPEN: headeren kommer ned igjen, og seksjonsmenyen skyves under den.
   Headeren blir ogsaa staaende saa lenge tastaturfokus er inne i den, og saa
   lenge mobilmenyen er aapen — ellers forsvinner fokus, eller en aapen meny,
   ut i intet ved scroll. Unntakene maa ha minst dokket-regelens spesifisitet
   (0,2,1); et bart :focus-within (0,2,0) tapte og virket aldri. */
html[data-tilstand="flik"] .lister-stripe-wrap,
html[data-tilstand] .lister-stripe-wrap:focus-within,
html[data-tilstand] .lister-stripe-wrap:has(.lister-mobile-drawer:not([hidden])) {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}

/* FAST (VillageHeader variant="fast", forsiden). Massiv midnatt i stedet
   for glass: under stangen ligger heroens egen midnattsflate, og glasset
   ville bare gjentatt den. Under 1180 px trekker stangen seg opp naar man
   scroller nedover (is-skjult, lister-stripe.js) og kommer igjen ved scroll
   opp. Den blir staaende saa lenge fokus er inne i den eller mobilmenyen er
   aapen, som i dokket-tilstanden over. */
.lister-stripe-wrap--fast .lister-stripe {
  background: var(--surface-strong);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
}
@media (max-width: 1179px) {
  .lister-stripe-wrap--fast.is-skjult:not(:focus-within):not(:has(.lister-mobile-drawer:not([hidden]))) {
    transform: translateY(-100%);
    pointer-events: none;
  }
}

/* Ingen bevegelse for den som har bedt om aa slippe. Tilstanden byttes
   direkte. */
@media (prefers-reduced-motion: reduce) {
  .lister-stripe-wrap { transition: none; }
}

/* Aurora hairline — lives OUTSIDE the rotating fold so it stays
   visible even when the fold is showing its back face. */
.aurora-line {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  z-index: 7;
  background: linear-gradient(
    90deg,
    transparent 0%,
    rgba(125, 211, 192, 0.85) 18%,
    rgba(125, 211, 192, 1) 50%,
    rgba(125, 211, 192, 0.85) 82%,
    transparent 100%
  );
  box-shadow:
    0 0 10px rgba(125, 211, 192, 0.55),
    0 0 22px rgba(125, 211, 192, 0.25);
  transform-origin: center;
  transform: scaleX(0);
  animation: lister-line-draw var(--strek-varighet) cubic-bezier(0.55, 0.05, 0.3, 1) var(--strek-forsinkelse) both;
  pointer-events: none;
}

/* The fold — 3D unfold from a closed flap to flat. */
.reveal-fold {
  position: relative;
  transform-origin: top center;
  transform: rotateX(-95deg);
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
  animation: lister-unfold var(--utfolding-varighet) cubic-bezier(0.5, 0, 0.18, 1) var(--utfolding-forsinkelse) both;
}
.reveal-fold .lister-stripe {
  backface-visibility: hidden;
  -webkit-backface-visibility: hidden;
}
.reveal-fold::after {
  /* Ambient shade overlay — reads as light landing on the unfolding
     flap. Starts heavy, lifts as the flap finishes laying flat. */
  content: '';
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(
    180deg,
    rgba(0, 0, 0, 0.72) 0%,
    rgba(0, 0, 0, 0.25) 60%,
    rgba(0, 0, 0, 0) 100%
  );
  animation: lister-flap-light var(--utfolding-varighet) cubic-bezier(0.5, 0, 0.18, 1) var(--utfolding-forsinkelse) both;
  z-index: 4;
}

@keyframes lister-line-draw {
  from { transform: scaleX(0); opacity: 0; }
  20%  { opacity: 1; }
  to   { transform: scaleX(1); opacity: 1; }
}
@keyframes lister-unfold {
  from { transform: rotateX(-95deg); }
  to   { transform: rotateX(0deg); }
}
@keyframes lister-flap-light {
  from { opacity: 1; }
  60%  { opacity: 0.55; }
  to   { opacity: 0; }
}

/* ── Stripe container ────────────────────────────────────────── */
.lister-stripe {
  position: relative;
  min-height: var(--nav-height);
  padding: 0; /* padding lives on .lister-stripe__inner to match Freysta */
  /* GLASS, ikke flat alfa.
     Vertikal gradient framfor én tone: en stang med samme verdi hele veien
     ned leser som en utklippet firkant. To trinn gir den en overkant.
     saturate(140%) er poenget med backdrop-filter her — uten den blir fjord-
     og himmelfargene bak stangen graa naar de gaar gjennom uskarpheten, og
     glasset ser ut som plast. */
  background: linear-gradient(180deg,
    rgba(13, 29, 52, 0.90),
    rgba(10, 22, 40, 0.82));
  backdrop-filter: blur(20px) saturate(140%);
  -webkit-backdrop-filter: blur(20px) saturate(140%);
  /* Haarstrek i stedet for ramme: en lys overkant som fanger lyset, og en
     krem streng under som skiller stangen fra det som ligger bak. En
     border-bottom tegner en strek; dette tegner en KANT. */
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05),
              0 1px 0 rgba(251, 249, 246, 0.07);
}
.lister-stripe__inner {
  /* Mirror .site-header--village .header-inner exactly: full width,
     padding-left/right at --space-2xl. The Freysta logo and our coin
     then sit at the same x-coordinate. */
  max-width: none;
  width: 100%;
  margin: 0 auto;
  padding-left: var(--space-2xl);
  padding-right: var(--space-2xl);
  min-height: inherit;
  display: flex;
  align-items: center;
  /* Menyen HOEYRESTILT, ikke midtstilt.
     space-between paa tre barn gav menyen en plass ingen hadde valgt: den
     fløt et sted mellom merket og kontrollene, og avstanden til
     spraakbryteren endret seg med hvor mange lenker som stod inne. Naa er
     merket ankeret til venstre (margin-right: auto), og meny + kontroller er
     én hoeyrestilt gruppe med en bestemt avstand mellom seg.
     Taaler ogsaa at .lister-nav skjules under 1040: kontrollene blir staaende
     til hoeyre av seg selv, uten en egen regel. */
  justify-content: flex-end;
  /* Avstanden meny -> spraakbryter. Lenkene imellom staar 26px fra hverandre,
     saa skillet maa vaere merkbart stoerre enn det for at menyen skal lese som
     én gruppe og kontrollene som en annen. Flytende, saa det ikke klemmer
     naar vinduet smalner. */
  gap: clamp(26px, 3.2vw, 46px);
  position: relative;
  z-index: 1;
}

/* ── Brand (left) — small Region Lister coin + wordmark text ── */
.lister-brand {
  /* Ankeret. Alt annet i stripa er hoeyrestilt; denne holder venstre kant. */
  margin-right: auto;
  display: inline-flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
  color: var(--color-warm-white);
  font-family: var(--font-display);
  font-size: var(--etikett);
  font-weight: 500;
  letter-spacing: 0.32em;
  text-transform: uppercase;
  white-space: nowrap;
  transition: opacity 200ms ease;
}
.lister-brand:hover {
  opacity: 0.85;
}
/* Tydelig fokusring rundt logoen, som den globale :focus-visible — ikke bare
   lavere opasitet, som ikke synes (WCAG 2.4.7, manuell test 28. sep 2026). */
.lister-brand:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 4px;
  border-radius: 999px;
}

.lister-brand__coin {
  /* Matches the Freysta logo size (44 px) so the two header rows
     visually balance — same disc diameter, same horizontal position. */
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: var(--surface-card-dark);
  box-shadow:
    0 2px 10px rgba(0, 0, 0, 0.3),
    inset 0 0 0 1px rgba(125, 211, 192, 0.28);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.lister-brand__coin img {
  /* Wordmark is a square SVG with the letters REGION / LISTER stacked.
     Inset so the letterforms have a touch of margin from the coin edge. */
  width: 30px;
  height: 30px;
  display: block;
  object-fit: contain;
}


/* ── Nav (right) ─────────────────────────────────────────────── */
.lister-nav {
  display: flex;
  align-items: center;
  gap: 26px;
}

.lister-nav__link {
  position: relative;
  display: inline-block;
  padding: 14px 0;
  color: rgba(251, 249, 246, 0.72);
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 400;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: color 200ms ease;
}
/* Gold-dot separator between sibling links */
.lister-nav__link + .lister-nav__link::before {
  content: '';
  position: absolute;
  left: -13px;
  top: 50%;
  transform: translate(-50%, -50%);
  width: 2px;
  height: 2px;
  border-radius: 50%;
  background: rgba(196, 145, 138, 0.45);
}

.lister-nav__link:hover { color: var(--color-warm-white); }
.lister-nav__link:hover::after {
  content: '';
  position: absolute;
  inset: auto 0 8px 0;
  height: 1px;
  background: rgba(125, 211, 192, 0.4);
}

.lister-nav__link.is-on { color: var(--color-warm-white); }
.lister-nav__link.is-on::after {
  content: '';
  position: absolute;
  inset: auto 0 8px 0;
  height: 1px;
  background: linear-gradient(90deg, var(--color-aurora), rgba(125, 211, 192, 0.2));
}
.lister-language-switch {
  display: inline-grid;
  grid-template-columns: repeat(2, minmax(36px, 1fr));
  align-items: center;
  gap: 2px;
  min-height: 38px;
  padding: 3px;
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 999px;
  background: rgba(6, 16, 29, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
}
.lister-language-switch__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  min-height: 30px;
  padding: 0 9px;
  border-radius: 999px;
  color: rgba(251, 249, 246, 0.58);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-md);
  line-height: var(--linje-tett);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}
.lister-language-switch__item:hover,
.lister-language-switch__item:focus-visible {
  color: var(--color-cream);
  background: rgba(125, 211, 192, 0.1);
}
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026). */
.lister-language-switch__item:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }
.lister-language-switch__item:focus-visible {
  box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.38);
}
.lister-language-switch__item.is-active {
  color: var(--color-midnight);
  background: var(--color-aurora);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.22);
}
/* Utilgjengelig spraak (forhaandsvisning uten soesterdokument): synlig,
   men verken lenke eller invitasjon. Forklaringen ligger i title. */
.lister-language-switch__item.is-unavailable {
  opacity: 0.4;
  cursor: not-allowed;
}
.lister-language-switch__item.is-unavailable:hover {
  background: transparent;
}

/* ── Hoeyregruppa: spraak, innlogging, menyknapp ─────────────── */
/* Kontrollene stod foer som loese barn av .lister-stripe__inner, og
   space-between spredte dem med 60px+ mellomrom seg imellom — to
   sidestilte kontroller som saa tilfeldig plassert ut. Samlet i en gruppe
   styrer vi avstanden innad (10px) mens space-between fortsatt fordeler
   merke, meny og gruppe. Gruppa er ogsaa grunnen til at bryteren ikke
   lenger trenger margin-left:auto under 1040px: naar menylenkene skjules,
   er gruppa siste barn og havner til hoeyre av seg selv. */
.lister-stripe__actions {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: none;
}

/* ── Innlogging (profilikon, ytterst til hoeyre) ─────────────── */
/* Samme pilleform, hoeyde og kantfarge som spraakbryteren ved siden av:
   de to er sidestilte kontroller i topplinja, ikke en kontroll og en
   knapp. 38px hoeyde = 38x38 treffomraade, over 24px-minstemaalet. */
.lister-signin {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 38px;
  height: 38px;
  border: 1px solid rgba(250, 248, 245, 0.18);
  border-radius: 999px;
  background: rgba(6, 16, 29, 0.42);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04);
  color: rgba(251, 249, 246, 0.72);
  text-decoration: none;
  transition: background 0.2s ease, color 0.2s ease, border-color 0.2s ease, box-shadow 0.2s ease;
}
.lister-signin__icon {
  width: 19px;
  height: 19px;
}
.lister-signin:hover,
.lister-signin:focus-visible {
  color: var(--color-cream);
  background: rgba(125, 211, 192, 0.12);
  border-color: rgba(125, 211, 192, 0.42);
}
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026). */
.lister-signin:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }
.lister-signin:focus-visible {
  box-shadow: 0 0 0 2px rgba(125, 211, 192, 0.38);
}

/* ── Dropdown (Kommuner, Boområder) ─────────────────────────── */
.lister-nav__group {
  position: relative;
  display: inline-flex;
  align-items: center;
}
/* Invisible hover-bridge below the toggle that covers the 8 px gap
   to the dropdown menu. Lives on the group (not on the menu) so it
   works even when the menu has overflow:auto (.lister-nav__menu--tall),
   which would otherwise clip a pseudo-element on the menu itself. */
.lister-nav__group::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -14px;
  height: 14px;
  pointer-events: none;
}
.lister-nav__group:hover::after,
.lister-nav__group.is-open::after {
  pointer-events: auto;
}

.lister-nav__link--toggle {
  background: transparent;
  border: none;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 5px;
  /* button strips inherit; bring it back so it matches the anchor links */
  font: inherit;
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 400;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  color: rgba(251, 249, 246, 0.72);
}

.lister-nav__caret {
  width: 10px;
  height: 10px;
  transition: transform 200ms ease;
  opacity: 0.7;
}
.lister-nav__group:hover .lister-nav__caret,
.lister-nav__group.is-open .lister-nav__caret,
.lister-nav__link--toggle[aria-expanded="true"] .lister-nav__caret {
  transform: rotate(180deg);
}

.lister-nav__menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(-6px);
  min-width: 180px;
  margin: 8px 0 0;
  padding: 8px 0;
  list-style: none;
  background: rgba(10, 22, 40, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(125, 211, 192, 0.18);
  border-radius: 8px;
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.4);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 0s linear 200ms;
  z-index: 10;
}
/* Invisible hover-bridge over the 8 px gap between the toggle and
   the menu — keeps the dropdown open while the cursor crosses from
   the button to the items. */
.lister-nav__menu::before {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  top: -12px; /* covers the 8 px gap plus a little overshoot */
  height: 12px;
}
/* Ikke :focus-within: da sto menyen åpen for tastaturet mens knappen sa
   aria-expanded="false" (WCAG 4.1.2, manuell test 28. sep 2026). Tastaturet
   åpner med Enter/mellomrom (is-open), og menyen lukkes når fokus går ut. */
.lister-nav__group:hover .lister-nav__menu,
.lister-nav__group.is-open .lister-nav__menu {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
  transition:
    opacity 200ms ease,
    transform 200ms ease,
    visibility 0s linear 0s;
}

.lister-nav__menu-link {
  display: block;
  padding: 10px 18px;
  color: rgba(251, 249, 246, 0.82);
  font-family: var(--font-body);
  font-size: var(--etikett-liten);
  font-weight: 400;
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  white-space: nowrap;
  transition: background 150ms ease, color 150ms ease;
}
.lister-nav__menu-link:hover,
.lister-nav__menu-link:focus-visible {
  background: rgba(125, 211, 192, 0.12);
  color: var(--color-cream);
}
/* Tydelig fokusring, ikke bare en tone (WCAG 2.4.7, samlet gjennomgang 28. sep 2026). */
.lister-nav__menu-link:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: -2px; }

/* Tall variant for the boområder menu (15 items would otherwise
   spill off the bottom of the viewport on smaller screens) */
.lister-nav__menu--tall {
  max-height: min(70vh, 520px);
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: rgba(125, 211, 192, 0.35) transparent;
}
.lister-nav__menu--tall::-webkit-scrollbar { width: 6px; }
.lister-nav__menu--tall::-webkit-scrollbar-track { background: transparent; }
.lister-nav__menu--tall::-webkit-scrollbar-thumb {
  background: rgba(125, 211, 192, 0.35);
  border-radius: 3px;
}

/* ── Mobilmenyen (≤ 1040 px) ─────────────────────────────────────
   Mobilgjennomgang, okt 2026. Topplinja har tre ting: merket, NO / EN som
   tekst, og «Meny». Innlogging og bevegelse står i menyens fot. Menyen er
   et fullskjermspanel med egen scroll: kommunene direkte, stedene gruppert
   per kommune, jobb samlet, og losen fast nederst. */
.lister-mobile-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  gap: 10px;
  height: 44px;
  padding: 0 18px;
  border: 1px solid color-mix(in srgb, var(--color-warm-white) 28%, transparent);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-warm-white);
  font-family: var(--font-body);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  line-height: var(--linje-tett);
  text-transform: uppercase;
  cursor: pointer;
  transition: background 200ms ease, border-color 200ms ease;
}
.lister-mobile-toggle:hover,
.lister-mobile-toggle:focus-visible {
  background: color-mix(in srgb, var(--color-warm-white) 8%, transparent);
  border-color: color-mix(in srgb, var(--color-warm-white) 45%, transparent);
}
.lister-mobile-toggle:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }
.lister-mobile-toggle__lukk,
.lister-mobile-toggle__kryss { display: none; }
.lister-mobile-toggle[aria-expanded="true"] .lister-mobile-toggle__meny { display: none; }
.lister-mobile-toggle[aria-expanded="true"] .lister-mobile-toggle__lukk { display: inline; }
.lister-mobile-toggle[aria-expanded="true"] .lister-mobile-toggle__kryss {
  display: block;
  width: 16px;
  height: 16px;
}

/* Panelet henger under topplinja. Wrap-en er fast oeverst og har
   perspective, og da er den ogsaa rammen for position: fixed. Panelet er
   derfor absolutt og faar hoeyden selv. */
.lister-mobile-drawer {
  display: none;
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  height: calc(100dvh - var(--nav-height));
  overflow-y: auto;
  overscroll-behavior: contain;
  background: var(--color-midnight);
  border-top: 1px solid color-mix(in srgb, var(--color-warm-white) 10%, transparent);
  z-index: 6;
}
/* Siden under skal ikke rulle mens menyen er aapen (lister-stripe.js). */
html.meny-aapen { overflow: hidden; }

.lister-meny {
  display: flex;
  flex-direction: column;
  min-height: 100%;
  padding: var(--space-lg) var(--space-lg) max(var(--space-lg), env(safe-area-inset-bottom));
}
.lister-meny a:focus-visible,
.lister-meny button:focus-visible,
.lister-meny summary:focus-visible { outline: 2px solid var(--color-aurora); outline-offset: 2px; }

.lister-meny__etikett {
  margin: 0 0 var(--space-md);
  color: var(--aksent-tekst-mork);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
}
.lister-meny__kommuner {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin: 0 0 var(--space-md);
  padding: 0;
  list-style: none;
}
.lister-meny__kommune {
  display: flex;
  align-items: center;
  min-height: 48px;
  padding: 0 16px;
  border: 1px solid color-mix(in srgb, var(--color-warm-white) 16%, transparent);
  border-radius: var(--radius-md);
  color: var(--color-warm-white);
  font-family: var(--font-display);
  font-size: var(--text-xl);
  line-height: var(--linje-tittel);
  text-decoration: none;
}
.lister-meny__kommune[aria-current="page"] { border-color: var(--color-aurora); }
span.lister-meny__kommune { color: var(--tekst-dempet-mork); }

/* Rader: «Steder å bo» og «Jobb og karriere» er <details>, «Historier» og
   «Flytt hit» er lenker. Samme rad, samme hoeyde. */
.lister-meny__rad {
  display: flex;
  align-items: center;
  gap: 16px;
  min-height: 64px;
  border-bottom: 1px solid color-mix(in srgb, var(--color-warm-white) 12%, transparent);
  color: var(--color-warm-white);
  font-family: var(--font-display);
  font-size: var(--text-2xl);
  line-height: var(--linje-tittel);
  text-decoration: none;
  list-style: none;
  cursor: pointer;
}
.lister-meny__rad::-webkit-details-marker { display: none; }
.lister-meny__rad[aria-current="page"] { color: var(--color-aurora); }
/* Pil i summary: peker til hoeyre lukket, ned aapen. Antallet skyver den ut. */
summary.lister-meny__rad::after {
  content: '';
  flex: none;
  width: 8px;
  height: 8px;
  margin: 0 6px 0 auto;
  border-right: 1.5px solid var(--tekst-dempet-mork);
  border-bottom: 1.5px solid var(--tekst-dempet-mork);
  transform: rotate(-45deg);
  transition: transform 200ms ease;
}
.lister-meny__gruppe[open] > summary.lister-meny__rad::after { transform: rotate(45deg); }
.lister-meny__antall {
  margin-left: auto;
  color: var(--tekst-dempet-mork);
  font-family: var(--font-body);
  font-size: var(--etikett);
  letter-spacing: var(--sperring-xs);
}
summary.lister-meny__rad:has(.lister-meny__antall)::after { margin-left: 0; }
.lister-meny__innhold {
  margin: 0;
  padding: var(--space-sm) 0 var(--space-md);
  border-bottom: 1px solid color-mix(in srgb, var(--color-warm-white) 12%, transparent);
}
.lister-meny__underetikett {
  margin: var(--space-sm) 0 0;
  color: var(--tekst-dempet-mork);
  font-size: var(--etikett-liten);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
}
.lister-meny__steder {
  display: grid;
  grid-template-columns: 1fr 1fr;
  column-gap: 16px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.lister-meny__lenke {
  display: flex;
  align-items: center;
  min-height: 44px;
  color: var(--color-warm-white);
  font-size: var(--brod-kort);
  text-decoration: none;
}
.lister-meny__lenke[aria-current="page"] { color: var(--color-aurora); }

.lister-meny__fot {
  margin-top: auto;
  padding-top: var(--space-xl);
}
.lister-meny__los {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  min-height: 52px;
  border-radius: var(--radius-full);
  background: var(--color-aurora);
  color: var(--color-midnight);
  font-size: var(--etikett);
  font-weight: 700;
  letter-spacing: var(--sperring-lg);
  text-transform: uppercase;
  text-decoration: none;
}
.lister-meny__los svg { width: 18px; height: 18px; }
.lister-meny__smaa {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 4px 16px;
  margin-top: var(--space-sm);
}
.lister-meny__liten {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  min-height: 44px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--tekst-dempet-mork);
  font-family: var(--font-body);
  font-size: var(--brod-liten);
  text-decoration: none;
  cursor: pointer;
}
.lister-meny__liten[aria-current="page"] { color: var(--color-warm-white); }
.lister-meny__bevegelse svg { width: 16px; height: 16px; }

/* Menyen trenger minst ~1090 px (merke 218 + lenker 773 + padding 96). Under
 * det stakk den ut av viewporten og ga horisontal scroll — hamburgeren slo
 * ikke inn før 768. Et mellombånd med strammere avstand holder lenkene synlige
 * lenger ned, så hamburgeren først overtar når de faktisk ikke får plass.
 *
 * Tekstgulvet hevet lenkene fra 11 til 12 px (mobilgjennomgang, okt 2026).
 * Da trengte den norske menyen ca. 1105 px og presset merket ut over venstre
 * kant ved 1041. Tettere mellomrom og --sperring-md i stedet for -lg holder
 * den paa én linje helt ned til 1041, der mobilmenyen tar over. */
@media (max-width: 1200px) {
  .lister-nav { gap: 12px; }
  .lister-nav__link,
  .lister-nav__link--toggle { letter-spacing: var(--sperring-md); }
  .lister-nav__link + .lister-nav__link::before { left: -6px; }
}

@media (max-width: 1040px) {
  .lister-nav { display: none; }
  .lister-mobile-toggle { display: inline-flex; }
  .lister-mobile-drawer:not([hidden]) { display: block; }
  /* Innlogging og bevegelse staar i menyens fot (mobilgjennomgang, okt
     2026). Begge har klassen lister-signin. */
  .lister-stripe__actions .lister-signin { display: none; }

  /* Spraakvalget som tekst, NO / EN, med 44 px treffhoeyde. Samme lenker
     som pillen over 1040 px, ny drakt. */
  .lister-language-switch {
    gap: 0;
    min-height: 44px;
    padding: 0;
    border: 0;
    background: none;
    box-shadow: none;
  }
  .lister-language-switch__item {
    position: relative;
    min-width: 44px;
    min-height: 44px;
    padding: 0 8px;
    background: none;
    box-shadow: none;
    color: var(--tekst-dempet-mork);
    font-size: var(--etikett);
    letter-spacing: var(--sperring-md);
  }
  /* Skilletegnet er pynt: tom alternativtekst, saa det ikke leses opp. */
  .lister-language-switch__item + .lister-language-switch__item::before {
    content: '/' / '';
    position: absolute;
    left: -3px;
    color: color-mix(in srgb, var(--color-warm-white) 30%, transparent);
    font-weight: 400;
  }
  .lister-language-switch__item.is-active {
    background: none;
    box-shadow: none;
    color: var(--color-aurora);
  }
  .lister-language-switch__item:hover,
  .lister-language-switch__item:focus-visible { background: none; color: var(--color-warm-white); }
}

@media (max-width: 768px) {
  .lister-stripe {
    padding: 0;
  }
  .lister-stripe__inner {
    gap: 14px;
    min-width: 0;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  .lister-brand {
    min-width: 0;
    font-size: var(--etikett-liten);
    letter-spacing: 0.3em;
    gap: 10px;
  }
  .lister-brand__coin { width: 36px; height: 36px; }
  .lister-brand__coin img { width: 24px; height: 24px; }
}

@media (max-width: 480px) {
  .lister-stripe__inner {
    padding-left: var(--space-md);
    padding-right: var(--space-md);
  }
}

/* ── Reduced motion — go directly to final state ─────────────── */
@media (prefers-reduced-motion: reduce) {
  .reveal-fold,
  .reveal-fold::after,
  .aurora-line {
    animation: none !important;
    transform: none !important;
    opacity: 1 !important;
  }
  .reveal-fold::after { display: none; }
}
/* «Stopp bevegelse» gjoer det samme: topplinja staar ferdig fra start.
   Ikke pause (som de uendelige animasjonene lenger ned) — da ville klaffen
   frosset halvveis. Klassen settes i et inline-skript foran stangen, saa
   utfoldingen aldri rekker aa starte (mobilgjennomgang, okt 2026). */
html.bevegelse-av .reveal-fold,
html.bevegelse-av .reveal-fold::after,
html.bevegelse-av .aurora-line {
  animation: none !important;
  transform: none !important;
  opacity: 1 !important;
}
html.bevegelse-av .reveal-fold::after { display: none; }

/* ── Spraakbryteren paa smal skjerm ──────────────────────────────
 * Bryteren staar utenfor .lister-nav og foelger derfor ikke med naar
 * lenkene skjules under 1040px. Foer laa den som loest barn og trengte
 * margin-left:auto for ikke aa fly midt i linja; naa ligger den i
 * .lister-stripe__actions sammen med innlogging og menyknapp, og gruppa
 * havner til hoeyre av seg selv naar lenkene forsvinner. Regelen er
 * derfor fjernet — men KRAVET staar: bryteren skal vaere synlig i
 * topplinja paa mobil, ikke gjemt som punkt ni i menyen.
 */

/* Ingen innstramming under 480px. Foerste utkast krympet bryteren til 10px
 * skrift og 30x28 treffomraade «for aa faa plass» — men maalingen viste at
 * den ikke trengte det: ved 375px er hoeyre kant paa 359 av 375 i full
 * stoerrelse. Da er 10px skrift og et mindre treffomraade en pris betalt for
 * ingenting, og 10px bryter dessuten med grensen paa 11px vi satte i dag. */

/* «Hopp til innhold»: første stopp for tastaturet, usynlig til den får
   fokus, og da over menyen øverst til venstre (tilgjengelighet 28. sep 2026). */
.hopplenke {
  position: fixed;
  top: 12px;
  left: 12px;
  z-index: 1100;
  padding: 10px 18px;
  border-radius: 999px;
  background: var(--color-warm-white);
  color: var(--color-midnight);
  font-family: var(--font-body);
  font-size: var(--etikett);
  line-height: var(--linje-etikett);
  letter-spacing: var(--sperring-sm);
  text-transform: uppercase;
  text-decoration: none;
  transform: translateY(-160%);
  transition: transform 0.15s ease;
}
.hopplenke:focus-visible,
.hopplenke:focus {
  transform: none;
  outline: 2px solid var(--color-aurora);
  outline-offset: 3px;
}
/* Målet for hopplenken: usynlig, uten plass og uten fokusramme. */
.hopplenke-maal { display: block; height: 0; overflow: hidden; outline: none; }

/* ── Bryteren for bevegelse (tilgjengelighet 2.2.2, 28. sep 2026) ──
   Samme runde form som innloggingen. Ikonet følger html.bevegelse-av, så det
   står riktig fra første tegning; navnet er fast og tilstanden står i
   aria-pressed. Tydelig fokusring, ikke bare en tone. */
.lister-bevegelse {
  padding: 0;
  font: inherit;
  cursor: pointer;
}
.lister-bevegelse svg { width: 17px; height: 17px; }
.lister-bevegelse__spill { display: none; }
html.bevegelse-av .lister-bevegelse__pause { display: none; }
html.bevegelse-av .lister-bevegelse__spill { display: block; }
.lister-bevegelse:focus-visible {
  outline: 2px solid var(--color-aurora);
  outline-offset: 3px;
}

/* Bevegelse av: uendelige animasjoner fryses der de står. Bare disse — en
   generell regel ville også frosset menyens utfolding og innfadingene. */
html.bevegelse-av .vegg-navn,
html.bevegelse-av .v-hero-media,
html.bevegelse-av .status__dot,
html.bevegelse-av .bb-hero__hint,
html.bevegelse-av .bb-swell-1,
html.bevegelse-av .bb-swell-2,
html.bevegelse-av .bb-swell-3,
html.bevegelse-av .bb-swell-4,
html.bevegelse-av .bb-swell-5 {
  animation-play-state: paused !important;
}