/* ============================================================
   LÅNGEDSVERKEN – DELAD TOPPMENY (nav.css)
   ============================================================
   Samma meny-struktur och logik på alla sidor (startsida,
   rundvandring, rumssidor, framtida innehållssidor). Färgschemat
   växlar via en extra klass på <header>: lv-nav--dark eller
   lv-nav--light, beroende på om sidans eget bakgrundstema är
   mörkt eller ljust. Innehållet (loggan, länkarna) är alltid
   detsamma.

   Uppdatera DENNA fil för att ändra menyns utseende på alla
   sidor på en gång. Skapa en ny sida? Kopiera <header>-blocket
   från t.ex. index.html och lägg till en länk till denna fil.

   2026-09-04: skapad tillsammans med beslutet att ge alla sidor
   samma toppmeny (se CONTEXT.md för bakgrund/beslut).
   ============================================================ */

/* Menyn är sticky (56px hög) på alla sidor, vilket gör att interna
   ankarlänkar (t.ex. fotnoter <-> källförteckning) annars hoppar till en
   punkt som hamnar dold bakom menyn. scroll-padding-top kompenserar för
   detta site-brett, för alla nuvarande och framtida #ankare.
   Tillagt 2026-09-07 efter rapport om icke-fungerande fotnotslänkar på
   introduktion-till-projektet.html. */
html {
  scroll-padding-top: 72px;
}

.lv-nav {
  position: sticky;
  top: 0;
  z-index: 100;
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 0 20px;
  height: 56px;
  flex-shrink: 0;
  font-family: 'IBM Plex Sans', -apple-system, 'Segoe UI', sans-serif;
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
}

.lv-nav-brand {
  font-family: 'IBM Plex Mono', ui-monospace, 'SF Mono', Consolas, monospace;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  flex-shrink: 0;
  white-space: nowrap;
}

.lv-nav-links {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  /* Skjuter länkarna (och en ev. .lv-nav-extra efter dem) till höger kant,
     oavsett om sidan har en .lv-nav-extra eller inte -- annars hamnar
     länkarna olika (höger vs. mitten) beroende på om headern har 2 eller
     3 flex-barn (fixat 2026-09-04, se CONTEXT.md). */
  margin-left: auto;
}

.lv-nav-link {
  display: flex;
  align-items: center;
  gap: 6px;
  height: 34px;
  padding: 0 12px;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12.5px;
  letter-spacing: 0.03em;
  text-decoration: none;
  white-space: nowrap;
  transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.lv-nav-caret { font-size: 8px; }

/* Kortare etiketter för smala mobilskärmar (t.ex. "Rundvandring" -> "360°",
   "Om projektet" -> "Om") -- se @media (max-width: 640px) nedan. Döljs som
   standard, växlas fram där. */
.lv-nav-short { display: none; }

.lv-nav-context {
  /* Dold på begäran (2026-09): "Starta rundturen här" i toppmenyn togs bort.
     Elementet finns kvar i DOM:en eftersom rundvandringens JS sätter dess
     innerHTML vid varje nodbyte (se switchToScene i rundvandring_langedsverken.html)
     -- att ta bort själva elementet skulle kasta ett null-fel och stoppa
     nodbyte, sidmeta-uppdatering och minikartans aktiva punkt. display:none
     håller det borta ur menyn utan att röra den logiken. */
  display: none !important;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 12px;
  white-space: nowrap;
  padding: 0 4px 0 2px;
}

.lv-nav-dropdown { position: relative; }
.lv-nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  z-index: 110;
  min-width: 250px;
  padding: 6px;
  border: 1px solid;
  border-radius: 8px;
}
.lv-nav-dropdown-menu.open { display: block; }
.lv-nav-dropdown-heading {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 9px;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 7px 10px 8px;
}
.lv-nav-dropdown-menu a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  text-decoration: none;
  padding: 9px 10px;
  border-radius: 5px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
}
.lv-nav-dropdown-code {
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 10px;
  font-weight: 400;
}

/* En dropdown-rad för en sida som inte är byggd än (t.ex. Introduktion,
   Vår vision, Källmaterial) -- visas nedtonad och går inte att klicka på,
   så menyn kan förhandsvisas i sin helhet innan alla sidor finns. Byt ut
   mot en vanlig <a> (samma klasser/struktur som i "Rum"-dropdownen) den
   dag sidan är byggd. */
.lv-nav-dropdown-menu .lv-nav-dropdown-soon {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 14px;
  padding: 9px 10px;
  border-radius: 5px;
  font-family: 'IBM Plex Sans', sans-serif;
  font-size: 13.5px;
  font-weight: 500;
  opacity: 0.5;
  cursor: default;
}

/* Språkväxlare (SE | EN) -- rent visuellt tills vidare, ingen
   översättning finns än. SE är alltid aktiv/markerad, EN nedtonad. */
.lv-nav-lang {
  display: flex;
  align-items: center;
  flex-shrink: 0;
  border-radius: 6px;
  overflow: hidden;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.05em;
}
.lv-nav-lang span { padding: 4px 9px; }
.lv-nav-lang-soon { font-weight: 400; cursor: default; }

/* Klickbar sprakvarant (samma platshallar-cell, men riktig lank till oversatt tvillingsida) -- anvands nar en oversattning finns, .lv-nav-lang-soon anvands fortfarande for sidor utan oversattning an. */
.lv-nav-lang-other {
  padding: 4px 9px; font-weight: 400; text-decoration: none;
  display: inline-block; transition: color 0.15s, background 0.15s;
}

/* Primär call-to-action i menyn (t.ex. "360° vy" på rumssidorna) --
   samma mörka pill-knapp oavsett tema, för att den ska sticka ut som en
   tydlig handling snarare än ett menyval. */
.lv-nav-cta {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 34px;
  padding: 0 16px;
  border-radius: 6px;
  background: #1c1a18;
  color: #f3f1ea;
  text-decoration: none;
  font-family: 'IBM Plex Sans', sans-serif;
  font-weight: 600;
  font-size: 13px;
  white-space: nowrap;
  transition: opacity 0.15s;
}
@media (hover: hover) { .lv-nav-cta:hover { opacity: 0.85; } }
.lv-nav-cta span { color: #7db8e0; }

.lv-nav-extra { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.lv-nav-icon-btn {
  width: 34px;
  height: 34px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid;
  border-radius: 6px;
  cursor: pointer;
  font-family: 'IBM Plex Mono', ui-monospace, monospace;
  font-size: 15px;
  background: none;
  transition: background 0.15s, border-color 0.15s;
}

@media (max-width: 640px) {
  /* Menyn har vuxit (Rum, Om projektet, SE|EN, ev. en CTA-knapp) och får
     inte plats på smala mobilskärmar. Dels kortas de två längsta
     etiketterna ("Rundvandring" -> "360°", "Om projektet" -> "Om") så hela
     menyn oftast får plats utan att rulla, dels finns overflow-x kvar som
     säkerhetsnät för de allra smalaste skärmarna/framtida tillägg. */
  .lv-nav {
    padding: 0 12px;
    gap: 10px;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .lv-nav::-webkit-scrollbar { display: none; }
  .lv-nav-brand,
  .lv-nav-links,
  .lv-nav-lang,
  .lv-nav-cta { flex-shrink: 0; }
  .lv-nav-link { padding: 0 9px; }
  .lv-nav-full { display: none; }
  .lv-nav-short { display: inline; }

  /* DEN FAKTISKA ORSAKEN till att Rum-/Om projektet-menyerna inte gick att
     fälla ut på mobilen (Leif rapporterade 2026-09-06, kvarstod trots
     etikett-förkortningen ovan): overflow-x: auto på .lv-nav tvingar enligt
     CSS-specen även overflow-y till "auto" på samma element (en axel kan
     inte vara "auto" och den andra "visible" samtidigt). Dropdown-panelen
     positioneras normalt med position:absolute rakt under knappen och blir
     högre än de 56px header-raden är hög -- men eftersom hela headern nu
     klipper vertikalt (overflow-y:auto) klipptes panelen bort helt, osynlig,
     även om knappen själv reagerade korrekt (bytte färg/aria-expanded).
     Första försöket att fixa detta (byta panelen till position:fixed rakt
     under headern) räckte INTE: .lv-nav har backdrop-filter (den
     genomskinliga oskärpan bakom headern), och backdrop-filter gör enligt
     CSS-specen elementet till en "containing block" för sina egna fixed-
     positionerade barn -- precis som transform/filter gör. Det innebär att
     "fixed" här i praktiken beräknades relativt till den 56px höga .lv-nav-
     rutan (inte hela skärmen), och klipptes bort av samma overflow-y:auto
     igen. Fix: stäng av backdrop-filter på mobil (den täta bakgrundsfärgen
     ger ändå tillräcklig kontrast utan oskärpan) så att .lv-nav slutar vara
     en containing block -- då positioneras panelen äntligen mot hela
     skärmen, opåverkad av .lv-nav:s scroll-behållare. */
  .lv-nav {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .lv-nav-dropdown-menu {
    position: fixed;
    top: 56px;
    left: 12px;
    right: 12px;
    min-width: 0;
  }
}

/* ---------------- Mörkt tema ----------------
   Används på startsidan och rundvandringen (mörk botten). */
.lv-nav--dark {
  background: rgba(22, 27, 34, 0.86);
  border-bottom: 1px solid #2b323d;
  color: #e8ebf0;
}
.lv-nav--dark .lv-nav-brand { color: #ff8a3d; }
.lv-nav--dark .lv-nav-link { color: #e8ebf0; }
@media (hover: hover) { .lv-nav--dark .lv-nav-link:hover { background: #262d39; border-color: #3a4250; } }
.lv-nav--dark .lv-nav-link[aria-expanded="true"] { background: #262d39; border-color: #3a4250; }
.lv-nav--dark .lv-nav-link[aria-expanded="true"] { color: #ff8a3d; border-color: #c96a2c; }
.lv-nav--dark .lv-nav-link.current { color: #ff8a3d; background: rgba(255,138,61,0.1); }
.lv-nav--dark .lv-nav-caret { color: #8b93a3; }
.lv-nav--dark .lv-nav-context { color: #8b93a3; }
.lv-nav--dark .lv-nav-dropdown-menu {
  background: #161b22; border-color: #2b323d; box-shadow: 0 14px 34px rgba(0,0,0,0.45);
}
.lv-nav--dark .lv-nav-dropdown-heading { color: #8b93a3; }
.lv-nav--dark .lv-nav-dropdown-menu a { color: #e8ebf0; }
@media (hover: hover) { .lv-nav--dark .lv-nav-dropdown-menu a:hover { background: #1f2530; } }
.lv-nav--dark .lv-nav-dropdown-menu a.current { background: #1f2530; }
.lv-nav--dark .lv-nav-dropdown-code { color: #8b93a3; }
.lv-nav--dark .lv-nav-dropdown-menu .lv-nav-dropdown-soon { color: #e8ebf0; }
.lv-nav--dark .lv-nav-lang { background: #1f2530; border: 1px solid #2b323d; }
.lv-nav--dark .lv-nav-lang-current { background: #262d39; color: #ff8a3d; }
.lv-nav--dark .lv-nav-lang-soon { color: #8b93a3; }
.lv-nav--dark .lv-nav-lang-other { color: #8b93a3; }
@media (hover: hover) { .lv-nav--dark .lv-nav-lang-other:hover { color: #e8ebf0; background: #262d39; } }
.lv-nav--dark .lv-nav-icon-btn { background: #1f2530; border-color: #2b323d; color: #e8ebf0; }
@media (hover: hover) { .lv-nav--dark .lv-nav-icon-btn:hover { background: #262d39; border-color: #3a4250; } }
.lv-nav--dark .lv-nav-icon-btn[aria-pressed="true"] { color: #ff8a3d; border-color: #c96a2c; }
.lv-nav--dark .lv-nav-icon-btn:focus-visible { outline: 2px solid #ff8a3d; outline-offset: 2px; }

/* ---------------- Ljust tema ----------------
   Används på rumssidorna (ljus botten). Accentfärgen hålls
   orange, som på övriga sidor, för att menyn ska kännas som
   samma varumärke oavsett bottenfärg -- sidans eget innehåll kan
   fortfarande använda andra accentfärger internt (t.ex. blått på
   rumssidorna). */
.lv-nav--light {
  background: rgba(243, 241, 234, 0.94);
  border-bottom: 1px solid #d3cfc5;
  color: #1c1a18;
}
.lv-nav--light .lv-nav-brand { color: #1c1a18; }
.lv-nav--light .lv-nav-link { color: #6b6862; }
@media (hover: hover) { .lv-nav--light .lv-nav-link:hover { background: #ece9e1; border-color: #d3cfc5; } }
.lv-nav--light .lv-nav-link[aria-expanded="true"] { background: #ece9e1; border-color: #d3cfc5; }
.lv-nav--light .lv-nav-link[aria-expanded="true"] { color: #c96a2c; }
.lv-nav--light .lv-nav-link.current { color: #c96a2c; background: rgba(201,106,44,0.08); }
.lv-nav--light .lv-nav-caret { color: #a8a49b; }
.lv-nav--light .lv-nav-context { color: #a8a49b; }
.lv-nav--light .lv-nav-dropdown-menu {
  background: #f3f1ea; border-color: #d3cfc5; box-shadow: 0 10px 34px rgba(0,0,0,0.2);
}
.lv-nav--light .lv-nav-dropdown-heading { color: #a8a49b; }
.lv-nav--light .lv-nav-dropdown-menu a { color: #1c1a18; }
@media (hover: hover) { .lv-nav--light .lv-nav-dropdown-menu a:hover { background: #ece9e1; } }
.lv-nav--light .lv-nav-dropdown-menu a.current { background: #ece9e1; }
.lv-nav--light .lv-nav-dropdown-code { color: #8a877f; }
.lv-nav--light .lv-nav-dropdown-menu .lv-nav-dropdown-soon { color: #1c1a18; }
.lv-nav--light .lv-nav-lang { background: #ece9e1; border: 1px solid #d3cfc5; }
.lv-nav--light .lv-nav-lang-current { background: #e4e0d6; color: #1c1a18; }
.lv-nav--light .lv-nav-lang-soon { color: #a8a49b; }
.lv-nav--light .lv-nav-lang-other { color: #a8a49b; }
@media (hover: hover) { .lv-nav--light .lv-nav-lang-other:hover { color: #1c1a18; background: #e4e0d6; } }
.lv-nav--light .lv-nav-icon-btn { background: #ece9e1; border-color: #d3cfc5; color: #1c1a18; }
@media (hover: hover) { .lv-nav--light .lv-nav-icon-btn:hover { background: #e1ddd1; border-color: #c5c0b3; } }
.lv-nav--light .lv-nav-icon-btn[aria-pressed="true"] { color: #c96a2c; border-color: #c96a2c; }
.lv-nav--light .lv-nav-icon-btn:focus-visible { outline: 2px solid #c96a2c; outline-offset: 2px; }