/* ==========================================================================================================
   Header, design v2 (spec §5.1, P2, D5-D9, D14). Kit source: design/redesign/kit/css/gp-header.css, installed as
   static/css/gp-header.css (loaded by base.html after gp-base.css). It REPLACES the header block of base.css
   (removed by kit patch 05). Markup: templates/partials/header.html (site-header … kept; gp-header, gp-mega,
   gp-search-toggle, gp-drawer-only new). Polish B: Kundelogin as a quiet text link left of the CTA from 992 (the same
   element is the outline button in the drawer; site-nav__login), a 40 px close button in the opened search (992-1279).

   One floating frosted bar with zero layout height: it overlays the first band, which reserves
   --gp-header-reserve (gp-base.css). --header-h (tokens) stays "space the bar covers" (84 / 76) for
   scroll-padding, sticky columns and the sticky plan head. Phones: lock-up 185 × 40, search icon, burger, no CTA
   (D8); the drawer grows out of the bar (D7: nothing inside the blurred bar may be position: fixed).
   From 992: the nav row; from 1280 the search field (992-1279: an icon that opens the field over the nav).
   Acceptance A-2: no CSS `order` – the DOM order is the visual order at every width. The drawer has its own copy of
   the search form (above the menu) and of Kundelogin (under the CTA): .gp-drawer-only; the bar's copies are
   .gp-bar-only (.site-search--bar, Kundelogin left of the CTA). The copy of the other layout is display: none.
   ========================================================================================================== */
html { scroll-padding-top: calc(var(--header-h) + 16px); }

.site-header { position: sticky; top: 0; z-index: var(--z-header); height: 0; }

.gp-header .site-header__inner {
  position: relative; top: var(--gp-header-top);
  display: flex; flex-wrap: wrap; align-items: center; align-content: flex-start; column-gap: 4px;
  width: calc(100% - 24px); max-width: var(--gp-header-max); min-height: var(--gp-header-h);
  margin-inline: auto; padding: 10px 10px 10px 16px;
  border-radius: var(--gp-radius-header-bar);
  background: rgba(255, 255, 255, .8);
  -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px);
  color: var(--gp-heading);
  transition: background-color var(--gp-dur-header) var(--gp-ease-header), box-shadow var(--gp-dur-header) var(--gp-ease-header);
}
.site-header.is-scrolled .site-header__inner,
.site-header.is-open .site-header__inner { background: rgba(255, 255, 255, .92); box-shadow: var(--gp-shadow-header); }
.site-header.is-open .site-header__inner { background: var(--gp-page); max-height: calc(100dvh - 24px); overflow-y: auto;
  overscroll-behavior: contain; }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  .gp-header .site-header__inner, .site-header.is-scrolled .site-header__inner { background: rgba(255, 255, 255, .96); }
}

.site-header__brand { display: block; flex: none; margin-right: auto; border-radius: 8px; }
.site-header__brand img { width: 185px; height: 40px; }

