/* ==================================================================
   NOVA TOPP — koncerngemensam premiumtopp för alla sajter.
   Tema via body.site-X (--brand/--brand-deep) + data-theme dark|light.
   Kräver nova-tokens.css. JS: js/nova-top.js
================================================================== */
.ntop{position:fixed;top:0;left:0;right:0;z-index:1000;font-family:var(--font)}

/* ---------- Mikroraden: jour + inloggningar ---------- */
.ntop-bar{height:34px;font-size:.8rem;display:flex;align-items:center;
  background:linear-gradient(90deg,var(--brand-deep),var(--brand) 55%,var(--brand-deep));
  color:#fff}
.ntop-bar-inner{max-width:1320px;margin:0 auto;padding:0 var(--space-3);width:100%;
  display:flex;align-items:center;gap:var(--space-3)}
.ntop-bar a{color:#fff;text-decoration:none;font-weight:600;display:inline-flex;
  align-items:center;gap:6px;opacity:.94}
.ntop-bar a:hover{opacity:1;text-decoration:underline}
.ntop-bar .icon{width:14px;height:14px}
.ntop-logins{margin-left:auto;display:flex;gap:var(--space-3)}
@media(max-width:640px){
  .ntop-bar .ntop-jour span{display:none} /* bara ikon+nummer på mobil */
  .ntop-logins a span{display:none}
}

/* ---------- Huvudnav ---------- */
.ntop-nav{height:70px;transition:height .25s ease,box-shadow .25s ease,background .25s ease;
  border-bottom:1px solid transparent;position:relative}
.ntop.scrolled .ntop-nav{height:58px;box-shadow:0 8px 30px rgba(0,0,0,.18)}
/* signatur: gradient-hårlinje i brandfärg */
.ntop-nav::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;
  background:linear-gradient(90deg,transparent,var(--brand) 30%,var(--brand) 70%,transparent);
  opacity:.85}
.ntop-nav-inner{max-width:1320px;margin:0 auto;padding:0 var(--space-3);height:100%;
  display:flex;align-items:center;gap:14px}

/* Tema: mörk (default) / ljus */
.ntop[data-theme="dark"] .ntop-nav{background:rgba(8,11,18,.72);
  backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.ntop[data-theme="dark"] .ntop-nav::before{content:'';position:absolute;inset:0;pointer-events:none;
  background:linear-gradient(180deg,rgba(255,255,255,.06),transparent 45%)}
.ntop[data-theme="dark"]{--nt-ink:#F1F5FB;--nt-soft:#B7C2D4;--nt-line:rgba(255,255,255,.1);
  --nt-pop:rgba(255,255,255,.06)}
.ntop[data-theme="light"] .ntop-nav{background:rgba(255,255,255,.88);
  backdrop-filter:blur(14px) saturate(140%);-webkit-backdrop-filter:blur(14px) saturate(140%)}
.ntop[data-theme="light"]{--nt-ink:#0F172A;--nt-soft:#41506B;--nt-line:rgba(15,23,42,.1);
  --nt-pop:rgba(15,23,42,.05)}

.ntop-logo{display:flex;align-items:center;gap:12px;text-decoration:none;flex:none}
.ntop-logo img{height:40px;width:auto;transition:height .25s ease}
.ntop.scrolled .ntop-logo img{height:34px}
.ntop-logo b{color:var(--nt-ink);font-weight:800;font-size:1.02rem;letter-spacing:.01em;
  white-space:nowrap}
.ntop-logo small{display:block;font-size:.62rem;font-weight:600;color:var(--nt-soft);
  letter-spacing:.1em;text-transform:uppercase;margin-top:1px}

.ntop-links{display:flex;align-items:center;gap:6px;margin-left:auto}
/* Dock-piller: ikon + etikett, glas, ljussvep, macOS-förstoring via JS-transform.
   flex:none + nowrap: pillren får ALDRIG klämmas/radbrytas — vid platsbrist
   tar JS-överflödesvakten i nova-top.js över (tight-läge → burgare). */
.ntop-links a{position:relative;display:inline-flex;flex-direction:column;align-items:center;gap:3px;
  flex:none;white-space:nowrap;
  color:var(--nt-soft);font-weight:600;font-size:.72rem;letter-spacing:.06em;text-transform:uppercase;
  text-decoration:none;padding:8px 11px 7px;border-radius:16px;
  background:linear-gradient(180deg,var(--nt-pop),transparent);
  border:1px solid var(--nt-line);overflow:hidden;
  transition:color .25s,border-color .25s,box-shadow .3s,transform .18s cubic-bezier(.34,1.4,.5,1);
  transform-origin:50% 100%;will-change:transform}
.ntop-links a .nl-ico{width:19px;height:19px;stroke:currentColor;stroke-width:1.75;fill:none;
  stroke-linecap:round;stroke-linejoin:round;transition:color .25s}
.ntop-links a::before{content:'';position:absolute;top:0;left:-80%;width:55%;height:100%;
  background:linear-gradient(105deg,transparent,rgba(255,255,255,.22),transparent);
  transform:skewX(-18deg);transition:left .5s ease;pointer-events:none}
.ntop-links a:hover::before{left:130%}
.ntop-links a:hover{color:var(--nt-ink);border-color:color-mix(in srgb,var(--brand) 60%,transparent);
  box-shadow:0 6px 20px rgba(0,0,0,.25),0 0 18px color-mix(in srgb,var(--brand) 30%,transparent)}
.ntop-links a:hover .nl-ico{color:var(--brand)}
.ntop-links a.active{color:var(--nt-ink);border-color:color-mix(in srgb,var(--brand) 55%,transparent);
  box-shadow:0 0 14px color-mix(in srgb,var(--brand) 25%,transparent)}
.ntop-links a.active .nl-ico{color:var(--brand)}
@media(prefers-reduced-motion:reduce){.ntop-links a{transform:none!important}}

.ntop-cta{display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  background:linear-gradient(135deg,var(--brand),var(--brand-deep));color:#fff;
  padding:12px 22px;border-radius:999px;font-weight:700;font-size:.93rem;text-decoration:none;
  box-shadow:0 6px 20px color-mix(in srgb,var(--brand) 40%,transparent);
  transition:transform .25s ease,box-shadow .25s ease}
.ntop-cta:hover{transform:translateY(-1px);text-decoration:none;
  box-shadow:0 10px 28px color-mix(in srgb,var(--brand) 55%,transparent)}
.ntop-cta .icon{width:16px;height:16px}

/* ---------- Dropdowns (login + språk) ---------- */
.ntop-dd{position:relative}
.ntop-dd-btn{display:inline-flex;align-items:center;gap:7px;background:var(--nt-pop);
  border:1px solid var(--nt-line);color:var(--nt-ink);font-weight:600;font-size:.88rem;
  padding:10px 15px;border-radius:999px;cursor:pointer;font-family:var(--font);
  white-space:nowrap;flex:none;
  transition:border-color .2s,background .2s}
.ntop-dd-btn:hover{border-color:var(--brand)}
.ntop-dd-btn .icon{width:15px;height:15px}
.ntop-dd-menu{position:absolute;top:calc(100% + 12px);right:0;min-width:230px;
  background:rgba(13,20,36,.92);backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);
  border:1px solid rgba(255,255,255,.14);border-radius:18px;
  box-shadow:0 24px 60px rgba(0,0,0,.5);padding:8px;display:none;z-index:1001}
