/* latter.dk - tomatrød, solgul taleboble, varmt papir */
@font-face { font-family: "Sora"; src: url("/assets/fonts/sora-800.woff2") format("woff2"); font-weight: 800; font-style: normal; font-display: swap; }
@font-face { font-family: "Karla"; src: url("/assets/fonts/karla-vf.woff2") format("woff2"); font-weight: 200 800; font-style: normal; font-display: swap; }

:root {
  --tomat: #c93a24;
  --tomat-dyb: #9e2a18;
  --sol: #f5c33b;
  --sol-lys: #fde7a6;
  --papir: #fbf3e5;
  --papir-2: #f4e6cf;
  --blaek: #2a1a12;
  --daempet: #6a5446;
  --linje: #e5d3b5;
  --display: "Sora", "Karla", sans-serif;
  --tekst: "Karla", system-ui, sans-serif;
  --maal: 64ch;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--papir); color: var(--blaek); font: 1.09rem/1.62 var(--tekst); }
::selection { background: var(--sol); color: var(--blaek); }
img, svg { max-width: 100%; }
a { color: var(--tomat-dyb); text-decoration-thickness: 2px; text-decoration-color: var(--sol); text-underline-offset: 0.18em; }
a:hover { color: var(--blaek); text-decoration-color: var(--tomat); }
:focus-visible { outline: 3px solid var(--blaek); outline-offset: 3px; border-radius: 3px; }

.ramme { width: min(100% - 2rem, 68rem); margin-inline: auto; }
.spring { position: absolute; left: 1rem; top: -4rem; background: var(--sol); color: var(--blaek); padding: .5rem .9rem; z-index: 10; }
.spring:focus { top: .75rem; }

h1, h2, h3 { font-family: var(--display); font-weight: 800; line-height: 1.05; letter-spacing: -0.025em; text-wrap: balance; }
h1 { font-size: clamp(2.4rem, 7.5vw, 4.4rem); margin: 0 0 1rem; }
h2 { font-size: clamp(1.45rem, 3.4vw, 1.95rem); margin: 2.2em 0 .5em; }
p { margin: 0 0 1em; }
.indledning { font-size: clamp(1.12rem, 2.1vw, 1.28rem); line-height: 1.5; max-width: 44ch; }

