/* ==========================================================================
   BE Gruppen – style.css
   Mockup til konvertering til WordPress + Elementor.
   Struktur: hver <section> = Elementor Container (fuld bredde),
   .container = indre Container (boxed, max-width).
   Alle værdier kommer fra tokens i :root (Global Colors / Global Fonts).
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. Designtokens
   -------------------------------------------------------------------------- */
:root {
  /* Global Colors */
  --color-primary: #0F3B2E;        /* Skovgrøn: mørke sektioner, header */
  --color-primary-700: #0A2A21;    /* Mørkere grøn: footer, hover */
  --color-primary-100: #E3ECE8;    /* Lys grøn flade */
  --color-accent: #EE6A5F;         /* Koral: flader og grafik, kun mørk tekst ovenpå */
  --color-accent-100: #FCE5E2;     /* Lys koral flade */
  --color-cta: #F2D64B;            /* Sikkerhedsgul: primære knapper */
  --color-cta-hover: #E6C52A;
  --color-bg: #F5F7F5;             /* Kølig kalk: lyse sektioner */
  --color-surface: #FFFFFF;        /* Kort og formularer */
  --color-text: #15211C;           /* Overskrifter og brødtekst */
  --color-muted: #4A5A53;          /* Sekundær tekst */
  --color-border: #D5DDD9;         /* Linjer og kortkanter */
  --color-border-strong: #7C8C85;  /* Inputfelter (3:1 mod hvid) */
  --color-on-dark: #FFFFFF;
  --color-on-dark-muted: #C9D6D0;
  --color-error: #B3261E;
  --color-success: #1E7A4C;
  --color-success-100: #E4F2EA;
  --color-focus: #0F3B2E;
  --color-focus-on-dark: #F2D64B;

  /* Global Fonts */
  --font-base: "Archivo", "Segoe UI", system-ui, -apple-system, sans-serif;
  --fw-regular: 400;
  --fw-medium: 500;
  --fw-semibold: 600;
  --fw-bold: 700;

  /* Typeskala (desktop) */
  --fs-display: 4.5rem;   /* h1 på forsiden */
  --fs-h1: 3.5rem;
  --fs-h2: 2.5rem;
  --fs-h3: 1.5rem;
  --fs-h4: 1.25rem;
  --fs-lead: 1.25rem;
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-xs: 0.8125rem;
  --fs-tagline: 8rem;
  --fs-counter: 4rem;

  --lh-tight: 1.05;
  --lh-heading: 1.15;
  --lh-body: 1.6;
  --ls-heading: -0.025em;

  /* Spacing */
  --space-1: 0.25rem;
  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;
  --space-7: 3rem;
  --space-8: 4rem;
  --space-9: 6rem;
  --section-pad: 6rem;
  --section-pad-sm: 4rem;
  --container-max: 76rem;
  --container-gutter: 1.5rem;
  --card-pad: 1.75rem;
  --grid-gap: 1.5rem;
  --header-height: 4.75rem;

  /* Radius */
  --radius-sm: 0.375rem;   /* input */
  --radius-md: 0.625rem;   /* knapper */
  --radius-lg: 0.875rem;   /* kort */
  --radius-xl: 1.25rem;    /* store flader */
  --radius-pill: 62.5rem;

  /* Skygger */
  --shadow-card: 0 0.0625rem 0.125rem rgba(15, 59, 46, 0.06), 0 0.5rem 1.5rem rgba(15, 59, 46, 0.07);
  --shadow-float: 0 1rem 2.5rem rgba(10, 42, 33, 0.18);

  /* Bevægelse */
  --ease: cubic-bezier(0.32, 0.72, 0, 1);
  --dur: 220ms;
}

/* Tablet (Elementor: ≤1024px) */
@media (max-width: 1024px) {
  :root {
    --fs-display: 3.5rem;
    --fs-h1: 2.75rem;
    --fs-h2: 2.125rem;
    --fs-tagline: 5.5rem;
    --fs-counter: 3.25rem;
    --section-pad: 4.5rem;
    --section-pad-sm: 3rem;
  }
}

/* Mobil (Elementor: ≤767px) */
@media (max-width: 767px) {
  :root {
    --fs-display: 2.5rem;
    --fs-h1: 2.25rem;
    --fs-h2: 1.75rem;
    --fs-h3: 1.3125rem;
    --fs-lead: 1.125rem;
    --fs-body: 1rem;
    --fs-tagline: 3rem;
    --fs-counter: 2.75rem;
    --section-pad: 3.5rem;
    --section-pad-sm: 2.5rem;
    --container-gutter: 1rem;
    --card-pad: 1.25rem;
    --grid-gap: 1rem;
    --header-height: 4rem;
  }
}

/* --------------------------------------------------------------------------
   2. Basis
   -------------------------------------------------------------------------- */
*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  scroll-padding-top: calc(var(--header-height) + var(--space-4));
}

@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

body {
  margin: 0;
  font-family: var(--font-base);
  font-size: var(--fs-body);
  line-height: var(--lh-body);
  color: var(--color-text);
  background: var(--color-bg);
  -webkit-font-smoothing: antialiased;
}

body.is-menu-open { overflow: hidden; }

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

