/* =============================================================
   Beredskapsplanleggeren.no – design.css (nytt utseende, okt. 2026)

   Lastes SIST på alle sider og legger det nye designet oppå det
   eksisterende. Ingen funksjoner, tekster eller skript er endret –
   bare farger, typografi, former og oppsett.

   Slik går du tilbake til det gamle utseendet: fjern linjen
   <link rel="stylesheet" href="…design.css"> fra sidene.
   ============================================================= */

:root{
  /* Ny fargepalett: blekk, sand, rust og gull */
  --pine:#1A1A1A;  --pine-2:#26272B;
  --paper:#F7F6F3; --ink:#1A1A1A; --muted:#5F5B55;
  --signal:#A8341A;        /* dekor */
  --signal-ink:#A8341A;    /* liten tekst på lys bakgrunn – 6.4:1 */
  --signal-btn:#A8341A;    /* knapp med hvit tekst       – 6.9:1 */
  --signal-btn-h:#8C2B15;
  --signal-light:#E8B23C;  /* liten tekst på mørk bakgrunn – 9.6:1 */
  --line:#E0DCD4; --card:#FFFFFF;
  --hero:#22242A;
  --r:0px;

  /* Varselstripen «Skjer det nå?» ligger fast øverst, over menyen.
     --nav-h dekker begge, så alle eksisterende avstander stemmer. */
  --banner-h:44px;
  --bar-h:66px;
  --nav-h:calc(var(--bar-h) + var(--banner-h));

  --head:"Helvetica Neue",system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
}

body{background:var(--paper)}

/* ---------- Typografi: lette, rolige overskrifter ---------- */
.display,
.manifesto blockquote,
.scen-hero h1,.lst-hero h1,
.season-box h2,.scen-teaser h2,.trust-wrap h2{
  font-family:var(--head);font-weight:300;text-transform:none;letter-spacing:-.02em;line-height:1.08
}
.cat-card h3,.forget h3,.link-card h3,.packlist h3,
.scen-card h2,.lst-panel h2,.lst-result > h2,.lst-gap h2,.lst-group h3,.links-sub{
  font-family:var(--head);font-weight:400;text-transform:none;letter-spacing:-.01em
}
.eyebrow,.scen-eyebrow,.scen-teaser-eyebrow,.scen-toc-label,.pl-group,.check-group legend{
  font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.16em
}

