/* Basislag: reset, typografi, kontroller, billedobjekter.
 * Alt herunder henter farve fra fladen via rollenavne — aldrig fra en
 * konkret token. Se css/tokens.css for reglerne. */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--topbar-h);
}

body {
  font: var(--weight-regular) var(--text-base)/var(--leading-body) var(--font-body);
  background: var(--bone);
  color: var(--fg-on-light);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

img { display: block; max-width: 100%; }

/* ---------- Typografi ----------
 * Tre snit, tre job. Display bærer hero, sektions- og kortoverskrifter.
 * Brød er neutralt og konkurrerer ikke. Mono er signaturelementet: ALLE tal
 * på sitet sættes her — tider, distancer, årstal, rekorder og priser.
 * 79 · 379 · 1.579 behandles som 486 km og 4:59. */

h1, h2, h3 {
  font-family: var(--font-display);
  text-transform: uppercase;
  letter-spacing: var(--display-tracking);
  line-height: var(--leading-tight);
  font-weight: var(--weight-bold);
  text-wrap: balance;
  color: var(--heading-color, inherit);
}
h1 { font-size: var(--text-display); line-height: var(--leading-display); font-weight: var(--weight-black); }
h2 { font-size: var(--text-h2); font-weight: var(--weight-black); }
h3 { font-size: var(--text-h3); }
p  { text-wrap: pretty; }

/* Alle tal. Klassen sættes på selve cifferløbet, ikke på afsnittet. */
.num {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  letter-spacing: -.01em;
}

/* Stort datatal: statsbjælke, årstal i tidslinjen, priser, udtalelser. */
.data {
  font-family: var(--font-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-size: var(--text-data);
  font-weight: var(--weight-medium);
  line-height: .9;
  letter-spacing: -.03em;
  color: var(--accent);
}

/* Versallabel. Eneste sted et ikke-display-snit må stå i versaler. */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  text-transform: uppercase;
  letter-spacing: .14em;
  color: var(--fg-muted);
}

.lead { font-size: var(--text-lead); line-height: 1.5; max-width: var(--measure); }

/* Linkfarven for brødtekst. :where() vejer NUL, så enhver komponentregel —
 * .btn-primary, .nav-links a, .media-card — vinder automatisk uden at der
 * skal vedligeholdes en kæde af undtagelser.
 *
 * Det er ikke kosmetik: en :not()-kæde arver vægten fra hvert argument, så
 * fire :not(.klasse) giver (0,4,1) og slår stille og roligt de komponenter,
 * den skulle holde sig fra. Fallback til currentColor, så en flade uden
 * --cta-text ikke gør erklæringen ugyldig. */
:where(a) {
  color: var(--cta-text, currentColor);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
:where(.on-bone, .on-paper) :where(a):hover { color: var(--ink); }
:where(.on-ink, .on-forest) :where(a):hover { color: var(--hivis-hover); }

:where(a, button, input, textarea, select, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--ring, var(--focus-ring-color));
  outline-offset: var(--focus-offset);
}

/* ---------- Layout ---------- */

.wrap {
  max-width: var(--content-max);
  margin-inline: auto;
  padding-inline: var(--space-4);
}
@media (min-width: 768px) { .wrap { padding-inline: var(--space-6); } }

/* Sektionens lodrette rytme. Fladeskiftet er kanten — der er ingen margin
 * mellem sektioner, kun deres egen polstring. */
.section { padding-block: var(--section-gap); }

/* Sektionshoved: versallabel over stor display-overskrift. */
.section__head { margin-bottom: var(--space-12); }
.section__head .label { display: block; margin-bottom: var(--space-3); }
.section__head h2 { margin: 0; }
.section__head .lead { margin-top: var(--space-6); }

/* ---------- Kontroller ----------
 * Farven kommer fra fladen, ikke fra knappen: hi-vis på mørk, forest på lys.
 * Knappen er kantet — 2px, ikke pille. Teksten er sat i displaysnittet i
 * versaler, så den matcher overskrifterne. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 52px;
  padding: 0 var(--space-8);
  border: 2px solid transparent;
  border-radius: var(--radius-control);
  font-family: var(--font-display);
  font-size: 20px;
  font-weight: var(--weight-bold);
  line-height: 1;
  letter-spacing: .02em;
  text-transform: uppercase;
  white-space: nowrap;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .15s ease, color .15s ease, border-color .15s ease;
}
.btn--primary   { background: var(--cta-fill); color: var(--cta-fg); }
.btn--primary:hover { background: var(--cta-hover); }
.btn--secondary { background: transparent; border-color: var(--cta-text); color: var(--cta-text); }
.btn--secondary:hover { background: var(--cta-text); color: var(--cta-fg); }
.btn--sm    { min-height: 44px; padding: 0 var(--space-6); font-size: 17px; }
.btn--block { width: 100%; }
.btn[disabled], .btn.is-disabled {
  background: var(--disabled-bg);
  border-color: transparent;
  color: var(--disabled-fg);
  cursor: not-allowed;
}

.field { display: flex; flex-direction: column; gap: var(--space-2); }
.field__label {
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--weight-medium);
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--fg-muted);
}
.input {
  min-height: 52px;
  padding: 14px 16px;
  border: 1px solid var(--field-border);
  border-radius: var(--radius-control);
  background: var(--field-bg);
  color: var(--field-fg);
  font-family: var(--font-body);
  font-size: var(--text-base);
  line-height: 1.4;
  width: 100%;
}
textarea.input { min-height: 132px; resize: vertical; }
.input::placeholder { color: var(--field-placeholder); }
.input:focus-visible { border-color: var(--ring); }

/* ---------- Billedobjekter ----------
 * Faste formater. Ingen afrundede hjørner, ingen ramme. */

.frame { position: relative; overflow: hidden; background: var(--forest); }
.frame--portrait { aspect-ratio: 4/5; }
.frame--wide     { aspect-ratio: 3/2; }
.frame--band     { aspect-ratio: 16/9; }
.frame img { width: 100%; height: 100%; object-fit: cover; }

.rule { height: 1px; background: var(--line); border: 0; }

/* ---------- Bevægelse ----------
 * .fade-in styres af sidens IntersectionObserver. Klassenavnet må ikke
 * ændres — JavaScript hænger på det. */
.fade-in {
  opacity: 0;
  transform: translateY(16px);
  transition: opacity .6s ease, transform .6s ease;
}
.fade-in.visible { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .01ms !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
  .fade-in { opacity: 1; transform: none; }
}