img { height: auto; }

h1, h2, h3, h4, h5, h6 {
  margin: 0;
  font-weight: var(--fw-medium);
  line-height: var(--lh-heading);
  letter-spacing: var(--ls-heading);
  text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); letter-spacing: -0.015em; }
h4 { font-size: var(--fs-h4); letter-spacing: -0.01em; }

p { margin: 0; text-wrap: pretty; }
p + p { margin-top: var(--space-4); }

a { color: inherit; }

ul { margin: 0; padding: 0; }

:focus-visible {
  outline: 0.1875rem solid var(--color-focus);
  outline-offset: 0.1875rem;
  border-radius: var(--radius-sm);
}

.section--dark :focus-visible,
.site-header :focus-visible,
.site-footer :focus-visible,
.hero :focus-visible,
.page-hero :focus-visible { outline-color: var(--color-focus-on-dark); }

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

.skip-link {
  position: absolute;
  left: var(--space-4);
  top: -4rem;
  z-index: 100;
  padding: var(--space-3) var(--space-4);
  background: var(--color-cta);
  color: var(--color-primary);
  font-weight: var(--fw-semibold);
  border-radius: var(--radius-md);
  text-decoration: none;
}

.skip-link:focus { top: var(--space-4); }

/* --------------------------------------------------------------------------
   3. Layout: sektion og container
   -------------------------------------------------------------------------- */
.section {
  width: 100%;
  padding-block: var(--section-pad);
}

.section--light { background: var(--color-bg); }
.section--white { background: var(--color-surface); }
.section--dark { background: var(--color-primary); color: var(--color-on-dark); }
.section--tight { padding-block: var(--section-pad-sm); }

.container {
  width: 100%;
  max-width: calc(var(--container-max) + 2 * var(--container-gutter));
  margin-inline: auto;
  padding-inline: var(--container-gutter);
}

.container--narrow { max-width: calc(52rem + 2 * var(--container-gutter)); }

/* Sektionshoved: overskrift + evt. knap til højre */
.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-5);
  margin-bottom: var(--space-7);
}

.section-head__text { max-width: 44rem; }
.section-head > .btn { flex: none; white-space: nowrap; }
.section-head__intro { margin-top: var(--space-4); color: var(--color-muted); font-size: var(--fs-lead); }
.section--dark .section-head__intro { color: var(--color-on-dark-muted); }

.section-head--center {
  flex-direction: column;
  align-items: center;
  text-align: center;
}

@media (max-width: 767px) {
  .section-head { flex-direction: column; align-items: flex-start; margin-bottom: var(--space-6); }
}

/* Grids */
.grid {
  display: grid;
  gap: var(--grid-gap);
  margin: 0;
  padding: 0;
  list-style: none;
}

.grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.grid--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

@media (max-width: 1024px) {
  .grid--3,
  .grid--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
  .grid--2,
  .grid--3,
  .grid--4 { grid-template-columns: minmax(0, 1fr); }
}

/* To kolonner: tekst + billede */
.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-8);
  align-items: center;
}

.split--media-left .split__media { order: -1; }
.split--top { align-items: start; }
.split--wide-text { grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr); }

.split__media img {
  width: 100%;
  border-radius: var(--radius-xl);
  object-fit: cover;
}

.split__text > * + * { margin-top: var(--space-5); }
.split__text .lead { color: var(--color-muted); }

@media (max-width: 1024px) {
  .split { gap: var(--space-6); }
}

@media (max-width: 767px) {
  .split,
  .split--wide-text { grid-template-columns: minmax(0, 1fr); }
  .split--media-left .split__media { order: 0; }
}

/* --------------------------------------------------------------------------
   4. Typografi-hjælpere
   -------------------------------------------------------------------------- */
.lead { font-size: var(--fs-lead); line-height: 1.5; }
.text-muted { color: var(--color-muted); }
.small { font-size: var(--fs-small); }

.label {
  display: inline-block;
  font-size: var(--fs-small);
  font-weight: var(--fw-semibold);
  color: var(--color-muted);
}

.section--dark .label { color: var(--color-on-dark-muted); }

/* --------------------------------------------------------------------------
   5. Knapper (Elementor Button)
   -------------------------------------------------------------------------- */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 3rem;
  padding: var(--space-3) var(--space-5);
  font-family: inherit;
  font-size: 1rem;
  font-weight: var(--fw-semibold);
  line-height: 1.2;
  text-decoration: none;
  border: 0.125rem solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}

.btn:active { transform: translateY(0.0625rem); }

.btn svg { width: 1.125rem; height: 1.125rem; flex: none; }

.btn--primary { background: var(--color-cta); color: var(--color-primary); }
.btn--secondary { background: var(--color-primary); color: var(--color-on-dark); }
.btn--outline { background: transparent; color: var(--color-primary); border-color: var(--color-primary); }
.btn--outline-light { background: transparent; color: var(--color-on-dark); border-color: rgba(255, 255, 255, 0.7); }
.btn--light { background: var(--color-surface); color: var(--color-primary); }
.btn--small { min-height: 2.75rem; padding: var(--space-2) var(--space-4); font-size: var(--fs-small); }
.btn--block { width: 100%; }