/* Top */
.top { background: var(--blaek); color: var(--papir); }
.top-ind { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .4rem 1.5rem; padding-block: .85rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .5rem; color: var(--papir); text-decoration: none; font: 800 1.55rem/1 var(--display); letter-spacing: -0.03em; }
.ordmaerke:hover { color: var(--papir); }
.ordmaerke svg { width: 2.1rem; height: 1.75rem; color: var(--sol); flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: .1rem 1.2rem; }
.menu a { color: #e9dccb; text-decoration: none; font-weight: 700; font-size: 1rem; padding-block: .3rem; border-bottom: 2px solid transparent; }
.menu a:hover { color: #fff; border-bottom-color: var(--tomat); }
.menu a[aria-current="page"] { color: var(--sol); border-bottom-color: var(--sol); }

/* Knapper */
.knap { display: inline-flex; align-items: center; justify-content: center; min-height: 3rem; padding: .7rem 1.4rem; border: 2px solid var(--blaek); border-radius: 999px; background: var(--blaek); color: var(--papir); font: 700 1.02rem/1 var(--tekst); text-decoration: none; cursor: pointer; transition: transform .15s cubic-bezier(.2,.8,.2,1), background-color .15s ease-out; }
.knap:hover { background: #432c20; color: #fff; }
.knap:active { transform: scale(.97); }
.knap-lys { background: transparent; color: var(--blaek); }
.knap-lys:hover { background: rgba(42,26,18,.08); color: var(--blaek); }
.knapper { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 1.75rem; }

/* Forside */
.helt { background: var(--tomat); color: #fff; }
.helt-ind { display: grid; gap: 2.5rem; padding-block: clamp(2.5rem, 7vw, 5rem); align-items: center; }
.helt h1 { color: #fff; }
.helt .indledning { color: #fde9e2; }
@media (min-width: 880px) { .helt-ind { grid-template-columns: .9fr 1.1fr; gap: 4rem; } }

.maskine { color: var(--blaek); }
.boble { position: relative; background: var(--sol); border-radius: 28px; padding: clamp(1.5rem, 4vw, 2.4rem); min-height: 12rem; display: flex; flex-direction: column; justify-content: center; }
.boble::after { content: ""; position: absolute; left: 3.2rem; bottom: -1.4rem; border-width: 1.5rem 1.4rem 0 0; border-style: solid; border-color: var(--sol) transparent transparent transparent; }
.boble-op { font: 800 clamp(1.3rem, 3vw, 1.7rem)/1.25 var(--display); letter-spacing: -0.02em; margin: 0; }
.boble-po { font-size: clamp(1.15rem, 2.4vw, 1.35rem); margin: .9rem 0 0; animation: dukop .25s cubic-bezier(.2,.8,.2,1); }
@keyframes dukop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
.maskine-knapper { display: flex; flex-wrap: wrap; gap: .75rem; margin-top: 2.4rem; }
.helt .knap { background: #fff; border-color: #fff; color: var(--blaek); }
.helt .knap:hover { background: var(--papir); }
.helt .knap-lys { background: transparent; color: #fff; }
.helt .knap-lys:hover { background: rgba(255,255,255,.12); color: #fff; }

.sektion { padding-block: clamp(2rem, 6vw, 4rem); }
.sektion h2 { margin-top: 0; }
.sektion-lys { background: var(--papir-2); }
.to-spalter { display: grid; gap: 2.5rem; }
.to-spalter > div { max-width: var(--maal); }
@media (min-width: 860px) { .to-spalter { grid-template-columns: 1fr 1fr; gap: 4rem; } }

.genveje { display: grid; gap: 1rem; }
@media (min-width: 760px) { .genveje { grid-template-columns: repeat(3, 1fr); } }
.genvej { display: flex; flex-direction: column; gap: .5rem; padding: 1.5rem; background: #fff; border-radius: 20px; color: var(--blaek); text-decoration: none; box-shadow: 0 1px 0 var(--linje); transition: transform .2s cubic-bezier(.2,.8,.2,1); }
.genvej:hover { transform: rotate(-1deg) translateY(-2px); color: var(--blaek); }
.genvej-titel { font: 800 1.45rem/1.1 var(--display); letter-spacing: -0.02em; color: var(--tomat-dyb); }

/* Tekstsider */
.tekstside main { padding-block: clamp(2rem, 6vw, 4rem) clamp(3rem, 7vw, 5rem); }
.side-top { max-width: 48rem; margin-bottom: 2rem; }
.artikel { max-width: var(--maal); }

.kat-nav { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: 1.5rem; }
.kat-nav a { padding: .45rem .95rem; background: var(--papir-2); border-radius: 999px; text-decoration: none; color: var(--blaek); font-weight: 700; font-size: .95rem; }
.kat-nav a:hover { background: var(--sol); }

.kategori { margin-top: 2.5rem; }
.kategori h2 { margin: 0 0 1rem; }
.vittigheder { list-style: none; margin: 0; padding: 0; display: grid; gap: 1rem; }
@media (min-width: 760px) { .vittigheder { grid-template-columns: 1fr 1fr; } }
.vittigheder li { background: #fff; border-radius: 20px; padding: 1.25rem 1.4rem; }
.v-op { margin: 0; font-weight: 700; }
.v-po { margin: .45rem 0 0; color: var(--tomat-dyb); }

.gaader { list-style: none; margin: 0 0 2rem; padding: 0; counter-reset: g; display: grid; gap: 0; max-width: 48rem; border-top: 1px solid var(--linje); }
.gaader li { counter-increment: g; padding: 1.1rem 0 1.1rem 3rem; border-bottom: 1px solid var(--linje); position: relative; }
.gaader li::before { content: counter(g); position: absolute; left: 0; top: 1rem; font: 800 1.4rem/1 var(--display); color: var(--tomat); }
.g-q { margin: 0 0 .5rem; font-weight: 700; font-size: 1.12rem; }
.gaader summary { cursor: pointer; color: var(--tomat-dyb); font-weight: 700; display: inline-block; padding: .25rem 0; }
.gaader details p { margin: .35rem 0 0; font: 800 1.1rem/1.3 var(--display); }

.fakta { display: grid; gap: 1rem; margin-bottom: 2rem; }
@media (min-width: 760px) { .fakta { grid-template-columns: 1fr 1fr; } }
.faktum { background: #fff; border-radius: 20px; padding: 1.4rem 1.5rem; }
.faktum-nr { display: inline-grid; place-items: center; width: 2.2rem; height: 2.2rem; border-radius: 50%; background: var(--sol); font: 800 1rem/1 var(--display); margin: 0 0 .7rem; }
.faktum h2 { font-size: 1.3rem; margin: 0 0 .5rem; }
.faktum p:last-child { margin: 0; }

.ordliste { margin: 0 0 1.5rem; }
.ordliste div { display: grid; gap: .1rem 1.5rem; padding: .7rem 0; border-bottom: 1px solid var(--linje); }
@media (min-width: 640px) { .ordliste div { grid-template-columns: 14rem 1fr; } }
.ordliste dt { font-weight: 800; color: var(--tomat-dyb); }
.ordliste dd { margin: 0; }

/* Bund */
.bund { background: var(--blaek); color: #d9c9b6; padding-block: 2.2rem; }
.bund-ind { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 1rem 2rem; align-items: baseline; }
.bund-navn { font: 800 1.3rem/1.2 var(--display); color: #fff; margin: 0; letter-spacing: -0.02em; }
.bund-navn span { display: block; font: 400 .92rem/1.4 var(--tekst); color: #bfa996; letter-spacing: 0; }
.bund nav { display: flex; flex-wrap: wrap; gap: .3rem 1.2rem; }
.bund a { color: #d9c9b6; text-decoration: none; }
.bund a:hover { color: #fff; text-decoration: underline; }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } }