/*
 * dampspærre.dk
 *
 * Farverne er husets to sider af folien. Papiret er varmt, som luften inde i
 * boligen, og den ene accent er kold kondensblå, som den flade folien vender
 * ud mod. Det er hele fugtfysikken sat i to farver, og der er ikke flere.
 *
 * Skriften er en kraftig systemsans til overskrifter og en serif til brødtekst.
 * Teksten er lange vejledninger, man læser med en tommestok i den anden hånd,
 * og serif er lettere at følge over mange linjer. Overskrifterne skal derimod
 * kunne skimmes, for de er spørgsmål, man leder efter svaret på.
 *
 * Sitet er lyst og kun lyst. Det læses tit på en telefon på et loft med en
 * pandelampe, og der er en mørk baggrund det stik modsatte af hjælpsomt.
 */

:root {
  --papir: #faf7f2;
  --flade: #ffffff;
  --blaek: #1c1a17;
  --blaek-svag: #57534c;
  --streg: #e6dfd4;
  --kondens: #2c6a86;
  --kondens-lys: #eaf2f5;
  /* Den varme signalfarve bruges ét sted: de tal, der er hele pointen. */
  --tape: #a8541f;
  /* Bredden på hele siden. Den var 42rem, altså en ren bogspalte, men teksten
     her er ikke en bog: den er tabeller, mål og lister, som brækkede for tidligt
     og blev til trapper. 48rem giver luft til dem og holder stadig linjen inden
     for det, man kan læse uden at tabe den. Både top, tekst og bund henter
     bredden her, så de bliver ved med at flugte. */
  --maal: 48rem;
  --sans: system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --serif: Georgia, 'Iowan Old Style', 'Times New Roman', serif;
  color-scheme: light;
}

* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font: 1.05rem/1.7 var(--serif);
  -webkit-text-size-adjust: 100%;
}

/* ---------- Top og bund ---------- */

.top {
  max-width: var(--maal);
  margin-inline: auto;
  padding: 1.4rem 1.25rem 1rem;
  border-bottom: 1px solid var(--streg);
}
.top .raekke {
  display: flex;
  align-items: baseline;
  gap: 1rem;
  flex-wrap: wrap;
}
.maerke {
  font: 700 1.15rem/1 var(--sans);
  letter-spacing: -0.02em;
  color: var(--blaek);
  text-decoration: none;
}
.maerke span { color: var(--kondens); }
.lofte {
  margin: 0 0 0 auto;
  font: 600 0.78rem/1 var(--sans);
  letter-spacing: 0.02em;
  color: var(--tape);
}

/* Menuen. Fem vejledninger, og de skal kunne ses på én gang på en telefon,
   derfor små ord, der bryder til to linjer i stedet for at blive til en
   rulleliste. Den side, man står på, er markeret og ikke et link, man klikker
   på for at komme det samme sted hen. */
.menu {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.1rem;
  margin-top: 0.85rem;
  font: 600 0.86rem/1.5 var(--sans);
}
.menu a {
  color: var(--blaek-svag);
  text-decoration: none;
  padding-bottom: 2px;
  border-bottom: 2px solid transparent;
}
.menu a:hover { color: var(--kondens); border-bottom-color: var(--streg); }
.menu a[aria-current='page'] { color: var(--blaek); border-bottom-color: var(--kondens); }

main { max-width: var(--maal); margin-inline: auto; padding: 2rem 1.25rem 4rem; }

.bund {
  max-width: var(--maal);
  margin-inline: auto;
  padding: 2rem 1.25rem 4rem;
  border-top: 1px solid var(--streg);
  font: 0.9rem/1.6 var(--sans);
  color: var(--blaek-svag);
}
.bund p { margin: 0 0 0.7rem; }
.bund .fin { font-size: 0.82rem; }

/* ---------- Brødtekst ---------- */

h1 {
  font: 700 clamp(1.9rem, 5.5vw, 2.6rem)/1.12 var(--sans);
  letter-spacing: -0.03em;
  margin: 0 0 0.6rem;
  text-wrap: balance;
}
h2 {
  font: 700 1.28rem/1.25 var(--sans);
  letter-spacing: -0.015em;
  margin: 2.6rem 0 0.8rem;
  text-wrap: balance;
}
h3 { font: 700 1.05rem/1.3 var(--sans); margin: 1.8rem 0 0.5rem; }

