/* ==========================================================================
   Base, header og footer.
   Porteret 1:1 fra prototypens inline-styles — samme visuelle resultat,
   men som rigtige klasser og rigtige media queries.
   ========================================================================== */

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

html { scroll-behavior: smooth; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
  }

  /* De rullende bånd er undtaget efter aftale med Mathilde. iOS melder
     strømsparetilstand som et ønske om mindre bevægelse, og derfor stod
     båndene stille på telefoner, hvor batterisparen bare var slået til.
     Klassen slår igennem over stjernen, fordi den er mere specifik. */
  .acs-marquee__track,
  .acs-logos__track {
    animation-duration: 78s !important;
    animation-iteration-count: infinite !important;
  }
}

body {
  margin: 0;
  font-family: var(--acs-font);
  font-weight: var(--acs-w-body);
  color: var(--acs-ink-body);
  background: var(--acs-sand);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

a {
  color: var(--acs-ink);
  text-decoration: none;
  transition: color .2s;
}
a:hover { color: var(--acs-label-blue); }
a:focus-visible {
  outline: 2px solid var(--acs-blue);
  outline-offset: 3px;
}

img { max-width: 100%; }

::selection {
  background: var(--acs-palm);
  color: var(--acs-sand);
}

/* Springlink — usynlig indtil den får tastaturfokus. */
.acs-skip {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  background: var(--acs-evergreen);
  color: var(--acs-sand);
  padding: 12px 20px;
  font-size: 15px;
}
.acs-skip:focus {
  left: 0;
  color: var(--acs-sand);
}

.acs-shell {
  width: 100%;
  overflow-x: hidden;
  background: var(--acs-sand);
  /* Plads til samtykkebanneret, så det aldrig dækker footeren.
     Sættes af consent.js og er 0, når banneret er besvaret. */
  padding-bottom: var(--acs-consent-h, 0px);
}
/* Også på body — ellers blinker sandfarven frem ved overscroll. */
.acs-dark-page { background: var(--acs-evergreen); }
.acs-dark-page .acs-shell { background: var(--acs-evergreen); }

/* Overscroll — den bløde "gummibånd"-bevægelse, når man trækker forbi
   sidens ende på mobil — viser body-farven. Slutter siden mørkt, blinkede
   sandfarven frem som en beige strimmel under footeren. Disse klasser
   sætter kun body-farven; .acs-shell er stadig sand, så lyse sektioner
   på de samme sider er uberørte. */
.acs-slut-moerk { background: var(--acs-evergreen); }
.acs-slut-oliven { background: #232E22; }
.acs-slut-kontakt { background: #1c2822; }

/* --- Header ------------------------------------------------------------- */

.acs-header-wrap { position: relative; }

/* Overlay: gennemsigtig header oven på et mørkt hero. Logoet vendes hvidt,
   og navigationen skifter til hvid tekst med creme burger — her ER cremen
   rigtig, fordi fladen bagved er mørk. */
.acs-header-wrap--overlay {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 5;
  background: transparent;
}
.acs-header-wrap--overlay .acs-header { border-bottom-color: rgba(255, 255, 255, .34); }
.acs-header-wrap--overlay .acs-header__logo img { filter: brightness(0) invert(1); }
.acs-header-wrap--overlay .acs-nav a,
.acs-header-wrap--overlay .acs-nav a[aria-current="page"] { color: #ffffff; }
.acs-header-wrap--overlay .acs-nav a:hover { color: var(--acs-label-palm-dk); }
.acs-header-wrap--overlay .acs-nav .acs-nav__cta { color: #ffffff; }
.acs-header-wrap--overlay .acs-burger { color: var(--acs-cream); }
.acs-header-wrap--overlay .acs-burger__bars span { background: var(--acs-cream); }
.acs-header-wrap--overlay a:focus-visible { outline-color: var(--acs-cream); }
@media (max-width: 700px) {
  .acs-header-wrap--overlay .acs-menu-toggle:checked ~ .acs-nav {
    border-top-color: rgba(226, 212, 186, .18);
  }
  .acs-header-wrap--overlay .acs-menu-toggle:checked ~ .acs-nav a {
    border-bottom-color: rgba(226, 212, 186, .12);
  }
}

/* Mørk header: eget mørkt bånd med hvid/creme tekst. Baggrunden er
   nødvendig — flere af siderne har sand body, og uden den stod
   navigationen hvid på lys flade. */
.acs-header-wrap--dark { background: var(--acs-evergreen); }
.acs-header-wrap--dark .acs-header { border-bottom-color: var(--acs-rule-dark); }
.acs-header-wrap--dark .acs-header__logo img { filter: brightness(0) invert(1); }
.acs-header-wrap--dark .acs-nav a { color: #ffffff; }
.acs-header-wrap--dark .acs-nav a:hover { color: var(--acs-label-palm-dk); }
.acs-header-wrap--dark .acs-nav a[aria-current="page"] { color: #C8DCBB; }
.acs-header-wrap--dark .acs-nav .acs-nav__cta { color: #ffffff; }
.acs-header-wrap--dark .acs-burger { color: var(--acs-cream); }
.acs-header-wrap--dark .acs-burger__bars span { background: var(--acs-cream); }
.acs-header-wrap--dark a:focus-visible { outline-color: var(--acs-cream); }

.acs-header {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  /* Lidt mere luft over menulinjen end under — 32px top, 26px bund. */
  padding: 32px var(--acs-gutter) 26px;
  border-bottom: 1px solid var(--acs-rule-strong);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.acs-header__logo { display: flex; align-items: center; }
/* width:auto er nødvendig: uden den bliver width-attributten en
   præsentationshint, der klemmer logoet ud af sit rigtige forhold (273:19). */
.acs-header__logo img { height: 13px; width: auto; display: block; }

.acs-nav {
  display: flex;
  align-items: center;
  gap: clamp(14px, 1.9vw, 32px);
  flex-wrap: wrap;
  font-size: 15px;
  font-weight: var(--acs-w-body);
}
.acs-nav a { color: var(--acs-ink-nav); }
.acs-nav a:hover { color: var(--acs-label-blue); }
.acs-nav a[aria-current="page"] {
  color: var(--acs-label-blue);
  font-weight: var(--acs-w-bold);
}
.acs-nav .acs-nav__cta {
  color: var(--acs-ink);
  font-weight: var(--acs-w-bold);
}

/* --- Sprogvælger ---------------------------------------------------------
   Sidst i menulinjen, skilt fra resten af navigationen med en tynd lodret
   streg. Det valgte sprog står fuldt optonet og fed; det andet er dæmpet, så
   man kan se, hvad man står i, uden at skulle læse. */
.acs-sprogvalg {
  display: flex;
  align-items: center;
  gap: 6px;
  padding-left: clamp(24px, 2.6vw, 32px);
  border-left: 1px solid rgba(20, 30, 25, .22);
}
.acs-sprogvalg__skille { color: rgba(20, 30, 25, .3); }
.acs-sprogvalg__valg { color: rgba(20, 30, 25, .5); font-weight: var(--acs-w-body); }
.acs-sprogvalg__valg.is-aktiv { color: var(--acs-ink); font-weight: var(--acs-w-bold); }
.acs-nav .acs-sprogvalg__valg:hover { color: var(--acs-label-blue); }

/* På mørk bund — overlay-headeren, den mørke header og footeren. */
.acs-header-wrap--overlay .acs-sprogvalg,
.acs-header-wrap--dark .acs-sprogvalg,
  border-left-color: rgba(255, 255, 255, .28);
}
.acs-header-wrap--overlay .acs-sprogvalg__skille,
.acs-header-wrap--dark .acs-sprogvalg__skille,
  color: rgba(255, 255, 255, .3);
}
.acs-header-wrap--overlay .acs-nav .acs-sprogvalg__valg,
.acs-header-wrap--dark .acs-nav .acs-sprogvalg__valg,
  color: rgba(246, 241, 231, .5);
  font-weight: var(--acs-w-body);
}
.acs-header-wrap--overlay .acs-nav .acs-sprogvalg__valg.is-aktiv,
.acs-header-wrap--dark .acs-nav .acs-sprogvalg__valg.is-aktiv,
  color: #F6F1E7;
  font-weight: var(--acs-w-bold);
}
.acs-header-wrap--overlay .acs-nav .acs-sprogvalg__valg:hover,
.acs-header-wrap--dark .acs-nav .acs-sprogvalg__valg:hover,


@media (max-width: 700px) {
  /* I den udfoldede mobilmenu står valgene på egen linje uden lodret streg. */
  .acs-nav .acs-sprogvalg {
    padding-left: 0;
    border-left: 0;
    padding-top: 4px;
  }
}

/* Burgeren er en checkbox, så menuen virker uden JavaScript. */
.acs-menu-toggle {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.acs-burger {
  display: none;
  cursor: pointer;
  align-items: center;
  gap: 9px;
  color: var(--acs-ink);
  font-size: 13px;
  letter-spacing: .16em;
  text-transform: uppercase;
  padding: 8px 0;
}
.acs-burger__bars {
  display: flex;
  flex-direction: column;
  gap: 4px;
  width: 22px;
}
.acs-burger__bars span {
  display: block;
  height: 1px;
  background: var(--acs-ink);
}
.acs-menu-toggle:focus-visible + .acs-burger {
  outline: 2px solid var(--acs-blue);
  outline-offset: 3px;
}

@media (max-width: 700px) {
  .acs-header {
    padding: 18px var(--acs-gutter);
    gap: 12px;
  }
  .acs-burger { display: flex; }
  .acs-nav { display: none; }
  .acs-menu-toggle:checked ~ .acs-nav {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    width: 100%;
    gap: 0;
    flex-wrap: nowrap;
    margin-top: 6px;
    border-top: 1px solid var(--acs-rule-strong);
  }
  .acs-menu-toggle:checked ~ .acs-nav a {
    width: 100%;
    padding: 15px 0;
    border-bottom: 1px solid var(--acs-rule);
    font-size: 17px;
  }

  /* Den gennemsigtige header ligger oven på heroen. Når menuen foldes ud,
     skal den have en flade bag sig — ellers står linkene oven i
     hero-teksten og er ulæselige. */
  .acs-header-wrap--overlay:has(.acs-menu-toggle:checked) {
    background: var(--acs-evergreen);
  }
}

/* --- Footer -------------------------------------------------------------- */

.acs-footer {
  position: relative;
  background: var(--acs-evergreen);
  color: var(--acs-on-dark);
}
.acs-footer--bare { background: transparent; }

/* Olivengrøn footer — bruges når siden slutter på lokationsbåndet (#232E22),
   så footeren ligger i forlængelse af det i stedet for at bryde med en
   mørkere flade. */
.acs-footer--olive { background: #232E22; }

/* Lys footer på sand — bruges på sider der slutter på en lys flade. */
.acs-footer--light { background: var(--acs-sand); color: var(--acs-ink); }
.acs-footer--light .acs-footer__row { border-top-color: var(--acs-rule-strong); }
.acs-footer--light .acs-footer__logo img { filter: none; opacity: 1; }
.acs-footer--light .acs-footer__copy { color: rgba(4, 27, 21, .55); }
.acs-footer--light .acs-footer__links a { color: var(--acs-ink-nav); }
.acs-footer--light .acs-footer__links a:hover { color: var(--acs-label-blue); }
.acs-footer--light .acs-footer__links .acs-footer__cta { color: var(--acs-ink); }
.acs-footer--light a:focus-visible { outline-color: var(--acs-blue); }

.acs-footer__inner {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: clamp(24px, 2.6vw, 34px) var(--acs-gutter) clamp(28px, 3vw, 40px);
}
.acs-footer__row {
  border-top: 1px solid var(--acs-rule-dark);
  padding-top: clamp(20px, 2.4vw, 30px);
  display: flex;
  gap: clamp(24px, 4vw, 56px);
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
}
.acs-footer__logo { display: block; }
.acs-footer__logo img {
  /* Samme højde som header-logoet — de to skal stå visuelt ens. */
  height: 13px;
  width: auto;
  filter: brightness(0) invert(1);
  opacity: .9;
  display: block;
}
.acs-footer__copy {
  display: block;
  margin-top: 14px;
  font-size: 13px;
  font-weight: var(--acs-w-light);
  color: var(--acs-on-dark-faint);
}
.acs-footer__links {
  display: flex;
  gap: clamp(22px, 3vw, 44px);
  flex-wrap: wrap;
  align-items: center;
  font-size: 14px;
}
.acs-footer__links a {
  color: rgba(246, 241, 231, .8);
  font-weight: var(--acs-w-light);
}
.acs-footer__links a:hover { color: var(--acs-on-dark); }
.acs-footer__links .acs-footer__cta {
  color: #ffffff;
  font-weight: var(--acs-w-medium);
}
.acs-footer a:focus-visible {
  outline: 2px solid var(--acs-label-blue-dk);
  outline-offset: 3px;
}

/* Kun for skærmlæsere — giver ens links en unik, meningsfuld tekst. */
.acs-sr {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* --- Samtykkebjælke -------------------------------------------------------
   Fuldbredde bundbjælke i mørkegrøn. To kolonner på desktop: tekst og
   toggles til venstre, knapper og link til højre. Stakker på mobil.       */

.acs-consent {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  /* Bjælken må aldrig blive højere end skærmen. Den udfoldede forklaring kan
     være lang på en lille telefon, så den ruller indeni i stedet for at
     dække siden — og rulningen smitter ikke af på siden bagved. */
  max-height: 90vh;
  max-height: 90dvh;
  overflow-y: auto;
  overscroll-behavior: contain;
  z-index: 200;
  background: var(--acs-evergreen);
  color: var(--acs-on-dark);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.acs-consent[hidden] { display: none; }
.acs-consent__inner {
  max-width: var(--acs-maxw);
  margin: 0 auto;
  padding: clamp(32px, 3.5vw, 48px) clamp(40px, 6.5vw, 88px);
  display: flex;
  gap: 48px;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
}
.acs-consent__text { flex: 1 1 420px; min-width: 0; }
.acs-consent__titel {
  margin: 0 0 10px;
  font-size: 24px;
  font-weight: var(--acs-w-light);
  line-height: 1.2;
  color: var(--acs-on-dark);
}
.acs-consent__brod {
  margin: 0 0 18px;
  font-size: 15px;
  line-height: 1.6;
  color: rgba(246, 241, 231, .8);
  max-width: 62ch;
}

/* Toggles på én række, ombrydes ved pladsmangel. */
.acs-consent__toggles {
  display: flex;
  gap: 12px 32px;
  flex-wrap: wrap;
  align-items: center;
}
.acs-toggle {
  display: inline-flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  font-size: 15px;
  font-weight: var(--acs-w-medium);
  color: var(--acs-on-dark);
}
.acs-toggle input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
/* Aflang pille, 42×24 skaleret til ~85 % — 36×20 med 17px thumb. */
.acs-toggle__knap {
  position: relative;
  flex: 0 0 auto;
  width: 36px;
  height: 20px;
  border-radius: 999px;
  background: #d8cdb5;
  transition: background .2s ease;
}
.acs-toggle__knap::after {
  content: "";
  position: absolute;
  top: 1.5px;
  left: 1.5px;
  width: 17px;
  height: 17px;
  border-radius: 50%;
  background: #ffffff;
  transition: transform .2s ease;
}
.acs-toggle input:checked + .acs-toggle__knap { background: var(--acs-palm); }
.acs-toggle input:checked + .acs-toggle__knap::after { transform: translateX(16px); }
.acs-toggle input:focus-visible + .acs-toggle__knap {
  outline: 2px solid var(--acs-label-palm-dk);
  outline-offset: 3px;
}
.acs-toggle--laast { opacity: .6; cursor: not-allowed; }

/* Højre kolonne: knapper side om side, link under. */
/* Højre kolonne centreres lodret mod den højere tekstkolonne, så der er
   lige meget luft over og under knapper og link. */
.acs-consent__handling { flex: 0 0 auto; align-self: center; display: flex; flex-direction: column; align-items: flex-end; }
.acs-consent__knapper { display: flex; gap: 10px; flex-wrap: wrap; }
.acs-consent__knap {
  background: transparent;
  border: 1px solid rgba(246, 241, 231, .5);
  border-radius: 0;
  padding: 12px 22px;
  cursor: pointer;
  font-family: inherit;
  font-size: 15px;
  line-height: 1.2;
  font-weight: var(--acs-w-medium);
  color: var(--acs-on-dark);
  transition: background .2s, border-color .2s;
}
.acs-consent__knap:hover { border-color: var(--acs-on-dark); }
.acs-consent__knap--primaer {
  background: var(--acs-on-dark);
  border-color: var(--acs-on-dark);
  color: var(--acs-evergreen);
}
.acs-consent__knap--primaer:hover { background: #ffffff; border-color: #ffffff; }
.acs-consent__knap:focus-visible { outline: 2px solid var(--acs-label-palm-dk); outline-offset: 3px; }
.acs-consent__link {
  margin-top: 28px;
  font-size: 14px;
  color: var(--acs-on-dark);
  text-decoration: none;
}
.acs-consent__link:hover { color: var(--acs-label-palm-dk); }

/* Den udfoldelige forklaring af, hvad hver tjeneste gør. Lukket som
   udgangspunkt, så bjælken bliver ved med at være til at overskue. */
.acs-consent__details { margin-top: 18px; max-width: 65ch; font-size: 14px; line-height: 1.6; }
.acs-consent__details summary { cursor: pointer; padding: 8px 0; text-decoration: underline; }
.acs-consent__details p { margin: 12px 0 0; }

/* Vises kun, hvis valget ikke kunne gemmes — fx når cookies er slået fra. */
.acs-consent__error { margin: 12px 0 0; font-size: 14px; }
.acs-consent__error[hidden] { display: none; }

@media (max-width: 700px) {
  .acs-consent__inner { padding: 24px 20px; gap: 24px; }
  .acs-consent__handling { width: 100%; align-items: flex-start; }
  /* Knapperne i fuld bredde under hinanden, og høje nok til en tommelfinger. */
  .acs-consent__knapper { width: 100%; display: grid; grid-template-columns: 1fr; }
  .acs-consent__knap { min-height: 44px; }

  /* De tre valg skal stå på én linje. Kontakten og teksten skrumper lige
     akkurat nok til, at "Marketing" ikke bliver skubbet ned — og de tre
     bliver ved med at dele bredden ligeligt, også på en smal telefon. */
  .acs-consent__toggles { flex-wrap: nowrap; gap: clamp(8px, 3vw, 18px); }
  .acs-toggle {
    gap: clamp(6px, 2vw, 10px);
    font-size: clamp(12px, 3.5vw, 14px);
    white-space: nowrap;
  }
  .acs-toggle__knap { width: 32px; height: 18px; }
  .acs-toggle__knap::after { width: 15px; height: 15px; }
  .acs-toggle input:checked + .acs-toggle__knap::after { transform: translateX(14px); }
}

/* De smalleste telefoner — iPhone SE og lignende. De tre valg fylder her mere
   end rækken er bred, så kontakt, luft og tekst strammes en tak mere. */
@media (max-width: 360px) {
  .acs-consent__toggles { gap: 8px; }
  .acs-toggle { gap: 5px; font-size: 11px; }
  .acs-toggle__knap { width: 28px; height: 16px; }
  .acs-toggle__knap::after { width: 13px; height: 13px; }
  .acs-toggle input:checked + .acs-toggle__knap::after { transform: translateX(12px); }
}