@media (hover: hover) {
  .btn--primary:hover { background: var(--color-cta-hover); }
  .btn--secondary:hover { background: var(--color-primary-700); }
  .btn--outline:hover { background: var(--color-primary); color: var(--color-on-dark); }
  .btn--outline-light:hover { background: var(--color-on-dark); color: var(--color-primary); border-color: var(--color-on-dark); }
  .btn--light:hover { background: var(--color-primary-100); }
}

.btn-group {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
}

/* Tekstlink med pil */
.text-link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  text-decoration: underline;
  text-decoration-thickness: 0.0625rem;
  text-underline-offset: 0.25em;
}

.text-link svg { width: 1rem; height: 1rem; transition: transform var(--dur) var(--ease); }
.section--dark .text-link { color: var(--color-on-dark); }

@media (hover: hover) {
  .text-link:hover { text-decoration-thickness: 0.125rem; }
  .text-link:hover svg { transform: translateX(0.1875rem); }
}

/* --------------------------------------------------------------------------
   6. Header (Theme Builder: Header) – ens på alle sider
   -------------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 50;
  width: 100%;
  background: var(--color-primary);
  color: var(--color-on-dark);
}

.site-header__inner {
  display: flex;
  align-items: center;
  gap: var(--space-6);
  min-height: var(--header-height);
}

.site-header__logo {
  display: inline-flex;
  flex: none;
  min-height: 2.75rem;
  align-items: center;
}

.site-header__logo img { width: 9.5rem; height: auto; }

.main-nav { margin-left: auto; }

.main-nav__list {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  list-style: none;
}

.main-nav__item { position: relative; }

.main-nav__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  min-height: 2.75rem;
  padding: var(--space-2) var(--space-3);
  font-family: inherit;
  font-size: 0.9375rem;
  font-weight: var(--fw-medium);
  color: var(--color-on-dark);
  text-decoration: none;
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: background-color var(--dur) var(--ease);
}

.main-nav__link svg { width: 0.875rem; height: 0.875rem; transition: transform var(--dur) var(--ease); }

.main-nav__link[aria-current="page"],
.main-nav__item.is-active > .main-nav__link {
  background: rgba(255, 255, 255, 0.12);
  box-shadow: inset 0 -0.125rem 0 var(--color-cta);
}

@media (hover: hover) {
  .main-nav__link:hover { background: rgba(255, 255, 255, 0.1); }
}

/* Dropdown */
.main-nav__sub {
  position: absolute;
  top: calc(100% + var(--space-2));
  left: 0;
  min-width: 15rem;
  padding: var(--space-2);
  list-style: none;
  background: var(--color-surface);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-float);
  opacity: 0;
  visibility: hidden;
  transform: translateY(-0.25rem);
  transition: opacity var(--dur) var(--ease), transform var(--dur) var(--ease), visibility var(--dur);
}

/* Usynlig bro, så musen ikke mister dropdown-menuen */
.main-nav__sub::before {
  content: "";
  position: absolute;
  inset: calc(-1 * var(--space-2)) 0 auto 0;
  height: var(--space-2);
}

