/* katteting.dk - natblå og ravgul: katteøjne i mørket over en lys, rolig læseflade */
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-500-normal.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Outfit"; src: url("/assets/fonts/outfit-latin-600-normal.woff2") format("woff2"); font-weight: 600; font-display: swap; }
@font-face { font-family: "Figtree"; src: url("/assets/fonts/figtree-latin.woff2") format("woff2"); font-weight: 300 900; font-display: swap; }

:root {
  --nat: #1c1a35;
  --nat-2: #2a2750;
  --nat-tekst: #f3f1f8;
  --nat-daempet: #c3bee0;
  --blaek: #1f1b33;
  --blaek-2: #4b4766;
  --papir: #f3f1f8;
  --flade: #ffffff;
  --lilla: #e6e2f3;
  --streg: #d4cfe5;
  --rav: #f2a400;
  --rav-lys: #ffe6ad;
  --rav-moerk: #7a5200;
  --roed: #a3241c;
  --roed-lys: #fbe8e4;
  --skygge: 0 1px 2px rgba(28, 26, 53, .06), 0 8px 24px -8px rgba(28, 26, 53, .14);
  --display: "Outfit", "Figtree", system-ui, sans-serif;
  --tekst: "Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scrollbar-color: var(--blaek-2) var(--papir); }
body {
  margin: 0;
  background: var(--papir);
  color: var(--blaek);
  font: 400 1.0625rem/1.62 var(--tekst);
  caret-color: var(--rav);
  -webkit-font-smoothing: antialiased;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}
main { flex: 1 0 auto; }
::selection { background: var(--rav-lys); color: var(--blaek); }
img, svg { display: block; max-width: 100%; }
h1, h2, h3 { font-family: var(--display); font-weight: 600; line-height: 1.12; letter-spacing: -0.02em; text-wrap: balance; margin: 0; }
p { margin: 0 0 1em; text-wrap: pretty; }
a { color: inherit; text-decoration-color: var(--rav); text-decoration-thickness: 2px; text-underline-offset: 3px; }
a:hover { text-decoration-color: currentColor; }
:focus-visible { outline: 3px solid var(--rav); outline-offset: 3px; border-radius: 4px; }

.ramme { width: 100%; max-width: 72rem; margin: 0 auto; padding-inline: 1.25rem; }
.smal { max-width: 44rem; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.spring { position: absolute; left: 1rem; top: -4rem; background: var(--rav); color: var(--nat); padding: .6rem 1rem; border-radius: 8px; z-index: 5; font-weight: 600; }
.spring:focus { top: 1rem; }

/* Top */
.top { background: var(--nat); color: var(--nat-tekst); }
.top-indre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.1rem; padding-bottom: 1.1rem; }
.ordmaerke { display: inline-flex; align-items: center; gap: .55rem; text-decoration: none; font-family: var(--display); font-weight: 600; font-size: 1.45rem; letter-spacing: -0.02em; color: var(--nat-tekst); }
.ordmaerke small { font-size: 1em; color: var(--nat-daempet); font-weight: 500; margin-left: -0.5rem; }
.maerke { width: 1.9rem; height: auto; flex: none; }
.menu { display: flex; flex-wrap: wrap; gap: .25rem .35rem; margin-left: -0.6rem; }
.menu a { color: var(--nat-daempet); text-decoration: none; font-size: .95rem; font-weight: 500; padding: .4rem .6rem; border-radius: 999px; transition: color .2s, background-color .2s; }
.menu a:hover { color: var(--nat-tekst); background: var(--nat-2); }
.menu a[aria-current="page"] { color: var(--nat); background: var(--rav); }

/* Forsidens top */
.helt { background: var(--nat); color: var(--nat-tekst); padding: 2.5rem 0 3.5rem; overflow: hidden; }
.helt-indre { display: grid; gap: 2.5rem; align-items: center; }
.helt h1 { font-size: clamp(2.5rem, 9vw, 5rem); letter-spacing: -0.035em; max-width: 12ch; }
.ingress { font-size: 1.2rem; line-height: 1.55; color: var(--blaek-2); max-width: 36rem; }
.helt .ingress { color: var(--nat-daempet); margin-top: 1.25rem; }
.oejne { width: min(100%, 22rem); justify-self: start; filter: drop-shadow(0 0 28px rgba(242, 164, 0, .28)); }
.oeje { transform-box: fill-box; transform-origin: 50% 50%; animation: blink 9s infinite; }
.oeje + .oeje { animation-delay: .04s; }
@keyframes blink {
  0%, 93%, 100% { transform: scaleY(1); }
  95% { transform: scaleY(.06); }
  97% { transform: scaleY(1); }
}
@media (prefers-reduced-motion: reduce) { .oeje { animation: none; } }

.knap { display: inline-flex; align-items: center; gap: .5rem; background: var(--rav); color: var(--nat); font: 600 1rem/1 var(--display); padding: .95rem 1.4rem; border-radius: 999px; text-decoration: none; border: 0; cursor: pointer; transition: transform .15s ease-out, background-color .2s; }
.knap:hover { background: #ffb51f; }
.knap:active { transform: scale(.97); }
.knap-lys { background: var(--flade); color: var(--blaek); box-shadow: inset 0 0 0 1.5px var(--streg); }
.knap-lys:hover { background: var(--rav-lys); }

/* Tjekliste */
.tjekliste { padding: 3.5rem 0 4rem; }
.tjek-hoved { display: grid; gap: 1.25rem; margin-bottom: 1rem; }
.tjekliste h2 { font-size: clamp(1.9rem, 5vw, 2.6rem); }
.tjek-note { color: var(--blaek-2); margin: .75rem 0 0; max-width: 34rem; }
.tjek-status { display: flex; flex-wrap: wrap; align-items: center; gap: 1rem 1.25rem; }
.taeller { margin: 0; font-family: var(--display); font-size: 1.15rem; color: var(--blaek-2); font-variant-numeric: tabular-nums; }
.taeller strong { color: var(--blaek); font-weight: 600; font-size: 1.6rem; }
.gruppe { font-size: 1.3rem; margin: 2.5rem 0 .5rem; }
.punkter { list-style: none; margin: 0; padding: 0; }
.punkter li { position: relative; border-top: 1px solid var(--streg); padding: 1rem 0 1.05rem 3rem; }
.punkter li:last-child { border-bottom: 1px solid var(--streg); }
.punkter input { position: absolute; opacity: 0; width: 1.6rem; height: 1.6rem; left: 0; top: 1rem; margin: 0; }
.punkter label { display: block; cursor: pointer; }
.boks { position: absolute; left: 0; top: 1.05rem; width: 1.6rem; height: 1.6rem; border-radius: 7px; background: var(--flade); box-shadow: inset 0 0 0 2px var(--blaek-2); transition: background-color .2s, box-shadow .2s; }
.boks svg { width: 100%; height: 100%; }
.boks path { fill: none; stroke: var(--nat); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 22; stroke-dashoffset: 22; transition: stroke-dashoffset .28s cubic-bezier(.16, 1, .3, 1); }
.p-navn { display: block; font-family: var(--display); font-weight: 600; font-size: 1.15rem; line-height: 1.3; }
.p-tekst { display: block; color: var(--blaek-2); margin-top: .2rem; max-width: 40rem; }
.p-link { display: inline-block; margin-top: .35rem; font-size: .95rem; font-weight: 600; }
.punkter input:checked + label .boks { background: var(--rav); box-shadow: inset 0 0 0 2px var(--rav); }
.punkter input:checked + label .boks path { stroke-dashoffset: 0; }
.punkter input:checked + label .p-navn { text-decoration: line-through; text-decoration-color: var(--rav); text-decoration-thickness: 2px; }
.punkter input:focus-visible + label .boks { outline: 3px solid var(--rav); outline-offset: 3px; }
.punkter label:hover .boks { box-shadow: inset 0 0 0 2px var(--blaek); }

/* Læs videre */
.videre { background: var(--lilla); padding: 3rem 0 3.5rem; }
.videre h2 { font-size: 1.6rem; margin-bottom: 1.25rem; }
.videre-liste { list-style: none; margin: 0; padding: 0; }
.videre-liste a { display: grid; grid-template-columns: 1fr auto; gap: .2rem 1.5rem; align-items: center; padding: 1.15rem 0; border-top: 1px solid var(--streg); text-decoration: none; }
.videre-liste li:last-child a { border-bottom: 1px solid var(--streg); }
.v-navn { font-family: var(--display); font-weight: 600; font-size: clamp(1.3rem, 3.5vw, 1.75rem); letter-spacing: -0.02em; grid-column: 1; }
.v-tekst { color: var(--blaek-2); grid-column: 1; }
.pil { width: 1.6rem; height: 1.6rem; grid-column: 2; grid-row: 1 / span 2; color: var(--blaek); transition: transform .2s ease-out; }
.videre-liste a:hover .pil { transform: translateX(4px); }
.videre-liste a:hover .v-navn { text-decoration: underline; text-decoration-color: var(--rav); text-decoration-thickness: 2px; text-underline-offset: 4px; }

/* Artikler */
.artikel > .ramme { padding-top: 3rem; padding-bottom: 4rem; }
.artikel h1 { font-size: clamp(2.3rem, 7vw, 3.6rem); letter-spacing: -0.03em; margin-bottom: 1.1rem; }
.artikel h2 { font-size: clamp(1.45rem, 4vw, 1.85rem); margin: 2.75rem 0 .8rem; }
.artikel h3 { font-size: 1.2rem; margin: 1.9rem 0 .5rem; }
.kort-sagt { background: var(--flade); border-radius: 16px; padding: 1.4rem 1.5rem 1.2rem; box-shadow: var(--skygge); margin: 2rem 0 .5rem; }
.kort-sagt h2 { font-size: 1.05rem; margin: 0 0 .7rem; letter-spacing: 0; }
.kort-sagt ul { margin: 0; padding: 0; list-style: none; }
.kort-sagt li { position: relative; padding-left: 1.75rem; margin-bottom: .45rem; }
.kort-sagt li::before { content: ""; position: absolute; left: 0; top: .5em; width: 1.05rem; height: .6rem; background: var(--rav); clip-path: path("M0 4.8 Q8.4 -2.2 16.8 4.8 Q8.4 11.8 0 4.8 Z"); }
.advarsel { background: var(--roed-lys); box-shadow: none; }
.advarsel h2 { color: var(--roed); }
.advarsel li::before { background: var(--roed); }
.punktliste { padding-left: 1.2rem; margin: 0 0 1.2rem; }
.punktliste li { margin-bottom: .6rem; padding-left: .25rem; }
.punktliste li::marker { color: var(--rav-moerk); }
.typer { margin: 1rem 0 1.5rem; }
.typer div { padding: .9rem 0; border-top: 1px solid var(--streg); }
.typer div:last-child { border-bottom: 1px solid var(--streg); }
.typer dt { font-family: var(--display); font-weight: 600; font-size: 1.1rem; }
.typer dd { margin: .2rem 0 0; color: var(--blaek-2); }
.trin { list-style: none; counter-reset: trin; padding: 0; margin: 1rem 0 1.25rem; }
.trin li { counter-increment: trin; position: relative; padding: .1rem 0 0 2.75rem; margin-bottom: 1rem; min-height: 1.9rem; }
.trin li::before { content: counter(trin); position: absolute; left: 0; top: 0; width: 1.9rem; height: 1.9rem; border-radius: 50%; background: var(--nat); color: var(--rav); font: 600 .95rem/1.9rem var(--display); text-align: center; }

.planter { list-style: none; padding: 0; margin: 1.25rem 0 1.5rem; }
.planter li { padding: 1rem 0 .4rem; border-top: 1px solid var(--streg); }
.planter li:last-child { border-bottom: 1px solid var(--streg); }
.plante-hoved { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: .3rem 1rem; margin-bottom: .35rem; }
.artikel .planter h3 { margin: 0; font-size: 1.15rem; }
.planter p { color: var(--blaek-2); }
.grad { font: 600 .8rem/1 var(--display); letter-spacing: .02em; padding: .38rem .65rem; border-radius: 999px; white-space: nowrap; }
.grad-livsfarlig { background: var(--roed); color: #fff; }
.grad-giftig { background: #f7d3ca; color: #74180f; }
.grad-irriterer { background: var(--rav-lys); color: #4f3500; }

/* Bund */
.bund { background: var(--nat); color: var(--nat-daempet); font-size: .95rem; }
.bund-indre { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: .75rem 2rem; padding-top: 1.6rem; padding-bottom: 1.6rem; }
.bund-navn { display: inline-flex; align-items: center; gap: .5rem; margin: 0; font-family: var(--display); font-weight: 500; color: var(--nat-tekst); }
.bund-navn .maerke { width: 1.4rem; }
.bund a { color: var(--nat-tekst); }

@media (min-width: 48rem) {
  .ramme { padding-inline: 2rem; }
  .helt { padding: 3.5rem 0 4.5rem; }
  .helt-indre { grid-template-columns: 1.25fr 1fr; gap: 3rem; }
  .oejne { justify-self: end; width: min(100%, 26rem); }
  .menu { margin-left: 0; }
}
@media (min-width: 64rem) {
  .tjekliste .ramme { display: grid; grid-template-columns: 19rem 1fr; column-gap: 4rem; }
  .tjek-hoved { grid-column: 1; grid-row: 1 / span 20; align-self: start; position: sticky; top: 2rem; margin: 0; }
  .tjekliste .gruppe, .tjekliste .punkter { grid-column: 2; }
  .tjekliste .gruppe:first-of-type { margin-top: 0; }
  .tjek-status { flex-direction: column; align-items: flex-start; }
}

@media print {
  .top, .helt, .videre, .bund, .spring, .tjek-status button, .p-link { display: none !important; }
  body { background: #fff; color: #000; font-size: 11pt; }
  .tjekliste { padding: 0; }
  .tjekliste .ramme { display: block; }
  .tjek-hoved { position: static; }
  .punkter li { break-inside: avoid; padding-top: .5rem; padding-bottom: .5rem; }
  .boks { box-shadow: inset 0 0 0 1.5px #000; top: .55rem; }
  .p-tekst, .tjek-note, .taeller { color: #333; }
}