/* NORGINSA - felles stil.
 *
 * Farger og skrift settes i tailwind.config.js, slik at Tailwind-
 * klassene ute i markupen bruker de samme verdiene. Her ligger komponentene:
 * typografi, kort, knapper, hero og mobilmeny.
 *
 * Fargeregel: rødt betyr handling (knapper, lenker, tagger). Flater og
 * kanter holder seg i den varme gråskalaen.
 */

/* ---------- Skrift ----------
 * IBM Plex Sans, lagret lokalt i stedet for å hentes fra Google Fonts.
 * Før dette måtte nettleseren åpne to ekstra forbindelser før den kunne
 * tegne tekst: ett kall til fonts.googleapis.com for CSS-en, og deretter
 * ett til fonts.gstatic.com for selve fila. Nå ligger fila her.
 *
 * Fila er en variabel font: Google serverte samme fil for 500, 600 og 700,
 * så de tre reglene under peker på én og samme nedlasting. Den er delt i
 * latin og latin-ext på samme måte som hos Google, og unicode-range gjør at
 * latin-ext bare lastes ned hvis en bokstav faktisk trenger den - norsk og
 * fransk ligger i latin.
 *
 * font-display: swap - overskriftene vises i systemfonten med en gang og
 * byttes når Plex er lastet, så teksten aldri er usynlig.
 * Lisens: SIL Open Font License 1.1, se assets/fonts/LICENSE.txt */

/* latin-ext */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin-ext.woff2) format("woff2");
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* latin */
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 500;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 600;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: "IBM Plex Sans";
  font-style: normal;
  font-weight: 700;
  font-stretch: 100%;
  font-display: swap;
  src: url(../fonts/ibm-plex-sans-latin.woff2) format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}

:root {
  --ng-kant: #e4dcdb;
  --ng-feltkant: #9a908d;
  --ng-flate: #ffffff;
  --ng-flate-dus: #f5efef;
  --ng-radius: 1rem;
  --ng-skygge: 0 1px 2px rgb(20 18 16 / 0.06), 0 3px 10px rgb(20 18 16 / 0.06);
  --ng-skygge-hover: 0 2px 4px rgb(20 18 16 / 0.06), 0 10px 24px rgb(20 18 16 / 0.1);
}

.dark {
  --ng-kant: #38352f;
  --ng-feltkant: #5c5651;
  --ng-flate: #292724;
  --ng-flate-dus: #211f1c;
  --ng-skygge: 0 1px 2px rgb(0 0 0 / 0.35), 0 4px 12px rgb(0 0 0 / 0.3);
  --ng-skygge-hover: 0 2px 4px rgb(0 0 0 / 0.4), 0 10px 24px rgb(0 0 0 / 0.4);
}

/* ---------- Grunnlinje ----------
 * Regler som må gjelde uansett hvilke klasser som står ute i markupen.
 * Alt her er elementselektorer, så en klasse i HTML-en vinner alltid over dem. */

img,
svg,
video,
iframe {
  max-width: 100%;
}

img,
video {
  height: auto;
}

html {
  /* clip, ikke hidden: stopper vannrett rulling uten å lage en rullekontekst,
     så position: sticky i artikkellista fortsetter å virke. */
  overflow-x: clip;
  /* Navbaren er fixed. Uten dette havner ankerlenker bak den. */
  scroll-padding-top: 6rem;
}

body {
  /* Lange lenker og franske fagnavn skal ikke sprenge kortene på mobil. */
  overflow-wrap: break-word;
}

p,
li {
  /* 1.5 er Tailwind sin standard og litt tett for løpende tekst. */
  line-height: 1.65;
}

/* Berøringsflater. En mus treffer 28 px, en tommel gjør det ikke. */
@media (pointer: coarse) {
  #sidebarOpenBtn,
  #sidebarCloseBtn,
  #themeToggleNav,
  .galleri-lukk,
  .galleri-pil {
    min-width: 2.75rem;
    min-height: 2.75rem;
  }
}

/* ---------- Typografi ----------
 * IBM Plex Sans på overskriftene: nøytral uten å være anonym, og ikke
 * geometrisk. Brødteksten står i systemfonten, så det er én ekstra forespørsel.
 * Plex går opp til 700, så overskrifter settes i font-bold, ikke extrabold -
 * ellers fetner nettleseren kunstig og det ser grumsete ut.
 * Størrelsene settes fortsatt med Tailwind-klasser ute i markupen. */

body {
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

h1, h2, h3, h4 {
  font-family: "IBM Plex Sans", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  line-height: 1.15;
  letter-spacing: -0.018em;
  text-wrap: balance;
}

h1 {
  letter-spacing: -0.025em;
}

p, li {
  text-wrap: pretty;
}

/* ---------- Lesebredde ----------
 * 680 px gir rundt 72 tegn per linje. Over ~75 mister øyet linja når det
 * hopper tilbake til venstre, og lesehastigheten faller uten at man merker
 * hvorfor. Bilder, gallerier og flex-rader beholder full bredde - det er bare
 * løpende tekst dette gjelder. */

.lesebredde {
  max-width: 42.5rem;
}

/* ---------- Kort ---------- */

.kort {
  background-color: var(--ng-flate);
  border: 1px solid var(--ng-kant);
  border-radius: var(--ng-radius);
  box-shadow: var(--ng-skygge);
}

/* Dempet variant, til seksjoner som skal ligge litt tilbake. */
.kort-dus {
  background-color: var(--ng-flate-dus);
  border: 1px solid var(--ng-kant);
  border-radius: var(--ng-radius);
}

/* Løftet er lite med vilje: det skal antyde at noe skjer, ikke sprette. */
.kort-klikkbar {
  transition: box-shadow 0.18s ease, transform 0.18s ease;
}

.kort-klikkbar:hover,
.kort-klikkbar:focus-within {
  box-shadow: var(--ng-skygge-hover);
  transform: translateY(-2px);
}

/* ---------- Knapper ---------- */

.knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.75rem 1.5rem;
  border-radius: 0.625rem;
  font-size: 0.9375rem;
  font-weight: 600;
  line-height: 1.25rem;
  text-align: center;
  transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.knapp:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.knapp-primar {
  background-image: linear-gradient(to right, #d92046, #f04a78);
  color: #ffffff;
  box-shadow: var(--ng-skygge);
}

.knapp-primar:hover {
  background-image: linear-gradient(to right, #b7153a, #dd2a63);
}

/* Større variant, der én knapp skal bære hele seksjonen. */
.knapp-stor {
  padding: 0.9rem 1.85rem;
  font-size: 1.0625rem;
}

.knapp-sekundar {
  border: 1px solid var(--ng-kant);
  background-color: transparent;
  color: inherit;
}

.knapp-sekundar:hover {
  background-color: #f7f2f2;
}

.dark .knapp-sekundar:hover {
  background-color: #38352f;
}

/* Sekundærknapp oppå et bilde, der kanten må stå mot foto og ikke mot flate. */
.knapp-pa-bilde {
  border: 1px solid rgb(255 255 255 / 0.5);
  background-color: rgb(255 255 255 / 0.12);
  color: #ffffff;
  backdrop-filter: blur(6px);
}

.knapp-pa-bilde:hover {
  background-color: rgb(255 255 255 / 0.22);
}

/* ---------- Hero ----------
 * Bildet og tittelen er én ting, ikke en grå boks over et foto. Bilde og
 * innhold legges i samme rutenettcelle, med en mørk gradient imellom så
 * teksten er lesbar uansett hva som er i bildet. */

.hero {
  position: relative;
  isolation: isolate;
  display: flex;
  min-height: clamp(21rem, 52vw, 32rem);
  overflow: hidden;
  border-radius: var(--ng-radius);
}

/* Samme grunn som i .artikkeltopp: et bilde i flyten bestemmer høyden selv. */
.hero > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 58%;
}

.hero::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    to right,
    rgb(16 15 14 / 0.82) 0%,
    rgb(16 15 14 / 0.66) 26%,
    rgb(16 15 14 / 0.3) 52%,
    rgb(16 15 14 / 0) 74%
  );
}