.main-nav__item--has-sub:hover > .main-nav__sub,
.main-nav__item--has-sub:focus-within > .main-nav__sub,
.main-nav__item--has-sub.is-open > .main-nav__sub {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.main-nav__item--has-sub.is-open > .main-nav__link svg { transform: rotate(180deg); }

.main-nav__sublink {
  display: block;
  padding: var(--space-3);
  color: var(--color-text);
  text-decoration: none;
  border-radius: var(--radius-md);
}

.main-nav__sublink strong { display: block; font-weight: var(--fw-semibold); }
.main-nav__sublink span { display: block; font-size: var(--fs-small); color: var(--color-muted); }

.main-nav__sublink[aria-current="page"] { background: var(--color-primary-100); }

@media (hover: hover) {
  .main-nav__sublink:hover { background: var(--color-bg); }
}

.site-header__actions {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  flex: none;
}

.menu-toggle {
  display: none;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  margin-left: auto;
  padding: 0;
  color: var(--color-on-dark);
  background: transparent;
  border: 0.0625rem solid rgba(255, 255, 255, 0.35);
  border-radius: var(--radius-md);
  cursor: pointer;
}

.menu-toggle svg { width: 1.5rem; height: 1.5rem; }
.menu-toggle__close { display: none; }
.site-header.is-open .menu-toggle__open { display: none; }
.site-header.is-open .menu-toggle__close { display: block; }

.main-nav__mobile-actions { display: none; }

/* Header på tablet og mobil: burger-menu */
@media (max-width: 1024px) {
  .menu-toggle { display: inline-flex; }
  .site-header__actions { display: none; }

  .main-nav {
    display: none;
    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    margin: 0;
    padding: var(--space-5) var(--container-gutter) var(--space-7);
    overflow-y: auto;
    overscroll-behavior: contain;
    background: var(--color-primary);
    border-top: 0.0625rem solid rgba(255, 255, 255, 0.15);
  }

  .site-header.is-open .main-nav { display: block; }

  .main-nav__list { flex-direction: column; align-items: stretch; gap: 0; }

  .main-nav__item { border-bottom: 0.0625rem solid rgba(255, 255, 255, 0.12); }

  .main-nav__link {
    width: 100%;
    justify-content: space-between;
    min-height: 3.5rem;
    padding-inline: 0;
    font-size: 1.125rem;
    border-radius: 0;
  }

  .main-nav__link[aria-current="page"],
  .main-nav__item.is-active > .main-nav__link { background: none; box-shadow: none; color: var(--color-cta); }

  .main-nav__link svg { display: none; }

  .main-nav__sub,
  .main-nav__item--has-sub:hover > .main-nav__sub,
  .main-nav__item--has-sub:focus-within > .main-nav__sub {
    position: static;
    min-width: 0;
    padding: 0 0 var(--space-3) var(--space-4);
    background: none;
    box-shadow: none;
    opacity: 1;
    visibility: visible;
    transform: none;
  }

  .main-nav__sub::before { display: none; }

  .main-nav__sublink { padding: var(--space-3) 0; color: var(--color-on-dark); border-radius: 0; }
  .main-nav__sublink span { color: var(--color-on-dark-muted); }
  .main-nav__sublink[aria-current="page"] { background: none; color: var(--color-cta); }

  .main-nav__mobile-actions {
    display: grid;
    gap: var(--space-3);
    margin-top: var(--space-6);
  }
}

/* --------------------------------------------------------------------------
   7. Forside-hero
   -------------------------------------------------------------------------- */
.hero {
  position: relative;
  padding-block: var(--space-9) calc(var(--space-9) + var(--space-7));
  color: var(--color-on-dark);
  background-color: var(--color-primary);
  background-image:
    linear-gradient(90deg, rgba(15, 59, 46, 0.96) 0%, rgba(15, 59, 46, 0.86) 38%, rgba(15, 59, 46, 0.2) 72%, rgba(15, 59, 46, 0.05) 100%),
    url("../assets/img/hero-byggeleder-paa-byggeplads.jpg");
  background-size: cover;
  background-position: 50% 30%;
}

.hero__content { max-width: 36rem; }

.hero__title { font-size: var(--fs-display); line-height: 1.02; }

.hero__text {
  margin-top: var(--space-5);
  max-width: 34rem;
  font-size: var(--fs-lead);
  line-height: 1.5;
  color: var(--color-on-dark-muted);
}

.hero .btn-group { margin-top: var(--space-6); }

.hero__proof {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin-top: var(--space-6);
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

.hero__proof svg { width: 1.125rem; height: 1.125rem; color: var(--color-cta); flex: none; }

@media (max-width: 1024px) {
  .hero {
    background-image:
      linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.82) 55%, rgba(15, 59, 46, 0.35) 100%),
      url("../assets/img/hero-byggeleder-paa-byggeplads.jpg");
    background-position: 65% 30%;
  }
}

@media (max-width: 767px) {
  .hero {
    padding-block: var(--space-8) calc(var(--space-8) + var(--space-6));
    background-image:
      linear-gradient(180deg, rgba(15, 59, 46, 0.5) 0%, rgba(15, 59, 46, 0.9) 45%, rgba(15, 59, 46, 0.98) 100%),
      url("../assets/img/hero-byggeleder-paa-byggeplads.jpg");
    background-position: 60% 20%;
  }
  .hero .btn-group .btn { width: 100%; }
}

/* Jobsøgning, der overlapper hero'ens nederste kant */
.section--quick-search { padding-block: 0; background: var(--color-bg); }

.quick-search {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
  gap: var(--space-6);
  align-items: center;
  margin-top: calc(-1 * (var(--space-7) + var(--space-4)));
  padding: var(--space-6);
  background: var(--color-surface);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-float);
}

.quick-search__title { font-size: var(--fs-h3); }
.quick-search__count { margin-top: var(--space-1); color: var(--color-muted); font-size: var(--fs-small); }

.quick-search__form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: var(--space-3);
  align-items: end;
}

@media (max-width: 1024px) {
  .quick-search { grid-template-columns: minmax(0, 1fr); gap: var(--space-4); }
}

@media (max-width: 767px) {
  .quick-search { padding: var(--space-5); margin-top: calc(-1 * var(--space-7)); }
  .quick-search__form { grid-template-columns: minmax(0, 1fr); }
}

/* --------------------------------------------------------------------------
   8. Underside-hero (Elementor Container med baggrundsbillede + overlay)
   -------------------------------------------------------------------------- */
.page-hero {
  padding-block: var(--space-9);
  color: var(--color-on-dark);
  background-color: var(--color-primary);
  background-size: cover;
  background-position: center;
}

.page-hero__content { max-width: 42rem; }
.page-hero__title { font-size: var(--fs-h1); }
.page-hero__text { margin-top: var(--space-5); font-size: var(--fs-lead); line-height: 1.5; color: var(--color-on-dark-muted); }
.page-hero .btn-group { margin-top: var(--space-6); }

.page-hero--raadgivning {
  background-image: linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.8) 50%, rgba(15, 59, 46, 0.35) 100%), url("../assets/img/raadgivning-hero-byggeplads.jpg");
}

