/* ==========================================================================
   First Seafood — Header & meny
   ==========================================================================
   Tre varianter av samma markup:

     .fs-hdr--b   Navy topprad över en vit rad
     .fs-hdr--c   Transparent över hero, solid vid scroll
     .fs-hdr--d   Smal vit rad med full-bredds mega-meny

   Menyns utfällning styrs separat av .fs-hdr--meny-panel respektive
   .fs-hdr--meny-full, så en B-header också kan få full bredd.

   Alla värden hämtas ur designsystemets tokens (assets/css/tokens.css i
   child-temat). Fallbackvärdet efter kommatecknet gör att filen fungerar
   fristående — t.ex. i HTML-prototypen. Skriv aldrig om ett fallbackvärde
   utan att samtidigt ändra token.

   Accenten har tre roller. Som TEXT på ljus botten används alltid
   --fs-accent-ink (#0078AE), aldrig --fs-accent (#009BE1) — den senare når
   bara 3,10:1 mot vitt. På navy är det tvärtom: där duger --fs-accent
   (4,96:1) och --fs-accent-light är ännu bättre.
   ========================================================================== */

.fs-hdr {
  --fsh-max:        1320px;
  --fsh-gutter:     var(--fs-gutter, 40px);
  --fsh-bar-y:      16px;

  --fsh-navy:       var(--fs-navy, #16243D);
  --fsh-navy-deep:  var(--fs-navy-deep, #0E1A2E);
  --fsh-accent:     var(--fs-accent, #009BE1);
  --fsh-accent-ink: var(--fs-accent-ink, #0078AE);
  --fsh-accent-lys: var(--fs-accent-light, #6FD0FF);
  --fsh-paper:      var(--fs-paper, #FFFFFF);
  --fsh-mist:       var(--fs-mist, #F5F7F9);
  --fsh-line:       var(--fs-line, #E4E8ED);
  --fsh-line-dark:  var(--fs-line-dark, rgba(255, 255, 255, 0.12));
  --fsh-text:       var(--fs-text, #2B3645);
  --fsh-muted:      var(--fs-muted, #66717F);
  --fsh-muted-navy: var(--fs-muted-on-navy, #9AA8BB);
  --fsh-radius:     var(--fs-radius, 2px);
  --fsh-skygge:     var(--fs-shadow-menu, 0 30px 60px -28px rgba(22, 36, 61, 0.30));
  --fsh-dur:        var(--fs-dur, 0.2s);
  --fsh-ease:       var(--fs-ease, ease);

  /* ----------------------------------------------------------------------
     Semantiska variabler — det här är ytan BB-modulen skriver över.

     Var och en har ett designsystemsvärde som standard, så headern följer
     systemet tills någon medvetet ändrar den. Modulen sätter BARA de
     variabler redaktören faktiskt rört; resten fortsätter läsa ur tokens.

     Varför variabler och inte egenskaper: en modul som skriver över
     egenskaper måste alltid vinna specificitetstävlingen mot variant- och
     tillståndsreglerna nedan. Med variabler finns ingen tävling — värdet
     byts på roten och slår igenom överallt det används.
     ---------------------------------------------------------------------- */

  /* Raden */
  --fsh-bar-bg:         var(--fsh-paper);
  --fsh-bar-text:       var(--fsh-navy);
  --fsh-bar-hover:      var(--fsh-accent-ink);
  --fsh-indikator:      var(--fsh-accent);
  --fsh-bar-linje:      var(--fsh-line);
  --fsh-linje-bredd:    1px;
  --fsh-bar-skygge:     none;

  /* Toppraden */
  --fsh-util-bg:        var(--fsh-navy);
  --fsh-util-text:      var(--fsh-muted-navy);
  --fsh-util-lenke:     #DCE5F0;
  --fsh-util-hover:     var(--fsh-accent-lys);

  /* Utfälld panel */
  --fsh-panel-bg:       var(--fsh-paper);
  --fsh-panel-etikett:  var(--fsh-muted);
  --fsh-panel-text:     var(--fsh-navy);
  --fsh-panel-meta:     var(--fsh-muted);
  --fsh-panel-hover:    var(--fsh-accent-ink);
  --fsh-panel-linje:    var(--fsh-line);
  --fsh-panel-gap:      52px;
  --fsh-panel-kol:      250px;
  --fsh-panel-rad:      var(--fs-text-lg, 17px);

  /* Mobilmenyn */
  --fsh-drawer-bg:      var(--fsh-navy-deep);
  --fsh-drawer-text:    #FFFFFF;
  --fsh-drawer-linje:   var(--fsh-line-dark);
  --fsh-drawer-bredd:   420px;
  --fsh-mobil-storlek:  21px;

  /* Kontaktknappen */
  --fsh-cta-bg:         var(--fsh-navy);
  --fsh-cta-text:       #FFFFFF;
  --fsh-cta-bg-hover:   var(--fsh-accent-ink);
  --fsh-cta-text-hover: #FFFFFF;
  --fsh-cta-radie:      var(--fsh-radius);

  /* Menyns typografi */
  --fsh-nav-familj:     inherit;
  --fsh-nav-storlek:    var(--fs-text-base, 15px);
  --fsh-nav-vikt:       var(--fs-weight-medium, 500);
  --fsh-nav-sparr:      0;
  --fsh-nav-versal:     none;
  --fsh-nav-gap:        28px;

  position: relative;
  z-index: var(--fs-z-header, 50);
  font-family: var(--fs-font, 'Schibsted Grotesk', system-ui, sans-serif);
  -webkit-font-smoothing: antialiased;
}

.fs-hdr *,
.fs-hdr *::before,
.fs-hdr *::after { box-sizing: border-box; }

/* Nollställningen måste ligga PRECIS på (0,1,0):

   För hög — .fs-hdr a (0,1,1) — slår komponentreglerna nedan och tystar
   alla länk- och knappfärger. Det var den första buggen.

   För låg — :where(.fs-hdr) :where(a) (0,0,0) — förlorar mot temats bara
   elementregler. CoTheme har `a { color: var(--cotheme-primary) }` och
   `button { background: … }` på (0,0,1), och då målade temat headerns
   sökknapp som en blå platta. Det var den andra buggen.

   Rätt är rotklassen utanför :where() och elementet inuti: (0,1,0). Den
   slår temats elementregler, och ligger lika med komponentreglerna nedan
   — som vinner på ordning eftersom de står senare i filen. */
.fs-hdr :where(a) {
  text-decoration: none;
  color: inherit;
}

.fs-hdr :where(ul) {
  list-style: none;
  margin: 0;
  padding: 0;
}

.fs-hdr :where(button) {
  font: inherit;
  color: inherit;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
}

.fs-hdr__wrap {
  max-width: var(--fsh-max);
  margin-inline: auto;
  padding-inline: var(--fsh-gutter);
}

/* Synlig bara för skärmläsare. Egen klass — temats .screen-reader-text
   finns inte i alla parent-teman. */
.fs-hdr__sr {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.fs-hdr__svg {
  display: block;
  flex: none;
}


/* ==========================================================================
   Topprad — den mörka konsernstripen (variant B)
   ========================================================================== */

.fs-hdr__util {
  background: var(--fsh-util-bg);
  color: var(--fsh-util-text);
  font-size: var(--fs-text-2xs, 12px);
  font-weight: var(--fs-weight-medium, 500);
  letter-spacing: var(--fs-ls-ui, 0.04em);
}

.fs-hdr__util > .fs-hdr__wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  min-height: 38px;
  padding-block: 9px;
}

.fs-hdr__util-tekst { margin: 0; }

.fs-hdr__util-liste {
  display: flex;
  align-items: center;
  gap: 22px;
}

.fs-hdr__util-liste a {
  color: var(--fsh-util-lenke);
  padding-block: 4px;
  transition: color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__util-liste a:hover,
.fs-hdr__util-liste a:focus-visible { color: var(--fsh-util-hover); }


/* ==========================================================================
   Raden
   ========================================================================== */

.fs-hdr__bar {
  background: var(--fsh-bar-bg);
  border-bottom: var(--fsh-linje-bredd) solid var(--fsh-bar-linje);
  box-shadow: var(--fsh-bar-skygge);
  transition:
    background var(--fsh-dur) var(--fsh-ease),
    border-color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__bar > .fs-hdr__wrap {
  display: flex;
  align-items: center;
  gap: 36px;
  padding-block: var(--fsh-bar-y);
}

/* Raden fästs med position: fixed, inte sticky.

   Sticky vore det naturliga valet, men fungerar inte här. Ett sticky-
   element kan bara röra sig inom sin förälders box, och headern sitter i
   en kedja av tio föräldrar — BB:s modul, kolumn, kolumngrupp och rad,
   plus temats header — som alla är exakt lika höga som raden själv.
   Sträckan att färdas blir noll pixlar, och raden rullar bort med sin
   förälder. Vi äger inte de föräldrarna och kan alltså inte ge den rum.

   Fixed bryr sig inte om föräldrarnas höjd. Priset är att raden lämnar
   flödet, vilket kompenseras nedan. */

.fs-hdr--sticky .fs-hdr__bar {
  z-index: 2;
}

.fs-hdr--sticky.is-festet .fs-hdr__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
}

/* Utan kompensationen hoppar sidan uppåt lika mycket som radens höjd i
   samma ögonblick den fästs. Värdet mäts i viloläget av header.js och
   följer INTE krympningen — annars ryckte hela sidan varje gång märket
   blev lägre. */

.fs-hdr--sticky.is-festet {
  padding-bottom: var(--fsh-bar-h, 0px);
}

/* Inloggad redigerare har WordPress adminrad överst. Den är fixerad över
   782 px och rullar med under, så kompensationen gäller bara desktop. */

body.admin-bar .fs-hdr--sticky.is-festet .fs-hdr__bar {
  top: 32px;
}

@media (max-width: 782px) {

  body.admin-bar .fs-hdr--sticky.is-festet .fs-hdr__bar {
    top: 0;
  }
}


/* ==========================================================================
   Logotyp

   SVG:n bär ofta tom luft runt märket. Beskärningen räknas i PHP och
   kommer hit som CSS-variabler — se FSH_Render::rot_variabler().
   ========================================================================== */

.fs-hdr__logo {
  display: block;
  flex: none;
  line-height: 0;
}

.fs-hdr__logo img {
  display: block;
  height: var(--fsh-logo-h, 40px);
  width: auto;
  max-width: none;
}

.fs-hdr--beskar .fs-hdr__logo {
  overflow: hidden;
  height: var(--fsh-logo-h, 40px);
  width: var(--fsh-logo-bw, auto);
}

.fs-hdr--beskar .fs-hdr__logo img {
  height: var(--fsh-logo-ih, auto);
  width: var(--fsh-logo-iw, auto);
  margin-top: var(--fsh-logo-mt, 0);
  margin-left: var(--fsh-logo-ml, 0);
}

.fs-hdr__logo-tekst {
  display: block;
  font-size: var(--fs-text-2xl, 22px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: var(--fs-ls-tight, -0.025em);
  line-height: 1.1;
  color: var(--fsh-navy);
}


/* ==========================================================================
   Krympning vid scroll

   Krympningen följer scrollen i stället för att växla vid en tröskel.
   header.js skriver --fsh-logo-s, som glider från 1 till --fsh-logo-s-min
   över de första hundratalet pixlarna. Logotypen svarar då kontinuerligt
   på rullningen i stället för att starta en animation när en gräns
   passeras — skillnaden mellan att följa fingret och att slå om.

   Därför finns här ingen transition. Den skulle bara lägga fördröjning
   mellan rullningen och märkets svar.

   Att en enda faktor räcker beror på att alla sex beskärningsvärdena är
   linjära i den optiska höjden utan konstantled. Se kommentaren i
   FSH_Render::rot_variabler().

   Bara desktop: på mobil är märket redan 32 px, och några pixlar till
   vinner ingenting men kostar en rörelse i synfältet.

   Raden behöver ingen egen regel. Dess höjd är luft plus högsta barn, så
   den komprimeras av sig själv när märket blir lägre.
   ========================================================================== */

@media (min-width: 1081px) {

  .fs-hdr--krymp:not(.fs-hdr--beskar) .fs-hdr__logo img {
    height: calc(var(--fsh-logo-h, 40px) * var(--fsh-logo-s, 1));
  }

  .fs-hdr--krymp.fs-hdr--beskar .fs-hdr__logo {
    height: calc(var(--fsh-logo-h, 40px) * var(--fsh-logo-s, 1));
    width: calc(var(--fsh-logo-bw, 0px) * var(--fsh-logo-s, 1));
  }

  .fs-hdr--krymp.fs-hdr--beskar .fs-hdr__logo img {
    height: calc(var(--fsh-logo-ih, 0px) * var(--fsh-logo-s, 1));
    width: calc(var(--fsh-logo-iw, 0px) * var(--fsh-logo-s, 1));
    margin-top: calc(var(--fsh-logo-mt, 0px) * var(--fsh-logo-s, 1));
    margin-left: calc(var(--fsh-logo-ml, 0px) * var(--fsh-logo-s, 1));
  }
}


/* ==========================================================================
   Huvudmenyn
   ========================================================================== */

.fs-hdr__nav {
  margin-left: auto;
  min-width: 0;
}

.fs-hdr__nav-liste {
  display: flex;
  align-items: center;
  gap: var(--fsh-nav-gap);
}

.fs-hdr__punkt {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4px;
}

.fs-hdr__lenke {
  position: relative;
  display: inline-block;
  padding-block: 8px;
  font-family: var(--fsh-nav-familj);
  font-size: var(--fsh-nav-storlek);
  font-weight: var(--fsh-nav-vikt);
  letter-spacing: var(--fsh-nav-sparr);
  text-transform: var(--fsh-nav-versal);
  color: var(--fsh-bar-text);
  white-space: nowrap;
  transition: color var(--fsh-dur) var(--fsh-ease);
}

/* Understrykningen växer ur vänsterkanten i stället för att tona in —
   rörelsen ger riktning och känns mindre slumpmässig. */
.fs-hdr__lenke::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--fsh-indikator);
  transform: scaleX(0);
  transform-origin: left center;
  transition: transform 0.22s var(--fsh-ease);
}

.fs-hdr__lenke:hover::after,
.fs-hdr__lenke:focus-visible::after,
.fs-hdr__punkt.is-aktiv .fs-hdr__lenke::after,
.fs-hdr__punkt[data-fs-open] .fs-hdr__lenke::after { transform: scaleX(1); }

.fs-hdr__lenke:hover { color: var(--fsh-bar-hover); }

.fs-hdr__pil {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  color: var(--fsh-bar-hover);
  border-radius: var(--fsh-radius);
  transition: transform var(--fsh-dur) var(--fsh-ease);
}

/* Temats `button:hover` och `button:focus-visible` (0,1,1) slår resetten
   `.fs-hdr :where(button)` (0,1,0) och målade pilen som en blå platta.
   (0,2,0) här vinner utan att röra resetten för övriga knappar. */
.fs-hdr__pil:hover,
.fs-hdr__pil:focus-visible { background: none; }

.fs-hdr__punkt[data-fs-open] .fs-hdr__pil { transform: rotate(180deg); }


/* ==========================================================================
   Utfällt panel

   Utan JS öppnas panelen på :hover och :focus-within, så tangentbord och
   mus fungerar även om skriptet inte laddar. Med JS tar [data-fs-open]
   över och ger klick, Esc och korrekt aria-expanded.
   ========================================================================== */

.fs-hdr__panel {
  position: absolute;
  top: 100%;
  left: 0;
  padding-top: 14px;
  z-index: var(--fs-z-menu, 60);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s var(--fsh-ease),
    transform 0.18s var(--fsh-ease),
    visibility 0.18s;
}

.fs-hdr__punkt:hover > .fs-hdr__panel,
.fs-hdr__punkt:focus-within > .fs-hdr__panel,
.fs-hdr__punkt[data-fs-open] > .fs-hdr__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

/* Med JS styr [data-fs-open] ensamt — annars skulle panelen hänga kvar
   när pekaren råkar passera efter att den stängts med Esc. */
.fs-hdr--js .fs-hdr__punkt:hover > .fs-hdr__panel,
.fs-hdr--js .fs-hdr__punkt:focus-within > .fs-hdr__panel {
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
}

.fs-hdr--js .fs-hdr__punkt[data-fs-open] > .fs-hdr__panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fs-hdr__panel-flate {
  background: var(--fsh-panel-bg);
  border: 1px solid var(--fsh-panel-linje);
  border-radius: var(--fsh-radius);
  box-shadow: var(--fsh-skygge);
}

.fs-hdr__panel-inner {
  display: grid;
  gap: 0 var(--fsh-panel-gap);
  grid-template-columns: repeat(auto-fit, minmax(var(--fsh-panel-kol), 1fr));
  align-items: start;
  padding: 28px 30px 26px;
  max-width: none;
}

/* --- Full bredd (variant D) --------------------------------------------- */

.fs-hdr--meny-full .fs-hdr__punkt { position: static; }

.fs-hdr--meny-full .fs-hdr__bar > .fs-hdr__wrap { position: static; }

.fs-hdr--meny-full .fs-hdr__panel {
  left: 0;
  right: 0;
  padding-top: 0;
}

.fs-hdr--meny-full .fs-hdr__panel-flate {
  border-inline: 0;
  border-top: 0;
  border-radius: 0;
}

.fs-hdr--meny-full { --fsh-panel-gap: 64px; }

.fs-hdr--meny-full .fs-hdr__panel-inner {
  grid-template-columns: 1fr 1fr 1.15fr;
  gap: 0 var(--fsh-panel-gap);
  padding-block: 38px;
  max-width: var(--fsh-max);
  padding-inline: var(--fsh-gutter);
}

/* Panelen behöver .fs-hdr__bar som referens för att kunna gå ut i kanterna. */
.fs-hdr--meny-full .fs-hdr__bar { position: relative; }
.fs-hdr--meny-full.fs-hdr--sticky .fs-hdr__bar { position: sticky; }

/* En vanlig undermeny från Utseende → Menyer får aldrig full bredd. Ett
   band över hela skärmen med tre länkar i vänsterkanten läser som ett fel,
   inte som en mega-meny. Den faller därför tillbaka på panelstilen. */
.fs-hdr--meny-full .fs-hdr__punkt--enkel { position: relative; }

.fs-hdr--meny-full .fs-hdr__punkt--enkel .fs-hdr__panel {
  right: auto;
  padding-top: 14px;
}

.fs-hdr--meny-full .fs-hdr__punkt--enkel .fs-hdr__panel-flate {
  border: 1px solid var(--fsh-line);
  border-radius: var(--fsh-radius);
}

.fs-hdr--meny-full .fs-hdr__punkt--enkel .fs-hdr__panel-inner {
  grid-template-columns: minmax(240px, auto);
  gap: 0;
  padding: 24px 28px;
  max-width: none;
}

/* Mega-panelen ankras till radens innehållsbredd i stället för till sin
   menypunkt, och låses mot innehållets högerkant.

   Ankrad till menypunkten börjar panelen där punkten börjar — ca 577px in
   i raden — och sträcker sig 794px åt höger. Summan går utanför skärmen
   mellan ca 1030px och 1550px. Att panelen är stängd hjälper inte:
   opacity och visibility tar inte bort elementet ur layouten, så bredden
   räknas ändå in i scrollWidth och sidan får horisontell scroll. Över
   ~1600px centreras raden och problemet försvinner av sig självt; under
   1080px är desktopnavet dolt.

   Högerkanten sätts med samma gutter som raden har, så panelen följer med
   om paddingen ändras vid en brytpunkt. */
.fs-hdr--meny-panel .fs-hdr__bar > .fs-hdr__wrap { position: relative; }

.fs-hdr--meny-panel .fs-hdr__punkt--mega { position: static; }

.fs-hdr--meny-panel .fs-hdr__punkt--mega > .fs-hdr__panel {
  left: auto;
  right: var(--fsh-gutter);
}

/* Panelen är absolutpositionerad och krymper till innehållet. Ett
   auto-fit-rutnät kollapsar då till en enda kolumn, eftersom "så många
   som får plats" räknas mot en bredd som ännu inte finns. Kolumnerna
   läggs därför ut explicit på en rad i stället. */
.fs-hdr--meny-panel .fs-hdr__panel-inner {
  grid-template-columns: none;
  grid-auto-flow: column;
  grid-auto-columns: minmax(var(--fsh-panel-kol), max-content);
}

.fs-hdr--meny-panel .fs-hdr__panel-flate {
  min-width: 280px;
  max-width: calc(100vw - 2 * var(--fsh-gutter));
}

.fs-hdr--meny-panel .fs-hdr__kort { width: 290px; }


/* ==========================================================================
   Panelens innehåll
   ========================================================================== */

.fs-hdr__kol-etikett {
  margin: 0 0 13px;
  font-size: var(--fs-text-3xs, 11px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: var(--fs-ls-label, 0.16em);
  text-transform: uppercase;
  color: var(--fsh-panel-etikett);
}

.fs-hdr__rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding-block: 12px;
  border-bottom: 1px solid var(--fsh-panel-linje);
  font-size: var(--fsh-panel-rad);
  font-weight: var(--fs-weight-semi, 600);
  color: var(--fsh-panel-text);
  transition: color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__rad-titel { min-width: 0; }

.fs-hdr__rad-meta {
  flex: none;
  font-size: var(--fs-text-2xs, 12px);
  font-weight: var(--fs-weight-medium, 500);
  color: var(--fsh-panel-meta);
  font-variant-numeric: tabular-nums;
  transition: color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__rad:hover,
.fs-hdr__rad:hover .fs-hdr__rad-meta,
.fs-hdr__rad:focus-visible,
.fs-hdr__rad:focus-visible .fs-hdr__rad-meta { color: var(--fsh-panel-hover); }

/* --- Utvalt kort ---------------------------------------------------------- */

.fs-hdr__kort {
  display: block;
  border: 1px solid var(--fsh-panel-linje);
  border-radius: var(--fsh-radius);
  overflow: hidden;
  transition: border-color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__kort:hover { border-color: #B9DCF1; }

.fs-hdr__kort-bilde {
  display: block;
  background: var(--fsh-mist);
}

.fs-hdr__kort-bilde img {
  display: block;
  width: 100%;
  height: 156px;
  object-fit: cover;
}

.fs-hdr__kort-tekst {
  display: block;
  padding: 20px 22px 22px;
}

.fs-hdr__kort-eyebrow {
  display: block;
  font-size: var(--fs-text-3xs, 11px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: var(--fs-ls-label, 0.16em);
  text-transform: uppercase;
  color: var(--fsh-panel-hover);
}

.fs-hdr__kort-titel {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-text-xl, 19px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: -0.01em;
  color: var(--fsh-panel-text);
}

.fs-hdr__kort-brod {
  display: block;
  margin-top: 8px;
  font-size: var(--fs-text-sm, 14px);
  line-height: 1.55;
  color: var(--fsh-panel-meta);
}


/* ==========================================================================
   Verktyg till höger
   ========================================================================== */

.fs-hdr__verktyg {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Menyn tar redan margin-left:auto när den finns — då ska verktygen ligga
   tätt intill den, inte skjutas ut igen. */
.fs-hdr__nav + .fs-hdr__verktyg { margin-left: 0; }

/* Sökknappens 40 px-yta bär ~11 px osynlig luft runt glyfen. Tillsammans med
   radens 36 px-gap hamnar lupan synligt ~50 px från sista menypunkten men bara
   ~27 px från CTA:n — den ser ut att tillhöra knappen. Dras in så att synligt
   avstånd blir lika (~27 px) på båda sidor. Gäller bara när lupan ligger först
   i verktygsgruppen, direkt efter menyn. */
.fs-hdr__nav + .fs-hdr__verktyg > .fs-hdr__sok:first-child { margin-left: -20px; }

.fs-hdr__ikon {
  display: grid;
  place-items: center;
  width: 40px;
  height: 40px;
  color: var(--fsh-bar-text);
  border-radius: var(--fsh-radius);
  transition:
    background var(--fsh-dur) var(--fsh-ease),
    color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__ikon:hover {
  background: var(--fsh-mist);
  color: var(--fsh-bar-hover);
}

/* --- Sök ------------------------------------------------------------------ */

.fs-hdr__sok { position: relative; }

.fs-hdr__sok-panel {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  z-index: var(--fs-z-menu, 60);
  width: min(420px, calc(100vw - 2 * var(--fsh-gutter)));
  padding: 14px;
  background: var(--fsh-paper);
  border: 1px solid var(--fsh-line);
  border-radius: var(--fsh-radius);
  box-shadow: var(--fsh-skygge);
  opacity: 0;
  visibility: hidden;
  transform: translateY(6px);
  transition:
    opacity 0.18s var(--fsh-ease),
    transform 0.18s var(--fsh-ease),
    visibility 0.18s;
}

.fs-hdr__sok[data-fs-open] .fs-hdr__sok-panel {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.fs-hdr__sok-panel form {
  display: flex;
  gap: 8px;
}

.fs-hdr__sok-felt {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-text-base, 15px);
  padding: 10px 12px;
  color: var(--fsh-text);
  background: var(--fsh-paper);
  border: 1px solid var(--fsh-line);
  border-radius: var(--fsh-radius);
}

.fs-hdr__sok-felt:focus {
  outline: 2px solid var(--fs-focus, #0078AE);
  outline-offset: 1px;
}

.fs-hdr__sok-knapp {
  flex: none;
  padding: 10px 16px;
  font-size: var(--fs-text-sm, 14px);
  font-weight: var(--fs-weight-semi, 600);
  color: #fff;
  background: var(--fsh-navy);
  border-radius: var(--fsh-radius);
  transition: background var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__sok-knapp:hover { background: var(--fsh-accent-ink); }

/* --- Språk ---------------------------------------------------------------- */

.fs-hdr__sprak ul {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--fsh-line);
  border-radius: var(--fsh-radius);
  overflow: hidden;
}

.fs-hdr__sprak a,
.fs-hdr__sprak span {
  display: block;
  padding: 7px 11px;
  font-size: var(--fs-text-2xs, 12px);
  font-weight: 700;
  letter-spacing: 0.06em;
  color: var(--fsh-muted);
  transition:
    background var(--fsh-dur) var(--fsh-ease),
    color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__sprak .is-aktiv {
  background: var(--fsh-navy);
  color: #fff;
}

.fs-hdr__sprak a:hover {
  background: var(--fsh-mist);
  color: var(--fsh-navy);
}

/* Kompakt läge (raden): bara aktivt språk syns, resten fälls ut under.
   Öppnas med :hover/:focus-within — triggern har tabindex så panelen
   även nås med tangentbord och tryck. */

/* Verktygsraden centrerar sina barn, så radens höjd sätts av det högsta —
   kontaktknappen. Genom att sträcka väljaren till radens höjd blir pillen
   och knappen exakt lika höga oavsett vilken radhöjd temat ger knapptexten. */
.fs-hdr__sprak--meny {
  position: relative;
  display: flex;
  align-self: stretch;
}

.fs-hdr__sprak--meny .is-aktiv {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  background: transparent;
  color: var(--fsh-bar-text, var(--fsh-navy));
  border: 1px solid var(--fsh-line);
  border-radius: var(--fsh-radius);
  cursor: default;
}

.fs-hdr__sprak--meny .is-aktiv::after {
  content: "";
  width: 6px;
  height: 6px;
  margin-top: -3px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(45deg);
  transition: transform var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__sprak--meny:hover .is-aktiv::after,
.fs-hdr__sprak--meny:focus-within .is-aktiv::after {
  margin-top: 3px;
  transform: rotate(-135deg);
}

/* Osynlig brygga så att muspekaren kan färdas ner till panelen utan att
   hovern släpper i glappet. */
.fs-hdr__sprak--meny::before {
  content: "";
  position: absolute;
  inset: 100% 0 auto 0;
  height: 10px;
}

.fs-hdr__sprak--meny ul {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  flex-direction: column;
  align-items: stretch;
  min-width: 100%;
  background: #fff;
  box-shadow: 0 14px 34px rgba(14, 26, 46, 0.16);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition:
    opacity var(--fsh-dur) var(--fsh-ease),
    transform var(--fsh-dur) var(--fsh-ease),
    visibility 0s linear var(--fsh-dur);
  z-index: 40;
}

.fs-hdr__sprak--meny:hover ul,
.fs-hdr__sprak--meny:focus-within ul {
  opacity: 1;
  visibility: visible;
  transform: none;
  transition-delay: 0s;
}

.fs-hdr__sprak--meny li + li { border-top: 1px solid var(--fsh-line); }

.fs-hdr__sprak--meny ul a {
  padding: 9px 14px;
  text-align: center;
}

/* --- Kontaktknapp ---------------------------------------------------------- */

.fs-hdr__cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px 20px;
  font-size: var(--fs-text-sm, 14px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: 0.02em;
  color: var(--fsh-cta-text);
  background: var(--fsh-cta-bg);
  border-radius: var(--fsh-cta-radie);
  white-space: nowrap;
  transition:
    background var(--fsh-dur) var(--fsh-ease),
    color var(--fsh-dur) var(--fsh-ease),
    border-color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__cta:hover {
  background: var(--fsh-cta-bg-hover);
  color: var(--fsh-cta-text-hover);
}

/* --- Hamburgare ------------------------------------------------------------ */

.fs-hdr__burger {
  display: none;
  align-items: center;
  gap: 10px;
  min-height: 44px;
  padding-inline: 4px;
  font-size: var(--fs-text-xs, 13px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fsh-bar-text);
}

.fs-hdr__burger-ikon {
  display: grid;
  gap: 4px;
  width: 22px;
}

.fs-hdr__burger-ikon i {
  display: block;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
}


/* ==========================================================================
   Variant C — transparent över hero

   Raden ligger fixerad över heroen och blir solid vid scroll. Klassen
   is-rullet sätts av header.js.
   ========================================================================== */

.fs-hdr--c {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 120;
}

.fs-hdr--c .fs-hdr__bar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  background: transparent;
  border-bottom-color: rgba(255, 255, 255, 0.18);
}

.fs-hdr--c .fs-hdr__lenke,
.fs-hdr--c .fs-hdr__ikon,
.fs-hdr--c .fs-hdr__burger { color: #fff; }

.fs-hdr--c .fs-hdr__pil { color: var(--fsh-accent-lys); }

.fs-hdr--c .fs-hdr__lenke::after { background: var(--fsh-accent-lys); }

.fs-hdr--c .fs-hdr__ikon:hover {
  background: rgba(255, 255, 255, 0.14);
  color: #fff;
}

.fs-hdr--c .fs-hdr__sprak ul { border-color: rgba(255, 255, 255, 0.34); }
.fs-hdr--c .fs-hdr__sprak a { color: #C9D3E0; }
.fs-hdr--c .fs-hdr__sprak a:hover { background: rgba(255, 255, 255, 0.12); color: #fff; }
.fs-hdr--c .fs-hdr__sprak .is-aktiv { background: #fff; color: var(--fsh-navy); }

/* Dropdown-panelen är alltid vit — även över mörk hero behåller länkarna
   sina mörka färger, annars blir de ljusgrå på vitt. Triggern behåller
   C-variantens vita/navy växling ovan. */
.fs-hdr--c .fs-hdr__sprak--meny ul { border-color: var(--fsh-line); }
.fs-hdr--c .fs-hdr__sprak--meny ul a { color: var(--fsh-muted); }
.fs-hdr--c .fs-hdr__sprak--meny ul a:hover { background: var(--fsh-mist); color: var(--fsh-navy); }
.fs-hdr--c .fs-hdr__sprak--meny .is-aktiv { background: transparent; color: #fff; border-color: rgba(255, 255, 255, 0.34); }

.fs-hdr--c .fs-hdr__cta { background: #fff; color: var(--fsh-navy); }
.fs-hdr--c .fs-hdr__cta:hover { background: var(--fs-accent-light, #8DC7E9); }

.fs-hdr__logo--pa-flate { display: none; }

/* Solid tillstånd. Helt opak — en halvgenomskinlig rad över rörligt
   innehåll gör texten oläsbar precis när man scrollar. */
.fs-hdr--c.is-rullet { --fsh-bar-skygge: 0 1px 0 rgba(22, 36, 61, 0.04); }

.fs-hdr--c.is-rullet .fs-hdr__bar {
  background: var(--fsh-bar-bg);
  border-bottom-color: var(--fsh-bar-linje);
}

.fs-hdr--c.is-rullet .fs-hdr__lenke,
.fs-hdr--c.is-rullet .fs-hdr__ikon,
.fs-hdr--c.is-rullet .fs-hdr__burger { color: var(--fsh-bar-text); }

.fs-hdr--c.is-rullet .fs-hdr__pil { color: var(--fsh-bar-hover); }
.fs-hdr--c.is-rullet .fs-hdr__lenke::after { background: var(--fsh-indikator); }
.fs-hdr--c.is-rullet .fs-hdr__ikon:hover { background: var(--fsh-mist); color: var(--fsh-bar-hover); }
.fs-hdr--c.is-rullet .fs-hdr__sprak ul { border-color: var(--fsh-line); }
.fs-hdr--c.is-rullet .fs-hdr__sprak a { color: var(--fsh-muted); }
.fs-hdr--c.is-rullet .fs-hdr__sprak a:hover { background: var(--fsh-mist); color: var(--fsh-navy); }
.fs-hdr--c.is-rullet .fs-hdr__sprak .is-aktiv { background: var(--fsh-navy); color: #fff; }
.fs-hdr--c.is-rullet .fs-hdr__cta { background: var(--fsh-cta-bg); color: var(--fsh-cta-text); }
.fs-hdr--c.is-rullet .fs-hdr__cta:hover { background: var(--fsh-cta-bg-hover); color: var(--fsh-cta-text-hover); }

.fs-hdr--c.is-rullet .fs-hdr__logo--pa-hero { display: none; }
.fs-hdr--c.is-rullet .fs-hdr__logo--pa-flate { display: block; }


/* ==========================================================================
   Variant D — smal rad
   ========================================================================== */

.fs-hdr--d { --fsh-bar-y: 16px; }
.fs-hdr--b { --fsh-bar-y: 17px; }


/* ==========================================================================
   Mobilmenyn

   Egen komponent, inte en hopfälld desktopmeny. Tre rader i ett grid:
   topp som står still, rullande innehåll, och en fot som ligger kvar så
   kontaktknappen alltid är nåbar med tummen.
   ========================================================================== */

/* Rotelementet skapar en egen stapelkontext. Ligger något på sidan med
   högre z-index än headern — en slider, en cookieruta — hamnar det annars
   ovanpå den öppna mobilmenyn. Roten lyfts därför så länge menyn står öppen. */
.fs-hdr.is-meny-apen { z-index: 1000; }

.fs-hdr__skygge {
  position: fixed;
  inset: 0;
  z-index: 190;
  background: rgba(8, 18, 32, 0.55);
  opacity: 0;
  transition: opacity 0.26s var(--fsh-ease);
}

.fs-hdr__skygge.is-open { opacity: 1; }

.fs-hdr__drawer {
  position: fixed;
  top: 0;
  right: 0;
  bottom: 0;
  z-index: 200;
  width: min(var(--fsh-drawer-bredd), 100vw);
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: var(--fsh-drawer-bg);
  color: var(--fsh-drawer-text);
  transform: translateX(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0.0, 0.2, 1);
  padding-bottom: env(safe-area-inset-bottom, 0);
}

.fs-hdr__drawer.is-open { transform: translateX(0); }

.fs-hdr__drawer[hidden] { display: none; }
.fs-hdr__skygge[hidden] { display: none; }

/* --- Drawerns topp -------------------------------------------------------- */

.fs-hdr__drawer-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 14px var(--fs-space-6, 24px);
  border-bottom: 1px solid var(--fsh-drawer-linje);
}

.fs-hdr__lukk {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 44px;
  padding-inline: 6px;
  font-size: var(--fs-text-xs, 13px);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #C9D3E0;
  transition: color var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__lukk:hover { color: #fff; }

/* --- Rullande yta ---------------------------------------------------------- */

.fs-hdr__drawer-rull {
  overflow-y: auto;
  overscroll-behavior: contain;
  -webkit-overflow-scrolling: touch;
  padding: var(--fs-space-5, 20px) var(--fs-space-6, 24px) var(--fs-space-8, 32px);
}

/* --- Sök i drawern --------------------------------------------------------- */

.fs-hdr__m-sok {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: var(--fs-space-5, 20px);
  padding: 0 14px;
  background: rgba(255, 255, 255, 0.07);
  border: 1px solid var(--fsh-drawer-linje);
  border-radius: var(--fsh-radius);
  color: var(--fsh-muted-navy);
}

.fs-hdr__m-sok:focus-within {
  border-color: var(--fsh-accent-lys);
  color: #fff;
}

.fs-hdr__m-sok input {
  flex: 1 1 auto;
  min-width: 0;
  font: inherit;
  font-size: var(--fs-text-lg, 17px);
  padding-block: 13px;
  color: #fff;
  background: none;
  border: 0;
}

.fs-hdr__m-sok input::placeholder { color: var(--fsh-muted-navy); }
.fs-hdr__m-sok input:focus { outline: none; }

/* --- Menypunkterna ---------------------------------------------------------- */

.fs-hdr__m-punkt + .fs-hdr__m-punkt { border-top: 1px solid var(--fsh-drawer-linje); }

.fs-hdr__m-rad {
  display: flex;
  align-items: center;
  gap: 8px;
}

.fs-hdr__m-lenke {
  flex: 1 1 auto;
  padding-block: 16px;
  font-size: var(--fsh-mobil-storlek);
  font-weight: var(--fs-weight-semi, 600);
  letter-spacing: -0.015em;
  color: var(--fsh-drawer-text);
}

.fs-hdr__m-punkt.is-aktiv > .fs-hdr__m-rad > .fs-hdr__m-lenke { color: var(--fsh-accent-lys); }

/* 44×44 träffyta enligt WCAG 2.5.5, trots att pilen bara är 16px. */
.fs-hdr__m-pil {
  display: grid;
  place-items: center;
  flex: none;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--fsh-accent-lys);
  border: 1px solid var(--fsh-drawer-linje);
  border-radius: var(--fsh-radius);
  transition:
    transform var(--fsh-dur) var(--fsh-ease),
    background var(--fsh-dur) var(--fsh-ease);
}

.fs-hdr__m-pil:hover { background: rgba(255, 255, 255, 0.08); }
.fs-hdr__m-pil[aria-expanded="true"] { transform: rotate(180deg); }

/* --- Utfälld panel i drawern ------------------------------------------------ */

.fs-hdr__m-panel {
  padding: var(--fs-space-3, 12px) 0 var(--fs-space-5, 20px);
}

.fs-hdr__m-panel[hidden] { display: none; }

.fs-m__kol + .fs-m__kol { margin-top: var(--fs-space-5, 20px); }

.fs-m__kol-etikett {
  margin: 0 0 6px;
  font-size: var(--fs-text-3xs, 11px);
  font-weight: 700;
  letter-spacing: var(--fs-ls-label, 0.16em);
  text-transform: uppercase;
  color: var(--fsh-muted-navy);
}

.fs-m__rad {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding-block: 13px;
  border-bottom: 1px solid var(--fsh-drawer-linje);
  font-size: var(--fs-text-lg, 17px);
  font-weight: var(--fs-weight-medium, 500);
  color: #E4EBF4;
}

.fs-m__rad:hover,
.fs-m__rad:focus-visible { color: var(--fsh-accent-lys); }

.fs-m__rad-meta {
  flex: none;
  font-size: var(--fs-text-2xs, 12px);
  color: var(--fsh-muted-navy);
  font-variant-numeric: tabular-nums;
}

/* Kortet ligger vågrätt i mobil — ett 156px högt bildband skulle äta halva
   skärmen och skjuta ned resten av menyn. */
.fs-m__kort {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-top: var(--fs-space-5, 20px);
  padding: 12px;
  background: rgba(255, 255, 255, 0.06);
  border: 1px solid var(--fsh-drawer-linje);
  border-radius: var(--fsh-radius);
  transition: background var(--fsh-dur) var(--fsh-ease);
}

.fs-m__kort:hover { background: rgba(255, 255, 255, 0.11); }

.fs-m__kort-bilde {
  flex: none;
  display: block;
  width: 76px;
  height: 76px;
  overflow: hidden;
  border-radius: var(--fsh-radius);
}

.fs-m__kort-bilde img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.fs-m__kort-tekst { display: block; min-width: 0; }

.fs-m__kort-eyebrow {
  display: block;
  font-size: var(--fs-text-3xs, 11px);
  font-weight: 700;
  letter-spacing: var(--fs-ls-label, 0.16em);
  text-transform: uppercase;
  color: var(--fsh-accent-lys);
}

.fs-m__kort-titel {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-text-lg, 17px);
  font-weight: var(--fs-weight-semi, 600);
  color: var(--fsh-drawer-text);
}

.fs-m__kort-brod {
  display: block;
  margin-top: 4px;
  font-size: var(--fs-text-xs, 13px);
  line-height: 1.5;
  color: var(--fsh-muted-navy);
}

/* --- Snarvägar -------------------------------------------------------------- */

.fs-hdr__m-util {
  margin-top: var(--fs-space-8, 32px);
  padding-top: var(--fs-space-6, 24px);
  border-top: 1px solid var(--fsh-drawer-linje);
}

.fs-hdr__m-util-etikett {
  margin: 0 0 10px;
  font-size: var(--fs-text-3xs, 11px);
  font-weight: 700;
  letter-spacing: var(--fs-ls-label, 0.16em);
  text-transform: uppercase;
  color: var(--fsh-muted-navy);
}

.fs-hdr__m-util ul {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 2px 20px;
}

.fs-hdr__m-util a {
  display: block;
  padding-block: 10px;
  font-size: var(--fs-text-base, 15px);
  color: #C9D3E0;
}

.fs-hdr__m-util a:hover { color: var(--fsh-accent-lys); }

/* --- Foten ------------------------------------------------------------------ */

.fs-hdr__drawer-fot {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  padding: var(--fs-space-4, 16px) var(--fs-space-6, 24px);
  border-top: 1px solid var(--fsh-drawer-linje);
  background: rgba(0, 0, 0, 0.16);
}

/* Allt i drawern scopas under .fs-hdr__drawer. Utan det vinner variantens
   egna regler — .fs-hdr--c .fs-hdr__cta gör knappen vit på vit botten,
   fast drawern alltid är navy oavsett variant. */
.fs-hdr__drawer .fs-hdr__sprak ul { border-color: rgba(255, 255, 255, 0.24); }
.fs-hdr__drawer .fs-hdr__sprak a { color: var(--fsh-muted-navy); }
.fs-hdr__drawer .fs-hdr__sprak a:hover { background: rgba(255, 255, 255, 0.10); color: #fff; }
.fs-hdr__drawer .fs-hdr__sprak .is-aktiv { background: #fff; color: var(--fsh-navy); }
.fs-hdr__drawer .fs-hdr__sprak a,
.fs-hdr__drawer .fs-hdr__sprak span { padding: 12px 14px; }

/* Väljaren visar fulla språknamn och tar hela fotens bredd som en
   segmenterad rad; kontaktknappen hamnar under (foten radbryter).
   Bredvid knappen rymdes bara koderna. Cellerna växer från sin egen
   bredd så att «Nederlands» får mer plats än «中文». Ligger efter
   drawerns padding-regel ovan, som har samma specificitet. */
.fs-hdr__drawer .fs-hdr__sprak--drawer { flex: 1 1 100%; }
.fs-hdr__drawer .fs-hdr__sprak--drawer li { flex: 1 1 auto; }
.fs-hdr__drawer .fs-hdr__sprak--drawer a,
.fs-hdr__drawer .fs-hdr__sprak--drawer .is-aktiv {
  justify-content: center;
  padding-inline: 8px;
  white-space: nowrap;
}

/* --- Flagga + namn (CoTranslate) ------------------------------------------
   Länkarna innehåller två inre spans. De ska inte ärva radens block- och
   padding-stil (selektorn .fs-hdr__sprak span träffar dem också), därför
   ligger de här reglerna efter både radens och drawerns. */

.fs-hdr__sprak a,
.fs-hdr__sprak .is-aktiv {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.fs-hdr__sprak .fs-hdr__sprak-flagg,
.fs-hdr__sprak .fs-hdr__sprak-navn {
  display: inline;
  padding: 0;
}

.fs-hdr__sprak-flagg {
  flex: none;
  font-size: 15px; /* emoji-fallback när SVG saknas */
  line-height: 1;
}

img.fs-hdr__sprak-flagg {
  width: 15px;
  height: 10px;
  border-radius: 1.5px;
  /* Kantstreck så ljusa fält (Finland, Japan, Polen) inte flyter ihop
     med vit bakgrund. */
  box-shadow: inset 0 0 0 0.5px rgba(14, 26, 46, 0.18);
}

.fs-hdr__sprak-navn {
  white-space: nowrap;
  font-weight: 600;
  letter-spacing: 0.02em;
}

/* På navy når aksenten 4,96:1 och duger som knappyta med vit text. */
.fs-hdr__drawer .fs-hdr__cta--blokk {
  flex: 1 1 auto;
  min-height: 52px;
  font-size: var(--fs-text-base, 15px);
  background: var(--fsh-accent);
  color: #fff;
}

.fs-hdr__drawer .fs-hdr__cta--blokk:hover {
  background: var(--fs-accent-light, #8DC7E9);
  color: var(--fsh-navy);
}


/* ==========================================================================
   Brytpunkter
   ========================================================================== */

@media (max-width: 1080px) {

  .fs-hdr { --fsh-gutter: 24px; }

  .fs-hdr__nav,
  .fs-hdr__sok { display: none; }

  /* Knappen i raden döljs, men den i drawerns fot ska stå kvar — det är
     den som gör kontakt nåbar med tummen. */
  .fs-hdr__cta:not(.fs-hdr__cta--blokk) { display: none; }

  .fs-hdr__burger { display: inline-flex; }

  /* Menyn är dold här, men syskonselektorn matchar ändå — display:none
     tar inte bort elementet ur DOM:en. Utan den här raden behåller
     verktygen margin-left:0 från desktopregeln, och då finns det inget
     som skjuter dem åt höger: hamburgaren klumpar ihop sig intill
     logotypen i stället för att ligga i högerkanten. */
  .fs-hdr__nav + .fs-hdr__verktyg { margin-left: auto; }

  .fs-hdr__bar > .fs-hdr__wrap { gap: 20px; }

  .fs-hdr__verktyg { gap: 12px; }

  /* Utility-raden krymper till bara länkarna — ledtexten är det första
     som får gå när bredden tar slut. */
  .fs-hdr__util-tekst { display: none; }

  .fs-hdr__util > .fs-hdr__wrap { justify-content: flex-end; }

  .fs-hdr--beskar .fs-hdr__logo {
    height: var(--fsh-logo-h-m, 32px);
    width: var(--fsh-logo-bw-m, auto);
  }

  .fs-hdr--beskar .fs-hdr__logo img {
    height: var(--fsh-logo-ih-m, auto);
    width: var(--fsh-logo-iw-m, auto);
    margin-top: var(--fsh-logo-mt-m, 0);
    margin-left: var(--fsh-logo-ml-m, 0);
  }

  .fs-hdr:not(.fs-hdr--beskar) .fs-hdr__logo img { height: var(--fsh-logo-h-m, 32px); }
}

@media (max-width: 640px) {

  .fs-hdr { --fsh-gutter: 18px; }

  .fs-hdr__util { font-size: 11px; }
  .fs-hdr__util-liste { gap: 16px; }

  /* Visuellt dold men kvar som knappens namn — display:none gav
     hamburgaren inget tillgängligt namn på mobil. */
  .fs-hdr__burger-tekst {
    position: absolute;
    width: 1px;
    height: 1px;
    margin: -1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .fs-hdr__drawer { width: min(var(--fsh-drawer-bredd), 100vw); }

  .fs-hdr__drawer-topp,
  .fs-hdr__drawer-fot { padding-inline: 18px; }

  .fs-hdr__drawer-rull { padding-inline: 18px; }

}

/* Låg skärmhöjd i liggande läge — då är den fasta foten värd mer än luften. */
@media (max-height: 560px) {
  .fs-hdr__m-lenke { padding-block: 12px; font-size: 19px; }
  .fs-hdr__drawer-rull { padding-block: 14px 20px; }
}


/* ==========================================================================
   Rörelsekänslighet — WCAG 2.1 AA 2.3.3
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {

  .fs-hdr *,
  .fs-hdr *::before,
  .fs-hdr *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }

  .fs-hdr__drawer { transition: none; }
}


/* ==========================================================================
   Utskrift — headern är navigation och hör inte hemma på papper
   ========================================================================== */

@media print {
  .fs-hdr__util,
  .fs-hdr__nav,
  .fs-hdr__verktyg,
  .fs-hdr__drawer,
  .fs-hdr__skygge { display: none !important; }

  .fs-hdr--c { position: static; }
  .fs-hdr--c .fs-hdr__bar { position: static; }
}