/* =============================================================
   Beredskapsplanleggeren.no – stilark
   Versjon 6.0

   ENDRINGER FRA 5.2:
   - Fonter selvhostes (offline + ingen Google Fonts / GDPR-eksponering)
   - WCAG AA-kontrast: egne signalfarger for lys/mørk bakgrunn og knapper
   - Fjernet død CSS (.statement, .preview-chips, .preview-num, .offline-badge …)
   - .reveal krever nå .js på <html> → innhold synlig uten JavaScript
   - scroll-margin-top for ankernavigasjon under fast toppmeny
   - Utskrift skrevet om: KUN valgt liste, garantert på ÉN A4-side

   ENDRINGER I 6.1 (rettelser på testsiden):
   - Språkvelgeren virker igjen som lenker: luft, flagg og eget trykkfelt
   - Flaggikoner tegnet i ren CSS – ingen bildefiler, virker offline
   - Toppmenyen har fast bakgrunn på alle undersider (ikke gjennomsiktig)
   - Innhold på undersider skjules ikke lenger av reveal-animasjonen
   - Meny og språkvelger vises også på mobil på undersidene
   ============================================================= */

/* ---------- Selvhostede fonter (fungerer offline) ---------- */
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-700-normal.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-800-normal.woff2') format('woff2');font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:'Archivo';src:url('fonts/archivo-latin-900-normal.woff2') format('woff2');font-weight:900;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-400-normal.woff2') format('woff2');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-500-normal.woff2') format('woff2');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Inter';src:url('fonts/inter-latin-600-normal.woff2') format('woff2');font-weight:600;font-style:normal;font-display:swap}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
:root{
  --pine:#14291F; --pine-2:#1E3A2C; --paper:#F4F2EC; --ink:#161A17; --muted:#5C635C;

  /* Signalfarger – verifisert mot WCAG 2.1 AA (4.5:1 for liten tekst) */
  --signal:#E4572E;        /* dekor og stor display-tekst */
  --signal-ink:#B23F1E;    /* liten tekst på lys bakgrunn  – 5.18:1 på paper */
  --signal-btn:#C74722;    /* knappeflate m/ hvit tekst    – 4.82:1 */
  --signal-btn-h:#A63A1B;  /* knapp hover                  – 6.48:1 */
  --signal-light:#F5895E;  /* liten tekst på mørk bakgrunn – 6.31:1 på pine */

  --line:#DAD6CB; --card:#FFFFFF;
  --ok:#2F9E44; --ok-dark:#217a34;
  --maxw:1180px; --r:14px;
  --nav-h:66px;
}
html{scroll-behavior:smooth}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}}
body{font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:var(--paper);color:var(--ink);line-height:1.65;-webkit-font-smoothing:antialiased;overflow-x:hidden}
img{max-width:100%;display:block}
a{color:inherit}
.display{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.02em;line-height:1.02;text-transform:uppercase}
.eyebrow{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.22em;text-transform:uppercase;color:var(--signal-ink)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 24px}
:focus-visible{outline:3px solid var(--signal-btn);outline-offset:3px;border-radius:4px}
.skip{position:absolute;left:-9999px;top:0;background:var(--signal-btn);color:#fff;padding:10px 16px;z-index:200}
.skip:focus{left:12px;top:12px}

/* PKT 20: ankere klarer den faste toppmenyen */
section[id],header[id],main[id]{scroll-margin-top:calc(var(--nav-h) + 12px)}

/* PKT 3: reveal-animasjon kun når JavaScript faktisk kjører.
   Uten .js er alt innhold synlig og siden fullt lesbar. */
.reveal{opacity:1;transform:none}
.js .reveal{opacity:0;transform:translateY(28px);transition:opacity .7s ease,transform .7s ease}
.js .reveal.in{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.js .reveal{opacity:1;transform:none;transition:none}}

/* RETTELSE 3 – rubrikker som forsvant på undersidene.
   Reveal-animasjonen skjuler innhold til app.js legger til .in ved scroll.
   app.js kjører bare på forsiden, så på undersidene ble innholdet liggende
   usynlig. Her: sider uten forsidens <header class="hero"> viser alltid
   innholdet med en gang. Forsiden er urørt. */
html.js:not(:has(.hero-media)) .reveal{opacity:1!important;transform:none!important}

/* PKT 3: beskjed til brukere uten JavaScript */
.noscript-note{background:var(--pine);color:#EDEBE2;padding:14px 24px;text-align:center;font-size:.9rem;position:relative;z-index:150}
.noscript-note b{color:var(--signal-light)}

/* NAV */
/* RETTELSE 4 – toppmenyen på undersidene.
   To feil samtidig:
   a) Menyen var gjennomsiktig og fikk bakgrunn først når app.js la til
      .solid ved scroll. app.js kjører bare på forsiden.
   b) Undersidenes toppseksjon ble tegnet OVER menyen. Derfor så logoen
      ut som den lå bak et grønt slør, og lenkene i menyen kunne ikke
      klikkes – man ble «låst» på siden. Menyen ligger nå øverst.
   Forsiden beholder gjennomsiktig meny over toppbildet. */
.nav{position:fixed;inset:0 0 auto 0;z-index:2000;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 20px;padding:8px clamp(16px,3vw,32px);min-height:var(--nav-h);max-width:100%;transition:background .3s,box-shadow .3s;
     background:rgba(244,242,236,.96);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}
.nav.solid{background:rgba(244,242,236,.96);backdrop-filter:blur(14px);color:var(--ink);box-shadow:0 1px 0 var(--line)}

/* Forsiden: gjennomsiktig over toppbildet til man scroller.
   Kjennetegnet er .hero-media – bildeflaten som kun forsiden har. */
body:has(.hero-media) .nav:not(.solid){background:transparent;backdrop-filter:none;color:#fff;box-shadow:none}

/* Undersidene: alltid fast bakgrunn, uansett hva de heter. */
body:has(.scen-hero) .nav,
body:has(.lst-hero) .nav{background:rgba(244,242,236,.96)!important;backdrop-filter:blur(14px)!important;color:var(--ink)!important;box-shadow:0 1px 0 var(--line)!important}

.nav-logo{font-family:'Archivo',system-ui,sans-serif;font-weight:900;text-transform:uppercase;letter-spacing:.04em;font-size:clamp(.85rem,2.4vw,1rem);text-decoration:none;display:flex;align-items:center;gap:9px;flex:0 0 auto;white-space:nowrap}
.nav-logo .dot{width:10px;height:10px;background:var(--signal);border-radius:0;transform:rotate(45deg);flex:none;align-self:flex-start;margin-top:6px}
.logo-text{display:flex;flex-direction:column;line-height:1.2}
.nav-subtitle{font-family:'Inter',system-ui,sans-serif;font-weight:500;font-size:.78rem;letter-spacing:.01em;text-transform:none;opacity:.85;margin-top:2px}
.nav-links{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:10px clamp(14px,2vw,26px);align-items:center;flex:0 1 auto;min-width:0}
.nav-links a{font-size:.82rem;font-weight:600;text-decoration:none;opacity:.9;white-space:nowrap}
.nav-links a:hover{opacity:1}
.nav.solid .nav-links a:hover{color:var(--signal-ink)}

/* ============================================================
   SPRÅKVELGER – RETTELSE 1 og 2

   Feilen: da språkvalget ble gjort om fra <button> til ekte lenker (<a>),
   sluttet stilene under å treffe. Lenkene fikk verken luft, bredde eller
   markering, og lå klemt sammen som «NOENDEFRES». Hvert trykk traff derfor
   et tilfeldig naboflagg – det så ut som om siden «hoppet videre».

   Nå: fem tydelig adskilte valg med flagg, hver med eget trykkfelt på minst
   44 px (Apple/Google sin anbefalte minstestørrelse). Flaggene er tegnet i
   ren CSS – ingen bildefiler, ingen eksterne kall, virker offline.
   ============================================================ */
.lang-seg{display:inline-flex;align-items:center;gap:2px;border:1.5px solid var(--line);border-radius:999px;overflow:hidden;flex:none;padding:3px;background:rgba(255,255,255,.55)}
body:has(.hero-media) .nav:not(.solid) .lang-seg{border-color:rgba(255,255,255,.55);background:rgba(0,0,0,.22)}

.lang-seg a,
.lang-seg button{
  font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.72rem;letter-spacing:.06em;
  display:inline-flex;align-items:center;gap:7px;
  border:none;background:transparent;color:inherit;text-decoration:none;
  padding:8px 12px;min-height:34px;cursor:pointer;line-height:1;border-radius:999px;
  transition:background .2s,color .2s,opacity .2s;opacity:.72
}
.lang-seg a:hover,.lang-seg button:hover{opacity:1;background:rgba(20,41,31,.08)}
body:has(.hero-media) .nav:not(.solid) .lang-seg a:hover{background:rgba(255,255,255,.18)}

/* Valgt språk */
.lang-seg a.active,.lang-seg button.active,
.lang-seg a[aria-current],.lang-seg [aria-current="true"]{background:var(--signal-btn);color:#fff;opacity:1}

/* Flaggene – tegnet med CSS-gradienter, ingen bildefiler */
.lang-seg a::before,.lang-seg button::before{
  content:"";flex:none;width:20px;height:14px;border-radius:2px;
  box-shadow:0 0 0 1px rgba(0,0,0,.18);background-size:100% 100%;background-repeat:no-repeat
}
/* Norge */
.lang-seg [data-lang="no"]::before,.lang-seg [data-lang="nb"]::before{
  background-color:#BA0C2F;
  background-image:
    linear-gradient(to bottom,transparent 43%,#00205B 43% 57%,transparent 57%),
    linear-gradient(to right,transparent 32%,#00205B 32% 43%,transparent 43%),
    linear-gradient(to bottom,transparent 34%,#fff 34% 66%,transparent 66%),
    linear-gradient(to right,transparent 25%,#fff 25% 50%,transparent 50%)
}
/* Storbritannia */
.lang-seg [data-lang="en"]::before{
  background-color:#012169;
  background-image:
    linear-gradient(to bottom,transparent 41%,#C8102E 41% 59%,transparent 59%),
    linear-gradient(to right,transparent 41%,#C8102E 41% 59%,transparent 59%),
    linear-gradient(to bottom,transparent 33%,#fff 33% 67%,transparent 67%),
    linear-gradient(to right,transparent 33%,#fff 33% 67%,transparent 67%),
    linear-gradient(45deg,transparent 47%,#C8102E 47% 53%,transparent 53%),
    linear-gradient(-45deg,transparent 47%,#C8102E 47% 53%,transparent 53%),
    linear-gradient(45deg,transparent 43%,#fff 43% 57%,transparent 57%),
    linear-gradient(-45deg,transparent 43%,#fff 43% 57%,transparent 57%)
}
/* Tyskland */
.lang-seg [data-lang="de"]::before{background-image:linear-gradient(to bottom,#000 33.3%,#DD0000 33.3% 66.6%,#FFCE00 66.6%)}
/* Frankrike */
.lang-seg [data-lang="fr"]::before{background-image:linear-gradient(to right,#002395 33.3%,#fff 33.3% 66.6%,#ED2939 66.6%)}
/* Spania */
.lang-seg [data-lang="es"]::before{background-image:linear-gradient(to bottom,#AA151B 25%,#F1BF00 25% 75%,#AA151B 75%)}

/* Smale skjermer: bare flagg, fortsatt stort nok trykkfelt.
   Teksten blir liggende i koden, så skjermlesere leser den fortsatt. */
@media(max-width:620px){
  .lang-seg a,.lang-seg button{font-size:0;gap:0;padding:9px 10px;letter-spacing:0}
  .lang-seg a::before,.lang-seg button::before{width:22px;height:15px}
}

.hamburger{display:none;background:none;border:none;cursor:pointer;padding:10px;flex:none;color:inherit}
.hamburger span{display:block;width:22px;height:2px;background:currentColor;margin:5px 0;transition:transform .3s,opacity .3s}
.nav.open .hamburger span:nth-child(1){transform:translateY(7px) rotate(45deg)}
.nav.open .hamburger span:nth-child(2){opacity:0}
.nav.open .hamburger span:nth-child(3){transform:translateY(-7px) rotate(-45deg)}
.mobile-menu{display:none;position:fixed;top:var(--nav-h);left:0;right:0;background:var(--paper);border-bottom:1px solid var(--line);padding:18px 24px 26px;flex-direction:column;gap:14px;z-index:1999}
.mobile-menu.open{display:flex}
.mobile-menu a{font-weight:600;text-decoration:none;font-size:1.05rem}
.mobile-menu .lang-seg{align-self:flex-start;border-color:var(--line);margin-top:4px}
.mobile-menu .lang-seg button,.mobile-menu .lang-seg a{color:var(--ink)}
.mobile-menu .lang-seg button.active,.mobile-menu .lang-seg a.active,
.mobile-menu .lang-seg a[aria-current]{color:#fff}
.mobile-menu .lang-seg a,.mobile-menu .lang-seg button{font-size:.78rem;padding:10px 14px}
.mobile-menu .lang-seg a::before,.mobile-menu .lang-seg button::before{width:22px;height:15px}

/* HERO */
.hero{position:relative;min-height:100svh;display:flex;align-items:flex-end;color:#fff}
.hero-media{position:absolute;inset:0;overflow:hidden}
.hero-media img{width:100%;height:100%;object-fit:cover;transform:scale(1.06);animation:heroZoom 9s ease-out forwards}
@keyframes heroZoom{to{transform:scale(1)}}
@media(prefers-reduced-motion:reduce){.hero-media img{animation:none;transform:none}}
.hero-media::after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(10,20,15,.35) 0%,rgba(10,20,15,.15) 40%,rgba(10,20,15,.78) 100%)}
.hero-inner{position:relative;width:100%;max-width:var(--maxw);margin:0 auto;padding:96px 24px 9vh}
.hero h1{font-size:clamp(2.4rem,6vw,5rem);max-width:17ch}
.hero p{max-width:52ch;margin:20px 0 30px;font-size:clamp(1rem,1.4vw,1.2rem);color:rgba(255,255,255,.92)}
.btn{display:inline-block;font-family:'Archivo',system-ui,sans-serif;font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:.82rem;padding:15px 30px;border-radius:999px;text-decoration:none;transition:transform .2s,background .2s}
.btn:hover{transform:translateY(-2px)}
.btn-signal{background:var(--signal-btn);color:#fff}
.btn-signal:hover{background:var(--signal-btn-h)}
.btn-ghost{border:1.5px solid rgba(255,255,255,.8);color:#fff}
.btn-ghost:hover{background:rgba(255,255,255,.14)}
.hero-actions{display:flex;flex-wrap:wrap;gap:12px}
@media(max-width:560px){.hero-actions{flex-direction:column;align-items:flex-start}}
.hero-scroll{position:absolute;right:43px;bottom:180px;z-index:10;writing-mode:vertical-rl;font-size:.68rem;letter-spacing:.3em;text-transform:uppercase;color:rgba(255,255,255,.75);text-shadow:0 1px 3px rgba(0,0,0,.35);pointer-events:none}
@media(max-width:900px){.hero-scroll{display:none}}

/* Tall-stripe – PKT 1: 7 døgn, ikke 3 */
.strip{background:var(--pine);color:#EDEBE2;padding:clamp(100px,13vw,160px) 0;position:relative;overflow:hidden}
.strip::before{content:"7";position:absolute;right:-4%;top:50%;transform:translateY(-50%);font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:clamp(18rem,40vw,34rem);color:rgba(237,235,226,.05);line-height:1;pointer-events:none}
.strip .wrap{display:grid;grid-template-columns:auto 1fr;gap:clamp(36px,6vw,80px);align-items:center;position:relative}
.strip .big{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:clamp(6rem,14vw,11rem);line-height:.82;color:var(--signal-light);position:relative}
.strip .big small{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:clamp(1rem,1.6vw,1.2rem);letter-spacing:.22em;text-transform:uppercase;color:rgba(237,235,226,.92);margin-top:14px}
.strip p{max-width:56ch;color:rgba(237,235,226,.88);font-size:clamp(1.05rem,1.5vw,1.2rem);line-height:1.7}
@media(max-width:720px){.strip .wrap{grid-template-columns:1fr}.strip::before{top:10%;right:-10%;transform:none}}

/* Seksjonsrytme */
.section{padding:clamp(72px,10vw,128px) 0}
.section-head{max-width:680px;margin-bottom:clamp(40px,5vw,64px)}
.section-head .eyebrow{display:inline-flex;align-items:center;gap:10px}
.section-head .eyebrow::before{content:"";width:26px;height:2px;background:currentColor;display:inline-block}
.section-head h2{font-size:clamp(2rem,4.6vw,3.4rem);margin:14px 0 16px}
.section-head p{color:var(--muted);font-size:clamp(1rem,1.3vw,1.12rem);max-width:60ch}
.calc .section-head p{color:rgba(237,235,226,.82)}
.lede{color:var(--muted);max-width:60ch;margin:0 0 clamp(28px,3.5vw,40px)}

/* Manifest-bånd */
.manifesto{background:var(--pine);color:#EDEBE2;overflow:hidden}
.manifesto .grid{display:grid;grid-template-columns:1.05fr .95fr;min-height:clamp(360px,48vw,560px)}
.manifesto .fig{position:relative;overflow:hidden;min-height:280px;margin:0;line-height:0}
.manifesto .fig img{width:100%;height:100%;object-fit:cover;object-position:center 42%;transform:scale(1.03);transition:transform 1.2s ease;display:block}
.manifesto:hover .fig img{transform:scale(1.07)}
.manifesto .fig::after{content:"";position:absolute;inset:0;background:linear-gradient(90deg,rgba(20,41,31,0) 55%,rgba(20,41,31,.55) 100%)}
.manifesto .say{display:flex;flex-direction:column;justify-content:center;padding:clamp(36px,5vw,72px)}
.manifesto .eyebrow{color:var(--signal-light);margin-bottom:20px}
.manifesto blockquote{font-family:'Archivo',system-ui,sans-serif;font-weight:800;letter-spacing:-.015em;line-height:1.04;text-transform:uppercase;font-size:clamp(1.8rem,3.6vw,3rem);margin:0 0 22px;border:none;padding:0;color:#fff}
.manifesto blockquote::before{content:"";display:block;width:52px;height:4px;background:var(--signal);margin-bottom:26px}
.manifesto .say p:not(.eyebrow){font-size:clamp(1rem,1.25vw,1.1rem);line-height:1.62;color:rgba(237,235,226,.85);max-width:52ch;margin:0}
@media(max-width:820px){
  .manifesto .grid{grid-template-columns:1fr}
  .manifesto .fig{min-height:240px;aspect-ratio:16/9}
  .manifesto .fig::after{background:linear-gradient(180deg,rgba(20,41,31,0) 55%,rgba(20,41,31,.5) 100%)}
}

/* Kategorikort */
.cat-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:clamp(16px,2vw,24px)}
.cat-card{position:relative;background:var(--card);border:1px solid var(--line);border-radius:var(--r);overflow:hidden;display:flex;flex-direction:column;transition:transform .35s ease,box-shadow .35s ease,border-color .35s ease}
.cat-card:hover{transform:translateY(-6px);box-shadow:0 22px 48px rgba(20,41,31,.16);border-color:transparent}
.cat-card .media{position:relative;aspect-ratio:4/3;overflow:hidden;background:var(--pine)}
.cat-card .media img{width:100%;height:100%;object-fit:cover;transition:transform .6s ease}
.cat-card:hover .media img{transform:scale(1.06)}
.cat-card .num{position:absolute;top:14px;left:14px;font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:.9rem;background:var(--signal-btn);color:#fff;width:38px;height:38px;border-radius:50%;display:grid;place-items:center;box-shadow:0 4px 14px rgba(0,0,0,.28)}
.cat-card .body{padding:24px 24px 26px;display:flex;flex-direction:column;flex:1}
.cat-card .body .eyebrow{font-size:.66rem;letter-spacing:.2em;margin:0 0 .7rem}
.cat-card h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:clamp(1.12rem,2vw,1.3rem);line-height:1.1;margin:0 0 .65rem}
.cat-card p{color:var(--muted);font-size:.9rem;flex:1;margin:0}
@media(max-width:900px){.cat-grid{grid-template-columns:repeat(2,1fr)}}
@media(max-width:560px){.cat-grid{grid-template-columns:1fr}}

/* Kalkulator */
.calc{background:var(--pine);color:#EDEBE2}
.calc .eyebrow{color:var(--signal-light)}
.calc-grid{display:grid;grid-template-columns:.92fr 1.08fr;gap:clamp(28px,4vw,56px);align-items:start}
@media(max-width:900px){.calc-grid{grid-template-columns:1fr}}
.calc-panel{background:var(--pine-2);border:1px solid rgba(237,235,226,.16);border-radius:var(--r);padding:clamp(26px,3vw,38px)}
.ctrl{margin-bottom:26px}
.ctrl label{display:block;font-family:'Archivo',system-ui,sans-serif;font-weight:700;text-transform:uppercase;letter-spacing:.08em;font-size:.76rem;margin-bottom:12px;color:rgba(237,235,226,.85)}
.stepper{display:flex;align-items:center;gap:16px}
.stepper button{width:46px;height:46px;border-radius:50%;border:1.5px solid rgba(237,235,226,.5);background:transparent;color:#EDEBE2;font-size:1.4rem;line-height:1;cursor:pointer;transition:background .2s,border-color .2s,transform .15s}
.stepper button:hover{background:rgba(255,255,255,.12);border-color:#EDEBE2}
.stepper button:active{transform:scale(.92)}
.stepper .val{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:2.4rem;min-width:66px;text-align:center;font-variant-numeric:tabular-nums}
.calc-actions{display:flex;flex-wrap:wrap;gap:12px;margin:30px 0 18px}
.calc-actions button{font-family:'Archivo',system-ui,sans-serif;font-weight:700;letter-spacing:.05em;text-transform:uppercase;font-size:.78rem;padding:14px 24px;border-radius:999px;cursor:pointer;transition:transform .2s,background .2s;border:1.5px solid transparent}
.calc-actions button:hover{transform:translateY(-2px)}
.btn-print{background:var(--signal-btn);color:#fff}
.btn-print:hover{background:var(--signal-btn-h)}
.btn-reset{background:transparent;color:#EDEBE2;border-color:rgba(237,235,226,.5)}
.btn-reset:hover{background:rgba(255,255,255,.1)}
.calc-note{font-size:.82rem;color:rgba(237,235,226,.72);max-width:46ch;margin:0}
.packlist{background:var(--paper);color:var(--ink);border-radius:var(--r);padding:clamp(24px,3vw,36px);box-shadow:0 26px 62px rgba(0,0,0,.34)}
.packlist h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;font-size:1.05rem;border-bottom:2px solid var(--ink);padding-bottom:14px;margin-bottom:6px;display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.packlist h3 #plMeta{font-size:.72rem;letter-spacing:.12em;color:var(--muted);font-weight:700;white-space:nowrap}
.pl-group{padding:20px 0 6px;font-size:.7rem;font-weight:700;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink)}
.pl-row{display:flex;justify-content:space-between;gap:16px;padding:11px 0;border-bottom:1px solid var(--line);font-size:.94rem}
.pl-row b{font-variant-numeric:tabular-nums;white-space:nowrap;font-family:'Archivo',system-ui,sans-serif;font-weight:800}

/* Sjekkliste */
#sjekkliste{padding-top:clamp(56px,7vw,92px);padding-bottom:clamp(48px,6vw,84px)}
#glemt{padding-top:clamp(36px,5vw,60px);padding-bottom:clamp(48px,6vw,84px)}
#sjekkliste .section-head,#glemt .section-head{margin-bottom:clamp(28px,3.5vw,40px)}
.check-head{margin-bottom:30px}
.progress{max-width:560px}
.progress .lbl{font-size:.82rem;font-weight:600;color:var(--muted);margin-bottom:10px;display:flex;justify-content:space-between}
.progress .lbl #ckPct{font-family:'Archivo',system-ui,sans-serif;font-weight:800;color:var(--ink)}
.progress .bar{height:12px;background:#E4E1D7;border-radius:999px;overflow:hidden}
.progress .fill{height:100%;width:0;background:var(--signal);border-radius:999px;transition:width .4s ease,background .4s ease}
/* PKT 17: gruppert sjekkliste med reell semantikk */
.check-group{border:none;margin:0 0 26px;padding:0}
.check-group legend{font-family:'Archivo',system-ui,sans-serif;font-weight:700;font-size:.7rem;letter-spacing:.16em;text-transform:uppercase;color:var(--signal-ink);padding:0;margin-bottom:12px}
.check-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(248px,1fr));gap:12px}
.check-item{display:flex;gap:12px;align-items:center;background:#fff;border:1px solid var(--line);border-radius:10px;padding:14px 16px;cursor:pointer;transition:border-color .2s,background .2s;font-size:.92rem;font-weight:500}
.check-item:hover{border-color:var(--signal-btn)}
.check-item input{width:19px;height:19px;accent-color:var(--signal-btn);flex:none}
.check-item.done{background:#F0EDE4;color:var(--muted);text-decoration:line-through}
.check-note{margin-top:20px;font-size:.8rem;color:var(--muted)}

/* "Ting folk ofte glemmer" */
.forget{display:grid;grid-template-columns:repeat(2,1fr);gap:clamp(14px,2vw,20px);margin-top:8px;counter-reset:fg}
.forget li{counter-increment:fg;list-style:none;display:grid;grid-template-columns:auto 1fr;gap:20px;align-items:start;background:var(--card);border:1px solid var(--line);border-radius:var(--r);padding:24px 26px;transition:border-color .3s,transform .3s}
.forget li:hover{border-color:var(--signal-btn);transform:translateY(-3px)}
.forget li::before{content:counter(fg,decimal-leading-zero);font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:1.5rem;color:var(--signal-ink);line-height:1;padding-top:2px;font-variant-numeric:tabular-nums}
.forget h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;font-size:1.02rem;line-height:1.15;margin:0 0 6px}
.forget p{color:var(--muted);font-size:.9rem;margin:0}
@media(max-width:680px){.forget{grid-template-columns:1fr}}

/* Lenker */
.links-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(248px,1fr));gap:16px}
.link-card{position:relative;background:#fff;border:1px solid var(--line);border-radius:var(--r);padding:26px 26px 28px;text-decoration:none;transition:transform .25s,box-shadow .25s,border-color .25s;display:block}
.link-card:hover{transform:translateY(-4px);box-shadow:0 16px 36px rgba(20,41,31,.12);border-color:transparent}
.link-card h3{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:-.01em;margin:0 0 8px;font-size:1.08rem;padding-right:24px}
.link-card p{font-size:.86rem;color:var(--muted);margin:0}
.link-card::after{content:"\2197";position:absolute;top:24px;right:24px;font-size:1.05rem;color:var(--muted);transition:transform .25s,color .25s}
.link-card:hover::after{transform:translate(3px,-3px);color:var(--signal-ink)}
.links-sub{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.02em;font-size:1.15rem;margin:48px 0 20px;display:flex;align-items:center;gap:12px}
.links-sub::before{content:"";width:26px;height:2px;background:var(--signal)}

/* Nødnumre */
.emergency-band{margin-top:40px;background:var(--pine);color:#EDEBE2;border-radius:var(--r);padding:26px 28px;display:flex;flex-wrap:wrap;align-items:center;gap:14px 32px}
.emergency-band .em-title{font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;letter-spacing:.08em;font-size:.8rem;color:var(--signal-light);margin:0}
.emergency-band .em-nums{display:flex;flex-wrap:wrap;gap:14px 28px}
.emergency-band .em-num{font-size:1rem}
.emergency-band .em-num b{font-family:'Archivo',system-ui,sans-serif;font-weight:900;font-size:1.15rem;margin-right:4px}

/* Footer */
footer{background:var(--pine);color:rgba(237,235,226,.85);padding:64px 0 44px;font-size:.85rem}
footer .wrap{display:flex;flex-wrap:wrap;justify-content:space-between;gap:28px}
footer .nav-logo{color:#EDEBE2;text-decoration:none}
footer a{color:#EDEBE2}
footer .f-block{max-width:46ch}
footer .f-block p{margin-top:12px}
footer .f-label{font-weight:700;color:#EDEBE2;margin-bottom:8px}
footer .f-copy{margin-top:10px}

@media(max-width:1000px){
  .nav-links{display:none}
  .hamburger{display:block}
  /* Undersidene har ingen hamburgermeny. Uten dette forsvant både
     «Til forsiden» og hele språkvelgeren på mobil. */
  body:not(:has(.hamburger)) .nav{flex-wrap:wrap;row-gap:6px}
  body:not(:has(.hamburger)) .nav-links{display:flex;flex-wrap:wrap;gap:12px}
}

/* Sammenleggbare seksjoner */
details.collapse{margin:0}
details.collapse>summary{
  list-style:none;cursor:pointer;
  /* Grid i stedet for flex: gjør at eyebrow, h2 og lede kan ligge som
     direkte barn av <summary>. Det er nødvendig fordi <summary> kun
     tillater fraseinnhold pluss ÉN overskrift – ingen <div>-wrapper. */
  display:grid;grid-template-columns:1fr auto;align-items:start;
  column-gap:24px;row-gap:0;
  padding:0;margin-bottom:clamp(28px,3.5vw,40px);transition:opacity .2s;
}
details.collapse>summary>.eyebrow,
details.collapse>summary>h2,
details.collapse>summary>.sum-lede{grid-column:1;display:block}
details.collapse>summary::-webkit-details-marker{display:none}
details.collapse>summary:hover{opacity:.75}
details.collapse>summary:focus-visible{outline:2px solid var(--signal-btn);outline-offset:6px;border-radius:2px}

details.collapse>summary>h2.display{margin:0}
details.collapse>summary .sum-lede{color:var(--muted);margin:12px 0 0;font-size:1rem;max-width:60ch;display:none}
details.collapse:not([open])>summary>.sum-lede{display:block}
details.collapse:not([open])>summary .sum-lede{display:block}
details.collapse>summary .chev{
  grid-column:2;grid-row:1/span 3;align-self:center;flex:0 0 auto;width:44px;height:44px;border-radius:50%;
  border:1.5px solid var(--line);background:var(--card);
  display:grid;place-items:center;transition:transform .3s,border-color .3s,background .3s;margin-top:6px;
}
details.collapse>summary:hover .chev{border-color:var(--signal-btn);background:var(--signal-btn);color:#fff}
details.collapse>summary .chev::before{
  content:"";width:10px;height:10px;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translate(-2px,-2px);transition:transform .3s;
}
details.collapse[open]>summary .chev::before{transform:rotate(-135deg) translate(-2px,-2px)}
details.collapse>.collapse-body{padding:0;margin-top:0}
details.collapse>.collapse-body>p:first-child{margin-top:0}
@media(max-width:600px){
  details.collapse>summary{gap:14px}
  details.collapse>summary .chev{width:38px;height:38px}
}

/* Teaser A: sand */
details.collapse.teaser:not([open])>summary{background:#E8E0CD;border-radius:12px;padding:clamp(28px,3.5vw,40px);margin-bottom:0;align-items:center}
details.collapse.teaser[open]>summary{padding:0;background:transparent}
details.collapse.teaser>summary .chev{display:none}
details.collapse.teaser>summary .cta{
  grid-column:2;grid-row:1/span 3;align-self:center;flex:0 0 auto;background:var(--signal-btn);color:#fff;padding:11px 18px;border-radius:3px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s;
}
details.collapse.teaser>summary:hover .cta{background:var(--signal-btn-h)}
details.collapse.teaser[open]>summary .cta{display:none}
details.collapse.teaser>summary .preview{display:none;grid-column:1/-1;grid-row:4;grid-template-columns:repeat(6,1fr);gap:14px;margin-top:26px;padding-top:24px;border-top:1px solid rgba(20,32,31,.14);width:100%}
details.collapse.teaser:not([open])>summary .preview{display:grid}
details.collapse.teaser>summary .preview .p-item{display:flex;flex-direction:column;align-items:center;gap:10px;color:var(--pine)}
details.collapse.teaser>summary .preview .p-item svg{width:40px;height:40px;stroke-width:1.5}
details.collapse.teaser>summary .preview .p-item span{font-size:13px;color:var(--ink);font-weight:600}
@media(max-width:600px){
  details.collapse.teaser>summary .preview{grid-template-columns:repeat(3,1fr);gap:18px}
  details.collapse.teaser>summary .preview .p-item svg{width:36px;height:36px}
  details.collapse.teaser>summary .cta{width:100%;justify-content:center;margin-top:14px}
}

/* Teaser B: mørk pine */
details.collapse.teaser-dark:not([open])>summary{background:var(--pine);color:var(--paper);border-radius:12px;padding:clamp(28px,3.5vw,40px);margin-bottom:0;align-items:center}
details.collapse.teaser-dark[open]>summary{padding:0;background:transparent}
details.collapse.teaser-dark:not([open])>summary>.eyebrow{color:var(--signal-light);font-size:.82rem}
details.collapse.teaser-dark:not([open])>summary>h2.display{color:#FFFFFF;font-size:clamp(1.6rem,3.2vw,2.4rem)}
details.collapse.teaser-dark:not([open])>summary>.sum-lede{color:#E8E3D4;font-size:1.05rem;line-height:1.55}
details.collapse.teaser-dark>summary .chev{display:none}
details.collapse.teaser-dark>summary .cta{
  grid-column:2;grid-row:1/span 3;align-self:center;flex:0 0 auto;background:var(--signal-btn);color:#fff;padding:13px 22px;border-radius:3px;
  font-size:13px;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s;
}
details.collapse.teaser-dark>summary:hover .cta{background:var(--signal-btn-h)}
details.collapse.teaser-dark[open]>summary .cta{display:none}
@media(max-width:680px){details.collapse.teaser-dark>summary .cta{width:100%;justify-content:center;margin-top:14px}}

/* Teaser C: lys ice */
details.collapse.teaser-links:not([open])>summary{background:#DDE7DD;border-radius:12px;padding:clamp(28px,3.5vw,40px);margin-bottom:0;align-items:center}
details.collapse.teaser-links[open]>summary{padding:0;background:transparent}
details.collapse.teaser-links>summary .chev{display:none}
details.collapse.teaser-links>summary .cta{
  grid-column:2;grid-row:1/span 3;align-self:center;flex:0 0 auto;background:var(--pine);color:#fff;padding:11px 18px;border-radius:3px;
  font-size:12px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;transition:background .2s;
}
details.collapse.teaser-links>summary:hover .cta{background:#0b2e2e}
details.collapse.teaser-links[open]>summary .cta{display:none}
@media(max-width:600px){details.collapse.teaser-links>summary .cta{width:100%;justify-content:center;margin-top:14px}}

/* =============================================================
   UTSKRIFT  (PKT: ny utskriftsfunksjonalitet)

   Krav: KUN den valgte listen skal skrives ut, og KUN på én A4-side.

   Slik løses det:
   1. #printRoot er eneste direkte barn av <body> som vises ved utskrift.
      Regelen gjelder ALLTID i @media print – ikke bare når JS har satt
      .printing. Derfor gir også Ctrl+P kun listen, aldri hele nettsiden.
   2. app.js fyller #printRoot ved beforeprint, slik at Ctrl+P uten
      knappetrykk får handlelisten som standard.
   3. Ett-sides-garanti: kompakte rader, ingen notatlinjer, og et
      automatisk to-kolonners oppsett når listen er lang. Måltall er
      beregnet mot A4 (297mm - 2x10mm marg = 277mm brukbar høyde).
   ============================================================= */
#printRoot{display:none}

@media print{
  @page{size:A4 portrait;margin:10mm}

  html,body{background:#fff!important;margin:0!important;padding:0!important}

  /* 1) Alt annet enn utskriftsroten skjules – uansett hvordan utskrift startes */
  body > *:not(#printRoot){display:none!important}

  #printRoot{
    display:block!important;
    -webkit-print-color-adjust:exact!important;print-color-adjust:exact!important;
    color:#000!important;
    font-family:'Inter',system-ui,sans-serif;
  }

  /* Tittelrad */
  #printRoot .p-head{
    display:flex!important;justify-content:space-between;align-items:baseline;gap:10px;
    font-family:'Archivo',system-ui,sans-serif;font-size:15pt;font-weight:800;
    padding-bottom:5pt;margin:0 0 3pt;border-bottom:2px solid #000;color:#000;
    text-transform:uppercase;letter-spacing:.02em;
  }
  #printRoot .p-head .meta{font-size:8.5pt;font-weight:600;letter-spacing:0;text-transform:none;white-space:nowrap}
  #printRoot .p-sub{font-size:7.5pt;color:#333;margin:0 0 6pt}

  /* 2) Kolonneoppsett – lange lister brekkes i to spalter så alt får plass */
  #printRoot .p-cols{column-count:2;column-gap:8mm;column-fill:balance}
  #printRoot.single .p-cols{column-count:1}
  #printRoot .p-block{break-inside:avoid;page-break-inside:avoid;margin:0 0 4pt}

  #printRoot .p-group{
    background:#EEE!important;color:#000!important;
    font-family:'Archivo',system-ui,sans-serif;font-weight:800;text-transform:uppercase;
    letter-spacing:.06em;font-size:7pt;padding:2.5pt 4pt;border:.5pt solid #000;
    break-after:avoid;page-break-after:avoid;
  }
  #printRoot table{width:100%;border-collapse:collapse;table-layout:fixed}
  #printRoot td{
    border:.5pt solid #666;padding:2pt 4pt;font-size:8.5pt;line-height:1.25;
    color:#000;vertical-align:top;
  }
  #printRoot td.val{
    text-align:right;white-space:nowrap;
    font-family:'Archivo',system-ui,sans-serif;font-weight:800;width:22mm;
  }
  #printRoot td.chk{text-align:center;width:6mm;font-size:9pt}
  #printRoot tr{break-inside:avoid;page-break-inside:avoid}

  /* Bunntekst med kilde */
  #printRoot .p-foot{
    margin-top:5pt;padding-top:3pt;border-top:.5pt solid #999;
    font-size:6.5pt;color:#444;display:flex;justify-content:space-between;gap:10px;
  }

  /* 3) Sikkerhetsventil: skulle innholdet likevel bli for høyt,
        skaleres det ned framfor å flyte over på side 2. */
  #printRoot.fit-tight td{font-size:7.5pt;padding:1.2pt 3pt}
  #printRoot.fit-tight .p-group{font-size:6.2pt;padding:1.5pt 3pt}
  #printRoot.fit-tight .p-head{font-size:12pt}
}

/* ============================================================
   MOBIL-FIX: hindrer at CTA-knapp og overskrift i <summary> flyter
   utenfor høyre skjermkant på smale skjermer.

   Årsak: .cta lå fast i grid-column:2 med white-space:nowrap. Da ble
   knappen + overskriften bredere enn skjermen og ble klippet av
   body{overflow-x:hidden}. Her legges knappen på egen linje under
   teksten (én kolonne), og lange ord/knappetekst får brytes.
   Gjelder alle tre teaser-variantene (sand, mørk pine, lys ice).
   ============================================================ */
@media(max-width:680px){
  details.collapse>summary{grid-template-columns:1fr;column-gap:0}

  /* La lange, versale ord i overskriftene brytes i stedet for å
     presse summary-en bredere enn skjermen. */
  details.collapse>summary>.eyebrow,
  details.collapse>summary>h2,
  details.collapse>summary>.sum-lede{min-width:0;overflow-wrap:anywhere}

  /* Flytt CTA-knappen ned på egen full-bredde linje under teksten. */
  details.collapse.teaser>summary .cta,
  details.collapse.teaser-dark>summary .cta,
  details.collapse.teaser-links>summary .cta{
    grid-column:1;grid-row:auto;align-self:stretch;width:100%;
    justify-content:center;text-align:center;white-space:normal;
    margin-top:16px;
  }

  /* Ikon-forhåndsvisningen (Vann/Mat/…) skal ligge i samme ene kolonne. */
  details.collapse.teaser>summary .preview{grid-column:1;grid-row:auto}

  /* Evt. synlig pil-sirkel (chev) settes også i kolonne 1 uten å strekkes. */
  details.collapse>summary .chev{grid-column:1;grid-row:auto;justify-self:start;margin-top:14px}
}