.page-hero--rekruttering {
  background-image: linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.8) 50%, rgba(15, 59, 46, 0.35) 100%), url("../assets/img/rekruttering-hero-samtale.jpg");
}

.page-hero--jobs {
  background-image: linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.82) 50%, rgba(15, 59, 46, 0.4) 100%), url("../assets/img/jobs-hero-haandvaerkere.jpg");
}

.page-hero--om-os {
  background-image: linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.8) 50%, rgba(15, 59, 46, 0.35) 100%), url("../assets/img/om-os-hero-kontor.jpg");
}

.page-hero--kontakt {
  background-image: linear-gradient(90deg, rgba(15, 59, 46, 0.95) 0%, rgba(15, 59, 46, 0.82) 50%, rgba(15, 59, 46, 0.4) 100%), url("../assets/img/kontakt-hero-kontor.jpg");
}

.page-hero--plain { padding-block: var(--space-8); }

@media (max-width: 767px) {
  .page-hero { padding-block: var(--space-8); }
  .page-hero--raadgivning,
  .page-hero--rekruttering,
  .page-hero--jobs,
  .page-hero--om-os,
  .page-hero--kontakt { background-blend-mode: normal; }
}

/* Brødkrumme */
.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin: 0 0 var(--space-5);
  padding: 0;
  list-style: none;
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
}

.breadcrumb li + li::before { content: "/"; margin-right: var(--space-2); opacity: 0.6; }
.breadcrumb a { color: var(--color-on-dark); }
.breadcrumb [aria-current="page"] { color: var(--color-on-dark-muted); }

/* --------------------------------------------------------------------------
   9. Kort (Image Box / Icon Box)
   -------------------------------------------------------------------------- */
.card {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  overflow: hidden;
}

.card__media img {
  width: 100%;
  aspect-ratio: 3 / 2;
  object-fit: cover;
  transition: transform 600ms var(--ease);
}

.card__media { overflow: hidden; }

.card__body {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  flex: 1;
  padding: var(--card-pad);
}

.card__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.card__text { color: var(--color-muted); }
.card__body .text-link { margin-top: auto; }

@media (hover: hover) {
  .card--service:hover .card__media img { transform: scale(1.04); }
}

@media (max-width: 767px) {
  .card__media img { aspect-ratio: 16 / 9; }
}

/* Ydelseskort: målgruppe-mærke */
.card__tag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-primary-100);
  border-radius: var(--radius-pill);
}

.card__tag--accent { background: var(--color-accent-100); }

/* Icon Box */
.icon-box {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  height: 100%;
  padding: var(--card-pad);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

.icon-box__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 3rem;
  height: 3rem;
  color: var(--color-primary);
  background: var(--color-cta);
  border-radius: var(--radius-md);
}

.icon-box__icon svg { width: 1.5rem; height: 1.5rem; }
.icon-box__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.icon-box__text { color: var(--color-muted); }

.section--dark .icon-box { background: rgba(255, 255, 255, 0.06); border-color: rgba(255, 255, 255, 0.14); }
.section--dark .icon-box__text { color: var(--color-on-dark-muted); }

/* Proces-trin (Icon Box med tal) */
.step {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  padding-top: var(--space-5);
  border-top: 0.125rem solid var(--color-primary);
}

.step__number {
  font-size: var(--fs-h2);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: var(--ls-heading);
  color: var(--color-accent);
}

.step__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.step__text { color: var(--color-muted); }

.section--dark .step { border-top-color: var(--color-cta); }
.section--dark .step__number { color: var(--color-cta); }
.section--dark .step__text { color: var(--color-on-dark-muted); }

/* --------------------------------------------------------------------------
   10. Icon List
   -------------------------------------------------------------------------- */
.icon-list { display: grid; gap: var(--space-3); list-style: none; }

.icon-list li {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
}

.icon-list svg {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin-top: 0.15em;
  color: var(--color-primary);
}

.section--dark .icon-list svg { color: var(--color-cta); }

.icon-list--inline {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2) var(--space-5);
}

.icon-list--inline li { align-items: center; gap: var(--space-2); }
.icon-list--inline svg { width: 1rem; height: 1rem; margin-top: 0; }

/* --------------------------------------------------------------------------
   11. Jobkort (Loop Item i WordPress)
   -------------------------------------------------------------------------- */
.job-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  height: 100%;
  padding: var(--card-pad);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.job-card[hidden] { display: none; }

.job-card__tag {
  align-self: flex-start;
  padding: var(--space-1) var(--space-3);
  font-size: var(--fs-xs);
  font-weight: var(--fw-semibold);
  color: var(--color-primary);
  background: var(--color-primary-100);
  border-radius: var(--radius-pill);
}

.job-card__title { font-size: var(--fs-h4); font-weight: var(--fw-semibold); }
.job-card__meta { color: var(--color-muted); font-size: var(--fs-small); }
.job-card__meta svg { color: var(--color-muted); }
.job-card .btn { margin-top: auto; align-self: flex-start; }

@media (hover: hover) {
  .job-card:hover { border-color: var(--color-primary); box-shadow: var(--shadow-card); }
}

/* --------------------------------------------------------------------------
   12. Nøgletal (Counter)
   -------------------------------------------------------------------------- */
