/* ==========================================================================
   Typografi — ETVA V2 canon (Magne Skrift.pdf)
   Tre fonte: Barlow Condensed (heading/body), Bungee (eyebrow), Caveat (citat)
   ========================================================================== */

@import url('https://fonts.googleapis.com/css2?family=Barlow+Condensed:ital,wght@0,300;0,400;0,500;0,600;0,700;0,800;1,300;1,400;1,600&family=Bungee&family=Caveat:wght@400;500;700&family=Source+Sans+3:ital,wght@0,300;0,400;0,500;0,600;0,700;1,300;1,400&display=swap');

/* --- Base ---------------------------------------------------------------- */

body {
  background-color: hsl(var(--background));
  color: hsl(var(--foreground));
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: 1.1875rem; /* 19px */
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

p, li {
  font-weight: 300;
}

/* --- Overskrifter -------------------------------------------------------- */

h1, h2, h3, h4 {
  font-family: 'Barlow Condensed', sans-serif;
  color: hsl(var(--foreground));
}

h1 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.02;
}

h2 {
  font-size: clamp(2.5rem, 5vw, 3.5rem);
  font-weight: 600;
  letter-spacing: -0.018em;
  line-height: 1.02;
}

h3 {
  font-size: clamp(1.25rem, 2.2vw, 1.625rem);
  font-weight: 600;
  letter-spacing: -0.005em;
  line-height: 1.25;
}

h4 {
  font-size: 1.125rem;
  font-weight: 600;
  letter-spacing: 0;
  line-height: 1.3;
}

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

p {
  max-width: 62ch;
  color: hsl(var(--navy-text));
}
p + p { margin-top: 1.125rem; }

/* --- Blockquote (bare element) ------------------------------------------ */

blockquote {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-style: normal;
  font-size: clamp(1.5rem, 2.8vw, 1.875rem);
  line-height: 1.35;
  color: hsl(var(--lilla));
}

/* --- Quote-system (.quote + modifiers) ----------------------------------
   Markup-konvention:
   <figure class="quote-figure">
     <blockquote class="quote quote--feature">Tekst</blockquote>
     <figcaption class="quote-attr">Navn</figcaption>
   </figure>
   Anførselstegn sættes automatisk via ::before / ::after.
   -------------------------------------------------------------------- */

.quote-figure { margin: 0; max-width: 44ch; }
p + .quote-figure,
p + .quote { margin-top: 5rem; }

.quote {
  font-family: 'Caveat', cursive;
  font-weight: 500;
  font-style: normal;
  line-height: 1.35;
  color: hsl(var(--lilla));
  margin: 0;
  quotes: "\201C" "\201D" "\2018" "\2019";
}
.quote::before { content: open-quote; }
.quote::after  { content: close-quote; }

.quote--feature { font-size: clamp(1.625rem, 2.8vw, 1.875rem); max-width: 44ch; }
.quote--default { font-size: clamp(1.375rem, 2vw, 1.5rem); max-width: 48ch; }
.quote--card    { font-size: 1.25rem; line-height: 1.3; max-width: none; }

.quote--blue   { color: hsl(var(--blaa)); }
.quote--invert { color: hsl(var(--white)); }

.quote--bordered {
  padding-left: 1.5rem;
  border-left: 3px solid currentColor;
}

/* Attribution */
.quote-attr {
  display: block;
  margin-top: 1rem;
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 500;
  font-style: normal;
  font-size: 0.875rem;
  letter-spacing: 0.04em;
  color: hsl(var(--warm-gray));
}
.quote-attr::before { content: "— "; }
.quote--invert ~ .quote-attr,
.section-dark .quote-attr { color: hsl(var(--white) / 0.7); }

/* --- Eyebrow ------------------------------------------------------------ */

.eyebrow {
  font-family: 'Bungee', system-ui, sans-serif;
  font-size: 0.8125rem;
  font-weight: 400;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  line-height: 1.2;
  color: hsl(var(--lilla));
}
.eyebrow--blue   { color: hsl(var(--blaa)); }
.eyebrow--orange { color: hsl(var(--orange)); }
.eyebrow--purple { color: hsl(var(--lilla)); }
.eyebrow--invert { color: hsl(var(--white)); }

/* --- Label -------------------------------------------------------------- */

.label {
  font-family: 'Barlow Condensed', sans-serif;
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: hsl(var(--warm-gray));
}

/* --- Intro / lead ------------------------------------------------------- */

.hero-lead,
.section-intro {
  font-family: 'Barlow Condensed', sans-serif;
  font-weight: 300;
  font-size: clamp(1.25rem, 2vw, 1.5rem);
  line-height: 1.3;
  color: hsl(var(--foreground));
}

/* --- Highlight (orange accent på lys, hvid på blåt bånd) ---------------- */

.hl-color { color: hsl(var(--orange)); }
.section-band-blue .hl-color,
.site-nav .hl-color { color: hsl(var(--white)); }