.ntop[data-theme="light"] .ntop-dd-menu{background:#fff;border-color:var(--line);
  box-shadow:0 24px 60px rgba(15,23,42,.18)}
.ntop-dd.open .ntop-dd-menu{display:block;animation:ntopdd .18s ease}
@keyframes ntopdd{from{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:none}}
.ntop-dd-menu a,.ntop-dd-menu button{display:flex;align-items:center;gap:10px;width:100%;
  padding:11px 12px;border-radius:9px;color:var(--nt-ink);text-decoration:none;font-weight:600;
  font-size:.9rem;background:none;border:0;cursor:pointer;text-align:left;font-family:var(--font)}
.ntop[data-theme="light"] .ntop-dd-menu a,.ntop[data-theme="light"] .ntop-dd-menu button{color:#0F172A}
.ntop-dd-menu a:hover,.ntop-dd-menu button:hover{background:color-mix(in srgb,var(--brand) 14%,transparent);
  text-decoration:none}
.ntop-dd-menu .dd-sub{font-weight:400;font-size:.78rem;color:var(--nt-soft);display:block}
.ntop-dd-menu .icon{width:17px;height:17px;color:var(--brand)}

/* Språkmeny: rutnät med alla 16 språk */
.ntop-langs{min-width:320px;display:none;grid-template-columns:1fr 1fr;gap:2px}
.ntop-dd.open .ntop-langs{display:grid;animation:ntopdd .18s ease}
.ntop-langs button{padding:9px 10px}
.ntop-langs button b{font-size:.78rem;width:26px;color:var(--brand);flex:none;
  text-transform:uppercase}
.ntop-langs button.active{background:color-mix(in srgb,var(--brand) 20%,transparent)}
@media(max-width:480px){.ntop-langs{min-width:270px;right:-60px}}

/* ---------- Mobil ---------- */
.ntop-burger{display:none;background:none;border:0;padding:10px;cursor:pointer;margin-left:4px}
.ntop-burger span{display:block;width:22px;height:2px;background:var(--nt-ink);margin:5px 0;
  border-radius:2px;transition:transform .28s ease,opacity .28s ease}
.ntop-burger[aria-expanded="true"] span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.ntop-burger[aria-expanded="true"] span:nth-child(2){opacity:0}
.ntop-burger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
@media(max-width:1080px){
  /* Överflödesfix: raden logo+cta+inloggning+språk+burgare rymdes inte på
     smala mobiler (t.ex. 375px) — knapparna hamnade utanför skärmen utan
     möjlighet att scrolla dit. Krymp luft/padding och göm "Logga in"-texten
     (samma mönster som redan används för cta-texten och mikroradens etiketter). */
  .ntop-nav-inner{gap:8px}
  .ntop-dd-btn{padding:9px 12px}
  .ntop-cta{padding:10px 14px}
  #ntopLogin .ntop-dd-btn span{display:none} /* bara ikon på mobil, "Logga in" tar för mycket plats */
  /* OBS: .ntop-nav har backdrop-filter, vilket gör den till containing
     block för sina fixed-positionerade ättlingar (inkl. .ntop-links) —
     "top" räknas alltså från NAVETS egen kant, INTE från viewportens topp
     (mikroraden på 34px räknas inte in här). Tidigare stod det
     calc(34px+58px)=92px i tron att det var viewport-relativt, vilket i
     praktiken landade 34px FÖR LÅGT (menyns topp hamnade vid 34+92=126px
     istället för 92px) — en synlig lucka under headern där sidinnehåll
     lyste igenom, på varje sida, varje gång menyn öppnades. Rätt värde är
     navets EGEN höjd (70px normalt / 58px hopskrumpet). */
  .ntop-links{position:fixed;left:0;right:0;top:70px;flex-direction:column;
    align-items:stretch;gap:2px;padding:var(--space-3);margin:0;
    background:#0B1120;border-bottom:1px solid rgba(255,255,255,.1);
    box-shadow:0 30px 60px rgba(0,0,0,.5);
    transform:translateY(-130%);visibility:hidden;
    transition:transform .3s ease,visibility 0s .3s}
  .ntop.scrolled .ntop-links{top:58px}
  .ntop[data-theme="light"] .ntop-links{background:#fff;border-color:var(--line)}
  .ntop-links.open{transform:translateY(0);visibility:visible;transition:transform .3s ease}
  .ntop-links a{flex-direction:row;justify-content:flex-start;gap:12px;padding:13px 16px;font-size:1rem;text-transform:none;letter-spacing:0;border-radius:14px}
  .ntop-links a .nl-ico{width:20px;height:20px}
  .ntop-burger{display:block}
  .ntop-cta span.ct{display:none} /* bara ikon+nummer */
}
@media(max-width:560px){.ntop-logo small{display:none}.ntop-logo b{font-size:.92rem}}
@media(max-width:400px){.ntop-logo b{display:none}} /* på riktigt smala mobiler: bara logotypbilden, annars får raden fortfarande ont om plats */

/* ---------- Överflödesvakt (JS sätter klasserna vid platsbrist) ---------- */
/* Steg 1: tight — kompaktare topp utan att offra dock-känslan */
.ntop.ntop-tight .ntop-logo small{display:none}
.ntop.ntop-tight .ntop-nav-inner{gap:10px}
.ntop.ntop-tight .ntop-links{gap:4px}
.ntop.ntop-tight .ntop-links a{padding:8px 9px 7px;font-size:.68rem;letter-spacing:.04em}
.ntop.ntop-tight .ntop-cta{padding:10px 16px;font-size:.88rem}
.ntop.ntop-tight .ntop-dd-btn{padding:9px 12px;font-size:.84rem}
/* Steg 2: force-burger — samma läge som mobil, oavsett bredd */
.ntop.ntop-force-burger .ntop-links{position:fixed;left:0;right:0;top:70px;
  flex-direction:column;align-items:stretch;gap:2px;padding:var(--space-3);margin:0;
  background:#0B1120;border-bottom:1px solid rgba(255,255,255,.1);
  box-shadow:0 30px 60px rgba(0,0,0,.5);
  transform:translateY(-130%);visibility:hidden;
  transition:transform .3s ease,visibility 0s .3s}
.ntop.ntop-force-burger.scrolled .ntop-links{top:58px}
.ntop.ntop-force-burger[data-theme="light"] .ntop-links{background:#fff;border-color:var(--line)}
.ntop.ntop-force-burger .ntop-links.open{transform:translateY(0);visibility:visible;
  transition:transform .3s ease}
.ntop.ntop-force-burger .ntop-links a{flex-direction:row;justify-content:flex-start;gap:12px;
  padding:13px 16px;font-size:1rem;text-transform:none;letter-spacing:0;border-radius:14px;
  white-space:normal}
.ntop.ntop-force-burger .ntop-links a .nl-ico{width:20px;height:20px}
.ntop.ntop-force-burger .ntop-burger{display:block}

/* Sidkroppen behöver utrymme för toppen (34+70) */
body.has-ntop{padding-top:104px}
body.has-ntop .hero-video,body.has-ntop .hero-aurora{margin-top:-104px;
  padding-top:calc(104px + var(--space-5))}
@media(prefers-reduced-motion:reduce){.ntop *{transition:none!important;animation:none!important}}