/* Smal skjerm: en gradient fra siden rekker ikke over teksten når den bryter
   over hele bredden.
   Gradienten går ovenfra og ned, ikke nedenfra og opp. Grunnen er målt: de
   lyseste partiene i bildet (himmel og lyse fasader) ligger øverst, og det er
   der tittelen står. Med den gamle gradienten lå øverste tittellinje på 2,3:1
   mot de lyseste punktene, under kravet på 3:1 for stor tekst. Nå er den 8,9:1. */
@media (max-width: 40rem) {
  .hero-innhold {
    align-self: end;
  }

  .hero::after {
    background: linear-gradient(
      to bottom,
      rgb(16 15 14 / 0.82) 0%,
      rgb(16 15 14 / 0.62) 50%,
      rgb(16 15 14 / 0.42) 100%
    );
  }

  /* Den lyse flaten lysnet bakgrunnen under sin egen hvite tekst, og havnet på
     3,4:1. En mørk flate gjør det motsatte: 6,7:1, og fotoet skinner fortsatt
     gjennom. Desktop er urørt. */
  .knapp-pa-bilde {
    background-color: rgb(16 15 14 / 0.35);
    border-color: rgb(255 255 255 / 0.55);
  }

  .knapp-pa-bilde:hover {
    background-color: rgb(16 15 14 / 0.5);
  }
}

.hero-innhold {
  align-self: center;
  max-width: 36rem;
  padding: clamp(1.5rem, 4.5vw, 3.25rem);
  color: #ffffff;
}

.hero-innhold h1 {
  margin-top: 0;
  font-size: clamp(2rem, 5.2vw, 3.5rem);
  font-weight: 700;
}

.hero-ingress {
  margin-top: 0.875rem;
  max-width: 34rem;
  font-size: clamp(1rem, 1.6vw, 1.1875rem);
  line-height: 1.55;
  /* Heldekkende hvit, ikke 88 %. Gjennomsiktig tekst blander seg med bildet
     under og blir lesende grå: mot de lyseste punktene i kontaktbildet ga
     88 % 3,4:1, mens hvit gir 4,1:1. */
  color: #ffffff;
}

.hero-knapper {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  margin-top: 1.75rem;
}

/* Lysere slør, til heroer der bildet er poenget.
 *
 * Standardvarianten over er satt for forsiden, der teksten er lang og
 * bildet lyst. På undersidene la den et slør over hele fotoet. Verdiene
 * her er målt mot bildene de brukes på: kontaktoss.JPG har lys himmel og
 * hvite skjorter bak teksten, og 0,62 er det som skal til for at ingressen
 * klarer 4,5:1 i den verste prosenten av piksler. omprogrammet.jpg er mye
 * mørkere der - bro og vann i skumring - og klarer kravet med 0,40, så den
 * siden setter --hero-slor lavere selv.
 *
 * Skru på --hero-slor for å endre balansen: lavere tall gir tydeligere
 * bilde, høyere tall gir mer kontrast på teksten. Samme knott som
 * --topp-slor i .artikkeltopp under.
 *
 * Ingen tekstskygge her: den ble prøvd og var synlig som en uskarp kant
 * rundt bokstavene. Slørverdiene over holder kravet uten den.
 */

.hero-lys {
  --hero-slor: 0.62;
}

.hero-lys::after {
  background: linear-gradient(
    to right,
    rgb(16 15 14 / var(--hero-slor)) 0%,
    rgb(16 15 14 / calc(var(--hero-slor) * 0.9)) 50%,
    rgb(16 15 14 / calc(var(--hero-slor) * 0.34)) 68%,
    rgb(16 15 14 / 0) 84%
  );
}

/* Smal skjerm: teksten fyller hele høyden i en lav hero, så sløret må ligge
   jevnt i stedet for å tone ut. */
@media (max-width: 40rem) {
  .hero-lys::after {
    background: linear-gradient(
      to bottom,
      rgb(16 15 14 / calc(var(--hero-slor) * 0.88)) 0%,
      rgb(16 15 14 / calc(var(--hero-slor) * 0.94)) 55%,
      rgb(16 15 14 / var(--hero-slor)) 100%
    );
  }
}

/* Bildetekst under en hero. Ligger utenfor .hero og ikke oppå bildet: den
   høyre delen av fotoet har ingen gradient bak seg, så hvit tekst der ville
   stått rett på motivet. Samme størrelse og farge som bildetekstene ellers. */
.hero-fotnote {
  margin: 0.6rem 0 0;
  font-size: 0.8125rem;
  color: #75716b;
}

.dark .hero-fotnote {
  color: #a8a29f;
}

/* ---------- Artikkeltopp ----------
 * Et avlangt bånd, ikke en hero. preview.jpg ligger som dempet bakgrunn bak
 * tittelen i stedet for å være noe man ser på, derfor et jevnt slør over hele
 * flaten og ikke en gradient fra siden slik forsiden har.
 *
 * Skru på --topp-slor for å endre balansen: lavere tall gir tydeligere bilde,
 * høyere tall gir mer tilbaketrukket bilde og mer kontrast på teksten. */

