/* ==========================================================================
   FELLES.CSS – grunnlaget som alle sidene deler
   Endrer du en farge eller en font her, slår det gjennom på hele nettstedet.
   ========================================================================== */

/* ---------- Fargepalett og fonter ----------
   Alle farger på nettstedet peker hit. Vil du gjøre grønnfargen mørkere,
   endrer du --gran her, og alt følger etter. */
:root{
  --papir:#F1F4EF;     /* bakgrunn, lys "papirfarge" */
  --gran:#22352B;      /* hovedgrønn – tekst, menyer, rammer */
  --gran-dyp:#18261F;  /* mørkeste grønn – hero, bunntekst */
  --vann:#2F6D8C;      /* blå – lenker, kart, aktive knapper */
  --vann-lys:#DCE9EE;  /* lys blå – infobokser */
  --tytte:#B4432E;     /* rød aksent – streker, klokkeslett, "legg til" */
  --lav:#C7CDA8;       /* lys grågrønn – dempet tekst på mørk bakgrunn */
  --kontur:#A9BCB0;    /* rammefarge på kort */
  --kort:#FBFCFA;      /* bakgrunn på kort og bokser */

  --display:"Barlow Condensed","Arial Narrow",sans-serif;  /* overskrifter */
  --body:"Spectral",Georgia,serif;                         /* brødtekst */
  --mono:"IBM Plex Mono","Courier New",monospace;          /* små detaljer */
}

/* ---------- Passordsperra ----------
   Skjuler alt innhold til riktig passord er skrevet inn. Se js/sperre.js –
   og vær klar over at dette skjuler, det beskytter ikke. */
