/*
Theme Name:    Græsmarken
Theme URI:     https://bofaellesskabetgraesmarken.dk
Description:   Child theme til Bofællesskabet Græsmarken. Bygger på Hello Elementor. Indeholder designsystem (tokens, typografi, komponenter) og Elementor-overrides. Custom widgets registreres via graesmarken-widgets plugin.
Author:        BuildSupport ApS
Author URI:    https://buildsupport.dk
Template:      hello-elementor
Version:       1.0.0
Text Domain:   graesmarken
Tags:          elementor, child-theme, cohousing
*/

/* =============================================================
   GRÆSMARKEN DESIGNSYSTEM
   Stylesheet til Hello Elementor child theme
   Sproglige noter: kommentarer på dansk, variabler på engelsk.
   Mobile-first. clamp() til alle responsive værdier.
   ============================================================= */


/* ===========================
   0. Lokale fonts (selvhostet)
   ===========================
   Variable woff2-filer hostet i /fonts/. Dækker latin-ext (æ ø å),
   alle vægte 400–700 og italic på Lora. Ingen tredjepart, ingen
   GDPR-bekymring, ingen DNS-lookup til Google.

   font-display: swap — vis system-fallback indtil fonten er hentet.
   format('woff2-variations') — eksplicit format-hint til moderne browsere.

   Filerne kommer fra Fontsource (npm: @fontsource-variable/lora,
   @fontsource-variable/manrope) — den anbefalede vej til selvhostede
   Google Fonts. Licens: SIL Open Font License 1.1. */