.artikkeltopp {
  --topp-slor: 0.4;
  position: relative;
  isolation: isolate;
  display: flex;
  align-items: center;
  min-height: clamp(7rem, 13vw, 9.5rem);
  overflow: hidden;
  border-radius: var(--ng-radius);
}

/* Bildet tas ut av flyten. Ligger det i flyten, er det bildets egne
   proporsjoner som bestemmer høyden, og min-height blir bare et gulv. */
.artikkeltopp > img {
  position: absolute;
  z-index: -2;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center 45%;
  filter: saturate(0.9);
}

.artikkeltopp::after {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 0;
  background: linear-gradient(
    105deg,
    rgb(14 13 12 / calc(var(--topp-slor) + 0.12)) 0%,
    rgb(14 13 12 / var(--topp-slor)) 55%,
    rgb(14 13 12 / calc(var(--topp-slor) - 0.08)) 100%
  );
}

.artikkeltopp-innhold {
  max-width: 44rem;
  padding: 1.1rem clamp(1.25rem, 3.5vw, 2rem);
  color: #ffffff;
}

.artikkeltopp h1 {
  margin: 0;
  font-size: clamp(1.375rem, 3.2vw, 2.125rem);
  font-weight: 700;
}

.artikkeltopp-meta {
  margin-top: 0.5rem;
  font-size: 0.8125rem;
  font-weight: 500;
  letter-spacing: 0.03em;
  color: rgb(255 255 255 / 0.82);
}

/* ---------- Lister ----------
 * Tailwind sin preflight fjerner punkttegn fra alle <ul>, som er grunnen til
 * at det står streker skrevet for hånd flere steder. Denne gir dem tilbake. */

.punktliste {
  margin: 0.75rem 0 0;
  padding-left: 1.15rem;
  list-style: disc;
}

.punktliste li {
  margin-bottom: 0.35rem;
  padding-left: 0.2rem;
}

.punktliste li::marker {
  color: #d92046;
}

.dark .punktliste li::marker {
  color: #f66b81;
}

/* ---------- Nøkkeltall ---------- */

