/* ==========================================================================
   Lederskaber — styles.css  (mobil-først, semantisk, AA-kontrast)
   ========================================================================== */

/* ==========================================================================
   Design tokens (inlined from tokens.css to remove a render-blocking
   @import chain - styles.css and tokens.css were two serial requests before
   the browser could apply any styles. tokens.css itself is left on disk
   unchanged/unlinked; if it's edited going forward, mirror the change here
   too, or delete it later to avoid the two files drifting apart.
   Rolig 3-farvers palet: varmt papir + dyb varm blæk + én salvie-accent
   (afledt af det eksisterende blad-logo). Alle tekst/baggrunds-par opfylder
   WCAG AA (≥ 4.5:1 for brødtekst).
   ========================================================================== */

:root {
  /* Farver */
  --bg:          #FAF8F2;  /* varmt papir */
  --bg-tint:     #EFF1E6;  /* svag salvie-tone til skiftende sektioner */
  --surface:     #FFFFFF;
  --ink:         #262B21;  /* nær-sort, let varm — 13.9:1 på --bg */
  --ink-soft:    #4C5244;  /* 7.4:1 på --bg */
  --accent:      #5C7857;  /* dæmpet salvie (knapper, store flader) */
  --accent-ink:  #3B5237;  /* mørk salvie til links/tekst — 6.7:1 på --bg */
  --accent-soft: #DDE4D4;  /* svag salvie til markeringer */
  --accent-2:    #A85A3E;  /* dæmpet terrakotta — sekundær handling på mørk flade */
  --accent-2-ink:#8E4A32;
  --green-deep:  #2F3D29;  /* rolig dyb grøn — footer + mørkt priskort */
  --on-dark:     #F3F1E9;  /* tekst på dyb grøn */
  --on-dark-soft:#C6CFBA;  /* dæmpet tekst på dyb grøn */
  --line:        #E5E0D2;
  --error:       #A6452C;  /* fejlmeldinger — 5.6:1 på hvid */
  --ok:          #3B5237;
  --draft-highlight-bg: #FDE68A;  /* redaktionel kladdemarkering — "gul markering" for ufærdigt indhold */
  --draft-highlight-ink: #262B21; /* tekst oven på --draft-highlight-bg — matcher --ink */

  /* Typografi — to familier, systemstakke (ingen webfont-payload).
     Display-serif bærer det rolige, personlige udtryk; sans til brødtekst/UI. */
  --font-display: "Iowan Old Style", "Palatino Linotype", Palatino,
                  "Book Antiqua", Georgia, "Times New Roman", serif;
  --font-sans:    "Seravek", "Gill Sans Nova", system-ui, -apple-system,
                  "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-body:    var(--font-sans);

  /* Flydende typeskala */
  --step--1: clamp(.875rem, .85rem + .15vw, .95rem);
  --step-0:  clamp(1.0625rem, 1rem + .25vw, 1.1875rem);  /* ≥17px brødtekst */
  --step-1:  clamp(1.25rem, 1.15rem + .5vw, 1.5rem);
  --step-2:  clamp(1.6rem, 1.4rem + 1vw, 2.2rem);
  --step-3:  clamp(2.1rem, 1.7rem + 2.2vw, 3.4rem);

  /* Rytme */
  --space-1: .5rem;
  --space-2: 1rem;
  --space-3: 1.5rem;
  --space-4: 2.5rem;
  --space-5: 4.5rem;
  --space-6: 6.5rem;

  --measure: 65ch;
  --radius:  16px;
  --radius-s: 10px;
  --maxw:    72rem;
  --shadow:  0 1px 2px rgba(38, 43, 33, .05), 0 10px 30px rgba(38, 43, 33, .07);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--step-0);
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
  font-family: var(--font-display);
  font-weight: 600;
  line-height: 1.15;
  color: var(--ink);
  margin: 0 0 var(--space-2);
  text-wrap: balance;
}
h1 { font-size: var(--step-3); letter-spacing: -.01em; }
h2 { font-size: var(--step-2); }
h3 { font-size: var(--step-1); }

p, li { max-width: var(--measure); }
p { margin: 0 0 var(--space-2); }
ul, ol { padding-left: 1.25rem; }

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

a { color: var(--accent-ink); text-underline-offset: 2px; }
a:hover { color: var(--ink); }

.container { width: min(100% - 2.5rem, var(--maxw)); margin-inline: auto; }
.container--narrow { width: min(100% - 2.5rem, 46rem); margin-inline: auto; }