/* Manchetten er sidens løfte og står med sansen, så den ikke læses som
   begyndelsen af brødteksten. */
.manchet {
  font: 1.02rem/1.55 var(--sans);
  color: var(--blaek-svag);
  margin: 0 0 2rem;
  padding-left: 0.9rem;
  border-left: 3px solid var(--kondens);
}

/* ---------- På denne side ---------- */

/* Vejledningerne er lange, og folk kommer ind på ét spørgsmål. Listen er
   sidens egne afsnitsoverskrifter, så den kan ikke pege forkert. To spalter,
   når der er plads, ellers bliver den længere end det første afsnit. */
.paa-siden {
  margin: 0 0 2.4rem;
  padding: 1.1rem 1.3rem 0.9rem;
  background: var(--kondens-lys);
  border-radius: 6px;
  font-family: var(--sans);
}
.paa-siden h2 {
  margin: 0 0 0.6rem;
  font-size: 0.78rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--kondens);
}
.paa-siden ol {
  margin: 0;
  padding-left: 1.15rem;
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--blaek-svag);
}
.paa-siden li { margin-bottom: 0.4rem; break-inside: avoid; }
.paa-siden a { color: var(--blaek); text-decoration: none; }
.paa-siden a:hover { color: var(--kondens); text-decoration: underline; }

@media (min-width: 44rem) {
  .paa-siden ol { columns: 2; column-gap: 2rem; }
}

/* Overskriften skal ikke ligge klods op ad toppen af skærmen, når man er
   hoppet ned til den fra listen. */
h2[id], h3[id] { scroll-margin-top: 1.2rem; }

/* ---------- Brødtekst, fortsat ---------- */

p { margin: 0 0 1.1rem; }

/* Delerne i teksten er tynde. De adskiller, de deler ikke siden i to. */
hr { margin: 2.4rem 0; border: 0; border-top: 1px solid var(--streg); }
ul, ol { margin: 0 0 1.2rem; padding-left: 1.35rem; }
li { margin-bottom: 0.45rem; }
strong { font-weight: 700; }

a { color: var(--kondens); text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
:focus-visible { outline: 2px solid var(--kondens); outline-offset: 2px; border-radius: 2px; }

/* ---------- Kilderne ---------- */

/* Tallet i teksten skal kunne ses, men ikke bryde læsningen. Det er sitets
   løfte gjort synligt: står der et tal, står der også hvor det kommer fra. */
.kilde-nr { font-size: 0.62em; line-height: 0; }
.kilde-nr a {
  text-decoration: none;
  padding: 0 0.15em;
  color: var(--tape);
  font-family: var(--sans);
  font-weight: 700;
}
.kilde-nr a:hover { text-decoration: underline; }

.kilder {
  margin-top: 3rem;
  padding: 1.3rem 1.4rem 1rem;
  background: var(--flade);
  border: 1px solid var(--streg);
  border-radius: 6px;
}
.kilder h2 { margin: 0 0 0.8rem; font-size: 1rem; }
.kilder ol { font: 0.86rem/1.55 var(--sans); color: var(--blaek-svag); }
.kilder li { margin-bottom: 0.7rem; }
/* Adresserne er lange og må gerne brække, hellere end at skubbe siden bred. */
.kilder a { word-break: break-word; }
.tilbage { text-decoration: none; color: var(--blaek-svag); }

.opdateret {
  margin-top: 1.5rem;
  font: 0.82rem/1.5 var(--sans);
  color: var(--blaek-svag);
}

/* ---------- Målboksen ---------- */

/* Reserveret til det, sitet lever af: en samlet tabel over tallene i en
   vejledning. Klassen sættes i indholdet, når den første guide får sin. */
.maalboks {
  margin: 1.8rem 0;
  padding: 1.1rem 1.3rem;
  background: var(--kondens-lys);
  border-left: 3px solid var(--kondens);
  border-radius: 0 6px 6px 0;
  font-family: var(--sans);
  font-size: 0.95rem;
}
.maalboks dt { font-weight: 700; }
.maalboks dd { margin: 0 0 0.6rem; font-variant-numeric: tabular-nums; }