/* ── Laesesidernes spalte ────────────────────────────────────────────────
   640px, ikke appens 430. Det er ikke en inkonsekvens - det er den samme
   regel anvendt paa to forskellige ting. Appen er en skaerm, man BETJENER paa
   en telefon, og dér er 430px selve formatet. Disse fire er sider, man
   LAESER, og en juridisk tekst i en 430px spalte bliver til en endeloes
   remse af femordslinjer. Mockup'en saetter selv .ramme til 640 paa netop
   disse sider (docs/mockups/forma-sider.html). */
.side{--laesespalte:640px}

/* Sidehovedet ligger i SAMME spalte som teksten under det, ligesom appens
   eget. Stregen forneden er droppet: den kunne ikke gaa fra kant til kant,
   naar hovedet er centreret, og en centreret streg midt paa siden ser ud som
   en fejl. Adskillelsen baeres af luft. */
.side-header{max-width:var(--laesespalte); margin:0 auto; padding:calc(16px + env(safe-area-inset-top)) var(--rende) 0;
  display:flex; align-items:center; justify-content:space-between; gap:16px}
/* "Sign in" staar hvor dagen staar inde i appen: yderst til hoejre i hovedet,
   daempet. Det er sidernes ene handling, og den hoerer ikke i fanerne - de er
   navigation mellem fire ligestillede sider, den er vejen ud af dem. */
.side-ind{color:var(--daempet); text-decoration:none; font-size:13px;
  white-space:nowrap}
.side-ind:hover{color:var(--tekst)}

/* forma.css's BARE nav-selektor er appens bundmenu: position:fixed, bottom:0,
   sloeret baggrund, kant foroven. Den rammer ogsaa denne menu, fordi den er et
   <nav>-element - og indtil 31/8 2026 sad menuen paa alle fire offentlige sider
   derfor klistret nederst i vinduet i stedet for oppe i sidehovedet.
   Egenskaberne nulstilles her frem for at goere forma.css's regel mere specifik:
   appens stilark skal ikke kende til de offentlige sider. Bemaerk laerdommen -
   en elementselektor uden klasse rammer alt, hvad der senere maatte hedde det
   samme; skriv nye faellesregler paa en klasse.

   FANERNE er piller, ikke tekstlinks: fire ligestillede sider, hvor den ene
   man staar paa skal kunne ses uden at laese. Samme greb som appens
   bundnavigation loeser med en streg over det aktive ord. */
.side-nav{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none;
  max-width:var(--laesespalte); margin:0 auto; padding:16px var(--rende) 4px;
  position:static; background:none; backdrop-filter:none; border-top:none}
.side-nav::-webkit-scrollbar{display:none}
.side-nav a{flex:0 0 auto; padding:8px 14px; border-radius:20px; font-size:13px;
  font-weight:500; color:var(--daempet); text-decoration:none;
  border:1px solid transparent}
.side-nav a:hover{color:var(--tekst)}
.side-nav a.aktiv{color:var(--rav); background:var(--rav-dim);
  border-color:var(--rav)}

/* ── Carbon paa laesesiderne ──────────────────────────────────────────────
   Det er sider, man LAESER, ikke betjener, saa kravet er et andet end appens:
   korte linjer, rigelig linjeafstand og en tydelig rangorden mellem afsnit.

   Titlen saettes i serifen - samme rolle som traenerens dom inde i appen: ét
   sted pr. side, og det eneste sted dristigheden bruges. Broedteksten er
   grotesken som alt andet.

   Afsnittene skilles af en haarfin streg frem for af luft alene. Paa en lang
   juridisk side er stregen information: den siger hvor ét emne slutter. */
.side-main{max-width:var(--laesespalte); margin:0 auto; padding:0 var(--rende) 60px;
  line-height:1.6}
.side-main h1{
  font-family:var(--skrift-dom); font-weight:400;
  font-size:clamp(34px, 9.6vw, 44px); letter-spacing:-.015em; line-height:1.05;
  margin:24px 0 0; text-wrap:balance;
}
.side-main h1 em{font-style:italic; color:var(--rav)}
/* Ingressen staar i --tekst og lidt stoerre end broedteksten: den er sidens
   svar paa "hvad er det her", og den skal kunne laeses alene. */
.side-main .ingress{margin:18px 0 0; font-size:15.5px; line-height:1.65;
  color:var(--tekst); max-width:62ch}
.side-main h2{
  font-family:var(--skrift); font-size:19px; text-transform:none;
  letter-spacing:-.012em; color:var(--tekst); font-weight:600;
  margin:34px 0 0; padding-top:20px; border-top:1px solid var(--kant);
}
.side-main h2:first-of-type{margin-top:30px}
.side-main p, .side-main li{color:var(--daempet); font-size:15px;
  line-height:1.68; max-width:66ch}
.side-main p{margin:11px 0 0}
.side-main strong{color:var(--tekst); font-weight:600}
.side-main ul{padding-left:19px; margin:11px 0 0}
.side-main li{margin-top:5px; max-width:62ch}
/* Links i kridt med understregning frem for i en accentfarve: farve betyder
   anstrengelse i dette hus, og et link i en juridisk tekst er ingen af delene. */
.side-main a{color:var(--tekst); text-decoration:underline;
  text-underline-offset:3px}
.side-opdateret{color:var(--daempet); font-size:12.5px; margin:12px 0 0}

/* FAQ: spoergsmaalet ER overskriften. Ingen harmonika - en side, folk soeger i
   med browserens egen soegefunktion, maa ikke skjule sine svar bag et klik. */
.sporgsmaal{margin:0; padding:22px 0; border-top:1px solid var(--kant)}
.sporgsmaal h2{margin:0; padding-top:0; border-top:none; font-size:15.5px}
.sporgsmaal p{margin:9px 0 0}

/* Foden staar centreret og adskilt af en streg - den afslutter siden, den
   hoerer ikke til det sidste afsnit. */
.side-footer{max-width:var(--laesespalte); margin:0 auto; padding:0 var(--rende) 60px;
  color:var(--daempet); font-size:12.5px}
.side-footer p{margin:44px 0 0; padding-top:20px; border-top:1px solid var(--kant);
  text-align:center}
.side-footer a{color:var(--daempet)}