@font-face {
  font-family: "Lora";
  src: url("./fonts/lora-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

@font-face {
  font-family: "Lora";
  src: url("./fonts/lora-variable-italic.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: italic;
  font-display: swap;
}

@font-face {
  font-family: "Manrope";
  src: url("./fonts/manrope-variable.woff2") format("woff2-variations");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}


/* ===========================
   1. :root custom properties
   =========================== */

:root {

  /* ---- Farver ----
     Bevidst begrænset palet: 8 farver i alt. Fire grønne nuancer
     som eneste kulør, to varme inks til tekst, to papers som
     baggrund. Visuel varme kommer fra typografi, spacing og
     fotos — ikke fra farveskift. */

  --color-green-900: #1A2A20;   /* mørkeste — headings, inverse-flader */
  --color-green-700: #2E4A34;   /* primær — knapper, links, eyebrow */
  --color-green-300: #93A78C;   /* mos — borders, divider, dæmpet tekst på mørk */
  --color-green-100: #E5ECDF;   /* baggrundsaccent — sektioner, hover-flader */

  --color-ink:        #1F1B14;  /* varm næsten-sort til tekst (lidt brun undertone) */
  --color-ink-soft:   #4A453A;  /* dæmpet body, metadata, hints, placeholders */

  --color-paper:      #F7F2E8;  /* cremehvid — site-baggrund */
  --color-white:      #FFFFFF;  /* rent hvid — kort, kontrastflader */

  /* Semantiske aliaser — brug disse i komponenter, ikke skala-tokens direkte */
  --color-bg:           var(--color-paper);
  --color-bg-card:      var(--color-white);
  --color-bg-accent:    var(--color-green-100);
  --color-bg-inverse:   var(--color-green-900);

  --color-text:         var(--color-ink);
  --color-text-soft:    var(--color-ink-soft);
  --color-text-muted:   var(--color-ink-soft);   /* alias — muted = soft. Ingen separat ton. */
  --color-text-inverse: var(--color-paper);

  --color-heading:      var(--color-green-900);
  --color-link:         var(--color-green-700);
  --color-link-hover:   var(--color-green-900);

  --color-border:       var(--color-green-300);
  --color-border-soft:  color-mix(in oklab, var(--color-green-700) 14%, transparent);
  --color-border-strong:var(--color-green-700);

  --color-btn-bg:       var(--color-green-700);
  --color-btn-text:     var(--color-paper);
  --color-btn-bg-hover: var(--color-green-900);


  /* ---- Typografi ----
     Lora (variabel serif) til headings — humanistisk, varmt, lidt
     klassisk detalje uden at være stiv. Manrope (variabel sans) til
     body — humanistisk geometri, læseligt, varmere end Inter.
     Begge er Google Fonts og enqueues i child theme'et.

     SKALA: bevidst kort. Kun fem niveauer.
       H1     — sidetitel / hero
       H2     — sektion-overskrift
       H3     — underafsnit, kort-titel, citat
       body   — brødtekst
       accent — UPPERCASE label / eyebrow / dato */

  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body:    "Manrope", -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --font-mono:    ui-monospace, "SF Mono", Menlo, Consolas, monospace;

  /* Type-scale — clamp(min, fluid, max). Mobile-first. */
  --fs-h1:     clamp(2.5rem,  1.85rem + 3.25vw, 4rem);       /* 40 → 64 px */
  --fs-h2:     clamp(1.75rem, 1.4rem + 1.75vw,  2.5rem);     /* 28 → 40 px */
  --fs-h3:     clamp(1.25rem, 1.1rem + 0.75vw,  1.5rem);     /* 20 → 24 px */
  --fs-body:   clamp(1rem,    0.96rem + 0.2vw,  1.13rem);    /* 16 → 18 px */
  --fs-accent: clamp(0.75rem, 0.72rem + 0.15vw, 0.81rem);    /* 12 → 13 px (uppercase) */

  /* Line-heights per trin. Tighter på store, åbnere på body. */
  --lh-h1:     1.06;
  --lh-h2:     1.15;
  --lh-h3:     1.3;
  --lh-body:   1.65;
  --lh-accent: 1.4;

  /* Letter-spacing — næsten umærkelig stramning på store; lille åbning på accent */
  --ls-h1:      -0.02em;
  --ls-h2:      -0.015em;
  --ls-h3:      -0.005em;
  --ls-body:    0.005em;
  --ls-accent:  0.14em;        /* uppercase label / eyebrow */

  /* Variable font weights */
  --fw-regular: 400;
  --fw-medium:  500;
  --fw-semibold:600;
  --fw-bold:    700;


  /* ---- Spacing ----
     Modulær skala, ratio ~1.5x. Alle bruger clamp() for responsiv
     skalering — så marginer/padding bliver mindre på mobil uden
     at vi har brug for media queries til finjustering. */

  --space-2xs: clamp(0.25rem, 0.23rem + 0.1vw, 0.31rem);   /* 4 → 5 */
  --space-xs:  clamp(0.5rem,  0.46rem + 0.2vw, 0.63rem);   /* 8 → 10 */
  --space-sm:  clamp(0.75rem, 0.68rem + 0.35vw, 1rem);     /* 12 → 16 */
  --space-md:  clamp(1.13rem, 1rem + 0.65vw, 1.5rem);      /* 18 → 24 */
  --space-lg:  clamp(1.75rem, 1.5rem + 1.25vw, 2.5rem);    /* 28 → 40 */
  --space-xl:  clamp(2.5rem,  2rem + 2.5vw,    4rem);      /* 40 → 64 */
  --space-2xl: clamp(4rem,    3rem + 5vw,      7rem);      /* 64 → 112 */
  --space-3xl: clamp(6rem,    4rem + 10vw,     11rem);     /* 96 → 176 */


  /* ---- Border-radius ----
     Blød ensartet rundhed. Symmetrisk på alle hjørner.
     Tre størrelser: sm til chips/inline-elementer, md til
     knapper og inputs, lg til kort og store flader.

     STRATEGI mod Elementor: kun én radius-værdi pr. token,
     defineret som en enkelt længde. Det er Elementor-sikkert
     både som shorthand og per-hjørne. Per-hjørne foretrækkes
     defensivt, så strukturen er klar hvis vi nogensinde tilføjer
     en accent på ét hjørne. */

  --radius-sm: 4px;
  --radius-md: 10px;
  --radius-lg: 14px;

  /* Tilsvarende per-hjørne tokens (symmetriske — bruges defensivt) */
  --radius-tl-sm: var(--radius-sm); --radius-tr-sm: var(--radius-sm);
  --radius-br-sm: var(--radius-sm); --radius-bl-sm: var(--radius-sm);
  --radius-tl-md: var(--radius-md); --radius-tr-md: var(--radius-md);
  --radius-br-md: var(--radius-md); --radius-bl-md: var(--radius-md);
  --radius-tl-lg: var(--radius-lg); --radius-tr-lg: var(--radius-lg);
  --radius-br-lg: var(--radius-lg); --radius-bl-lg: var(--radius-lg);

  /* Inputs bruger md som default */
  --radius-input: var(--radius-md);
  --radius-pill:  999px;
  --radius-full:  50%;


  /* ---- Shadows ----
     Minimalt og varmt. Grønlig/varm undertone snarere end neutral grå.
     Bygger på samme RGB som --color-green-900, ikke #000. */

  --shadow-sm: 0 1px 2px rgba(26, 42, 32, 0.06),
               0 1px 1px rgba(26, 42, 32, 0.04);

  --shadow-md: 0 4px 12px rgba(26, 42, 32, 0.08),
               0 2px 4px rgba(26, 42, 32, 0.05);

  --shadow-lg: 0 18px 38px rgba(26, 42, 32, 0.14),
               0 8px 14px rgba(26, 42, 32, 0.06);

  --shadow-inset: inset 0 0 0 1px rgba(46, 74, 52, 0.08);


  /* ---- Borders ---- */
  --border-width-hairline: 1px;
  --border-width-regular:  1.5px;
  --border-width-emphasis: 2px;

  --border-card:     var(--border-width-hairline) solid var(--color-border-soft);
  --border-input:    var(--border-width-regular)  solid var(--color-border);
  --border-divider:  var(--border-width-hairline) solid var(--color-border-soft);


  /* ---- Transitions ---- */
  --ease-out:   cubic-bezier(0.22, 0.61, 0.36, 1);
  --ease-in:    cubic-bezier(0.55, 0.06, 0.68, 0.19);
  --ease-inout: cubic-bezier(0.65, 0.05, 0.36, 1);

  --dur-fast:   140ms;
  --dur-base:   220ms;
  --dur-slow:   400ms;

  --tr-base: all var(--dur-base) var(--ease-out);


  /* ---- Z-index ---- */
  --z-base:     1;
  --z-raised:   10;
  --z-sticky:   100;
  --z-overlay:  500;
  --z-modal:    1000;
  --z-toast:    2000;


  /* ---- Layout ---- */
  --container-max:        1200px;
  --container-narrow-max:  720px;
  --container-wide-max:   1440px;
  --container-padding-x:  clamp(1rem, 2.5vw + 0.5rem, 2.5rem);
}


/* ===========================
   2. Reset / base styles
   =========================== */

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

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}

body {
  margin: 0;
  background-color: var(--color-bg);
  color: var(--color-text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-regular);
  line-height: var(--lh-body);
  letter-spacing: var(--ls-body);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, picture, svg, video {
  display: block;
  max-width: 100%;
  height: auto;
}

h1, h2, h3, h4, h5, h6 {
  margin: 0 0 var(--space-sm) 0;
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-h1); letter-spacing: var(--ls-h1); }
h2 { font-size: var(--fs-h2); line-height: var(--lh-h2); letter-spacing: var(--ls-h2); }
h3, h4, h5, h6 {
  /* H4–H6 falder tilbage til H3 — systemet bruger kun H1/H2/H3.
     De findes på brønden for sem antik HTML-struktur, men styles ens. */
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
}

p {
  margin: 0 0 var(--space-md) 0;
  text-wrap: pretty;
  max-width: 65ch;
}

/* Accent — UPPERCASE label / eyebrow / dato / kategorimærker.
   Det femte og sidste niveau i typeskalaen. */
.accent, .eyebrow {
  display: inline-block;
  font-family: var(--font-body);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-accent);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--color-green-700);
}