.stats-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-6);
  align-items: end;
  margin-bottom: var(--space-7);
}

.stats-head p { color: var(--color-on-dark-muted); max-width: 30rem; }

@media (max-width: 767px) {
  .stats-head { grid-template-columns: minmax(0, 1fr); margin-bottom: var(--space-6); }
}

.counter {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-6);
  min-height: 13rem;
  padding: var(--card-pad);
  background: var(--color-primary-700);
  border: 0.0625rem solid rgba(255, 255, 255, 0.12);
  border-radius: var(--radius-lg);
}

.counter__number {
  font-size: var(--fs-counter);
  font-weight: var(--fw-medium);
  line-height: 1;
  letter-spacing: -0.035em;
  color: var(--color-cta);
  font-variant-numeric: tabular-nums;
}

.counter__label { color: var(--color-on-dark-muted); max-width: 16rem; }

.counter--accent { background: var(--color-accent); border-color: var(--color-accent); }
.counter--accent .counter__number,
.counter--accent .counter__label { color: var(--color-text); }

@media (max-width: 767px) {
  .counter { min-height: 0; gap: var(--space-4); }
}

/* --------------------------------------------------------------------------
   13. Testimonials
   -------------------------------------------------------------------------- */
.quote-feature {
  max-width: 54rem;
  margin: 0 auto var(--space-8);
  text-align: center;
}

.quote-feature__text {
  margin: 0;
  font-size: 2.25rem;
  font-weight: var(--fw-regular);
  line-height: 1.3;
  letter-spacing: -0.02em;
  text-wrap: balance;
}

.quote-feature__author {
  display: inline-flex;
  align-items: center;
  gap: var(--space-3);
  margin-top: var(--space-6);
  text-align: left;
}

.avatar {
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 50%;
  object-fit: cover;
  flex: none;
}

.author__name { display: block; font-weight: var(--fw-semibold); }
.author__role { display: block; font-size: var(--fs-small); color: var(--color-muted); }

.testimonial {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: var(--space-5);
  height: 100%;
  margin: 0;
  padding: var(--card-pad);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

.testimonial__text { margin: 0; font-size: 1.125rem; line-height: 1.55; }

.testimonial__author { display: flex; align-items: center; gap: var(--space-3); }

@media (max-width: 767px) {
  .quote-feature { margin-bottom: var(--space-7); }
  .quote-feature__text { font-size: 1.5rem; }
}

/* --------------------------------------------------------------------------
   14. FAQ (Elementor Accordion)
   -------------------------------------------------------------------------- */
.faq-layout {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(0, 1.2fr);
  gap: var(--space-8);
  align-items: start;
}

.faq-layout__intro > * + * { margin-top: var(--space-4); }
.faq-layout__intro p { color: var(--color-muted); }

@media (max-width: 1024px) {
  .faq-layout { grid-template-columns: minmax(0, 1fr); gap: var(--space-6); }
}

.accordion { border-top: 0.0625rem solid var(--color-border); }

.accordion__item { border-bottom: 0.0625rem solid var(--color-border); }

.accordion__heading { margin: 0; font-size: inherit; letter-spacing: normal; }

.accordion__trigger {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-4);
  width: 100%;
  min-height: 3.5rem;
  padding: var(--space-4) 0;
  font-family: inherit;
  font-size: 1.125rem;
  font-weight: var(--fw-semibold);
  line-height: 1.4;
  text-align: left;
  color: var(--color-text);
  background: none;
  border: 0;
  cursor: pointer;
}

.accordion__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  color: var(--color-primary);
  background: var(--color-primary-100);
  border-radius: 50%;
  transition: transform var(--dur) var(--ease), background-color var(--dur) var(--ease);
}

.accordion__icon svg { width: 1rem; height: 1rem; }

.accordion__trigger[aria-expanded="true"] .accordion__icon {
  transform: rotate(45deg);
  background: var(--color-cta);
}

.accordion__panel { padding: 0 var(--space-7) var(--space-5) 0; color: var(--color-muted); }
.accordion__panel[hidden] { display: none; }

@media (hover: hover) {
  .accordion__trigger:hover .accordion__icon { background: var(--color-cta); }
}

/* --------------------------------------------------------------------------
   15. CTA-blok (Theme Builder: Section-skabelon) – ens på alle sider
   -------------------------------------------------------------------------- */
.cta-block__title { margin-bottom: var(--space-6); }

.cta-block__grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--grid-gap);
}

.cta-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-4);
  padding: var(--space-7);
  border-radius: var(--radius-xl);
}

.cta-card__title { font-size: var(--fs-h3); }
.cta-card .btn-group { margin-top: auto; padding-top: var(--space-3); }

.cta-card--company { background: var(--color-cta); color: var(--color-primary); }
.cta-card--candidate { background: var(--color-primary-700); color: var(--color-on-dark); border: 0.0625rem solid rgba(255, 255, 255, 0.14); }
.cta-card--candidate p { color: var(--color-on-dark-muted); }

.cta-card--company :focus-visible { outline-color: var(--color-primary); }

@media (max-width: 767px) {
  .cta-block__grid { grid-template-columns: minmax(0, 1fr); }
  .cta-card { padding: var(--space-5); }
  .cta-card .btn { width: 100%; }
}