html.sperret body > *:not(#sperre){display:none!important}
html.sperret{background:#18261F}

#sperre{position:fixed;inset:0;z-index:9999;background:#18261F;display:flex;align-items:center;justify-content:center;padding:24px}
#sperre form{max-width:400px;width:100%;text-align:center;color:#F1F4EF}
#sperre .sperre-merke{font-family:var(--mono);font-size:11.5px;letter-spacing:.16em;text-transform:uppercase;color:#C7CDA8}
#sperre h1{font-family:var(--display);font-weight:700;font-size:clamp(38px,9vw,58px);line-height:1;text-transform:uppercase;margin:14px 0 10px}
#sperre p{font-family:var(--body);font-size:16px;color:#D9E2DB;margin-bottom:22px}
#sperre input{width:100%;font-family:var(--body);font-size:17px;padding:13px 14px;border:1px solid #A9BCB0;background:#FBFCFA;color:#22352B;text-align:center}
#sperre input:focus-visible{outline:3px solid #2F6D8C;outline-offset:2px}
#sperre button{width:100%;margin-top:10px;font-family:var(--display);font-weight:600;font-size:17px;letter-spacing:.08em;text-transform:uppercase;background:#B4432E;color:#fff;border:none;padding:13px;cursor:pointer}
#sperre button:hover{background:#993a27}
#sperre .sperre-feil{font-family:var(--mono);font-size:13px;color:#E8A499;margin:16px 0 0}

@keyframes sperre-rist{0%,100%{transform:translateX(0)}20%,60%{transform:translateX(-9px)}40%,80%{transform:translateX(9px)}}
#sperre.rister form{animation:sperre-rist .4s}
@media (prefers-reduced-motion: reduce){#sperre.rister form{animation:none}}

/* ---------- Nullstilling og grunnoppsett ---------- */
*{box-sizing:border-box;margin:0;padding:0}

/* hidden-attributtet må slå gjennom.
   Nettleseren gir hidden-elementer display:none, men den regelen er svak: en
   hvilken som helst display i en av våre egne klasser vinner over den, og
   elementet blir stående synlig selv om koden tror det er skjult. */
[hidden]{display:none!important}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion: reduce){html{scroll-behavior:auto}*{animation:none!important;transition:none!important}}
body{background:var(--papir);color:var(--gran);font-family:var(--body);font-size:17px;line-height:1.65}
a{color:var(--vann)}
img{max-width:100%}

/* Sentrert innholdskolonne – brukes på alle sidene */
.wrap{max-width:1040px;margin:0 auto;padding:0 20px}

/* ---------- Toppmeny ----------
   Selve lenkene tegnes av js/meny.js, så de finnes bare ett sted.
   Der legger du også til nye sider. */
nav.hovednav{position:sticky;top:0;z-index:1200;background:var(--gran);border-bottom:1px solid var(--gran-dyp);min-height:47px}
/* Ruller sidelengs på små skjermer, brekker over to linjer på store –
   slik at ingen menypunkter blir usynlige. */
nav.hovednav .wrap{display:flex;gap:4px;overflow-x:auto}
@media(min-width:900px){nav.hovednav .wrap{flex-wrap:wrap;overflow-x:visible}}
nav.hovednav a{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;color:var(--papir);text-decoration:none;padding:13px 11px;white-space:nowrap}
nav.hovednav a:hover,nav.hovednav a:focus-visible{background:var(--gran-dyp);color:var(--lav);outline:none}
/* Sida du står på nå */
nav.hovednav a[aria-current="page"]{background:var(--gran-dyp);color:var(--lav);box-shadow:inset 0 -3px 0 var(--tytte)}

/* ---------- Seksjoner ---------- */
section{padding:64px 0 24px}
.seksjonshode{display:flex;align-items:baseline;gap:16px;border-bottom:2px solid var(--gran);padding-bottom:10px;margin-bottom:26px}
.seksjonshode h2{font-family:var(--display);font-weight:700;font-size:clamp(30px,5vw,44px);text-transform:uppercase;letter-spacing:.02em}
.seksjonshode .eyebrow{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--tytte)}
.ingress{max-width:66ch;margin-bottom:22px}
.note{font-family:var(--mono);font-size:12.5px;color:#5c6f64;background:var(--vann-lys);border-left:3px solid var(--vann);padding:10px 14px;margin:14px 0;max-width:760px}

/* ---------- Sidetopp på undersidene ----------
   Den store hero-en ligger bare på forsiden; undersidene får denne smalere. */
.sidetopp{background:var(--gran-dyp);color:var(--papir);border-bottom:5px solid var(--tytte);padding:40px 0 32px}
.sidetopp .kartblad{font-family:var(--mono);font-size:12px;letter-spacing:.14em;text-transform:uppercase;color:var(--lav)}
.sidetopp h1{font-family:var(--display);font-weight:700;font-size:clamp(40px,8vw,76px);line-height:.95;text-transform:uppercase;margin:10px 0 6px}
.sidetopp p{max-width:62ch;color:#D9E2DB;font-size:16px}

/* ---------- Knapper og felt som går igjen ---------- */
.leggtil{display:flex;gap:8px;margin-top:12px;max-width:520px}
.leggtil input{flex:1;font-family:var(--body);font-size:16px;padding:10px 12px;border:1px solid var(--gran);background:var(--kort)}
.leggtil button{font-family:var(--display);font-weight:600;font-size:16px;letter-spacing:.06em;text-transform:uppercase;background:var(--tytte);color:#fff;border:none;padding:10px 20px;cursor:pointer}
.leggtil button:hover{background:#993a27}
.slett{border:none;background:none;color:#b0bcb3;font-size:18px;cursor:pointer;padding:2px 6px}
.slett:hover{color:var(--tytte)}

/* Tre knappetyper som går igjen på flere sider:
   primær = hovedhandlingen · sekundær = alternativet · fare = sletting */
.knapp-primar,.knapp-sekundar,.knapp-fare{font-family:var(--display);font-weight:600;font-size:15px;letter-spacing:.06em;text-transform:uppercase;padding:9px 16px;cursor:pointer;border:1px solid var(--gran)}
.knapp-primar{background:var(--tytte);border-color:var(--tytte);color:#fff}
.knapp-primar:hover{background:#993a27;border-color:#993a27}
.knapp-sekundar{background:var(--kort);color:var(--gran)}
.knapp-sekundar:hover{background:var(--gran);color:var(--papir)}
.knapp-fare{background:var(--kort);border-color:var(--tytte);color:var(--tytte)}
.knapp-fare:hover{background:var(--tytte);color:#fff}

/* ---------- Bunntekst ----------
   Innholdet tegnes av js/meny.js. */
footer{background:var(--gran-dyp);color:var(--lav);margin-top:70px;padding:34px 0;font-family:var(--mono);font-size:12.5px;text-align:center}
footer b{color:var(--papir)}

/* Forteller om avhukingene deles med de andre eller bare ligger hos deg */
#delingsstatus{font-size:11.5px;letter-spacing:.08em;text-transform:uppercase;margin-top:10px;opacity:.75}
#delingsstatus:empty{display:none}
#delingsstatus[data-delt="ja"]{color:#9FD3B0}
#delingsstatus[data-delt="ja"]::before{content:"● ";color:#5FBF84}
#delingsstatus[data-delt="nei"]::before{content:"○ "}