/* SV | EN-reglaget i sidhuvudet på de publika sidorna (2026-10-19).
   Samma komponent på /, /om, /privacy.html och de engelska sidorna under
   /en/. Filen laddas bara i läget PÅ: länken till den står i
   sprak-pa-blocket i varje sidas head, precis som reglaget i navet
   (services/sprakval.py, docs/projects/ENGELSKA_LANDNINGSSIDA_PLAN_2026-10-16.md §14).

   Det aktiva språket är ett ifyllt segment utan länk (aria-current), det
   andra en länk. I källan står det aktiva segmentet alltid först, eftersom
   de engelska sidorna byggs ur de svenska och ska ha samma taggföljd
   (tests/unit/test_engelska_sidor.py). Omslagets lang vänder därför
   ordningen på engelska, så att det alltid står SV till vänster och EN
   till höger.

   Färgerna står utskrivna och inte som var(--...): sidorna har olika namn
   på samma färger (--green-hover i index.html, --green-dark i privacy.html).
   Selektorerna börjar med nav för att slå sidornas egna länkregler,
   .nav-links a:not(.btn) är (0,2,1) och :hover-varianten (0,3,1). */

.sprak-reglage {
  display: inline-flex; align-items: stretch; flex: none; box-sizing: border-box;
  height: 36px; padding: 2px; border: 1px solid #e7e5df; border-radius: 100px;
  background: #fefdfa; font-size: 13px; font-weight: 600; line-height: 1;
  letter-spacing: .03em; vertical-align: middle;
  position: relative; isolation: isolate;
}
.sprak-reglage[lang="en"] { flex-direction: row-reverse; }

nav .sprak-reglage .sprak-seg {
  display: inline-flex; align-items: center; justify-content: center; box-sizing: border-box;
  min-width: 40px; min-height: 0; margin: 0; padding: 0 10px; border-radius: 100px;
  font-size: 13px; font-weight: 600; white-space: nowrap; text-decoration: none;
  position: relative; z-index: 1;
}
nav .sprak-reglage .sprak-aktiv { background: #1a5c38; color: #fff; cursor: default; }

/* Det andra språket: ljusare text som blir mörk vid hover. */
nav .sprak-reglage a.sprak-seg { color: #656d67; transition: color .15s ease; }
nav .sprak-reglage a.sprak-seg:hover { color: #1c1c1a; }
nav .sprak-reglage a.sprak-seg:focus-visible { outline: 2px solid #1a5c38; outline-offset: 2px; border-radius: 100px; }

/* Träffytan blir 44 x 44 px, fast segmentet syns 40 x 30 px: samma mått
   som hamburgaren bredvid på mobilen. */
nav .sprak-reglage a.sprak-seg::after { content: ""; position: absolute; inset: -7px -2px; }

/* Språkbytet (2026-10-20, /js/sprakval.js). Vid klick läggs markeringen
   .sprak-tumme över det aktiva segmentet och glider till länken, medan
   segmenten byter textfärg. Utan skript eller med reducerad rörelse
   händer inget av det här, och länken byter sida direkt. */
.sprak-reglage .sprak-tumme {
  position: absolute; z-index: 0; border-radius: 100px; background: #1a5c38;
  pointer-events: none;
}
nav .sprak-reglage.byter .sprak-aktiv { background: transparent; color: #656d67; transition: color .2s ease-out; }
nav .sprak-reglage.byter a.sprak-seg { color: #fff; transition: color .2s ease-out; }

/* Sidan tonar över till den andra språkversionen, där webbläsaren har View
   Transitions mellan dokument (Chrome och Edge 126+, Safari 18.2+). Regeln
   gäller alla sidor som laddar filen, så skriptet stoppar övergången i
   pageswap när navigeringen inte kom från reglaget. Reglaget får ett eget
   namn och syns därför stå kvar, eller glida de pixlar det flyttar, medan
   resten av sidan tonar. Namnet sitter på hela reglaget och inte bara på
   markeringen: markeringen är ett tomt grönt fält och texten står i
   segmentet under, så med namnet bara på markeringen tonar EN eller SV
   in för sig. Hela reglaget ser likadant ut före och efter bytet. */
@media (prefers-reduced-motion: no-preference) {
  @view-transition { navigation: auto; }
  .sprak-reglage { view-transition-name: sprak-reglage; }
  ::view-transition-old(root), ::view-transition-new(root) { animation-duration: 220ms; }
  ::view-transition-group(sprak-reglage) { animation-duration: 220ms; animation-timing-function: ease-out; }
}

/* Navet på startsidan och Om, som ger plats åt reglaget. Reglerna står här
   och inte i sidorna, så att sidorna i läget AV ser ut som förut. Filen
   laddas efter sidans egen stil, så samma specificitet räcker.
   Integritetssidorna har inga av de här klasserna.

   1101-1200 px: samma regler som sidorna har under 1100 px. Reglaget är
   30 px bredare än ordet English var; vid 1101 px stod "Boka 20 min →"
   på två rader och mittlänkarna gick ända fram till reglaget (mätt
   2026-10-19). */
@media (min-width: 1101px) and (max-width: 1200px) {
  .nav-cta { white-space: nowrap; }
  nav.bar { column-gap: 14px; }
  .nav-mid { gap: 16px; }
}

/* Smala telefoner (360-420 px): logotypen (90 px), reglaget, CTA:n och
   hamburgaren tog 372 px men fick 320; sidan blev 392 px bred vid 360
   (mätt 2026-10-19). Segmenten blir 32 px breda, träffytan är fortfarande
   44 x 44, och navet blir tätare. Logotypen rörs inte. */
@media (max-width: 420px) {
  nav .sprak-reglage .sprak-seg { min-width: 32px; padding: 0 6px; }
  nav .sprak-reglage a.sprak-seg::after { inset: -7px -6px; }
  header .container { padding: 0 16px; }
  nav.bar { column-gap: 8px; }
  .nav-links { gap: 6px; }
  .nav-cta { font-size: 12.5px; padding: 10px 9px; }
}