a {
  color: var(--color-link);
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.18em;
  text-decoration-color: color-mix(in oklab, var(--color-link) 35%, transparent);
  transition: color var(--dur-fast) var(--ease-out),
              text-decoration-color var(--dur-fast) var(--ease-out);
}
a:hover { color: var(--color-link-hover); text-decoration-color: currentColor; }
a:focus-visible {
  outline: 2px solid var(--color-green-700);
  outline-offset: 3px;
  border-radius: 2px;
}

::selection { background: var(--color-green-700); color: var(--color-paper); }

hr {
  border: 0;
  border-top: var(--border-divider);
  margin: var(--space-lg) 0;
}

ul, ol { margin: 0 0 var(--space-md) 0; padding-left: 1.25em; }
li + li { margin-top: var(--space-2xs); }

blockquote { margin: 0; }

code, kbd, samp {
  font-family: var(--font-mono);
  font-size: 0.92em;
  background: var(--color-bg-accent);
  padding: 0.1em 0.35em;
  border-top-left-radius: var(--radius-tl-sm);
  border-bottom-right-radius: var(--radius-br-sm);
}
pre {
  font-family: var(--font-mono);
  font-size: var(--fs-body);
  background: var(--color-green-900);
  color: var(--color-paper);
  padding: var(--space-md);
  overflow-x: auto;
  border-top-left-radius: var(--radius-tl-md);
  border-top-right-radius: var(--radius-tr-md);
  border-bottom-right-radius: var(--radius-br-md);
  border-bottom-left-radius: var(--radius-bl-md);
}
pre code { background: transparent; padding: 0; }


/* ===========================
   3. Layout utilities
   =========================== */

.container {
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--container-padding-x);
}
.container--narrow { max-width: var(--container-narrow-max); }
.container--wide   { max-width: var(--container-wide-max); }
.container--bleed  { max-width: none; padding-inline: 0; }

.section {
  padding-block: var(--space-2xl);
}
.section--tight { padding-block: var(--space-xl); }
.section--loose { padding-block: var(--space-3xl); }

.section--accent { background-color: var(--color-bg-accent); }
.section--inverse {
  background-color: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}
.section--inverse h1, .section--inverse h2, .section--inverse h3,
.section--inverse h4, .section--inverse h5 { color: var(--color-paper); }
.section--inverse h6 { color: var(--color-green-300); }
.section--inverse a  { color: var(--color-green-300); }
.section--inverse a:hover { color: var(--color-paper); }

/* Stack — vertikal flow med konsistent gap */
.stack       { display: flex; flex-direction: column; gap: var(--space-md); }
.stack--xs   { gap: var(--space-xs); }
.stack--sm   { gap: var(--space-sm); }
.stack--lg   { gap: var(--space-lg); }
.stack--xl   { gap: var(--space-xl); }

/* Cluster — vandret med wrap */
.cluster     { display: flex; flex-wrap: wrap; gap: var(--space-sm); align-items: center; }
.cluster--md { gap: var(--space-md); }
.cluster--lg { gap: var(--space-lg); }

/* Grid — auto-fit responsivt */
.grid          { display: grid; gap: var(--space-md); }
.grid--2       { grid-template-columns: repeat(auto-fit, minmax(min(100%, 16rem), 1fr)); }
.grid--3       { grid-template-columns: repeat(auto-fit, minmax(min(100%, 14rem), 1fr)); }
.grid--4       { grid-template-columns: repeat(auto-fit, minmax(min(100%, 11rem), 1fr)); }
.grid--gap-lg  { gap: var(--space-lg); }
.grid--gap-xl  { gap: var(--space-xl); }

/* Split — to kolonner med eksplicit ratio på desktop */
.split {
  display: grid;
  gap: var(--space-lg);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .split            { grid-template-columns: 1fr 1fr; }
  .split--7-5       { grid-template-columns: 7fr 5fr; }
  .split--5-7       { grid-template-columns: 5fr 7fr; }
}

/* Center — for hero-tekst */
.center-text { text-align: center; }
.center-text p, .center-text .lead { margin-inline: auto; }

/* Flow — sætter konsistent rytme mellem alle direkte børn */
.flow > * + * { margin-top: var(--space-md); }
.flow--tight > * + * { margin-top: var(--space-sm); }
.flow--loose > * + * { margin-top: var(--space-lg); }


/* ===========================
   4. Komponenter
   =========================== */

/* ---- Eyebrow ----
   Den dedikerede eyebrow-komponent over headings. Bruger samme
   visuelle stil som .accent, plus en valgfri vandret streg. */
.eyebrow {
  margin-bottom: var(--space-sm);
}
.eyebrow--with-rule {
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}
.eyebrow--with-rule::before {
  content: "";
  display: inline-block;
  width: 1.75rem;
  height: 2px;
  background: var(--color-green-700);
}


/* ---- Section header ----
   Eyebrow + heading + valgfri lead. Bruges som ankerelement
   øverst i sektioner — etablerer hierarki uden støj. */
.section-header { max-width: 50rem; margin-bottom: var(--space-xl); }
.section-header__eyebrow { margin-bottom: var(--space-sm); }
.section-header__title   { margin-bottom: var(--space-sm); }
.section-header__lead    { color: var(--color-text-soft); font-size: var(--fs-body); line-height: var(--lh-body); max-width: 50ch; margin: 0; }
.section-header--center  { margin-inline: auto; text-align: center; }
.section-header--center .section-header__lead { margin-inline: auto; }


/* ---- Knapper ----
   Tre varianter: primary, secondary (ghost), tekst-link.
   Asymmetrisk radius i alle. Per-hjørne properties — aldrig shorthand. */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: 0.005em;
  padding: 0.95em 1.6em;
  border: var(--border-width-regular) solid transparent;
  border-top-left-radius: var(--radius-tl-md);
  border-top-right-radius: var(--radius-tr-md);
  border-bottom-right-radius: var(--radius-br-md);
  border-bottom-left-radius: var(--radius-bl-md);
  cursor: pointer;
  text-decoration: none;
  transition: var(--tr-base);
  user-select: none;
  white-space: nowrap;
}
.btn:focus-visible {
  outline: 3px solid var(--color-green-300);
  outline-offset: 2px;
}

.btn--primary {
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-color: var(--color-btn-bg);
}
.btn--primary:hover {
  background-color: var(--color-btn-bg-hover);
  border-color: var(--color-btn-bg-hover);
  color: var(--color-paper);
  transform: translateY(-1px);
  box-shadow: var(--shadow-md);
}
.btn--primary:active { transform: translateY(0); box-shadow: var(--shadow-sm); }

.btn--secondary {
  background-color: transparent;
  color: var(--color-green-900);
  border-color: var(--color-green-700);
}
.btn--secondary:hover {
  background-color: var(--color-green-700);
  color: var(--color-paper);
}

.btn--ghost {
  background-color: transparent;
  color: var(--color-green-900);
  border-color: transparent;
  padding-inline: var(--space-sm);
}
.btn--ghost:hover {
  background-color: var(--color-bg-accent);
  color: var(--color-green-900);
}

.btn--text {
  background: transparent;
  border-color: transparent;
  color: var(--color-green-700);
  padding: 0;
  font-weight: var(--fw-semibold);
  text-decoration: underline;
  text-underline-offset: 0.25em;
  text-decoration-thickness: 1.5px;
  text-decoration-color: color-mix(in oklab, var(--color-green-700) 30%, transparent);
}
.btn--text:hover {
  color: var(--color-green-900);
  text-decoration-color: currentColor;
}

.btn--sm { padding: 0.7em 1.1em; font-size: var(--fs-body); }
.btn--lg { padding: 1.1em 1.9em; font-size: var(--fs-body); }

.btn[disabled], .btn--disabled {
  opacity: 0.55;
  pointer-events: none;
  cursor: not-allowed;
}


/* ---- Links — komponentvariant ----
   Standardlinks håndteres af 'a' i base. Denne klasse er
   til "arrow links" — typisk i kort eller efter en sektion. */
.link-arrow {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  color: var(--color-green-700);
  font-weight: var(--fw-semibold);
  text-decoration: none;
  letter-spacing: 0.01em;
}
.link-arrow__icon {
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-out);
}
.link-arrow:hover { color: var(--color-green-900); }
.link-arrow:hover .link-arrow__icon { transform: translateX(4px); }


/* ---- Kort ----
   Generisk kort. Bruges til nyheder, fakta-bokse, hus-til-salg, m.m.
   Hvid baggrund mod cremehvid sidebaggrund — kontrasten gør
   kortet til en "lille ø". */

.card {
  background-color: var(--color-bg-card);
  border: var(--border-card);
  border-top-left-radius: var(--radius-tl-lg);
  border-top-right-radius: var(--radius-tr-lg);
  border-bottom-right-radius: var(--radius-br-lg);
  border-bottom-left-radius: var(--radius-bl-lg);
  padding: var(--space-lg);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  transition: var(--tr-base);
}
.card:hover {
  box-shadow: var(--shadow-md);
  transform: translateY(-2px);
  border-color: var(--color-green-300);
}

.card__eyebrow {
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--color-green-700);
}
.card__title {
  font-size: var(--fs-h3);
  line-height: var(--lh-h3);
  letter-spacing: var(--ls-h3);
  font-family: var(--font-heading);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  margin: 0;
}
.card__body  { color: var(--color-text-soft); margin: 0; }
.card__meta  { font-size: var(--fs-body); color: var(--color-text-muted); }
.card__footer{ margin-top: auto; padding-top: var(--space-sm); }

.card__media {
  margin: calc(var(--space-lg) * -1) calc(var(--space-lg) * -1) 0;
  /* Klipper billedet til kortets øverste hjørner */
  overflow: hidden;
  border-top-left-radius: var(--radius-tl-lg);
  border-top-right-radius: var(--radius-tr-lg);
}
.card__media img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }

.card--accent {
  background-color: var(--color-bg-accent);
  border-color: transparent;
}
.card--inverse {
  background-color: var(--color-green-900);
  color: var(--color-paper);
  border-color: transparent;
}
.card--inverse .card__title { color: var(--color-paper); }
.card--inverse .card__body  { color: var(--color-green-300); }
.card--inverse .card__eyebrow { color: var(--color-green-300); }

.card--feature {
  padding: var(--space-xl);
}


/* ---- Citatblok / Pull quote ----
   Stor serif, lidt italic, med "indrykning" via grøn vertikal streg.
   Til citater fra beboere og initiativtagere. */

.quote {
  position: relative;
  padding: var(--space-md) 0 var(--space-md) var(--space-lg);
  border-left: 3px solid var(--color-green-700);
  max-width: 50rem;
}
.quote__text {
  font-family: var(--font-heading);
  font-size: clamp(1.31rem, 1.05rem + 1.3vw, 1.88rem);  /* 21 → 30 */
  line-height: 1.35;
  font-style: italic;
  font-weight: var(--fw-regular);
  letter-spacing: -0.005em;
  color: var(--color-green-900);
  text-wrap: balance;
  margin: 0 0 var(--space-md) 0;
}
.quote__cite {
  display: block;
  font-family: var(--font-body);
  font-style: normal;
  font-size: var(--fs-body);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--color-green-700);
  font-weight: var(--fw-semibold);
}
.quote__cite::before { content: "— "; }

.quote--feature {
  padding: var(--space-xl);
  background: var(--color-bg-accent);
  border-left: none;
  border-top-left-radius: var(--radius-tl-lg);
  border-top-right-radius: var(--radius-tr-lg);
  border-bottom-right-radius: var(--radius-br-lg);
  border-bottom-left-radius: var(--radius-bl-lg);
}


/* ---- Tidslinje ----
   Vertikal tidslinje til historie-siden (2004 → 2012).
   Datoer venstre, "knude" på linjen, indhold højre. */

.timeline {
  position: relative;
  padding-left: var(--space-xl);
  margin: 0;
  list-style: none;
}
.timeline::before {
  /* Den vertikale linje */
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 0.5rem;
  bottom: 0.5rem;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--color-green-300) 0%,
    var(--color-green-700) 40%,
    var(--color-green-700) 60%,
    var(--color-green-300) 100%
  );
}
.timeline__item {
  position: relative;
  padding-bottom: var(--space-xl);
}
.timeline__item:last-child { padding-bottom: 0; }

.timeline__item::before {
  /* Knuden — lille cirkel på linjen */
  content: "";
  position: absolute;
  left: calc(0.5rem - 6px);
  top: 0.65em;
  width: 14px;
  height: 14px;
  border-radius: var(--radius-full);
  background: var(--color-paper);
  border: 2.5px solid var(--color-green-700);
}
.timeline__year {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-green-700);
  line-height: 1.2;
  margin-bottom: var(--space-2xs);
}
.timeline__title {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-heading);
  line-height: var(--lh-h3);
  margin: 0 0 var(--space-xs) 0;
}
.timeline__body {
  color: var(--color-text-soft);
  margin: 0;
  max-width: 50ch;
}


/* ---- Inputs ----
   Bruges i Elementor Forms og custom. .form-field er wrapperen,
   .form-field__label labelen, .form-field__input selve inputtet. */

.form-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-2xs);
}
.form-field__label {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-semibold);
  color: var(--color-green-900);
  letter-spacing: 0.01em;
}
.form-field__hint {
  font-size: var(--fs-accent);
  color: var(--color-text-muted);
}
.form-field__input,
.form-field__textarea,
.form-field__select {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--color-ink);
  background-color: var(--color-white);
  border: var(--border-input);
  border-radius: var(--radius-input);
  padding: 0.7em 0.9em;
  transition: var(--tr-base);
  width: 100%;
  font-feature-settings: "ss01";
}
.form-field__textarea { min-height: 7em; resize: vertical; }
.form-field__input:focus,
.form-field__textarea:focus,
.form-field__select:focus {
  outline: none;
  border-color: var(--color-green-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-green-700) 18%, transparent);
}
.form-field__input::placeholder,
.form-field__textarea::placeholder {
  color: var(--color-text-muted);
  opacity: 1;
}

/* Checkbox / radio */
.form-check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-sm);
  cursor: pointer;
  font-size: var(--fs-body);
  line-height: 1.5;
}
.form-check__input {
  appearance: none;
  width: 1.25em;
  height: 1.25em;
  margin: 0.2em 0 0;
  border: var(--border-width-regular) solid var(--color-green-700);
  background-color: var(--color-white);
  cursor: pointer;
  flex-shrink: 0;
  transition: var(--tr-base);
  border-radius: var(--radius-input);
}
.form-check__input[type="radio"] { border-radius: var(--radius-full); }
.form-check__input:checked {
  background-color: var(--color-green-700);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath d='M3.5 8.5l3 3 6-7' stroke='%23F7F2E8' stroke-width='2.2' fill='none' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: 80% 80%;
  background-position: center;
  background-repeat: no-repeat;
}
.form-check__input:focus-visible {
  outline: 3px solid var(--color-green-300);
  outline-offset: 2px;
}


/* ---- Navigation ----
   Header med menu. Mobile-burger til < 768px.
   Skal kunne overskrive Hello Elementor's defaults uden !important. */

.site-header {
  position: sticky;
  top: 0;
  z-index: var(--z-sticky);
  background-color: var(--color-paper);
  border-bottom: var(--border-divider);
  backdrop-filter: saturate(140%) blur(8px);
}
.site-header__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-lg);
  padding-block: var(--space-sm);
}
.site-header__brand {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  font-weight: var(--fw-semibold);
  color: var(--color-green-900);
  text-decoration: none;
  letter-spacing: -0.01em;
  line-height: 1;
}
.site-header__brand small {
  display: block;
  font-family: var(--font-body);
  font-size: var(--fs-accent);
  font-weight: var(--fw-medium);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--color-green-700);
  margin-top: 2px;
}
.site-nav {
  display: flex;
  align-items: center;
  gap: var(--space-md);
}
.site-nav__link {
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--fw-medium);
  color: var(--color-ink);
  text-decoration: none;
  padding: var(--space-xs) var(--space-sm);
  border-top-left-radius: var(--radius-tl-sm);
  border-bottom-right-radius: var(--radius-br-sm);
  transition: var(--tr-base);
}
.site-nav__link:hover,
.site-nav__link[aria-current="page"] {
  background: var(--color-bg-accent);
  color: var(--color-green-900);
}
.site-nav__toggle {
  display: none;
  background: none;
  border: none;
  cursor: pointer;
  padding: var(--space-xs);
  color: var(--color-green-900);
}
@media (max-width: 768px) {
  .site-nav {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-paper);
    padding: var(--space-md);
    border-bottom: var(--border-divider);
    gap: var(--space-xs);
  }
  .site-nav[data-open="true"] { display: flex; }
  .site-nav__toggle { display: inline-flex; }
}


/* ---- Footer ---- */
.site-footer {
  background-color: var(--color-green-900);
  color: var(--color-paper);
  padding-block: var(--space-2xl);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
}
.site-footer__grid {
  display: grid;
  gap: var(--space-xl);
  grid-template-columns: 1fr;
}
@media (min-width: 768px) {
  .site-footer__grid { grid-template-columns: 1.4fr 1fr 1fr 1fr; }
}
.site-footer__brand {
  font-family: var(--font-heading);
  font-size: var(--fs-h3);
  color: var(--color-paper);
  margin: 0 0 var(--space-sm) 0;
  font-weight: var(--fw-semibold);
}
.site-footer__heading {
  font-family: var(--font-body);
  font-size: var(--fs-accent);
  font-weight: var(--fw-semibold);
  letter-spacing: var(--ls-accent);
  text-transform: uppercase;
  color: var(--color-green-300);
  margin: 0 0 var(--space-sm) 0;
}
.site-footer__list { list-style: none; padding: 0; margin: 0; }
.site-footer__list li + li { margin-top: var(--space-2xs); }
.site-footer__list a { color: var(--color-paper); text-decoration: none; opacity: 0.85; }
.site-footer__list a:hover { opacity: 1; text-decoration: underline; }
.site-footer__legal {
  margin-top: var(--space-xl);
  padding-top: var(--space-md);
  border-top: 1px solid color-mix(in oklab, var(--color-green-300) 30%, transparent);
  color: var(--color-green-300);
  font-size: var(--fs-accent);
}


/* ---- Divider — dekorativ ----
   Lille grøn streg til at adskille undersektioner. */
.divider {
  width: 3rem;
  height: 2px;
  background: var(--color-green-700);
  margin: var(--space-md) 0;
  border: 0;
}
.divider--center { margin-inline: auto; }


/* ===========================
   5. Utility classes
   =========================== */

/* Tekst */
.u-text-center { text-align: center; }
.u-text-right  { text-align: right; }
.u-text-soft   { color: var(--color-text-soft); }
.u-text-muted  { color: var(--color-text-muted); }
.u-text-inverse{ color: var(--color-text-inverse); }
.u-text-green  { color: var(--color-green-700); }
.u-uppercase   { text-transform: uppercase; letter-spacing: var(--ls-accent); }
.u-balance     { text-wrap: balance; }
.u-pretty      { text-wrap: pretty; }

