/* wa-lint: skip */
/* ==========================================================================
   Base — Reset + Typography
   ========================================================================== */

/* Box-sizing — sikkert universalt; rammer ikke WA's shadow-DOM internals. */
*, *::before, *::after { box-sizing: border-box; }

/* Margin/padding-reset KUN på native HTML-elementer, så Web Awesome
   custom-elements (wa-card, wa-button, wa-callout, wa-dialog, wa-radio,
   wa-tab osv.) IKKE får deres host-element-styling smadret af et universelt
   reset. WA's design-system har egen spacing-cascade som forventer at
   host-elementet kan have margin/padding. */
html, body,
h1, h2, h3, h4,
p, blockquote, pre,
ul, ol, dl, dd,
figure, legend {
  margin: 0;
  padding: 0;
}

html {
  font-size: 16px;
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--nav-height) + var(--space-l));
}

body {
  font-family: var(--font);
  font-weight: var(--fw-regular);
  line-height: 1.6;
  color: var(--text);
  background: var(--surface);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* H1/H2/H3 — kanonisk skala via tokens (FIX R5: konsistens på tværs af
   forsiden, kunder og pakker). Komponent-CSS kan stadig override
   ved behov, men skal nu være eksplicit overrides med god begrundelse. */
h1 {
  line-height: 1.2;
  font-weight: var(--fw-h1, 700);
  letter-spacing: var(--ls-h1, -0.02em);
  color: var(--brand-primary);
  font-size: var(--fs-h1, clamp(36px, 5vw, 52px));
}
h2 {
  line-height: 1.2;
  font-weight: var(--fw-h2, 700);
  letter-spacing: var(--ls-h2, -0.015em);
  color: var(--brand-primary);
  font-size: var(--fs-h2, clamp(26px, 3.4vw, 40px));
}
h3 {
  line-height: 1.25;
  font-weight: var(--fw-h3, 600);
  letter-spacing: var(--ls-h3, -0.01em);
  color: var(--brand-primary);
  font-size: var(--fs-h3, clamp(20px, 2.4vw, 28px));
}
h4 {
  line-height: 1.2;
  font-weight: var(--fw-bold);
  color: var(--brand-primary);
}
h4 { font-size: 1.125rem; }

/* Eyebrow — uppercase mini-label over en sektion. Brug <p class="eyebrow">,
   IKKE <h2>, så struktur og semantik passer (FIX R5: pakker-siden brugte
   tidligere h2 til 13.6px uppercase-eyebrow). */
.eyebrow {
  font-size: var(--fs-xs, 0.72rem);
  font-weight: var(--fw-bold);
  text-transform: uppercase;
  letter-spacing: var(--ls-section, 0.08em);
  color: var(--muted, rgb(94, 110, 118));
  margin: 0 0 var(--space-l);
  line-height: 1.3;
}

p { margin-bottom: var(--space-m); max-width: 65ch; }

/* Default link-styles til prose. :where() har 0 specificity, så enhver
   klasse-baseret komponent (knapper, CTA, navs, footer-links) overruler
   uden at skulle overskrive eksplicit. */
:where(a) { color: var(--brand-primary); text-decoration: none; transition: color var(--transition); }

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

ul, ol { padding-left: var(--space-l); }

/* Brand text */
.brand-light { font-weight: var(--fw-light); }
.brand-bold  { font-weight: var(--fw-bold); color: var(--brand-accent); }

/* Brand icon */
.brand-icon { display: inline-flex; align-items: center; overflow: visible; }
.brand-icon-svg { height: 1.1em; width: auto; flex-shrink: 0; overflow: visible; }
.brand-icon-svg path { fill: var(--brand-primary); opacity: 1; }
.brand-icon-svg path[opacity] { fill: var(--brand-accent); opacity: 1; }

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: var(--space-s);
  padding: 0.75rem 1.5rem;
  border-radius: 6px;
  font-family: var(--font);
  font-weight: var(--fw-semibold);
  font-size: 0.95rem;
  text-decoration: none;
  border: none;
  cursor: pointer;
  transition: all var(--transition);
}

.btn-accent {
  background: var(--brand-accent);
  color: white;
}
.btn-accent:hover {
  background: var(--brand-accent-hover);
  color: white;
}

.btn-outline {
  background: transparent;
  color: var(--brand-primary);
  border: 2px solid var(--brand-primary);
}
.btn-outline:hover {
  background: var(--brand-primary);
  color: white;
}

/* Utility */
.text-muted { color: var(--text-muted); }
.text-center { text-align: center; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }

/* ==========================================================================
   Responsive: Tablet (768px)
   ========================================================================== */
@media (max-width: 768px) {
  /* Ensure button text does not overflow on smaller screens */
  .btn {
    font-size: 0.9rem;
    padding: 0.65rem 1.2rem;
  }
}

/* ==========================================================================
   Responsive: Phone (480px)
   ========================================================================== */
@media (max-width: 480px) {
  /* Typography: ensure readability at 375px */
  h1 { font-size: clamp(1.6rem, 6vw, 2.4rem); }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem); }
  h3 { font-size: clamp(1.05rem, 4vw, 1.3rem); }

  p { margin-bottom: var(--space-s); }

  /* Buttons: full-width on phone for easier tapping */
  .btn {
    font-size: 0.85rem;
    padding: 0.6rem 1rem;
  }
}

/* ── Skip-link — synlig kun ved keyboard-fokus, springer til main ──── */
.skip-link {
  position: absolute;
  top: 0;
  left: 0;
  padding: 12px 20px;
  background: var(--brand-primary, rgb(49, 79, 89));
  color: rgb(255, 255, 255);
  text-decoration: none;
  font-weight: var(--fw-bold);
  font-size: 14px;
  border-radius: 0 0 8px 0;
  transform: translateY(-100%);
  transition: transform .15s ease-out;
  z-index: 10000;
}
.skip-link:focus,
.skip-link:focus-visible {
  transform: translateY(0);
  outline: 3px solid var(--brand-accent, rgb(184, 90, 58));
  outline-offset: 2px;
}