/* Skalerer kun kontakt-sektionens .container ned på artikelsider (fx inspiration/),
   uden at røre bredden på forsidens kontaktsektion. */
.kontakt-narrow .container { width: min(100% - 2.5rem, 46rem); }
.kontakt-narrow .contact-card__value { font-size: var(--step--1); white-space: nowrap; }

section { padding-block: calc(var(--space-5) - 10px); }
/* Når to sektioner støder op ad hinanden, lægges bund- og top-padding sammen
   til et unaturligt stort mellemrum. Vi strammer top og bund ens for den
   efterfølgende sektion, så luften er symmetrisk igen. Enkeltstående
   sektioner (fx lige under headeren) beholder deres fulde luft. */
section + section { padding-block: var(--space-4); }
.section--tint { background: var(--bg-tint); }

/* Eyebrow: kort linje + versal-etiket, venstrestillet med H2'en der følger */
.eyebrow {
  display: flex;
  align-items: center;
  gap: .75rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .14em;
  text-transform: uppercase;
  color: var(--accent-ink);
  margin: 0 0 var(--space-2);
}
.eyebrow::before {
  content: "";
  width: 2.5rem;
  height: 2px;
  background: currentColor;
  border-radius: 2px;
  flex: none;
}

.lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.muted { color: var(--ink-soft); }
.note { font-size: var(--step--1); color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Tilgængelighed
   -------------------------------------------------------------------------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff;
  padding: .65rem 1.1rem; border-radius: 0 0 var(--radius-s) 0;
  z-index: 100; text-decoration: none;
}
.skip-link:focus { left: 0; }

:focus-visible {
  outline: 3px solid var(--accent);
  outline-offset: 3px;
  border-radius: 4px;
}