/* ---------- Knapper: rette kanter, store bokstaver ---------- */
.btn,.calc-actions button,.btn-list,.cl-btn,
details.collapse>summary .cta,.scen-teaser-cta{
  border-radius:0!important;font-family:'Inter',system-ui,sans-serif!important;font-weight:600!important;
  letter-spacing:.12em!important;text-transform:uppercase;font-size:13px!important
}
.btn,.btn-list,.calc-actions button,.cl-btn{min-height:52px;padding:0 26px!important;display:inline-flex;align-items:center;justify-content:center;gap:8px}
.btn:hover,.calc-actions button:hover{transform:none}
.btn-ghost{border:1px solid #FFFFFF}

/* Runde +/- knapper beholdes (som i det nye designet) */
.stepper button{width:48px;height:48px;border-width:1px}
.stepper .val{font-family:var(--head);font-weight:300;font-size:2.8rem}

/* ---------- Kort og bokser: rette hjørner ---------- */
.cat-card,.forget li,.link-card,.calc-panel,.packlist,.emergency-band,.check-item,
.scen-card,.scen-box,.scen-toc,.scen-teaser,.scen-emergency,.lst-panel,.lst-result,.lst-gap,.season-box,
details.collapse.teaser:not([open])>summary,
details.collapse.teaser-dark:not([open])>summary,
details.collapse.teaser-links:not([open])>summary{border-radius:0!important}
.cat-card:hover,.forget li:hover,.link-card:hover{transform:none}
.cat-card .num{border-radius:0;background:var(--ink);font-family:'Inter',system-ui,sans-serif;font-weight:600;box-shadow:none}

/* Fargeflater på de sammenleggbare boksene */
details.collapse.teaser:not([open])>summary{background:#FFFFFF;border:1px solid var(--line)}
details.collapse.teaser-links:not([open])>summary{background:#FFFFFF;border:1px solid var(--line)}
details.collapse.teaser-links>summary .cta{background:var(--ink)}
details.collapse.teaser-links>summary:hover .cta{background:#000000}
details.collapse.teaser>summary .preview .p-item{color:var(--signal)}

/* =============================================================
   VARSELSTRIPE «Skjer det nå?» (ren HTML/CSS – virker uten JavaScript)
   ============================================================= */
.bp-alert{position:fixed;top:0;left:0;right:0;z-index:2001;background:#FFD23F;color:#1A1A1A;border-bottom:2px solid #1A1A1A;font-family:'Inter',system-ui,sans-serif}
.bp-alert__bar{display:flex;align-items:center;gap:20px;height:calc(var(--banner-h) - 2px);padding:0 clamp(16px,3vw,32px);max-width:100%}
.bp-alert__title{display:flex;align-items:center;gap:9px;font-size:13px;font-weight:700;letter-spacing:.12em;text-transform:uppercase;white-space:nowrap}
.bp-alert__links{display:none;gap:18px;flex:1;min-width:0;font-size:13px;font-weight:500;white-space:nowrap;overflow:hidden}
.bp-alert a{color:#1A1A1A;text-underline-offset:3px}
.bp-alert__phones{display:none;margin-left:auto;font-size:13px;font-weight:700;white-space:nowrap}
.bp-alert__more{margin-left:auto}
.bp-alert__more>summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:6px;min-height:40px;padding:0 4px;font-size:14px;font-weight:600}
.bp-alert__more>summary::-webkit-details-marker{display:none}
.bp-alert__more>summary::after{content:"▾"}
.bp-alert__more[open]>summary::after{content:"▴"}
.bp-alert__more .lbl-close,.bp-alert__more[open] .lbl-open{display:none}
.bp-alert__more[open] .lbl-close{display:inline}
.bp-alert__panel{position:absolute;left:0;right:0;top:100%;max-height:calc(100vh - var(--banner-h));overflow:auto;background:#1A1A1A;color:#FFFFFF;padding:4px clamp(16px,3vw,32px) 24px;box-shadow:0 24px 40px rgba(0,0,0,.35)}
.bp-alert__panel ul{list-style:none;margin:0;padding:0}
.bp-alert__panel li a{display:flex;align-items:center;justify-content:space-between;min-height:54px;border-bottom:1px solid #3A3835;color:#FFFFFF;font-size:17px;text-decoration:none}
.bp-alert__panel li a::after{content:"→";color:#E8B23C}
.bp-alert__label{margin:16px 0 10px;font-size:12px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#C9C5BE}
.bp-alert__tel{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.bp-alert__tel a{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:66px;background:#A8341A;color:#FFFFFF;text-decoration:none}
.bp-alert__tel b{font-size:26px;font-weight:500;line-height:1}
.bp-alert__tel small{font-size:12px;letter-spacing:.08em;text-transform:uppercase}
@media(min-width:760px){.bp-alert__phones{display:block}.bp-alert__more{margin-left:0}}
@media(min-width:1240px){
  .bp-alert__links{display:flex}
  .bp-alert__more{display:none}
}
@media(max-width:380px){.bp-alert__title{font-size:12px;letter-spacing:.08em}}
@media print{.bp-alert{display:none!important}}

/* Vis «Skjer det nå?»-stripen bare på forsidene (sider med hero-seksjon).
   På info-/scenariosidene skjules den, og toppstripens høyde nulles slik at
   den faste menyen legger seg helt øverst uten et tomt felt der banneret var.
   Faller trygt tilbake til å vise banneret overalt i svært gamle nettlesere. */
body:not(:has(section.hero)){--banner-h:0px}
body:not(:has(section.hero)) .bp-alert{display:none!important}

/* =============================================================
   TOPPMENY: alltid hvit, under varselstripen
   ============================================================= */
.nav,.nav.solid,
body:has(.hero-media) .nav:not(.solid),
body:has(.scen-hero) .nav,body:has(.lst-hero) .nav{
  top:var(--banner-h)!important;min-height:var(--bar-h);
  background:#FFFFFF!important;backdrop-filter:none!important;color:var(--ink)!important;box-shadow:0 1px 0 #E6E3DD!important
}
.nav-logo{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.18em}
.nav-logo .dot{background:var(--signal)}
/* Undertittelen under logoen er fjernet, slik at toppen blir lik de andre
   sidene (forsiden viser heller ingen undertittel i toppmenyen). */
.nav-subtitle{display:none!important}
.nav-links a{font-size:12px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;opacity:1}
.nav-links a:hover{color:var(--signal-ink)}
body:has(.hero-media) .nav:not(.solid) .lang-seg{border-color:var(--line);background:transparent}
.lang-menu summary,.lang-menu ul,.lang-menu li a{border-radius:0!important}
/* Språkvelgeren vises uten ramme/boks – likt forsiden, på alle skjermbredder. */
.lang-menu summary{border:0!important;background:transparent!important;color:var(--ink)!important;padding:0 4px!important}
.lang-menu li a[aria-current="true"]{background:var(--ink)!important;color:#FFFFFF!important}

/* =============================================================
   TOPPBILDE: tekst på mørk flate, bildet glir inn fra høyre
   (mobil: bildet øverst, teksten under)
   ============================================================= */
.hero{display:block;min-height:0;background:var(--hero);padding-top:var(--nav-h)}
.hero-media{position:relative;inset:auto;aspect-ratio:4/3;max-height:62vh;overflow:hidden}
.hero-media picture,.hero-media img{display:block;width:100%;height:100%}
.hero-media img{object-fit:cover;object-position:50% 45%;animation:none;transform:none}
.hero-media::after{background:linear-gradient(180deg,rgba(34,36,42,0) 55%,var(--hero) 100%)}
.hero-inner{padding:8px 16px 44px}
.hero h1{font-size:clamp(2.4rem,7vw,3.6rem);max-width:14ch;color:#FFFFFF}
.hero p{color:#F0EFEC}
.hero-scroll{display:none}
@media(min-width:720px){.hero-inner{padding:8px 32px 56px}}
@media(min-width:1000px){
  .hero{display:flex;align-items:center;min-height:min(720px,100svh)}
  .hero-media{position:absolute;top:var(--nav-h);bottom:0;left:46%;right:0;aspect-ratio:auto;max-height:none}
  .hero-media::after{background:linear-gradient(90deg,var(--hero) 0%,rgba(34,36,42,.55) 18%,rgba(34,36,42,0) 45%)}
  .hero-inner{padding:72px 56px}
  .hero-inner>*{max-width:520px}
  .hero h1{font-size:clamp(3rem,4.6vw,4rem)}
}

/* ---------- Mørke flater: blekk i stedet for grønt ---------- */
.strip .big{font-family:var(--head);font-weight:300;color:var(--signal-light)}
.strip .big small{font-family:'Inter',system-ui,sans-serif;font-weight:600}
.strip::before{font-family:var(--head);font-weight:300}
.manifesto blockquote::before{background:var(--signal-light);height:3px}
.manifesto .fig::after{background:linear-gradient(90deg,rgba(26,26,26,0) 55%,rgba(26,26,26,.55) 100%)}
.calc-panel{background:var(--pine-2)}

/* ---------- Bunntekst ---------- */
footer .nav-logo{font-family:'Inter',system-ui,sans-serif;font-weight:600;letter-spacing:.18em}

/* =============================================================
   HANDLELISTE-SIDEN – rettelser
   Tekst og knapper i «Tilpass listen» arvet lys farge fra den mørke
   kalkulatoren og ble nesten usynlige på hvit bakgrunn. Oppsettet la
   panel og resultat i én smal spalte på PC.
   ============================================================= */
.lst-panel .ctrl label{color:var(--ink)}
.lst-panel .stepper button{color:var(--ink);border-color:var(--ink)}
.lst-panel .stepper button:hover{background:var(--paper);border-color:var(--ink)}
.lst-panel .btn-reset{color:var(--ink);border-color:var(--ink);background:transparent}
.lst-panel .calc-note,.lst-result .calc-note{color:var(--muted)}
.lst-note{border-radius:0}
@media(min-width:901px){
  .lst-panel{grid-column:1;grid-row:1 / span 2}
  .lst-side{grid-column:2;grid-row:1}
  .lst-result{grid-column:2;grid-row:2}
}

/* Scenariosiden: rette kanter også på hurtiglenkene */
.scen-toc a{border-radius:0}

/* =============================================================
   MOBIL (under 1100 px): lik topp som forsiden
   -------------------------------------------------------------
   Info-sidene (når det skjer, jodtabletter, nødsekk, beredskap
   med barn) brukte en mindre logo i STORE bokstaver og en
   språkvelger med boks. På mobil gjøres dette nå likt forsiden:
     1. Logoen blir større og i vanlig små/store bokstaver, like
        stor og tydelig som på forsiden.
     2. Språkvelgeren vises uten boks (boksen er nå fjernet overalt).
   PC-visningen (1100 px og bredere) er uendret ellers.
   ============================================================= */
@media(max-width:1099px){
  .nav .nav-logo{letter-spacing:0!important;text-transform:none!important}
  .nav .nav-logo .logo-text{font-size:clamp(16px,calc((100vw - 110px) / 13),26px)!important;font-weight:700!important;letter-spacing:0!important;text-transform:none!important;line-height:1.12}
  .nav .lang-menu summary{border:0!important;background:transparent!important;padding:0 4px!important}
}

/* =============================================================
   Språkvelger på mobil – oppdatert 18. oktober 2026
   Likt forsiden: KUN flagget vises (landkoden «NO/EN/…» og
   nedtrekkspila skjules). Tittelen får bruke plassen som ble ledig,
   og brytes til to linjer om nødvendig i stedet for å flyte utenfor.
   Rent tillegg; eksisterende stil er uendret.
   ============================================================= */
@media(max-width:1099px){
  .nav .lang-menu .lang-code{display:none!important}
  .nav .lang-menu .chev{display:none!important}
  .nav .lang-menu summary{gap:0!important}
  .nav .nav-logo{white-space:normal!important}
  .nav .nav-logo .logo-text{font-size:clamp(17px,calc((100vw - 78px) / 12),26px)!important;overflow-wrap:anywhere}
}