/* icon buttons in the bar (44 touch targets) */
.gp-search-toggle, .nav-toggle {
  position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; flex: none; padding: 0;
  border: 0; border-radius: var(--gp-radius-button); background: transparent; color: var(--gp-heading);
  transition: background-color var(--gp-dur-colour) var(--gp-ease);
}
.gp-search-toggle:hover, .nav-toggle:hover { background: var(--gp-stone); color: var(--gp-heading); }
.gp-search-toggle--nav { display: none; }
.nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after {
  display: block; width: 20px; height: 2px; border-radius: 2px; background: currentColor; position: relative;
  transition: transform var(--gp-dur-drawer) var(--gp-ease), background-color var(--gp-dur-drawer) var(--gp-ease);
}
.nav-toggle__icon::before, .nav-toggle__icon::after { content: ""; position: absolute; left: 0; }
.nav-toggle__icon::before { top: -6px; }
.nav-toggle__icon::after { top: 6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::before { transform: translateY(6px) rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__icon::after { transform: translateY(-6px) rotate(-45deg); }

/* ---- the drawer (phones and tablets): the bar grows downward ---- */
/* its scrim (finish, QA P3-16): 40 % heading navy over the page behind the open drawer, below 992 only. It is the
   header's own ::before (fixed, painted under the bar), never inside the blurred bar (D7); a tap on it closes the menu
   (js/site.js: a click whose target is the header itself). Fades in with the drawer; reduced motion: no fade. */
@media (max-width: 991px) {
  .site-header.is-open::before { content: ""; position: fixed; inset: 0; background: rgba(5, 38, 76, .4);
    animation: gp-fade var(--gp-dur-drawer) var(--gp-ease); }
}
.site-nav { display: none; }
.site-nav.is-open { display: flex; flex-direction: column; flex-basis: 100%; gap: 12px; padding: 12px 6px 6px 0; }
/* the drawer in DOM order: search (drawer copy), menu, CTA, Kundelogin (drawer copy), languages (drawer copy) */
.site-nav__actions { display: contents; }
.site-nav.is-open .site-nav__cta { display: flex; width: 100%; min-height: var(--gp-btn-h-lg); }
.site-nav.is-open .site-nav__login.gp-drawer-only { min-height: var(--gp-btn-h-lg); }
.gp-drawer-only, .gp-bar-only { display: none; }
.site-nav.is-open .gp-drawer-only { display: flex; }

.site-nav__list { list-style: none; margin: 0; padding: 0; }
.site-nav__item { position: relative; border-bottom: var(--gp-border); }
.site-nav__link {
  display: flex; align-items: center; justify-content: space-between; gap: 6px; width: 100%; min-height: 56px;
  padding: 0 4px; border: 0; background: none; color: var(--gp-heading); text-align: left;
  font-size: 17px; line-height: 24px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.site-nav__link:hover { color: var(--gp-heading); text-decoration: none; }
.site-nav__link[aria-current="page"] { color: var(--gp-link); }
.site-nav__link.is-placeholder { cursor: default; }
.site-nav__chevron { flex: none; transition: transform var(--gp-dur-dropdown) var(--gp-ease); }
.site-nav__toggle[aria-expanded="true"] .site-nav__chevron { transform: rotate(180deg); }

.nav-dropdown { display: none; padding: 0 0 12px 16px; }
.has-dropdown.is-open > .nav-dropdown { display: block; }
.nav-dropdown__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
.nav-dropdown__link {
  display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 6px 8px;
  border-radius: var(--gp-radius-button); color: var(--gp-heading);
  font-size: var(--gp-fs-nav); line-height: var(--gp-lh-nav); font-weight: var(--gp-fw-nav); text-decoration: none;
}
.nav-dropdown__link:hover { background: var(--gp-stone); color: var(--gp-heading); text-decoration: none; }
.nav-dropdown__link[aria-current="page"] { background: var(--gp-accent-tint); }
.nav-dropdown__link.is-placeholder { color: var(--gp-muted); cursor: default; }
.nav-dropdown__link.is-placeholder:hover { background: none; }
.nav-dropdown__text { display: block; margin-top: 2px; color: var(--gp-muted); font-size: 14px; font-weight: 400; }
.nav-dropdown__icon { width: 24px; height: 24px; }
.nav-dropdown__item--overview .nav-dropdown__link { color: var(--gp-link); font-weight: 600; }
.gp-mega__promo { display: none; }

/* search field: stone fill, radius 12 (48 high in the drawer, 40 in the bar) */
.site-search { position: relative; display: none; align-items: center; }
.site-search__input {
  width: 100%; height: 48px; padding: 0 44px 0 16px;
  border: 1px solid transparent; border-radius: var(--gp-radius-input); background: var(--gp-stone); color: var(--gp-heading);
  font-size: 16px; -webkit-appearance: none; appearance: none;
  transition: border-color var(--gp-dur-colour) var(--gp-ease), background-color var(--gp-dur-colour) var(--gp-ease);
}
.site-search__input::placeholder { color: var(--gp-muted); opacity: 1; }
.site-search__input:hover { border-color: var(--gp-line-strong); }
.site-search__input:focus { outline: none; border-color: var(--gp-focus); box-shadow: 0 0 0 3px var(--gp-accent-tint);
  background: var(--gp-page); }
.site-search__input::-webkit-search-cancel-button { -webkit-appearance: none; }
.site-search__btn { position: absolute; right: 4px; top: 50%; translate: 0 -50%; display: grid; place-items: center;
  width: 36px; height: 36px; padding: 0; border: 0; border-radius: 10px; background: transparent; color: var(--gp-heading); }
.site-search__btn:hover { background: var(--gp-hairline); }
.site-search__close { display: none; }
.site-header .search-pop { top: calc(100% + 8px); }

/* language chooser (English site E1b; templates/partials/lang_switch.html): only while more than one language is
   enabled. Three copies, the DOM order is the visual order (A-2): the bar (.lang-switch__link--bar, from 992, before
   Kundelogin: globe + the other language's name; 992-1279 the code, the name stays the accessible name), the drawer
   (.lang-switch--drawer, after Kundelogin: "Dansk · English", 44 px targets, the current one tinted like an
   aria-current nav item) and the footer's legal row (.lang-switch--footer: the legal links' look, 24 px targets).
   The list's globe is a CSS mask of the library icon ui-14/globe (an <svg> cannot sit in a <ul>). */
.lang-switch { display: flex; flex-wrap: wrap; align-items: center; gap: 0 2px; list-style: none; margin: 0; padding: 0;
  color: var(--gp-muted); }
.lang-switch::before { content: ""; flex: none; width: 16px; height: 16px; margin-right: 6px; background: currentColor;
  -webkit-mask: url("../img/icons/ui-14/globe.e594263dad62.svg") center / contain no-repeat;
  mask: url("../img/icons/ui-14/globe.e594263dad62.svg") center / contain no-repeat; }
.lang-switch li { display: flex; align-items: center; }
.lang-switch li + li::before { content: "·"; content: "·" / ""; margin-right: 2px; color: var(--gp-muted); }
.lang-switch__link { display: inline-flex; align-items: center; justify-content: center; min-width: 24px; min-height: 24px;
  padding: 0 6px; border-radius: 8px; color: var(--gp-heading); text-decoration: none; white-space: nowrap; }
.lang-switch__link:hover { color: var(--gp-heading); text-decoration: underline; }
.lang-switch__link[aria-current] { font-weight: 600; }
.site-nav.is-open .lang-switch--drawer { justify-content: center; color: var(--gp-heading); font-size: 16px; line-height: 24px; }
.lang-switch--drawer .lang-switch__link { min-width: 44px; min-height: 44px; padding: 0 14px;
  border-radius: var(--gp-radius-button); font-weight: 500; }
.lang-switch--drawer .lang-switch__link:hover { background: var(--gp-stone); text-decoration: none; }
.lang-switch--drawer .lang-switch__link[aria-current] { background: var(--gp-accent-tint); font-weight: 600; }
.gp-footer .site-footer__legal .lang-switch__link[aria-current] { color: var(--gp-heading); }
.lang-switch__link.gp-bar-only { display: none; }  /* the bar copy (shown from 992 below); beats .lang-switch__link */
.lang-switch__icon { flex: none; width: 16px; height: 16px; }
.lang-switch__code { display: none; }

@media (max-width: 991px) {
  body.nav-open { overflow: hidden; }
  .site-nav .site-search--bar { display: none; }  /* also without JS (base.html <noscript> shows .site-search) */
}

/* ---- desktop: the nav row inside the 72 px bar ---- */
@media (min-width: 992px) {
  .gp-header .site-header__inner {
    flex-wrap: nowrap; column-gap: 8px; width: min(var(--gp-header-max), 100% - 32px); height: var(--gp-header-h);
    padding: 0 14px 0 24px;
  }
  .site-header.is-open .site-header__inner { max-height: none; overflow: visible; }
  .site-header__brand { margin-right: 20px; }
  .site-header__brand img { width: 205px; height: 44px; }
  .gp-search-toggle--bar, .nav-toggle { display: none; }

  .site-nav, .site-nav.is-open { display: flex; flex-direction: row; flex: 1; align-items: center; gap: 8px;
    height: 100%; min-width: 0; padding: 0; }
  .site-nav__menu { height: 100%; }
  .site-nav__list { display: flex; height: 100%; gap: 2px; }
  .site-nav__item { display: flex; align-items: center; border: 0; }
  .site-nav__link {
    width: auto; min-height: 40px; padding: 0 12px; border-radius: var(--gp-radius-button);
    font-size: var(--gp-fs-nav); line-height: var(--gp-lh-nav); font-weight: var(--gp-fw-nav);
    transition: background-color var(--gp-dur-colour) var(--gp-ease);
  }
  .site-nav__link:hover, .site-nav__link[aria-expanded="true"] { background: var(--gp-stone); }
  .site-nav__link[aria-current="page"], .has-dropdown:has([aria-current="page"]) > .site-nav__link {
    background: var(--gp-accent-tint); color: var(--gp-heading); }

  .site-nav__actions { display: flex; align-items: center; gap: 8px; margin-left: auto; }
  .site-nav__cta, .site-nav.is-open .site-nav__cta { display: inline-flex; width: auto; min-height: var(--gp-btn-h-sm); }
  .gp-drawer-only, .site-nav.is-open .gp-drawer-only { display: none; }
  /* Kundelogin (the bar copy): a quiet text link (nav-link size and colour, no border), left of the CTA */
  .site-nav__login.gp-bar-only {
    display: inline-flex; align-items: center; justify-content: center; width: auto; min-height: 40px; padding: 0 12px;
    border: 0; border-radius: var(--gp-radius-button); background: none; text-decoration: none; white-space: nowrap;
    color: var(--gp-heading); font-size: var(--gp-fs-nav); line-height: var(--gp-lh-nav); font-weight: var(--gp-fw-nav);
    transition: background-color var(--gp-dur-colour) var(--gp-ease); }
  .site-nav__actions .site-nav__login:hover { background: var(--gp-stone); color: var(--gp-heading); }
  .site-nav__actions .site-nav__login[aria-current="page"] { background: var(--gp-accent-tint); }
  /* the language chooser's bar copy: a quiet link like Kundelogin, globe + the other language (E1b) */
  .lang-switch__link--bar.gp-bar-only {
    display: inline-flex; gap: 6px; min-height: 40px; padding: 0 10px; border-radius: var(--gp-radius-button);
    color: var(--gp-heading); font-size: var(--gp-fs-nav); line-height: var(--gp-lh-nav); font-weight: var(--gp-fw-nav);
    transition: background-color var(--gp-dur-colour) var(--gp-ease); }
  .lang-switch__link--bar:hover { background: var(--gp-stone); color: var(--gp-heading); text-decoration: none; }
  .gp-search-toggle--nav { display: inline-grid; width: 40px; height: 40px; }
  .site-nav.is-open .site-search, .site-search { display: none; }

  /* dropdowns: white cards 8 px under the bar, the header shadow; they fade + rise 4 px */
  .nav-dropdown {
    position: absolute; z-index: 2; left: -8px; top: calc(50% + var(--gp-header-h) / 2 + 8px);
    width: 280px; padding: 12px; border-radius: var(--gp-radius-mega-menu);
    background: var(--gp-page); box-shadow: var(--gp-shadow-header), 0 0 0 1px rgba(25, 25, 25, .04);
  }
  .has-dropdown.is-open > .nav-dropdown { animation: gp-drop var(--gp-dur-dropdown) var(--gp-ease); }
  .nav-dropdown__link { min-height: 40px; padding: 8px 12px; }

  .gp-mega { width: 720px; }
  .has-dropdown.is-open > .gp-mega { display: grid; grid-template-columns: 1fr 240px; gap: 12px; }
  .gp-mega .nav-dropdown__list { grid-template-columns: 1fr 1fr; align-content: start; gap: 4px; }
  .gp-mega .nav-dropdown__link { min-height: 56px; }
  .gp-mega__promo { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: 0;
    padding: 20px; border-radius: 16px; background: var(--gp-stone); }
  .gp-mega__promo-title { margin: 0; color: var(--gp-heading); font-size: 18px; line-height: 24px; font-weight: 600; }
  .gp-mega__promo-text { margin: 0 0 8px; color: var(--gp-muted); font-size: 14px; line-height: 20px; }
  .site-header .search-pop { top: calc(100% + 24px); }
}
@media (min-width: 1280px) {
  .gp-search-toggle--nav { display: none; }
  .site-search--bar, .site-nav.is-open .site-search--bar { display: flex; width: 200px; }
  .site-search__input { height: 40px; font-size: 15px; }
}
/* 992-1279: the icon opens the field over the nav row */
@media (min-width: 992px) and (max-width: 1279px) {
  /* the chooser shows the code (EN / DA); the full name stays its accessible name (E1b) */
  .lang-switch__link--bar .lang-switch__name { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0;
    overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
  .lang-switch__link--bar .lang-switch__code { display: inline; }
  /* with the chooser in the bar the row is ~70 px longer: tighter spacing so it fits from 992 (the English labels
     "Customer login", "Free demo" are the longest). Only while the chooser is there (one language: unchanged). */
  .gp-header:has(.lang-switch__link--bar) .site-header__brand { margin-right: 12px; }
  .gp-header:has(.lang-switch__link--bar) .site-nav { gap: 4px; }
  .gp-header:has(.lang-switch__link--bar) .site-nav__list { gap: 0; }
  .gp-header:has(.lang-switch__link--bar) .site-nav__link { padding: 0 8px; }
  .gp-header:has(.lang-switch__link--bar) .site-nav__actions { gap: 4px; }
  .gp-header:has(.lang-switch__link--bar) .site-nav__login.gp-bar-only { padding: 0 8px; }
  .lang-switch__link--bar.gp-bar-only { gap: 4px; padding: 0 8px; }
  .site-header.is-search-open .site-search--bar, .site-header.is-search-open .site-nav.is-open .site-search--bar {
    display: flex; position: absolute; left: 248px; right: 160px; top: 16px; z-index: 2; }
  .site-header.is-search-open .site-search__input { height: 40px; background: var(--gp-page); border-color: var(--gp-line-strong); }
  /* the open field gets a visible way out (QA P3-15): a 40 px "×" after the field; Esc and a click outside still close */
  .site-header.is-search-open .site-search { gap: 8px; }
  .site-header.is-search-open :is(.site-nav__menu, .site-nav__login, .lang-switch__link--bar, .gp-search-toggle--nav) { visibility: hidden; }
  .site-header.is-search-open .site-search__btn { right: 52px; }
  .site-header.is-search-open .site-search__close { display: inline-grid; place-items: center; flex: none; width: 40px; height: 40px;
    padding: 0; border: 0; border-radius: var(--gp-radius-button); background: var(--gp-stone); color: var(--gp-heading); cursor: pointer; }
  .site-header.is-search-open .site-search__close:hover { background: var(--gp-hairline); }
}
@keyframes gp-drop { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
@keyframes gp-fade { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
  .has-dropdown.is-open > .nav-dropdown, .site-header.is-open::before { animation: none; }
  .gp-header .site-header__inner, .nav-toggle__icon, .nav-toggle__icon::before, .nav-toggle__icon::after { transition: none; }
}