.visually-hidden {
  position: absolute; width: 1px; height: 1px;
  margin: -1px; padding: 0; overflow: hidden;
  clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* --------------------------------------------------------------------------
   Knapper og CTA'er  (≥ 44×44 px)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .5rem;
  min-height: 48px;
  padding: .8rem 1.5rem;
  background: var(--accent);
  color: #fff;
  font-family: var(--font-sans);
  font-weight: 600;
  font-size: var(--step-0);
  text-decoration: none;
  border: 2px solid var(--accent);
  border-radius: 999px;
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease;
}
.btn:hover { background: var(--accent-ink); border-color: var(--accent-ink); color: #fff; }

.btn--ghost { background: transparent; color: var(--accent-ink); }
.btn--ghost:hover { background: var(--accent-soft); color: var(--accent-ink); }

.btn--accent2 { background: var(--accent-2); border-color: var(--accent-2); }
.btn--accent2:hover { background: var(--accent-2-ink); border-color: var(--accent-2-ink); color: #fff; }

/* Tryghedslinje under CTA'er */
.cta-reassure {
  display: block;
  margin-top: .6rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* --------------------------------------------------------------------------
   Header / sticky navigation
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky; top: 0; z-index: 50;
  background: color-mix(in srgb, var(--bg) 90%, transparent);
  backdrop-filter: saturate(1.1) blur(10px);
  border-bottom: 1px solid var(--line);
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1rem; padding-block: .65rem;
}
.brand {
  display: flex; align-items: center; gap: .6rem;
  text-decoration: none; color: var(--ink);
}
.brand__logo { width: 34px; height: 34px; object-fit: contain; }
.brand__name {
  font-family: var(--font-display);
  font-weight: 600; font-size: 1.25rem; line-height: 1.1;
}
.brand__tag {
  display: block;
  font-family: var(--font-sans);
  font-size: .72rem; font-weight: 500;
  letter-spacing: .02em; color: var(--ink-soft);
}

.nav__toggle { display: none; }
.nav__list {
  display: flex; align-items: center; gap: 1.35rem;
  list-style: none; margin: 0; padding: 0;
}
.nav__list a {
  text-decoration: none; font-weight: 500; font-size: .98rem; color: var(--ink);
  padding: .35rem 0;
}
.nav__list a:hover { color: var(--accent-ink); }
.nav__cta {
  background: var(--accent); color: #fff !important;
  padding: .55rem 1.05rem !important;
  border-radius: 999px;
}
.nav__cta:hover { background: var(--accent-ink); }

/* --------------------------------------------------------------------------
   Hero
   -------------------------------------------------------------------------- */
.hero { padding-block: var(--space-5) var(--space-5); }
.hero__grid {
  display: grid; gap: var(--space-4); align-items: center;
}
.hero__sub { font-size: var(--step-1); color: var(--ink-soft); max-width: 38ch; line-height: 1.45; }
.hero__cred {
  margin-top: var(--space-3);
  padding-top: var(--space-2);
  border-top: 1px solid var(--line);
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.hero__portrait {
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
.hero__figure { margin: 0; position: relative; max-width: 460px; }
.hero__figure::after {           /* stille signatur: blad-aftryk bag portrættet */
  content: "";
  position: absolute; inset: auto -1.25rem -1.25rem auto;
  width: 110px; height: 110px;
  background: var(--accent-soft);
  -webkit-mask: url("../images/blad.svg") no-repeat center / contain;
  mask: url("../images/blad.svg") no-repeat center / contain;
  z-index: -1;
}

@media (min-width: 860px) {
  .hero__grid { grid-template-columns: 1.15fr .85fr; }
  .hero__figure { justify-self: end; }
}

/* --------------------------------------------------------------------------
   Kort, grids, ydelses-spor
   -------------------------------------------------------------------------- */
.grid { display: grid; gap: var(--space-3); }
@media (min-width: 760px) {
  .grid--2 { grid-template-columns: 1fr 1fr; }
  .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* Et grid--3 sat inde i en smal spalte (fx "læs mere"-kort på en artikelside)
   får kun plads til to kolonner, uden at røre den brede 3-kolonne-visning
   som fx bruges på /inspiration/. */
@media (min-width: 760px) {
  .container--narrow .grid--3 { grid-template-columns: repeat(2, 1fr); }
}

/* Referencer-sektionen på forsiden: kortene har mere tekst end de fleste
   andre grid--3-visninger, så tre kolonner bliver trængt for tidligt. Vis to
   kort side om side på mellemstore skærme, og vent med tre kolonner til der
   er nok plads (960px) til at hvert kort stadig har ca. 290px+ at boltre sig på. */
@media (min-width: 760px) {
  #referencer .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #referencer .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

/* /ledelsesudvikling/ og /inspiration/: samme princip som #referencer -
   vis to kort side om side, før der er plads til tre. */
@media (min-width: 760px) {
  #tilbud .grid--3, #artikler .grid--3 { grid-template-columns: repeat(2, 1fr); }
}
@media (min-width: 960px) {
  #tilbud .grid--3, #artikler .grid--3 { grid-template-columns: repeat(3, 1fr); }
}

.card {
  position: relative;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  box-shadow: var(--shadow);
  display: flex;
  flex-direction: column;
}
.card > :last-child { margin-bottom: 0; }
.card > p:has(.btn) { margin-top: auto; }
.card > p:has(.card__cta) { margin-top: auto; }
.card__img {
  width: 100%;
  aspect-ratio: 800 / 520;
  object-fit: cover;
  object-position: center;
  background: var(--bg-tint);
  border-radius: var(--radius-s);
  margin-bottom: var(--space-2);
}
/* Pladsholder-SVG'er (fx "udskiftes med rigtigt foto") er tegnet fladere end
   800:520-boksen og har billedtekst, der ikke må beskæres - de vises derfor
   hele (uden beskæring), med kortets baggrundsfarve i mellemrummet i stedet
   for at blive croppet som et rigtigt foto. */
.card__img[src$=".svg"] { object-fit: contain; }
/* Fallback-logo når et kort slet ikke har et billede - vis mærket lille og
   centreret på kortets baggrundsfarve, ikke opskaleret/beskåret som et foto. */
.card__img[src$="logo-leaf.png"] { object-fit: contain; padding: 18%; }
.card h3 { margin-top: 0; }

/* Compact kort: kun billede + overskrift, hele kortet er ét klik-link.
   Bruges via render_inspiration_cards()/render_ledelsesudvikling_cards() med
   ['compact' => true], typisk i et 2-kolonne-grid inde i en artikels brødtekst. */
.card--compact { padding: var(--space-2); }
.card--compact .card__img { margin-bottom: var(--space-1); }
.card--compact h3 { font-size: var(--step-0); margin-bottom: 0; }
.card__link { display: block; color: inherit; text-decoration: none; }
.card__link:hover h3 { text-decoration: underline; }

/* Fulde artikelkort: titel-lænken strækkes over hele kortet via et
   ::after-pseudo-element med position:absolute; inset:0 (kræver .card
   position:relative ovenfor), så hele kortet er ét klik-/tryk-mål for mus og
   touch. Tastaturbrugere fokuserer stadig kun selve titel-teksten - det er
   den tilsigtede opførsel for dette mønster (undgår dobbelt-lænker). Den
   tidligere "Læs mere"-lænke er af samme grund ikke længere en selvstændig
   <a>, men ren tekst med samme visuelle udtryk (.card__cta). */
.card__title-link { color: inherit; text-decoration: none; }
.card__title-link::after { content: ""; position: absolute; inset: 0; }
.card__title-link:hover { color: var(--accent-ink); text-decoration: underline; }
.card__cta { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 2px; }

/* Definitionsliste: sparring vs. coaching vs. supervision vs. terapi */
.terms { display: grid; gap: var(--space-2); margin: 0; }
.terms div {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
}
.terms dt { font-weight: 600; font-family: var(--font-sans); }
.terms dd { margin: .25rem 0 0; color: var(--ink-soft); }
@media (min-width: 760px) { .terms { grid-template-columns: 1fr 1fr; } }

/* Trin-sekvens: hvad kan du forvente */
.steps { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--space-3); counter-reset: step; }
.steps li {
  counter-increment: step;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
  position: relative;
}
.steps li::before {
  content: counter(step);
  display: inline-flex; align-items: center; justify-content: center;
  width: 2.1rem; height: 2.1rem;
  border-radius: 50%;
  background: var(--accent-soft); color: var(--accent-ink);
  font-family: var(--font-display); font-weight: 600;
  margin-bottom: var(--space-1);
}
.steps h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; }
.steps p { margin-bottom: 0; color: var(--ink-soft); font-size: var(--step--1); line-height: 1.55; }
@media (min-width: 760px) { .steps { grid-template-columns: repeat(3, 1fr); } }

/* Mini-cases og udtalelser */
.case { border-left: 4px solid var(--accent); }

/* Kommende artikler på inspirationsoversigten — synligt "på vej", ikke klikbare */
.card--soon { opacity: .85; }
.card__badge {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
  background: var(--bg-tint);
  border-radius: 999px;
  padding: .2rem .75rem;
  margin: 0 0 var(--space-1);
}
.testimonial blockquote {
  margin: 0 0 var(--space-2);
  font-family: var(--font-display);
  font-size: var(--step-1);
  line-height: 1.4;
}
.testimonial__mark {
  display: block;
  font-family: var(--font-display);
  font-size: 3.5rem;
  line-height: 1;
  color: var(--accent-ink);
  opacity: .35;
  margin: 0 0 -.4rem;
}
.testimonial__quote {
  font-size: var(--step-0);
  line-height: 1.6;
  color: var(--ink);
  margin: 0 0 var(--space-2);
}
.testimonial {
  cursor: pointer;
}
.testimonial__toggle-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
  z-index: 1;
}
.testimonial__toggle-input + .testimonial__quote {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}
.testimonial__toggle-input:checked + .testimonial__quote {
  -webkit-line-clamp: unset;
  overflow: visible;
}
.testimonial__toggle-label {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--accent-ink);
  cursor: pointer;
  margin: 0 0 var(--space-2);
}
.testimonial__toggle-label:hover {
  text-decoration: underline;
}
.testimonial__chevron {
  display: inline-block;
  width: 10px;
  height: 10px;
  fill: currentColor;
  flex-shrink: 0;
}
.testimonial__toggle-label .testimonial__toggle-less {
  display: none;
  align-items: center;
  gap: .3rem;
}
.testimonial__toggle-label .testimonial__toggle-more {
  display: inline-flex;
  align-items: center;
  gap: .3rem;
}
.testimonial__toggle-input:checked ~ .testimonial__toggle-label .testimonial__toggle-more {
  display: none;
}
.testimonial__toggle-input:checked ~ .testimonial__toggle-label .testimonial__toggle-less {
  display: inline-flex;
}
.testimonial__attribution {
  border-top: 1px solid var(--line);
  padding-top: .875rem;
  margin-top: var(--space-2);
}
.testimonial__name {
  font-family: var(--font-display);
  font-size: var(--step-0);
  font-weight: 700;
  font-style: normal;
  color: var(--accent-ink);
  margin: 0;
}
.testimonial__role {
  font-size: var(--step--1);
  font-style: normal;
  color: var(--ink-soft);
  margin: .125rem 0 0;
}

/* Kladdemarkering — fremhæver afsnit/overskrifter i en artikel, der endnu
   mangler indhold, ligesom en gul markeringspen i et udkast. Redaktionel
   brug: fjern klassen og labelen, når afsnittet er skrevet færdigt. */
.draft-highlight--block {
  display: block;
  background: var(--draft-highlight-bg);
  color: var(--draft-highlight-ink);
  padding: .35rem .75rem;
  border-radius: var(--radius-s);
}
.draft-highlight__label {
  display: inline-block;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 400;
  font-style: italic;
  margin-left: .5rem;
}

/* --------------------------------------------------------------------------
   Priser — to kort, det ene mørkt
   -------------------------------------------------------------------------- */
.pricing { display: grid; gap: var(--space-3); align-items: stretch; }
@media (min-width: 760px) { .pricing { grid-template-columns: 1fr 1fr; } }

.price-card {
  display: flex; flex-direction: column;
  border-radius: var(--radius);
  padding: clamp(1.5rem, 3vw, 2.5rem);
}
.price-card--light { background: var(--surface); border: 1px solid var(--line); box-shadow: var(--shadow); }
.price-card--dark  { background: var(--green-deep); color: var(--on-dark); }
.price-card__name {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-1); margin: 0 0 var(--space-3);
}
.price-card--dark .price-card__name { color: var(--on-dark); }
.price-card__amount {
  font-family: var(--font-display); font-weight: 600;
  font-size: var(--step-3); line-height: 1; margin: 0;
}
.price-card__unit { font-size: var(--step--1); color: var(--ink-soft); margin: .4rem 0 var(--space-3); }
.price-card--dark .price-card__unit { color: var(--on-dark-soft); }
.price-card__desc { margin-bottom: var(--space-4); flex: 1; }
.price-card--dark .price-card__desc { color: var(--on-dark); }
.price-card .btn { align-self: flex-start; }

/* Praktisk info — rolig stribe under priserne */
.practical {
  display: grid; gap: var(--space-3);
  margin-top: var(--space-3);
}
@media (min-width: 680px) { .practical { grid-template-columns: repeat(3, 1fr); } }
.practical div { padding-top: var(--space-2); border-top: 2px solid var(--accent-soft); }
.practical h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; margin: 0 0 .25rem; }
.practical p { margin: 0; color: var(--ink-soft); font-size: var(--step--1); }