/* --------------------------------------------------------------------------
   16. Formularer (Elementor Form)
   -------------------------------------------------------------------------- */
.form-card {
  padding: var(--space-7);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-xl);
}

.form-card__title { font-size: var(--fs-h3); }
.form-card__intro { margin-top: var(--space-2); color: var(--color-muted); }

.form {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--space-4) var(--space-4);
  margin-top: var(--space-6);
}

.form__field { display: flex; flex-direction: column; gap: var(--space-2); }
.form__field--full { grid-column: 1 / -1; }

.form__label { font-size: var(--fs-small); font-weight: var(--fw-semibold); }
.form__optional { font-weight: var(--fw-regular); color: var(--color-muted); }

.form__input {
  width: 100%;
  min-height: 3rem;
  padding: var(--space-3) var(--space-4);
  font-family: inherit;
  font-size: 1rem;
  color: var(--color-text);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--dur) var(--ease), box-shadow var(--dur) var(--ease);
}

.form__input:focus-visible {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 0.1875rem rgba(15, 59, 46, 0.25);
}

select.form__input {
  appearance: none;
  padding-right: var(--space-7);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230F3B2E' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right var(--space-4) center;
  background-size: 1.125rem;
}

textarea.form__input { min-height: 8rem; resize: vertical; }

input[type="file"].form__input { padding: var(--space-2) var(--space-3); cursor: pointer; }

.form__input[aria-invalid="true"] { border-color: var(--color-error); border-width: 0.125rem; }

.form__hint { font-size: var(--fs-small); color: var(--color-muted); }

.form__error {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--fs-small);
  font-weight: var(--fw-medium);
  color: var(--color-error);
}

.form__error:empty { display: none; }

.form__error::before {
  content: "!";
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 1.125rem;
  height: 1.125rem;
  font-size: 0.75rem;
  font-weight: var(--fw-bold);
  color: var(--color-on-dark);
  background: var(--color-error);
  border-radius: 50%;
}

.form__check {
  display: flex;
  align-items: flex-start;
  gap: var(--space-3);
  font-size: var(--fs-small);
  cursor: pointer;
}

.form__check input {
  flex: none;
  width: 1.25rem;
  height: 1.25rem;
  margin: 0.1rem 0 0;
  accent-color: var(--color-primary);
}

.form__honeypot {
  position: absolute;
  left: -625rem;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

.form__submit { grid-column: 1 / -1; justify-self: start; }

.form__success {
  display: flex;
  gap: var(--space-4);
  margin-top: var(--space-6);
  padding: var(--space-5);
  background: var(--color-success-100);
  border: 0.0625rem solid var(--color-success);
  border-radius: var(--radius-lg);
}

.form__success[hidden] { display: none; }
.form__success svg { flex: none; width: 1.5rem; height: 1.5rem; color: var(--color-success); }
.form__success-title { font-weight: var(--fw-semibold); }

.form-card--dark { background: var(--color-primary-700); border-color: rgba(255, 255, 255, 0.14); }

@media (max-width: 767px) {
  .form-card { padding: var(--space-5); }
  .form { grid-template-columns: minmax(0, 1fr); }
  .form__submit { justify-self: stretch; }
}

/* Kontaktpunkter ved siden af formular */
.contact-points { display: grid; gap: var(--space-5); }

.contact-point { display: flex; gap: var(--space-4); }
.contact-point__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-primary);
  background: var(--color-primary-100);
  border-radius: var(--radius-md);
}

.contact-point__icon svg { width: 1.25rem; height: 1.25rem; }
.contact-point__title { font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: normal; }
.contact-point a { color: var(--color-primary); }

/* --------------------------------------------------------------------------
   17. Jobliste og filtre
   -------------------------------------------------------------------------- */
.job-filter {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr)) auto;
  gap: var(--space-4);
  align-items: end;
  padding: var(--space-5);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

.job-results-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  margin: var(--space-6) 0 var(--space-4);
}

.job-results-bar__count { font-weight: var(--fw-semibold); }

.job-empty {
  padding: var(--space-7) var(--space-5);
  text-align: center;
  background: var(--color-surface);
  border: 0.0625rem dashed var(--color-border-strong);
  border-radius: var(--radius-lg);
}

.job-empty[hidden] { display: none; }
.job-empty > * + * { margin-top: var(--space-3); }
.job-empty .btn-group { justify-content: center; margin-top: var(--space-5); }

