/* Toppbaren for HELA sajten. Genereras ur hemsidor.html:s navregler +
   kanonvarden. Sidorna lankar denna fil SIST - andra toppbaren HAR,
   aldrig i sidornas egna style-block (det var sa driften uppstod). */

/* meny */
.nav{position:sticky;top:0;z-index:50;background:rgba(12,27,42,.9);backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.10)}
.nav-in{display:flex;align-items:center;gap:20px;height:76px}
.nav-in img{height:30px;width:auto;display:block}
.nav-links{display:flex;gap:26px;margin-left:auto;flex-wrap:wrap}
.nav-links a{color:#9FB0C2;text-decoration:none;font-size:.94rem;font-weight:600;
  display:inline-block;padding-block:8px}
.nav-links a:hover,.nav-links a[aria-current]{color:#fff}
.tjmeny{position:relative}
/* Brospann over glappet mellan knapp och panel. Utan den hinner mouseleave
   fyra medan pekaren ar pa vag ned i listan. */
.tjmeny::after{content:"";position:absolute;left:0;right:0;top:100%;height:14px}
.tjknapp{display:inline-flex;align-items:center;gap:6px;background:none;border:0;padding:8px 0;
  color:#9FB0C2;font:inherit;font-size:.94rem;font-weight:600;cursor:pointer;font-family:inherit}
.tjknapp:hover,.tjknapp[aria-expanded=true]{color:#fff}
.tjknapp svg{transition:transform .2s;opacity:.7}
.tjknapp[aria-expanded=true] svg{transform:rotate(180deg)}
.tjlista{position:absolute;left:-14px;top:calc(100% + 12px);width:326px;padding:8px;
  background:#0F2233;border:1px solid rgba(255,255,255,.14);border-radius:16px;
  box-shadow:0 34px 70px -28px rgba(0,0,0,.85);display:none;z-index:90}
.tjlista[data-pa]{display:block}
.tjlista a{display:block;padding:10px 13px;border-radius:11px;text-decoration:none}
.tjlista a:hover{background:rgba(255,255,255,.07)}
.tjlista a b{display:block;color:#fff;font-size:.94rem;font-weight:700;margin-bottom:1px}
.tjlista a span{display:block;color:#7D8FA3;font-size:.83rem;line-height:1.45}
@media (max-width:700px){
  /* logga + hamburgare + knapp ska rymmas pa 360px utan att spranga vyporten */
  .nav-in{gap:8px}
  .nav-in > a:first-child img{height:22px}
  .nav-in .btn.sm{padding:9px 12px;font-size:.8rem;white-space:nowrap;flex:none}
  .burger{margin-left:auto;padding:8px 12px;font-size:.82rem;flex:none}
}
.burger{display:none;margin-left:auto;background:none;border:1px solid rgba(255,255,255,.18);
  color:#fff;font:inherit;font-size:.86rem;font-weight:700;padding:9px 15px;border-radius:9px;
  cursor:pointer;font-family:inherit}
.burger[aria-expanded=true]{background:rgba(255,255,255,.1)}
/* v8: burgargransen flyttad 700 -> 1059. Uppmatt 2026-08-17: mellan 704 och
   1055 px radbrots det vagrata navet inuti den 77 px laasta baren - forsta
   raden hamnade pa y=-29 (ovanfor vyn) och CTA:n 28 px under barens kant.
   Hela iPad-spannet saknade alltsa navigation. En rad far plats forst vid
   1060 px, sa burgaren maste racka anda dit. Kompakteringen (mindre logga,
   64 px bar) galler fortfarande bara <=700. */
@media (max-width:1059px){
  .burger{display:inline-flex}
  .nav-links{display:none;position:absolute;left:0;right:0;
    top:100%;flex-direction:column;align-items:stretch;gap:0;
    padding:8px clamp(20px,5vw,64px) 22px;background:#0C1B2A;
    border-bottom:1px solid rgba(255,255,255,.12);box-shadow:0 30px 60px -30px rgba(0,0,0,.85)}
  .nav-links[data-pa]{display:flex}
  .nav-links > a{padding:13px 0;font-size:1rem;border-bottom:1px solid rgba(255,255,255,.07)}
  .nav-links > a:last-child{border-bottom:0}
  .tjmeny{position:static;border-bottom:1px solid rgba(255,255,255,.07)}
  .tjknapp{width:100%;justify-content:space-between;padding:13px 0;font-size:1rem}
  .tjlista{position:static;width:auto;left:0;margin:0 0 10px;background:rgba(255,255,255,.04);
    box-shadow:none;border-color:rgba(255,255,255,.08)}
}
@media (max-width:700px){
  .nav-in{height:64px}
}
.sprak{border:1px solid rgba(255,255,255,.10);border-radius:999px;padding:5px 12px !important;font-size:.8rem !important;letter-spacing:.06em;font-weight:800 !important}
.sprak:hover{background:rgba(255,255,255,.08);color:#fff}
/* KANONISK TOPPBAR 2026-08-15: samma glas, hojd och bredd pa ALLA sidor.
   Uppmatt fore: startsidan transparent, tjanstesidor .90/77px, nyheter
   .94/73px med wrap 1120 - loggan hoppade 50 px vid sidbyte. */
header.nav{background:rgba(12,27,42,.92) !important;backdrop-filter:blur(14px);
  border-bottom:1px solid rgba(255,255,255,.08)}
header.nav .wrap{max-width:1220px}
.nav-in{height:76px}

/* ==================================================================
   KANON: varden dar sidorna driftat isar. Ligger SIST i filen och
   filen lankas SIST pa varje sida - kaskaden avgor, inga !important
   utom mot startsidans JS-togglade scrolltillstand.
   ================================================================== */
/* v7: glaset (.92) komponerade olika mot varje sidas hero - nyheter blev
   rgb(40,54,68) mot 20,36,51 pa ovriga. Ogenomskinlig bar = identisk overallt. */
header.nav{position:sticky;top:0;background:#0C1B2A !important;
  backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
header.nav .wrap{max-width:1220px}
.nav-in{height:76px}
.nav-links{gap:26px}
.nav-links > a{padding-block:6px;letter-spacing:-.005em;font-size:.94rem;font-weight:600}
.tjknapp{letter-spacing:-.005em}
@media (max-width:1059px){
  .nav-links > a{padding:13px 0;font-size:1rem;letter-spacing:normal}
}

/* v2: sidegna regler far inte forma navet - nollstall och las knappen. */
header.nav{max-width:none;margin:0;width:auto}
header.nav .wrap{margin:0 auto;padding:0 clamp(20px,5vw,64px)}
/* Startsidans egen .btn-regel har hogre specificitet och behall 187 px medan
   alla andra sidor landade pa 163 - matten maste laasas hart. */
/* v8: #FF5C1A gav 3,09:1 mot vit text (WCAG-krav 4,5). #D64000 = 4,87:1 och
   ar redan kanon pa start/en/nyheter/kund - nu samma orange overallt. */
header.nav a.btn{background:#D64000 !important;color:#fff;
  font-size:.88rem !important;font-weight:800;
  padding:12px 20px !important;line-height:1.2 !important;
  letter-spacing:-.01em !important;border-radius:999px;
  height:auto;box-shadow:none;text-decoration:none}
header.nav a.btn:hover{background:#B23A02}
header.nav img{height:30px;width:auto}

/* v3: sista 8-pixlarna - pillen, radhojden och nav-in-gapet lases. */
header.nav .nav-in{gap:20px}
header.nav .sprak{padding:5px 12px !important;font-size:.8rem !important;line-height:1.6}
header.nav .nav-links > a{line-height:1.6}
header.nav .tjknapp{line-height:1.6}

/* v4: startsidans .nav-cta bar margin-left:8px - sista kallan till att hela
   hogerstacken lag 8 px annorlunda dar. */
header.nav a.btn{margin-left:0 !important}

/* v5: basregeln .mob-cta{display:none} foljde inte med i extraktionen -
   mobilknappen rendererade mitt i desktopnavet pa EN-undersidorna. */
.mob-cta{display:none}
@media (max-width:1059px){ .mob-cta{display:block} }

/* v8: knappstilen for mobilmenyns CTA fanns bara i 4 sidors egna style-block -
   pa 12 sidor rendererades lanken som oformaterad gra text. Kanon hor hemma har. */
@media (max-width:1059px){
  .nav-links .mob-cta{display:block;margin-top:14px}
  .nav-links .mob-cta a{display:block;text-align:center;background:#D64000;color:#fff;
    padding:14px 18px;border-radius:11px;font-weight:800;text-decoration:none;font-size:1rem}
  .nav-links .mob-cta a:hover{background:#B23A02}
}

/* v6: pa mobil doljs navknappen overallt (startsidans kanon - mob-cta i
   menyn tar over), och headerns padding lases sa loggan star pa samma x. */
@media (max-width:700px){
  header.nav a.btn{display:none}
  header.nav .wrap{padding:0 20px}
}

/* v9: mobilpanelen ar position:absolute under en STICKY header, sa den foljer
   baren i stallet for sidan - allt under vikningen gick inte att na. Uppmatt
   2026-08-23 pa 390x844 med samma skript i tre lagen: bara burgaren -> CTA:n
   synlig; Tjanster utfalld -> panelens botten pa 1189 px och CTA:n gick INTE
   att rulla fram (sidan rullade, panelen foljde med baren); Arbetsprov (numera Exempel) utfalld
   -> 1319 px. Defekten fanns alltsa FORE exempelmenyn - den nya menyn gor
   den bara djupare. Fixen ar panelens egen rullning, inte farre menyposter.
   dvh forst dar det stods (mobil-URL-baren), vh som fallback. */
@media (max-width:1059px){
  .nav-links{max-height:calc(100vh - 77px);max-height:calc(100dvh - 77px);
    overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  /* Basregeln har flex-wrap:wrap for desktopraden. I en KOLUMN med max-hojd
     betyder wrap att posterna hoppar till en ANDRA KOLUMN i stallet for att
     rulla: uppmatt lade sig Om oss / Nyheter / Priser / Kundportal / CTA:n
     tillbaka pa y=84 ovanpa den utfallda listan. nowrap + flex:0 0 auto ger
     en enda kolumn som faktiskt rullar. */
  .nav-links{flex-wrap:nowrap}
  .nav-links > *{flex:0 0 auto}
}
@media (max-width:700px){
  .nav-links{max-height:calc(100vh - 65px);max-height:calc(100dvh - 65px)}
}