/* FAQ */
.faq details {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  margin-bottom: var(--space-2);
}
.faq summary {
  cursor: pointer;
  list-style: none;
  display: flex; align-items: baseline; justify-content: space-between; gap: 1rem;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--font-display); font-size: 1.3rem; color: var(--accent-ink); }
.faq details[open] summary::after { content: "–"; }
.faq h3 { font-size: var(--step-0); font-family: var(--font-sans); font-weight: 600; margin: 0; display: inline; }
.faq details > p { margin: var(--space-2) 0 0; color: var(--ink-soft); }

/* --------------------------------------------------------------------------
   Kontakt — tydelige kanaler + formular
   -------------------------------------------------------------------------- */
.contact-grid { display: grid; gap: var(--space-4); align-items: start; }
@media (min-width: 860px) { .contact-grid { grid-template-columns: 1fr 1fr; } }

.contact-cards { display: grid; gap: var(--space-2); }
.contact-card {
  display: flex; align-items: center; gap: var(--space-3);
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: var(--space-3);
  text-decoration: none; color: var(--ink);
  transition: border-color .2s ease, box-shadow .2s ease;
}
.contact-card:hover { border-color: var(--accent); box-shadow: var(--shadow); color: var(--ink); }
.contact-card__icon {
  flex: none; display: grid; place-items: center;
  width: 56px; height: 56px; border-radius: 16px;
  background: var(--green-deep); color: #fff;
}
.contact-card__icon svg { width: 26px; height: 26px; }
.contact-card__label { font-size: .72rem; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-soft); font-weight: 600; }
.contact-card__value { font-weight: 700; font-size: var(--step-1); font-family: var(--font-sans); }