@media (max-width: 1024px) {
  .job-filter { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .job-filter .btn { grid-column: 1 / -1; justify-self: start; }
}

@media (max-width: 767px) {
  .job-filter { grid-template-columns: minmax(0, 1fr); }
  .job-filter .btn { justify-self: stretch; }
}

/* Jobside */
.job-facts {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: var(--space-4);
  margin-top: var(--space-6);
}

.job-facts__item { padding-top: var(--space-3); border-top: 0.0625rem solid rgba(255, 255, 255, 0.3); }
.job-facts__label { display: block; font-size: var(--fs-small); color: var(--color-on-dark-muted); }
.job-facts__value { display: block; font-weight: var(--fw-semibold); }

@media (max-width: 767px) {
  .job-facts { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

.prose > * + * { margin-top: var(--space-4); }
.prose h2 { font-size: var(--fs-h3); margin-top: var(--space-7); }
.prose h2:first-child { margin-top: 0; }
.prose ul { display: grid; gap: var(--space-2); padding-left: var(--space-5); }

.sidebar-card {
  position: sticky;
  top: calc(var(--header-height) + var(--space-5));
  display: grid;
  gap: var(--space-4);
  padding: var(--card-pad);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-lg);
}

.sidebar-card__person { display: flex; align-items: center; gap: var(--space-3); }

/* --------------------------------------------------------------------------
   18. Footer (Theme Builder: Footer) – ens på alle sider
   -------------------------------------------------------------------------- */
.site-footer {
  padding-top: var(--space-9);
  color: var(--color-on-dark);
  background: var(--color-primary-700);
  overflow: hidden;
}

.site-footer__top {
  display: grid;
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
  gap: var(--space-6);
}

.site-footer__brand img { width: 9.5rem; height: auto; }
.site-footer__brand p { margin-top: var(--space-4); max-width: 18rem; color: var(--color-on-dark-muted); }

.site-footer__contact { display: grid; gap: var(--space-1); margin-top: var(--space-5); list-style: none; }
.site-footer__contact a { display: inline-flex; min-height: 2.25rem; align-items: center; color: var(--color-on-dark); }

.site-footer__heading { font-size: 1rem; font-weight: var(--fw-semibold); letter-spacing: normal; color: var(--color-cta); }

.site-footer__links { display: grid; gap: var(--space-1); margin-top: var(--space-4); list-style: none; }

.site-footer__links a {
  display: inline-flex;
  align-items: center;
  min-height: 2.25rem;
  color: var(--color-on-dark-muted);
  text-decoration: none;
}

@media (hover: hover) {
  .site-footer__links a:hover { color: var(--color-on-dark); text-decoration: underline; }
}

.social { display: flex; gap: var(--space-2); margin-top: var(--space-5); list-style: none; }

.social a {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  color: var(--color-primary);
  background: var(--color-cta);
  border-radius: var(--radius-md);
  transition: background-color var(--dur) var(--ease);
}

.social svg { width: 1.25rem; height: 1.25rem; }

@media (hover: hover) {
  .social a:hover { background: var(--color-cta-hover); }
}

.site-footer__tagline {
  margin-top: var(--space-9);
  font-size: var(--fs-tagline);
  font-weight: var(--fw-medium);
  line-height: 0.95;
  letter-spacing: -0.045em;
  white-space: nowrap;
  color: var(--color-primary);
  -webkit-text-stroke: 0.0625rem rgba(255, 255, 255, 0.12);
}

.site-footer__bottom {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-3);
  margin-top: var(--space-6);
  padding-block: var(--space-5);
  font-size: var(--fs-small);
  color: var(--color-on-dark-muted);
  border-top: 0.0625rem solid rgba(255, 255, 255, 0.12);
}

.site-footer__legal { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); list-style: none; }
.site-footer__legal a { color: var(--color-on-dark-muted); }

@media (max-width: 1024px) {
  .site-footer__top { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .site-footer__brand { grid-column: 1 / -1; }
}

@media (max-width: 767px) {
  .site-footer { padding-top: var(--space-8); }
  .site-footer__top { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .site-footer__tagline { margin-top: var(--space-7); white-space: normal; }
}

/* --------------------------------------------------------------------------
   19. Placeholder-sider (privatliv, cookies, 404)
   -------------------------------------------------------------------------- */
.placeholder-note {
  padding: var(--space-5);
  background: var(--color-accent-100);
  border-radius: var(--radius-lg);
}

/* --------------------------------------------------------------------------
   19b. Underside-hjælpere
   -------------------------------------------------------------------------- */
.form[hidden],
.grid[hidden] { display: none; }

p.card__tag { width: fit-content; }
.page-hero .card__tag + .page-hero__title { margin-top: var(--space-3); }
.page-hero .job-facts { margin-bottom: 0; }
.page-hero .job-facts__value { margin: 0; }
.page-hero--plain .btn-group { margin-top: var(--space-6); }

.prose--spaced { margin-top: var(--space-6); }
.prose .lead { color: var(--color-muted); }
.prose h2 + p.lead { margin-top: var(--space-3); }

.accordion-wrap { margin-top: var(--space-7); }
.accordion-wrap > .card__title { margin-bottom: var(--space-3); }

.split__media--portrait img { width: auto; max-height: 22rem; }

.tag-list {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-2);
  margin-top: var(--space-5);
  list-style: none;
}

.tag-list li {
  padding: var(--space-2) var(--space-4);
  font-weight: var(--fw-medium);
  color: var(--color-primary);
  background: var(--color-surface);
  border: 0.0625rem solid var(--color-border);
  border-radius: var(--radius-pill);
}

.section--white .tag-list li { background: var(--color-bg); }

.section--dark .section-head__text + .btn,
.section-head > .btn { align-self: flex-end; }

/* --------------------------------------------------------------------------
   20. Reduceret bevægelse
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
  }
}