/* Display */
.u-hidden        { display: none; }
.u-block         { display: block; }
.u-inline-block  { display: inline-block; }
.u-flex          { display: flex; }
.u-grid          { display: grid; }
.u-sr-only {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* Margin top — flow override */
.u-mt-0   { margin-top: 0; }
.u-mt-xs  { margin-top: var(--space-xs); }
.u-mt-sm  { margin-top: var(--space-sm); }
.u-mt-md  { margin-top: var(--space-md); }
.u-mt-lg  { margin-top: var(--space-lg); }
.u-mt-xl  { margin-top: var(--space-xl); }
.u-mt-2xl { margin-top: var(--space-2xl); }

/* Margin bottom */
.u-mb-0   { margin-bottom: 0; }
.u-mb-xs  { margin-bottom: var(--space-xs); }
.u-mb-sm  { margin-bottom: var(--space-sm); }
.u-mb-md  { margin-bottom: var(--space-md); }
.u-mb-lg  { margin-bottom: var(--space-lg); }
.u-mb-xl  { margin-bottom: var(--space-xl); }

/* Padding */
.u-p-md   { padding: var(--space-md); }
.u-p-lg   { padding: var(--space-lg); }
.u-p-xl   { padding: var(--space-xl); }
.u-py-md  { padding-block: var(--space-md); }
.u-py-lg  { padding-block: var(--space-lg); }
.u-py-xl  { padding-block: var(--space-xl); }

/* Gap */
.u-gap-xs { gap: var(--space-xs); }
.u-gap-sm { gap: var(--space-sm); }
.u-gap-md { gap: var(--space-md); }
.u-gap-lg { gap: var(--space-lg); }
.u-gap-xl { gap: var(--space-xl); }

/* Baggrund */
.u-bg-paper   { background-color: var(--color-paper); }
.u-bg-white   { background-color: var(--color-white); }
.u-bg-accent  { background-color: var(--color-bg-accent); }
.u-bg-inverse { background-color: var(--color-bg-inverse); color: var(--color-text-inverse); }

/* Border-radius signatur — udelukkende per-hjørne. */
.u-radius-sm {
  border-top-left-radius: var(--radius-tl-sm);
  border-top-right-radius: var(--radius-tr-sm);
  border-bottom-right-radius: var(--radius-br-sm);
  border-bottom-left-radius: var(--radius-bl-sm);
}
.u-radius-md {
  border-top-left-radius: var(--radius-tl-md);
  border-top-right-radius: var(--radius-tr-md);
  border-bottom-right-radius: var(--radius-br-md);
  border-bottom-left-radius: var(--radius-bl-md);
}
.u-radius-lg {
  border-top-left-radius: var(--radius-tl-lg);
  border-top-right-radius: var(--radius-tr-lg);
  border-bottom-right-radius: var(--radius-br-lg);
  border-bottom-left-radius: var(--radius-bl-lg);
}

/* Shadows */
.u-shadow-sm { box-shadow: var(--shadow-sm); }
.u-shadow-md { box-shadow: var(--shadow-md); }
.u-shadow-lg { box-shadow: var(--shadow-lg); }


/* ===========================
   6. Elementor overrides (få og dokumenterede)
   ===========================
   Hello Elementor og Elementor Pro har defaults der skal afkobles
   så designsystemet vinder. Vi undgår !important hvor muligt ved
   at matche eller overgå specificity. */

/* Elementor knapper — match vores .btn */
.elementor-button.elementor-button {
  font-family: var(--font-body);
  font-weight: var(--fw-semibold);
  background-color: var(--color-btn-bg);
  color: var(--color-btn-text);
  border-top-left-radius: var(--radius-tl-md);
  border-top-right-radius: var(--radius-tr-md);
  border-bottom-right-radius: var(--radius-br-md);
  border-bottom-left-radius: var(--radius-bl-md);
  transition: var(--tr-base);
}
.elementor-button.elementor-button:hover {
  background-color: var(--color-btn-bg-hover);
  color: var(--color-paper);
}

/* Elementor headings — sikrer korrekt font og farve */
.elementor-heading-title {
  font-family: var(--font-heading);
  color: var(--color-heading);
}

/* Elementor Forms — input-styling */
.elementor-field-group .elementor-field,
.elementor-field-textual {
  font-family: var(--font-body);
  border: var(--border-input);
  background-color: var(--color-white);
  border-radius: var(--radius-input);
  color: var(--color-ink);
}
.elementor-field-group .elementor-field:focus,
.elementor-field-textual:focus {
  border-color: var(--color-green-700);
  box-shadow: 0 0 0 3px color-mix(in oklab, var(--color-green-700) 18%, transparent);
}