.nokkeltall {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.nokkeltall-tall {
  margin: 0;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: clamp(1.75rem, 4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -0.025em;
  color: #b7153a;
}

.dark .nokkeltall-tall {
  color: #f66b81;
}

.nokkeltall-tekst {
  margin: 0.4rem 0 0;
  font-size: 0.9375rem;
  color: #56524d;
}

.dark .nokkeltall-tekst {
  color: #cfc9c7;
}

/* ---------- Tidslinje ----------
 * Loddrett linje med et steg per år. Streken er to lag: en grå i bunn og en
 * farget oppå som fylles etter hvor langt ned man har rullet (--fyll settes
 * fra tidslinje.js). */

.tidslinje {
  --fyll: 0%;
  --linje-x: 1rem;
  position: relative;
  margin: 0;
  padding: 0 0 0 2.75rem;
  list-style: none;
}

/* Streken går fra midten av første prikk til midten av siste. Begge målene
   settes fra tidslinje.js, siden de avhenger av hvor høye kortene blir. */
.tidslinje::before,
.tidslinje::after {
  content: "";
  position: absolute;
  top: var(--linje-topp, 1rem);
  left: calc(var(--linje-x) - 1px);
  width: 2px;
  border-radius: 2px;
}

.tidslinje::before {
  height: var(--linje-hoyde, 0);
  background-color: var(--ng-kant);
}

.tidslinje::after {
  height: var(--fyll, 0);
  background-image: linear-gradient(#d92046, #f04a78);
}

.tidslinje-steg {
  position: relative;
  z-index: 1;
  padding-bottom: 1.75rem;
}

.tidslinje-steg:last-child {
  padding-bottom: 0;
}

/* Innaningen slås bare på når skriptet faktisk kjører. Uten dette ville hele
   tidslinja stått usynlig hvis JavaScript feiler eller blokkeres. */
.tidslinje-aktiv .tidslinje-steg {
  opacity: 0;
  transform: translateY(14px);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.tidslinje-aktiv .tidslinje-steg.er-synlig {
  opacity: 1;
  transform: none;
}

.tidslinje-prikk {
  position: absolute;
  top: 1rem;
  left: -2.75rem;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border: 2px solid var(--ng-kant);
  border-radius: 999px;
  background-color: var(--ng-flate);
  font-size: 0.75rem;
  font-weight: 700;
  color: #75716b;
  transition: border-color 0.35s ease, background-color 0.35s ease, color 0.35s ease;
}

.er-synlig .tidslinje-prikk {
  border-color: #d92046;
  background-color: #d92046;
  color: #ffffff;
}

.tidslinje-naar {
  margin-bottom: 0.2rem;
  font-size: 0.75rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #b7153a;
}

.dark .tidslinje-naar {
  color: #f66b81;
}

.tidslinje-steg h3 {
  margin: 0 0 0.5rem;
  font-size: 1.25rem;
  font-weight: 700;
}

/* Faktabrikker */
.brikker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.85rem;
}

.brikke {
  padding: 0.2rem 0.6rem;
  border: 1px solid var(--ng-kant);
  border-radius: 999px;
  background-color: var(--ng-flate-dus);
  font-size: 0.75rem;
  font-weight: 600;
  color: #56524d;
}

.dark .brikke {
  color: #cfc9c7;
}

/* Detaljer bak et klikk, bygget på <details> */
.tidslinje-mer,
.sok-mer {
  margin-top: 0.9rem;
  border-top: 1px solid var(--ng-kant);
  padding-top: 0.7rem;
}

.tidslinje-mer summary,
.sok-mer summary {
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: #b7153a;
  list-style: none;
}

.dark .tidslinje-mer summary,
.dark .sok-mer summary {
  color: #f66b81;
}

.tidslinje-mer summary::-webkit-details-marker,
.sok-mer summary::-webkit-details-marker {
  display: none;
}

.tidslinje-mer summary::before,
.sok-mer summary::before {
  content: "\25B8 ";
  display: inline-block;
  transition: transform 0.2s ease;
}

.tidslinje-mer[open] summary::before,
.sok-mer[open] summary::before {
  transform: rotate(90deg);
}

/* Fagene i første klasse */
.fagliste {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin-top: 0.75rem;
}

.fag {
  padding: 0.3rem 0.7rem;
  border: 1px solid var(--ng-kant);
  border-radius: 999px;
  background-color: var(--ng-flate-dus);
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.fag:hover {
  border-color: #d92046;
}

.fag.er-valgt {
  border-color: #d92046;
  background-color: #d92046;
  color: #ffffff;
}

.fag:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.fag-panel {
  margin-top: 0.85rem;
  padding: 0.9rem 1rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.75rem;
  background-color: var(--ng-flate-dus);
}

.fag-panel h4 {
  margin: 0 0 0.4rem;
  font-size: 1rem;
  font-weight: 700;
}

.fag-panel p {
  margin: 0;
  font-size: 0.9375rem;
  color: #423d3b;
}

.dark .fag-panel p {
  color: #cfc9c7;
}

/* Fagbildene kommer i alle mulige formater. Fast høyde med beskjæring gjør at
   panelet ikke hopper i størrelse fra fag til fag. */
.fag-bilde {
  display: block;
  width: 100%;
  height: 11rem;
  margin-bottom: 0.7rem;
  border-radius: 0.5rem;
  object-fit: cover;
}

@media (min-width: 40rem) {
  .fag-bilde {
    height: 13rem;
  }
}

/* Valgfritt bilde i et tidslinjesteg. Legg <figure class="tidslinje-bilde">
   med et <img> inni kortet, så faller det på plass. */
.tidslinje-bilde {
  margin: 0.9rem 0 0;
}

.tidslinje-bilde img {
  display: block;
  width: 100%;
  border-radius: 0.6rem;
}

.tidslinje-bilde figcaption {
  margin-top: 0.4rem;
  font-size: 0.8125rem;
  color: #75716b;
}

.dark .tidslinje-bilde figcaption {
  color: #a8a29f;
}

/* Linjevalget. Finnes to steder: år 2 der du velger, og år 4 så du slipper
   å bla helt opp for å bytte. Begge settene holdes i synk av tidslinje.js,
   som plukker opp alle [data-linje-valg] under ett. */

.linje-etikett {
  margin: 0.9rem 0 -0.35rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #75716b;
}

.dark .linje-etikett {
  color: #a8a29f;
}

.linje-valg {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.9rem 0;
}

.linje-knapp {
  padding: 0.45rem 0.85rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.5rem;
  background-color: var(--ng-flate-dus);
  font-size: 0.8125rem;
  font-weight: 600;
  color: inherit;
  cursor: pointer;
  transition: border-color 0.15s ease, background-color 0.15s ease;
}

.linje-knapp:hover {
  border-color: #d92046;
}

.linje-knapp.er-valgt {
  border-color: #d92046;
  background-color: #d92046;
  color: #ffffff;
}

.linje-knapp:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.tidslinje-valgt-navn {
  margin-bottom: 0.35rem;
  font-weight: 700;
}

.tidslinje-valgt-navn span {
  font-weight: 400;
  color: #75716b;
}

.dark .tidslinje-valgt-navn span {
  color: #a8a29f;
}

.tidslinje-mangler {
  color: #75716b;
  font-style: italic;
}

.dark .tidslinje-mangler {
  color: #a8a29f;
}

.tidslinje-lenke {
  margin-top: 0.6rem;
  font-size: 0.875rem;
  font-weight: 600;
}

.tidslinje-lenke a,
.tidslinje-mangler a {
  color: #b7153a;
  text-underline-offset: 3px;
}

.dark .tidslinje-lenke a,
.dark .tidslinje-mangler a {
  color: #f66b81;
}

/* ---------- Sidetopp ----------
 * Overskriftsblokka som åpner en underside uten bilde: rød stikktittel med
 * strek foran, stor tittel og en ingress. Venstrestilt med vilje - en
 * midtstilt tittel over venstrestilt innhold gir to akser på samme skjerm,
 * og da mister siden retningen.
 */

.sidetopp-stikk {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  margin: 0;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #b7153a;
}

.dark .sidetopp-stikk {
  color: #f66b81;
}

.sidetopp-stikk::before {
  content: "";
  flex: none;
  width: 1.75rem;
  height: 2px;
  border-radius: 2px;
  background-image: linear-gradient(to right, #d92046, #f04a78);
}

.sidetopp h1 {
  margin: 0.8rem 0 0;
  font-size: clamp(2.5rem, 7.5vw, 4.25rem);
  font-weight: 700;
}

.sidetopp-ingress {
  margin: 1.1rem 0 0;
  max-width: 36rem;
  font-size: clamp(1.0625rem, 1.5vw, 1.1875rem);
  color: #56524d;
}

.dark .sidetopp-ingress {
  color: #cfc9c7;
}

/* ---------- Søkeguiden ----------
 * Siden skal leses ovenfra og ned som én sammenhengende bevegelse, men den
 * skal ikke være tidslinja om igjen. Derfor ingen strek og ingen prikker:
 * her har hvert steg sitt eget bilde, vekselvis til venstre og høyre, med
 * et klebrig stegbånd øverst som viser hvor i prosessen man er.
 *
 * Bildet settes på plass når steget kommer til syne. Det er den ene
 * animasjonen som betyr noe her.
 */

/* Nøkkeltallene i toppen får en farget strek på venstre side, så de leses som
   én rad med fakta og ikke som tre løse tall. */
.sok-fakta > div {
  border-left: 2px solid #fec8d0;
  padding-left: 1rem;
}

.dark .sok-fakta > div {
  border-left-color: #6d1a2c;
}

/* Kravene. Det er dette folk kommer for, og det skal kunne skummes på to
   sekunder - derfor tre hake-kort før prosessen i det hele tatt begynner. */
.krav {
  display: grid;
  gap: 0.75rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(13rem, 1fr));
}

.krav li {
  display: flex;
  align-items: flex-start;
  gap: 0.7rem;
  padding: 1rem 1.1rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.75rem;
  background-color: var(--ng-flate);
}

.krav svg {
  flex: none;
  width: 1.375rem;
  height: 1.375rem;
  color: #d92046;
}

.dark .krav svg {
  color: #f66b81;
}

.krav strong {
  display: block;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 700;
}

.krav p {
  margin: 0.15rem 0 0;
  font-size: 0.875rem;
  color: #56524d;
}

.dark .krav p {
  color: #cfc9c7;
}

/* Stegbåndet. Klebrig rett under navbaren, så «hvor er jeg» aldri forsvinner.
   Høyden på navbaren måles i sokeguiden.js og legges i --ng-navhoyde; verdien
   her er bare et gulv hvis skriptet ikke kjører. */
.stegstripe {
  position: sticky;
  top: calc(var(--ng-navhoyde, 4.5rem) + 0.5rem);
  z-index: 30;
  overflow: hidden;
  margin-bottom: 1rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.9rem;
  background-color: rgb(255 255 255 / 0.9);
  box-shadow: var(--ng-skygge);
  backdrop-filter: blur(8px);
}

.dark .stegstripe {
  background-color: rgb(41 39 36 / 0.92);
}

/* Fyllstreken langs nederkanten. Samme idé som på tidslinja, men vannrett:
   den viser hvor langt ned i prosessen man har rullet. */
.stegstripe::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: var(--fyll, 0%);
  height: 2px;
  background-image: linear-gradient(to right, #d92046, #f04a78);
}

/* Mobil: seks etiketter får ikke plass, og ombrekking gjør båndet to linjer
   høyt. Én rad som rulles sideveis er mønsteret folk kjenner, og skriptet
   drar det aktive steget inn i synsfeltet selv. */
.stegstripe-liste {
  display: flex;
  gap: 0.15rem;
  margin: 0;
  padding: 0.3rem;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.stegstripe-liste::-webkit-scrollbar {
  display: none;
}

.stegstripe-liste > li {
  flex: none;
}

/* Desktop: det er plass til alle seks, og da skal de spres utover. Båndet
   leses som en strekning tvers over siden, ikke som en klump til venstre.
   Renner de over på smal skjerm, oppfører space-between seg som flex-start,
   så sideveisrullingen over er urørt. */
@media (min-width: 52rem) {
  .stegstripe-liste {
    justify-content: space-between;
    padding: 0.3rem 0.45rem;
  }
}

.stegstripe a {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.45rem 0.8rem;
  border-radius: 0.65rem;
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
  color: #75716b;
  transition: color 0.2s ease, background-color 0.2s ease;
}

.dark .stegstripe a {
  color: #a8a29f;
}

.stegstripe a:hover {
  background-color: var(--ng-flate-dus);
  color: inherit;
}

.stegstripe a:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: -2px;
}

.stegstripe-nr {
  display: grid;
  place-items: center;
  width: 1.4rem;
  height: 1.4rem;
  border: 1px solid var(--ng-kant);
  border-radius: 999px;
  font-size: 0.6875rem;
  font-weight: 700;
  transition: border-color 0.25s ease, background-color 0.25s ease, color 0.25s ease;
}

/* Passert: bare konturen farges. Her og nå: full flate. Forskjellen må være
   synlig uten farge alene, derfor både flate og vekt. */
.stegstripe a.er-passert .stegstripe-nr {
  border-color: #d92046;
  color: #b7153a;
}

.dark .stegstripe a.er-passert .stegstripe-nr {
  border-color: #f66b81;
  color: #f66b81;
}

.stegstripe a[aria-current="step"] {
  background-color: var(--ng-flate-dus);
  color: inherit;
}

.stegstripe a[aria-current="step"] .stegstripe-nr {
  border-color: #d92046;
  background-color: #d92046;
  color: #ffffff;
}

/* Stegene */
.sok-stegliste {
  margin: 0;
  padding: 0;
  list-style: none;
}

.sok-steg {
  /* Bildebredden på desktop. Står som variabel fordi speilvendingen under
     må bruke den samme verdien i den andre kolonnen. */
  --bildebredde: clamp(14rem, 28vw, 24rem);
  display: grid;
  gap: 1.25rem;
  padding: 2.5rem 0;
  /* Ankerlenkene fra stegbåndet må lande under både navbar og bånd. */
  scroll-margin-top: calc(var(--ng-navhoyde, 4.5rem) + 3.5rem);
}

/* scroll-padding-top på html legger seg oppå scroll-margin-top over, og da
   havner steget godt under båndet i stedet for rett under. Her gjør
   scroll-margin hele jobben, så polstringen nulles for denne siden. */
html:has(.sok-lop) {
  scroll-padding-top: 0;
}

.sok-steg + .sok-steg {
  border-top: 1px solid var(--ng-kant);
}

@media (min-width: 52rem) {
  .sok-steg {
    grid-template-columns: var(--bildebredde) minmax(0, 1fr);
    gap: 0 3rem;
    padding: 3.25rem 0;
  }

  .sok-steg .sok-bilde {
    grid-row: 1;
    grid-column: 1;
    justify-self: end;
  }

  .sok-steg .sok-innhold {
    grid-row: 1;
    grid-column: 2;
  }

  /* Annethvert steg speilvendes. Bare bildet bytter side - teksten står
     venstrestilt hele veien, ellers må øyet lete etter linjestarten. */
  .sok-steg:nth-child(even) {
    grid-template-columns: minmax(0, 1fr) var(--bildebredde);
  }

  .sok-steg:nth-child(even) .sok-bilde {
    grid-column: 2;
    justify-self: start;
  }

  .sok-steg:nth-child(even) .sok-innhold {
    grid-column: 1;
  }
}

/* Bildet som bærer hvert steg. Fast bildeformat med beskjæring: da faller
   et nytt bilde inn uten å endre høyden på raden, uansett hvilket format
   det har. På mobil fyller det bredden, på desktop står det i sin egen
   kolonne ved siden av teksten. */
.sok-bilde {
  margin: 0;
  width: 100%;
}

.sok-bilde img {
  display: block;
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border: 1px solid var(--ng-kant);
  border-radius: 0.75rem;
  box-shadow: var(--ng-skygge);
}

/* Bildet kommer et lite øyeblikk etter teksten i steget. Slås bare på når
   skriptet kjører, som resten av innaningen. */
.sok-aktiv .sok-bilde img {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}

.sok-aktiv .sok-steg.er-synlig .sok-bilde img {
  opacity: 1;
  transform: none;
}

/* Måneden over overskriften. Kort strek foran, samme som i toppen, slik at
   stikkordene på siden hører sammen. */
.sok-naar {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0 0 0.7rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #b7153a;
}

.dark .sok-naar {
  color: #f66b81;
}

.sok-naar::before {
  content: "";
  flex: none;
  width: 1.25rem;
  height: 2px;
  border-radius: 2px;
  background-color: currentColor;
}

.sok-steg h2 {
  margin: 0;
  font-size: clamp(1.5rem, 3.2vw, 2rem);
  font-weight: 700;
}

.sok-tekst {
  margin: 0.9rem 0 0;
  max-width: 40rem;
  font-size: 1.0625rem;
  color: #423d3b;
}

.dark .sok-tekst {
  color: #cfc9c7;
}

/* Innaningen slås bare på når skriptet kjører, ellers ville hele siden stått
   usynlig hvis JavaScript blokkeres. */
.sok-aktiv .sok-steg {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity 0.55s ease, transform 0.55s ease;
}

.sok-aktiv .sok-steg.er-synlig {
  opacity: 1;
  transform: none;
}

/* ---------- Kontakt ----------
 * Siden har én jobb: få folk til å sende en melding. Derfor er de to veiene
 * inn det største på siden, kontoene som faktisk svarer står som egne kort,
 * og resten av kontoene er komprimert til rader. Åtte like kort ga ingen
 * pekepinn om hvem man skulle skrive til.
 */

/* Lav hero. Forsiden skal fylle skjermen; en underside skal bare ha en
   ordentlig åpning, ikke be om en halv rulling før innholdet begynner. */
.hero-lav {
  min-height: clamp(13rem, 30vw, 19rem);
}

/* De to veiene inn */
.veier {
  display: grid;
  gap: 1rem;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.vei {
  position: relative;
  display: block;
  padding: 1.5rem;
}

.vei-ikon {
  width: 2.25rem;
  height: 2.25rem;
  color: #d92046;
}

.dark .vei-ikon {
  color: #f66b81;
}

.vei h3 {
  margin: 1rem 0 0;
  font-size: 1.25rem;
  font-weight: 700;
}

.vei-adresse {
  margin: 0.2rem 0 0;
  font-weight: 600;
  color: #b7153a;
}

.dark .vei-adresse {
  color: #f66b81;
}

.vei-om {
  margin: 0.6rem 0 0;
  font-size: 0.9375rem;
  color: #56524d;
}

.dark .vei-om {
  color: #cfc9c7;
}

/* «Raskest». Fyller samme rolle som en overskrift ville gjort, men uten å
   stjele plassen til den. */
.vei-merke {
  position: absolute;
  top: 1.15rem;
  right: 1.15rem;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background-image: linear-gradient(to right, #d92046, #f04a78);
  font-size: 0.6875rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #ffffff;
}

/* Kontoene, gruppert. Overskriften er liten med vilje: den skal sortere, ikke
   rope. */
.konto-gruppe + .konto-gruppe {
  margin-top: 2.5rem;
}

.konto-gruppe > h3 {
  margin: 0 0 0.9rem;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #75716b;
}

.dark .konto-gruppe > h3 {
  color: #a8a29f;
}

/* Radene. Én linje navn og handle, én linje hva kontoen er - det er alt som
   trengs for å velge. Et kort med 128 px logo per konto ga over 2 000 px
   rulling på mobil for den samme informasjonen. */
.kontoliste {
  display: grid;
  gap: 0.6rem;
  margin: 0;
  padding: 0;
  list-style: none;
  grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr));
}

.kontoliste a {
  display: flex;
  align-items: center;
  gap: 0.85rem;
  height: 100%;
  padding: 0.7rem 0.9rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.75rem;
  background-color: var(--ng-flate);
  transition: border-color 0.15s ease, box-shadow 0.18s ease, transform 0.18s ease;
}

.kontoliste a:hover {
  border-color: #d92046;
  box-shadow: var(--ng-skygge-hover);
  transform: translateY(-2px);
}

.kontoliste a:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.konto-logo {
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: 999px;
  object-fit: cover;
}

.konto-tekst {
  min-width: 0;
}

.konto-navn {
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 1rem;
  font-weight: 700;
}

.konto-handle {
  margin-left: 0.4rem;
  font-size: 0.8125rem;
  font-weight: 600;
  color: #b7153a;
}

.dark .konto-handle {
  color: #f66b81;
}

.konto-om {
  display: block;
  margin-top: 0.1rem;
  font-size: 0.8125rem;
  color: #56524d;
}

.dark .konto-om {
  color: #cfc9c7;
}

.konto-pil {
  flex: none;
  width: 1rem;
  height: 1rem;
  margin-left: auto;
  color: #a8a29f;
}

/* ---------- FAQ ----------
 * Spørsmålene skal være store og tydelige, så de kan skummes uten å åpnes.
 * Bygget på <details>, altså ingen JavaScript og tastaturtilgang gratis. */

.faq {
  display: grid;
  gap: 0.6rem;
}

.faq-sporsmal {
  border: 1px solid var(--ng-kant);
  border-radius: 0.75rem;
  background-color: var(--ng-flate);
  transition: border-color 0.15s ease;
}

.faq-sporsmal[open] {
  border-color: #d92046;
}

.faq-sporsmal summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.15rem;
  font-family: "IBM Plex Sans", system-ui, sans-serif;
  font-size: 1.0625rem;
  font-weight: 600;
  line-height: 1.35;
  cursor: pointer;
  list-style: none;
}

.faq-sporsmal summary::-webkit-details-marker {
  display: none;
}

.faq-sporsmal summary::after {
  content: "+";
  flex: none;
  font-size: 1.5rem;
  font-weight: 400;
  line-height: 1;
  color: #b7153a;
}

.dark .faq-sporsmal summary::after {
  color: #f66b81;
}

.faq-sporsmal[open] summary::after {
  content: "\2212";
}

.faq-sporsmal summary:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: -2px;
  border-radius: 0.75rem;
}

/* Kort markering når man kommer hit via en dyplenke. */
.faq-sporsmal.er-fremhevet {
  box-shadow: 0 0 0 3px rgb(217 32 70 / 0.25);
}

.faq-svar {
  padding: 0 1.15rem 1.15rem;
  color: #423d3b;
}

.dark .faq-svar {
  color: #cfc9c7;
}

.faq-svar p {
  margin: 0;
}

/* ---------- Artikkellista ---------- */

.antall {
  font-size: 0.875rem;
  font-weight: 600;
  color: #75716b;
}

.dark .antall {
  color: #a8a29f;
}

/* Mobil: knappene har svært ulik bredde, så ombrekking blir fillete. Én rad
   som rulles sideveis er mønsteret folk kjenner igjen, og tar minst plass.
   Fra 48rem er det plass til alle, og da slår rullingen aldri inn. */
.filterrad {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  margin: 1.25rem 0 1.75rem;
}

.taggstripe {
  display: flex;
  gap: 0.5rem;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
  /* Luft over og under så fokusringen ikke klippes, tatt igjen med negativ
     marg. Til høyre: plass til uttoningen. */
  padding: 0.3rem 3.5rem 0.3rem 0;
  margin-block: -0.3rem;
  /* Snapping gjør at raden kjennes «gripbar» med en gang man tar på den. */
  scroll-snap-type: x proximity;
  /* Uttoningen er bredere og brattere enn før, så den siste knappen tydelig
     forsvinner ut av kanten i stedet for bare å bli litt blek. */
  -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), rgb(0 0 0 / 0.15) calc(100% - 0.75rem), transparent);
  mask-image: linear-gradient(to right, #000 calc(100% - 3.5rem), rgb(0 0 0 / 0.15) calc(100% - 0.75rem), transparent);
}

.taggstripe > * {
  scroll-snap-align: start;
}

/* Rullet helt til høyre? Da er det ingenting mer, og uttoningen skal vekk. */
.taggstripe.ved-enden {
  padding-right: 0;
  -webkit-mask-image: none;
  mask-image: none;
}

.taggstripe::-webkit-scrollbar {
  display: none;
}

.taggstripe > * {
  flex: none;
}

@media (min-width: 48rem) {
  .filterrad {
    flex-direction: row;
    align-items: center;
  }

  .taggstripe {
    flex-wrap: wrap;
    overflow: visible;
    padding: 0;
    margin-block: 0;
    -webkit-mask-image: none;
    mask-image: none;
  }
}


.sokefelt {
  width: 100%;
  padding: 0.45rem 0.9rem;
  /* Egen, mørkere kant enn kortene: et skjemafelt må kunne ses. Kortkanten
     lå på 1,29:1 mot sidebakgrunnen, godt under kravet på 3:1 for kontroller. */
  border: 1px solid var(--ng-feltkant);
  border-radius: 999px;
  background-color: var(--ng-flate);
  box-shadow: inset 0 1px 2px rgb(20 18 16 / 0.06);
  color: inherit;
  font-size: 0.875rem;
}

.sokefelt::placeholder {
  color: #78726f;
}

.dark .sokefelt::placeholder {
  color: #a8a29f;
}

.sokefelt:hover {
  border-color: #78726f;
}

.dark .sokefelt:hover {
  border-color: #78726f;
}

@media (min-width: 48rem) {
  .sokefelt {
    flex: 1 1 16rem;
    width: auto;
    max-width: 28rem;
    margin-left: auto;
  }
}

.sokefelt:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 1px;
}

.artikkelrutenett {
  display: grid;
  gap: 1.25rem;
  grid-template-columns: repeat(auto-fill, minmax(16rem, 1fr));
}

.artikkel {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  color: inherit;
  text-decoration: none;
}

.artikkel-bilde {
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

.artikkel-tekst {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.95rem 1.1rem 1.15rem;
}

/* Brikkene er bokssjustert med teksten under, men har 0,6rem egen polstring,
   så selve ordet starter lenger inn enn overskriften. Øyet justerer etter
   teksten, ikke etter boksen, så raden dras tilbake med akkurat polstringen. */
.merkerad {
  margin-left: -0.6rem;
}

.artikkel-merker {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  margin-left: -0.6rem;
}

.artikkel-tittel {
  margin: 0;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.25;
}

.artikkel-ingress {
  flex: 1;
  margin: 0;
  font-size: 0.9375rem;
  color: #56524d;
}

.dark .artikkel-ingress {
  color: #cfc9c7;
}

.artikkel-meta {
  margin: 0;
  font-size: 0.8125rem;
  color: #75716b;
}

.dark .artikkel-meta {
  color: #a8a29f;
}

/* Framhevet artikkel: bilde ved siden av teksten når det er plass. */
.artikkel-stor {
  margin-bottom: 1.25rem;
}

@media (min-width: 48rem) {
  .artikkel-stor {
    display: grid;
    grid-template-columns: 1.15fr 1fr;
    align-items: center;
  }

  .artikkel-stor .artikkel-bilde {
    aspect-ratio: 16 / 10;
  }

  .artikkel-stor .artikkel-tekst {
    padding: 1.75rem 2rem;
  }

  .artikkel-stor .artikkel-tittel {
    font-size: 1.5rem;
  }

  .artikkel-stor .artikkel-ingress {
    flex: 0;
    font-size: 1rem;
  }
}

.ingen-treff,
.artikkel-feil {
  padding: 2.5rem 1rem;
  text-align: center;
  color: #75716b;
}

.dark .ingen-treff,
.dark .artikkel-feil {
  color: #a8a29f;
}

/* ---------- Tagger ----------
 * Én farge per tema, satt i assets/js/tagger.js. Verdiene ligger som
 * variabler, slik at merkelapp og filterknapp deler dem uten å gjenta seg.
 *
 * Fargen sier HVILKET tema. Fylt mot tonet sier om filteret er på. Blander
 * man de to, ser en ufiltrert liste ut som om noe allerede er valgt. */

.t-blaa    { --t-tekst: #24417a; --t-flate: #e6ecf8; --t-full: #2f549b; }
.t-sand    { --t-tekst: #8a5512; --t-flate: #fbeed6; --t-full: #a8690f; }
.t-tegl    { --t-tekst: #b7153a; --t-flate: #ffe1e5; --t-full: #d92046; }
.t-violett { --t-tekst: #6b2c7a; --t-flate: #f4e7f8; --t-full: #7e3590; }
.t-noytral { --t-tekst: #56524d; --t-flate: #f0ebeb; --t-full: #56524d; }

/* I mørk modus snus den valgte tilstanden: uvalgt hviler tett på kortflaten,
   valgt blir en LYS brikke med mørk tekst. Den valgte flaten er 24-37 ganger
   lysere enn den uvalgte, mot omtrent det dobbelte da begge var mørke. */
.dark .t-blaa    { --t-tekst: #a8c6f2; --t-flate: #16203a; --t-full: #8ab4f0; --t-fulltekst: #101a2e; }
.dark .t-sand    { --t-tekst: #edc887; --t-flate: #2b1c06; --t-full: #e8b45c; --t-fulltekst: #2b1c06; }
.dark .t-tegl    { --t-tekst: #ffb3c1; --t-flate: #40101d; --t-full: #ff7a94; --t-fulltekst: #3d0b17; }
.dark .t-violett { --t-tekst: #dcb0e8; --t-flate: #2a0f33; --t-full: #c68ad6; --t-fulltekst: #260d2e; }
.dark .t-noytral { --t-tekst: #c7c1be; --t-flate: #2b2825; --t-full: #d5cfcb; --t-fulltekst: #201d1b; }

.tagg {
  display: inline-block;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background-color: var(--t-flate);
  color: var(--t-tekst);
  font-size: 0.75rem;
  font-weight: 600;
  line-height: 1.25rem;
  white-space: nowrap;
}

.taggknapp {
  padding: 0.35rem 0.85rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--t-flate);
  color: var(--t-tekst);
  --t-fulltekst: #ffffff;
  font-size: 0.8125rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}

.taggknapp:hover {
  box-shadow: inset 0 0 0 1.5px var(--t-full);
}

.taggknapp.er-valgt {
  background-color: var(--t-full);
  color: var(--t-fulltekst);
}

.taggknapp:focus-visible {
  outline: 2px solid var(--t-full);
  outline-offset: 2px;
}

/* ---------- Bildegalleri ---------- */

.bildegalleri {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.75rem;
}

@media (min-width: 30rem) {
  .bildegalleri {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

@media (min-width: 48rem) {
  .bildegalleri {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }
}

.galleri-miniatyr {
  display: block;
  padding: 0;
  overflow: hidden;
  border: 1px solid var(--ng-kant);
  border-radius: 0.625rem;
  background: none;
  cursor: zoom-in;
}

.galleri-miniatyr img {
  display: block;
  width: 100%;
  height: 9.5rem;
  object-fit: cover;
  transition: transform 0.25s ease;
}

.galleri-miniatyr:hover img {
  transform: scale(1.04);
}

.galleri-miniatyr:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.galleri-modal {
  position: fixed;
  z-index: 9999;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1rem;
  background: rgb(12 11 10 / 0.88);
}

.galleri-ramme {
  margin: 0;
  text-align: center;
}

.galleri-ramme img {
  max-width: min(92vw, 1200px);
  max-height: 82vh;
  border-radius: 0.5rem;
}

.galleri-teller {
  margin-top: 0.75rem;
  font-size: 0.8125rem;
  color: rgb(255 255 255 / 0.7);
}

.galleri-lukk,
.galleri-pil {
  position: absolute;
  padding: 0;
  border: 0;
  background: none;
  color: #ffffff;
  cursor: pointer;
  line-height: 1;
}

.galleri-lukk {
  top: 1rem;
  right: 1.25rem;
  font-size: 2.25rem;
}

.galleri-pil {
  top: 50%;
  width: 2.75rem;
  height: 2.75rem;
  transform: translateY(-50%);
  border-radius: 999px;
  background: rgb(255 255 255 / 0.14);
  font-size: 1.5rem;
}

.galleri-forrige { left: 0.75rem; }
.galleri-neste { right: 0.75rem; }

.galleri-lukk:hover,
.galleri-pil:hover {
  background: rgb(255 255 255 / 0.28);
}

.galleri-lukk:focus-visible,
.galleri-pil:focus-visible {
  outline: 2px solid #ffffff;
  outline-offset: 2px;
}

/* ---------- Animasjon ---------- */

.fade-down-anim {
  animation: ngFadeDown 0.6s cubic-bezier(0.16, 1, 0.3, 1) both;
}

@keyframes ngFadeDown {
  from {
    opacity: 0;
    transform: translateY(-12px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  html {
    scroll-behavior: auto !important;
  }
}

/* ---------- Mobilmeny ----------
 * En skuff som dekker siden. Oppførselen ligger i assets/js/navbar.js. */

.mobilmeny-knapp {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 0.625rem;
  background: none;
  color: inherit;
  cursor: pointer;
}

.mobilmeny-knapp:hover {
  background-color: var(--ng-flate-dus);
}

.mobilmeny-knapp:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.mobilmeny-overlegg {
  position: fixed;
  z-index: 50;
  inset: 0;
  opacity: 0;
  background-color: rgb(16 15 14 / 0.45);
  backdrop-filter: blur(2px);
  pointer-events: none;
  transition: opacity 0.25s ease;
}

.mobilmeny-overlegg.er-apen {
  opacity: 1;
  pointer-events: auto;
}

.mobilmeny {
  position: fixed;
  z-index: 51;
  top: 0;
  bottom: 0;
  left: 0;
  display: flex;
  flex-direction: column;
  width: min(86vw, 20rem);
  background-color: var(--ng-flate);
  border-right: 1px solid var(--ng-kant);
  box-shadow: 0 0 2.5rem rgb(16 15 14 / 0.28);
  transform: translateX(-100%);
  transition: transform 0.28s cubic-bezier(0.16, 1, 0.3, 1);
}

.mobilmeny.er-apen {
  transform: none;
}

.mobilmeny-topp {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.85rem 0.9rem 0.85rem 1.1rem;
  border-bottom: 1px solid var(--ng-kant);
}

.mobilmeny-lukk {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 2.75rem;
  min-height: 2.75rem;
  border: 0;
  border-radius: 999px;
  background-color: var(--ng-flate-dus);
  color: inherit;
  cursor: pointer;
}

.mobilmeny-lukk:hover {
  background-color: var(--ng-kant);
}

.mobilmeny-lukk:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

.mobilmeny-lenker {
  display: flex;
  flex: 1;
  flex-direction: column;
  gap: 0.15rem;
  padding: 0.6rem;
  overflow-y: auto;
}

/* 3rem høye rader: en tommel treffer ikke 30 px. */
.mobilmeny-lenke {
  display: flex;
  align-items: center;
  min-height: 3rem;
  padding: 0 0.85rem;
  border-radius: 0.625rem;
  color: inherit;
  font-size: 1rem;
  font-weight: 500;
  text-decoration: none;
}

.mobilmeny-lenke:hover {
  background-color: var(--ng-flate-dus);
}

.mobilmeny-lenke:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: -2px;
}

/* Siden man står på. Uten dette vet man ikke hvor man er. */
.mobilmeny-lenke.er-aktiv {
  background-color: #ffe1e5;
  color: #b7153a;
  font-weight: 600;
}

.dark .mobilmeny-lenke.er-aktiv {
  background-color: #40101d;
  color: #ffb3c1;
}

.mobilmeny-bunn {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
  padding: 0.75rem 0.9rem 1rem;
  border-top: 1px solid var(--ng-kant);
}

.mobilmeny-tema {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 2.75rem;
  border: 1px solid var(--ng-kant);
  border-radius: 0.625rem;
  background: none;
  color: inherit;
  font-size: 0.9375rem;
  font-weight: 500;
  cursor: pointer;
}

.mobilmeny-tema:hover {
  background-color: var(--ng-flate-dus);
}

.mobilmeny-tema:focus-visible {
  outline: 2px solid #f04a78;
  outline-offset: 2px;
}

/* Merk hvilken side man er på, også i desktopmenyen. */
.navlenke.er-aktiv {
  color: #b7153a;
  font-weight: 600;
}

.dark .navlenke.er-aktiv {
  color: #ffb3c1;
}

/* Skjul skuffen på bredde. Gjøres her og ikke via md:hidden, fordi begge
   er én klasse hver og da avgjør rekkefølgen - og Tailwind lastes ved kjøretid. */
@media (min-width: 48rem) {
  .mobilmeny,
  .mobilmeny-overlegg,
  .mobilmeny-knapp {
    display: none;
  }
}

body.sidebar-open {
  overflow: hidden;
  touch-action: none;
}