.contact-form-block { margin-top: var(--space-4); }
.field { display: flex; flex-direction: column; gap: .35rem; margin-block: 0 var(--space-2); }
.field label { font-weight: 600; font-size: var(--step--1); }
.field input, .field textarea {
  font: inherit;
  padding: .75rem .85rem;
  border: 1px solid var(--line);
  border-radius: var(--radius-s);
  background: var(--surface);
  color: var(--ink);
  width: 100%;
}
.field input:focus-visible, .field textarea:focus-visible { outline-offset: 1px; }
.field [aria-invalid="true"] { border-color: var(--error); }
.field .field-error { display: none; color: var(--error); font-size: var(--step--1); }
.field [aria-invalid="true"] ~ .field-error { display: block; }
.form-row { display: grid; gap: var(--space-2); }
@media (min-width: 620px) { .form-row { grid-template-columns: 1fr 1fr; } }
.form-status { margin-top: var(--space-2); font-weight: 600; }
.form-status.is-error { color: var(--error); }
.form-status.is-ok { color: var(--ok); }

/* --------------------------------------------------------------------------
   Sticky CTA — vises ved scroll, fungerer som alm. link uden JS
   -------------------------------------------------------------------------- */
.sticky-cta {
  position: fixed; left: 50%; transform: translateX(-50%);
  bottom: 1rem; z-index: 60;
  display: inline-flex; align-items: center; min-height: 48px;
  background: var(--accent); color: #fff;
  padding: .75rem 1.4rem; border-radius: 999px;
  text-decoration: none; font-weight: 600; font-family: var(--font-sans);
  box-shadow: var(--shadow);
  border: 2px solid rgba(255, 255, 255, .35);
  opacity: 0; pointer-events: none;
  transition: opacity .25s ease;
}
.sticky-cta:hover { background: var(--accent-ink); color: #fff; }
.sticky-cta.is-visible { opacity: 1; pointer-events: auto; }
.no-js .sticky-cta { opacity: 1; pointer-events: auto; }

/* --------------------------------------------------------------------------
   Indsigter (artikelside)
   -------------------------------------------------------------------------- */
.page-header { padding-block: var(--space-3) var(--space-2); }
.article-meta-line { font-size: .82rem; color: var(--ink-soft); margin: 0; }
.article {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: clamp(1.5rem, 4vw, 3rem);
  box-shadow: var(--shadow);
}
.article p { font-size: var(--step-0); }
.article h2 { font-size: var(--step-2); margin-top: var(--space-4); }
.article__meta { font-size: var(--step--1); color: var(--ink-soft); margin-bottom: var(--space-3); }
.article__img { border-radius: var(--radius-s); margin-block: var(--space-2) var(--space-3); }

/* Hero-billede — stort, men afstemt med tekstspalten; ligger uden for artikelkortet */
.article-hero { margin-bottom: var(--space-3); }
.article-hero__img {
  width: 100%;
  aspect-ratio: 4 / 3;
  object-fit: cover;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
/* Undtagelse for et enkelt rigtigt hero-foto, der hverken er 16:9 eller 4:3 -
   viser billedet i dets eget højde/bredde-forhold i stedet for at tvinge og
   beskære det ind i standardbanneret. Opt-in pr. side. */
.article-hero__img--natural { aspect-ratio: auto; }

/* Hero-split — alternativ artikeltop (opt-in): overskrift/underrubrik/metadata
   til venstre, stående billede vist helt (uden beskæring) til højre.
   Bruges i stedet for .page-header + .article-hero, ikke sammen med dem. */
.hero-split__heading h1 { text-wrap: wrap; }
.hero-split {
  display: grid;
  grid-template-columns: 1.3fr 1fr;
  gap: var(--space-4);
  align-items: start;
}
.hero-split__media {
  width: 100%;
  max-width: 340px;
  margin-left: auto;
  aspect-ratio: 3 / 4;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
  background: var(--bg-tint);
}
.hero-split__media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
@media (max-width: 760px) {
  .hero-split { grid-template-columns: 1fr; }
  .hero-split__media { max-width: 300px; margin: 0 auto; }
}

/* Fremhævet citat i brødteksten */
.pull-quote {
  margin: var(--space-4) 0;
  padding: var(--space-2) var(--space-3);
  border-left: 4px solid var(--accent);
  background: var(--bg-tint);
  border-radius: 0 var(--radius-s) var(--radius-s) 0;
}
.pull-quote p {
  margin: 0;
  font-family: var(--font-display);
  font-style: italic;
  font-size: var(--step-1);
  line-height: 1.45;
  color: var(--ink);
}
.pull-quote cite {
  display: block;
  margin-top: var(--space-1);
  font-family: var(--font-sans);
  font-style: normal;
  font-size: var(--step--1);
  color: var(--ink-soft);
}

/* Mindre illustration/foto som en del af brødteksten (ikke fuld bredde som hero) */
.article__figure {
  width: min(65%, 420px);
  margin: var(--space-4) auto;
}
.article__figure img {
  width: 100%;
  border-radius: var(--radius-s);
  box-shadow: var(--shadow);
  background: var(--bg-tint);
  margin: 0;
}
.article__figure figcaption {
  margin-top: .5rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
  text-align: center;
}

/* Kort AI-/skimme-venligt resumé øverst i artiklen — ens skriftstørrelse, ingen fremhævning */
.article-summary {
  background: var(--bg-tint);
  border-left: 4px solid var(--accent);
  border-radius: var(--radius-s);
  padding: var(--space-2) var(--space-3);
  margin: 0 0 var(--space-3);
}
.article-summary__label {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--accent-ink);
}
.article-summary p,
.article-summary li {
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin: 0 0 .4rem;
}
.article-summary ul { margin: 0; padding-left: 1.1rem; }
.article-summary > :last-child { margin-bottom: 0; }
.article-summary li:last-child { margin-bottom: 0; }

/* Byline: forfatterfoto, navn, kompetencer, læsetid og udgivelsesdato */
.byline-label {
  margin: 0 0 .5rem;
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.byline {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0 0 var(--space-3);
}
@media (max-width: 420px) {
  .byline {
    flex-direction: column;
    align-items: center;
    text-align: center;
  }
}
.byline__avatar {
  width: 112px;
  height: 112px;
  border-radius: 50%;
  object-fit: cover;
  object-position: top center;
  flex: none;
  box-shadow: var(--shadow);
}
.byline__name {
  margin: 0;
  font-family: var(--font-sans);
  font-weight: 400;
  color: var(--ink);
}
.byline__name a { font-weight: 700; }
.byline__credentials {
  margin: .15rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.byline__meta {
  margin: .3rem 0 0;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.byline__meta time { color: var(--ink-soft); }

.article-cta {
  margin-top: var(--space-4);
  background: var(--bg-tint);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: var(--space-3);
}
.article-cta p { margin-bottom: var(--space-2); }

/* Fremhævet CTA-kort i et almindeligt kort-grid (fx sidste kort på
   /inspiration/) — samme kort-struktur (billede/overskrift/tekst/knap) som de
   øvrige kort, men med en anden baggrundsfarve, så det skiller sig ud i
   rækken uden at bryde layoutet. */
.card--cta {
  background: var(--accent-soft);
  border-color: var(--accent-soft);
}

/* Profil-boks (fx foto + "Kort om mig" på /om/) — samler et bredt to-kolonne
   grid (billede + tekst) i én sammenhængende flade, så de to kolonner ikke
   flyder løst hver for sig i den brede container. */
.profile-card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  padding: var(--space-3);
}
@media (min-width: 760px) {
  .profile-card { padding: var(--space-4); }

  /* Overskriften skal skalere med tekstspaltens egen bredde (ikke
     viewportet) her, hvor billede og tekst står side om side - ellers
     bliver h1 for høj i forhold til billedet på mellembrede skærme
     (~760-1000px), hvor spalten er smal, men skriftstørrelsen (vw-baseret
     --step-3) endnu ikke er skaleret tilsvarende ned. */
  .profile-card__content { container-type: inline-size; }
  .profile-card h1 { font-size: clamp(1.3rem, -0.2rem + 10.5cqi, 3.4rem); }
}
.profile-card .grid--2 { align-items: center; }
.profile-card .article__figure {
  width: 100%;
  max-width: none;
  margin: 0;
}
.profile-card .article__figure img { box-shadow: none; }

/* "På denne side"-genveje — tag-lignende anker-lænker til andre sektioner på
   samme side. Bruges i profil-boksen på /om/ og under hero-CTA'en på
   forsiden; ikke bundet til ét bestemt sted i layoutet. */
.jump-nav {
  border-top: 1px solid var(--line);
  padding-top: var(--space-2);
  margin-top: var(--space-2);
}
.jump-nav__label {
  margin: 0 0 var(--space-1);
  font-family: var(--font-sans);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--ink-soft);
}
.jump-nav__links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1);
  list-style: none;
  margin: 0;
  padding: 0;
}
.jump-nav__links a {
  display: inline-block;
  padding: .4rem .9rem;
  border-radius: 999px;
  background: var(--accent-soft);
  color: var(--accent-ink);
  font-size: var(--step--1);
  font-weight: 600;
  text-decoration: none;
}
.jump-nav__links a:hover { background: var(--accent-ink); color: #fff; }

/* Inline kildehenvisning i brødteksten, fx "...falder.[1]" */
.source-ref { font-size: .75em; }
.source-ref a {
  color: var(--accent-ink);
  font-weight: 600;
  text-decoration: none;
}
.source-ref a:hover { text-decoration: underline; }

/* Kilder/referencer — subtil tillidssektion i bunden af artiklen */
.article-sources {
  margin-top: var(--space-4);
  padding-top: var(--space-3);
  border-top: 1px solid var(--line);
}
.article-sources h2 {
  font-size: var(--step-0);
  font-family: var(--font-sans);
  font-weight: 700;
  margin: 0 0 var(--space-2);
}
.sources-list {
  margin: 0;
  padding-left: 1.25rem;
  font-size: var(--step--1);
  color: var(--ink-soft);
}
.sources-list li { margin-bottom: .5rem; }
.sources-list li:last-child { margin-bottom: 0; }
.sources-list a { color: var(--accent-ink); }
.source-backlink { margin-left: .35rem; text-decoration: none; }

/* Når kilder er artiklens sidste element, er kortets fulde bundpadding for stor */
.article--with-sources { padding-bottom: var(--space-3); }

/* --------------------------------------------------------------------------
   Footer — rolig dyb grøn
   -------------------------------------------------------------------------- */
.site-footer {
  background: var(--green-deep);
  color: var(--on-dark-soft);
  padding-block: var(--space-4);
  font-size: var(--step--1);
}
.site-footer .container { display: grid; gap: var(--space-1); }
.site-footer p { margin: 0; max-width: none; }
.site-footer a { color: var(--on-dark); text-decoration: underline; }
.site-footer a:hover { color: #fff; }

/* --------------------------------------------------------------------------
   Mobilnavigation
   -------------------------------------------------------------------------- */
@media (max-width: 860px) {
  .nav__toggle {
    display: inline-flex; align-items: center; justify-content: center;
    min-height: 44px; min-width: 44px;
    background: none; border: 1px solid var(--line);
    border-radius: var(--radius-s);
    padding: .45rem .9rem; font: inherit; font-weight: 600; color: var(--ink);
    cursor: pointer;
  }
  .nav__list {
    display: none;
    position: absolute; right: 1.25rem; top: calc(100% + .4rem);
    flex-direction: column; align-items: stretch; gap: .25rem;
    background: var(--surface);
    border: 1px solid var(--line); border-radius: var(--radius);
    padding: .75rem; box-shadow: var(--shadow);
    min-width: 14rem;
  }
  .nav__list a { display: block; padding: .6rem .75rem; border-radius: var(--radius-s); }
  .nav__list a:hover { background: var(--bg-tint); }
  .nav__list.is-open { display: flex; }
  .nav__cta { text-align: center; margin-top: .25rem; }
}

/* --------------------------------------------------------------------------
   Reduceret bevægelse
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation: none !important;
    transition: none !important;
  }
}

@media print {
  .site-header, .sticky-cta, .nav { display: none; }
}

/* Kvittering efter formular-afsendelse */
.form-success {
  padding: 1.5rem;
  border: 1px solid #cfe3d4;
  border-radius: 12px;
  background: #f2f8f3;
  outline: none;
}
.form-success h3 {
  margin: 0 0 .5rem;
  font-size: var(--step-1);
}
.form-success p {
  margin: 0;
}

/* "Mens du venter"-sektion på tak-siden/efter JS-formularafsendelse:
   ligger uden for .form-success (ingen grøn tint), direkte på kortets
   hvide baggrund. Teksten holdes bevidst uden ekstra klasser/styling,
   så den matcher .form-success p's almindelige typografi. */
.tak-inspiration { margin-top: var(--space-4); }
.tak-inspiration > h3 { text-align: center; margin-bottom: var(--space-3); }


/* Handling zoomed iPhone */
html {
  -webkit-text-size-adjust: 100%;
}

h1, h2, h3, p, a, li {
  overflow-wrap: break-word;
  hyphens: auto;
}

/* ==========================================================================
   Fejlsider (404 m.fl.)
   ========================================================================== */
.error-page { text-align: center; padding-block: var(--space-5) var(--space-4); }
.error-page__code {
  font-family: var(--font-display);
  font-weight: 600;
  font-size: clamp(5.5rem, 18vw, 11rem);
  line-height: 1;
  color: var(--accent-soft);
  margin: 0;
  user-select: none;
}
.error-page__content { max-width: 40rem; margin: 0 auto; margin-top: calc(var(--space-4) * -1); }
.error-page .eyebrow { justify-content: center; }
.error-page__lead { font-size: var(--step-1); color: var(--ink-soft); line-height: 1.5; }
.error-page__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  justify-content: center;
  margin-top: var(--space-3);
}
.error-page__note {
  font-size: var(--step--1);
  color: var(--ink-soft);
  font-style: italic;
  margin-top: var(--space-4);
  margin-bottom: 0;
}
.error-page__more { margin-top: 0; }
.error-page__more > h2 { text-align: center; }