/* ==========================================================================================================
   Golden Planet design v2: global base (stage 1 "globals"). Kit source: design/redesign/kit/css/gp-base.css,
   installed as static/css/gp-base.css, loaded by templates/base.html AFTER base.css, components.css, icons.css and
   search.css (and by 500.html), so equal-specificity rules here win.

   1. tones: every tone class (the v1 ones and the v2 ones) sets the OLD variable names (--surface, --text, --accent,
      --btn-bg … read by components.css, support.css, search.css, forms.css) AND the v2 names (--dot, --well, --rule,
      --btn-line …) from the v1-mb roles in tokens.css. base.css no longer has a tone block (kit patch 05).
      tone-light = stone, tone-mint = the accent tint, tone-dark / -black / -dark-grey / -green = the navy surface.
   2. base type, links, focus, selection, the h1 highlight pill, the heading dot
   3. layout: container (one content edge with the trays), trays, the header reserve of the first band
   4. buttons, link-arrow, chips, status chip, swipe row, form inputs, utilities, reduced motion
   Page sections (heroes, blocks, cards, FAQ …) are in gp-sections.css / gp-cards.css / gp-faq.css and only apply
   under body.gp-v2 (pages converted to design v2 add that class in {% block body_class %}).
   ========================================================================================================== */

/* ---- 1. tones -------------------------------------------------------------------------------------------- */
:root, .tone-white, .tone-light, .tone-stone, .tone-mint,
.card--shadow, .card--raised, .pricing-panel {
  --surface: var(--gp-page);
  --text: var(--gp-ink);
  --heading: var(--gp-heading);
  --muted: var(--gp-muted);
  --accent: var(--gp-link);               /* small accent text: eyebrows, counts */
  --accent-large: var(--gp-accent);       /* ==highlight== in h2/h3, ticks, large numbers */
  --accent-ui: var(--gp-accent);          /* meaningful icons, selected bars, UI borders */
  --accent-deco: var(--gp-dot);           /* decoration only */
  --link: var(--gp-link);
  --link-hover: var(--gp-link-hover);
  --focus: var(--gp-focus);
  --card: var(--gp-page);
  --card-alt: var(--gp-stone);
  --border: var(--gp-hairline);
  --border-strong: var(--gp-line-strong);
  --input-bg: var(--gp-page);
  --btn-bg: var(--gp-action);             /* btn--primary: white text 5.73 */
  --btn-text: var(--gp-action-text);
  --btn-hover: var(--gp-action-hover);
  --btn-alt-bg: var(--gp-heading);        /* btn--dark: the rare solid secondary */
  --btn-alt-text: var(--gp-on-dark);
  --btn-alt-hover: var(--gp-ink);
  --dot: var(--gp-dot);                   /* heading full stop: decorative, aria-hidden */
  --well: var(--gp-well);                 /* image wells, chip fill */
  --rule: var(--gp-hairline);
  --btn-line: var(--gp-line-strong);      /* outline button border (3.37) */
  --btn-line-text: var(--gp-heading);
  --btn-line-hover: rgba(5, 38, 76, .04);
  --icon-accent: var(--gp-icon-stroke);
  --icon-accent-fill: var(--gp-icon-fill);
  --icon-line: var(--gp-heading);
  --icon-surface: var(--surface);
}
.card--shadow, .card--raised, .pricing-panel { --surface: var(--gp-page); }
.tone-light, .tone-stone { --surface: var(--gp-stone); --card-alt: var(--gp-page); --well: var(--gp-well-alt);
  --icon-surface: var(--gp-stone); }
.tone-mint {
  --surface: var(--gp-accent-tint);
  --accent: var(--gp-accent-text);        /* 6.80 on the tint (the action blue is 5.0) */
  --accent-large: var(--gp-accent-text);
  --accent-ui: var(--gp-accent-text);
  --link: var(--gp-accent-text);
  --link-hover: var(--gp-heading);
  --focus: var(--gp-accent-text);
  --card-alt: var(--gp-page);
  --well: var(--gp-page);
  --icon-accent: var(--gp-accent-text);
  --icon-surface: var(--gp-accent-tint);
}
.tone-dark, .tone-black, .tone-dark-grey, .tone-green, .tone-deep {
  --surface: var(--gp-surface-dark);
  --text: var(--gp-on-dark);
  --heading: var(--gp-on-dark);
  --muted: var(--gp-on-dark-muted);
  --accent: var(--gp-link-on-dark);
  --accent-large: var(--gp-dot-on-dark);
  --accent-ui: var(--gp-link-on-dark);
  --accent-deco: var(--gp-dot-on-dark);
  --link: var(--gp-link-on-dark);
  --link-hover: var(--gp-on-dark);
  --focus: var(--gp-focus-on-dark);
  --card: var(--gp-dark-raised);
  --card-alt: var(--gp-dark-raised);
  --border: rgba(255, 255, 255, .16);
  --border-strong: rgba(255, 255, 255, .6);
  --input-bg: var(--gp-dark-raised);
  --btn-bg: var(--gp-action);
  --btn-text: var(--gp-action-text);
  --btn-hover: var(--gp-action-hover);
  --btn-alt-bg: var(--gp-page);
  --btn-alt-text: var(--gp-heading);
  --btn-alt-hover: var(--gp-accent-tint);
  --dot: var(--gp-dot-on-dark);
  --well: var(--gp-dark-raised);
  --rule: rgba(255, 255, 255, .16);
  --btn-line: rgba(255, 255, 255, .6);
  --btn-line-text: var(--gp-on-dark);
  --btn-line-hover: rgba(255, 255, 255, .08);
  --icon-accent: var(--gp-dot-on-dark);
  --icon-accent-fill: var(--gp-icon-fill);
  --icon-line: var(--gp-on-dark-muted);
  --icon-surface: var(--gp-surface-dark);
}
.tone-dark-grey { --surface: var(--gp-dark-raised); --card: var(--gp-surface-dark); --card-alt: var(--gp-surface-dark);
  --input-bg: var(--gp-surface-dark); --icon-surface: var(--gp-dark-raised); }
.tone-white, .tone-light, .tone-stone, .tone-mint, .tone-dark, .tone-black, .tone-dark-grey, .tone-green, .tone-deep {
  background-color: var(--surface); color: var(--text);
}
/* dark-tone component lists in components.css name only dark/black/dark-grey: the navy surface needs no extra
   selectors because tone-deep and tone-green share the variables; the few hard-wired light fills are reset here */
:is(.tone-dark, .tone-black, .tone-dark-grey, .tone-green, .tone-deep) :is(.eyebrow--badge, .badge) {
  background: var(--badge-bg); color: var(--gp-link-on-dark); }
:is(.tone-dark, .tone-black, .tone-dark-grey, .tone-green, .tone-deep) .card__icon {
  background: var(--gp-dark-raised); --icon-surface: var(--gp-dark-raised); color: var(--gp-on-dark); }

/* ---- 2. type ------------------------------------------------------------------------------------------- */
body { background: var(--surface); color: var(--text); font-family: var(--gp-font-sans);
  font-size: var(--gp-fs-body); line-height: var(--gp-lh-body); }
h1, h2, h3, h4, h5, h6, .h1, .h2, .h3, .h4, .h5, .h6 { color: var(--heading); }
h1, .h1 { font-weight: 600; letter-spacing: -.025em; }
h2, .h2 { font-weight: 600; letter-spacing: -.022em; }
h3, .h3 { letter-spacing: -.015em; }
strong, b { font-weight: 600; }
a { transition: color var(--gp-dur-colour) var(--gp-ease); }
::selection { background: var(--gp-accent-tint); color: var(--gp-heading); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }

/* heading full stop (spec §5.9, D15): <span class="gp-dot" aria-hidden="true">.</span> after h1 / section h2 */
.gp-dot { color: var(--dot); }
/* the highlight: a tint pill inside an h1 (13.27), accent text inside h2/h3 */
h1 .text-accent, .h1 .text-accent {
  background: var(--gp-highlight-bg); color: var(--gp-highlight-text);
  border-radius: var(--gp-radius-chip); padding: 0 .16em .02em;
  margin-inline: -.16em;   /* = the padding: the text keeps the h1's left edge, the tint overhangs (finish, QA P3-2) */
  -webkit-box-decoration-break: clone; box-decoration-break: clone;
  white-space: nowrap;   /* the pill never breaks into two (QA P3-2); highlights are 1-3 short words */
}
:is(.tone-dark, .tone-black, .tone-dark-grey, .tone-green, .tone-deep) h1 .text-accent { color: var(--gp-heading); }
h2 .text-accent, h3 .text-accent { color: var(--accent-large); }
.eyebrow { color: var(--accent); }

/* ---- 3. layout ----------------------------------------------------------------------------------------- */
/* The container's side padding = tray inset + tray padding, so white bands, trays, the header bar and the footer
   share one content edge (1200 at 1280, 1240 from 1320, 342 at 390). Inside a tray only the tray padding remains. */
.container {
  --gutter: calc(var(--gp-tray-inset) + var(--gp-tray-pad-x));
  width: 100%;
  max-width: calc(var(--gp-container) + 2 * var(--gutter));
  margin-inline: auto;
  padding-inline: var(--gutter);
}
.container--narrow { max-width: calc(var(--container-narrow) + 2 * var(--gutter)); }
.container--text { max-width: calc(var(--container-text) + 2 * var(--gutter)); }
.gp-tray > .container { --gutter: var(--gp-tray-pad-x); }

/* trays: rounded panels inset from the screen edge (spec §5.3, D11); clip, never hidden/auto (D10) */
.gp-tray {
  position: relative;
  margin-inline: max(var(--gp-tray-inset), (100% - var(--gp-tray-max)) / 2);
  border-radius: var(--gp-radius-tray);
}
.section.gp-tray { padding-block: var(--gp-tray-y); }
.gp-tray + .gp-tray { margin-top: var(--gp-tray-gap); }
.gp-tray--outline { border: var(--gp-border); }
.gp-tray--top { border-bottom-left-radius: 0; border-bottom-right-radius: 0; }
.gp-tray--bottom { border-top-left-radius: 0; border-top-right-radius: 0; }
.gp-tray--top + .gp-tray--bottom { margin-top: 0; }

/* The floating header has zero layout height (gp-header.css): the first band of <main> reserves the bar.
   v2 heroes (hero--photo, hero--plain) reserve it themselves; an older first band gets the reserve + 32. */
main > :first-child:not(.hero--photo):not(.hero--plain):not(.gp-reserve-self) {
  padding-top: calc(var(--gp-header-reserve) + var(--gp-space-6));
}
main > :first-child:is(.support-bar, .preview-banner, .search-page, .breadcrumbs-bar) {
  padding-top: var(--gp-header-reserve);
}

/* ---- 4. buttons (partials/button.html: btn btn--primary | --outline | --dark, sizes --sm | --lg, --block) ----- */
.btn {
  gap: 8px; min-height: var(--gp-btn-h); padding: 0 var(--gp-btn-px);
  border: var(--gp-btn-border) solid transparent; border-radius: var(--gp-radius-button);
  font-family: var(--gp-font-sans); font-size: var(--gp-fs-button); line-height: var(--gp-lh-button); font-weight: 600;
  white-space: nowrap;
  transition: background-color var(--gp-dur-colour) var(--gp-ease), border-color var(--gp-dur-colour) var(--gp-ease),
    color var(--gp-dur-colour) var(--gp-ease);
}
.btn--primary { background: var(--btn-bg); color: var(--btn-text); }
.btn--primary:hover { background: var(--btn-hover); color: var(--btn-text); }
.btn--outline { background: transparent; color: var(--btn-line-text); border-color: var(--btn-line); }
.btn--outline:hover { color: var(--btn-line-text); border-color: currentColor; background: var(--btn-line-hover); }
.btn--dark { background: var(--btn-alt-bg); color: var(--btn-alt-text); }
.btn--dark:hover { background: var(--btn-alt-hover); color: var(--btn-alt-text); }
.btn--light:hover { background: var(--gp-accent-tint); color: var(--gp-heading); }
.btn--xs { min-height: 34px; padding-inline: 12px; font-size: 14px; }
.btn--sm { min-height: var(--gp-btn-h-sm); padding-inline: var(--gp-btn-px-sm); font-size: var(--gp-fs-button); }
.btn--md { min-height: var(--gp-btn-h); padding-inline: var(--gp-btn-px); font-size: var(--gp-fs-button); }
.btn--lg { min-height: var(--gp-btn-h-lg); padding-inline: var(--gp-btn-px-lg); font-size: var(--gp-fs-button-lg); }
.btn--block { display: flex; width: 100%; }
.btn-arrow--dark .btn-arrow__label { background: var(--gp-action); color: var(--gp-action-text); }
.btn-arrow--dark:hover .btn-arrow__label { background: var(--gp-action-hover); color: var(--gp-action-text); }

/* text link with arrow ("Læs mere →"): the arrow is glued to the last word by a no-break space and moves 4 px */
.link-arrow { display: inline; gap: 0; color: var(--link); font-weight: 600; text-decoration: none; }
.link-arrow::after { content: "\00a0\2192"; margin-left: 0; transform: none;
  transition: margin-left var(--gp-dur-arrow) var(--gp-ease); }
.gp-link-external::after { content: "\00a0\2197"; }
.link-arrow:hover { color: var(--link-hover); text-decoration: underline; text-decoration-thickness: 1px; gap: 0; }
.link-arrow:hover::after { margin-left: var(--gp-arrow-shift); transform: none; }

/* chips (spec §5.9): 36 high, radius 12, stone on white (white on stone), 2 px line; current = accent tint */
.gp-chips { display: flex; flex-wrap: wrap; gap: var(--gp-chip-gap); list-style: none; margin: 0; padding: 0; }
.gp-chips > li { display: flex; flex: none; }
.gp-chip {
  display: inline-flex; align-items: center; gap: 8px; flex: none;
  min-height: var(--gp-chip-h); margin: 0; padding: 0 var(--gp-chip-px);
  background: var(--well); border: var(--gp-border); border-radius: var(--gp-radius-chip);
  color: var(--gp-heading); font-size: var(--gp-fs-chip); line-height: var(--gp-lh-chip); font-weight: var(--gp-fw-chip);
  text-decoration: none; white-space: nowrap;
  transition: border-color var(--gp-dur-colour) var(--gp-ease), background-color var(--gp-dur-colour) var(--gp-ease);
}
.tone-stone .gp-chip, .tone-light .gp-chip { background: var(--gp-page); }
.gp-chip:hover { border-color: var(--gp-action); color: var(--gp-heading); text-decoration: none; }
.gp-chip[aria-selected="true"], .gp-chip[aria-current] { background: var(--gp-accent-tint); border-color: var(--gp-action);
  color: var(--gp-accent-text); }
.gp-chip .icon { width: 20px; height: 20px; --icon-line: var(--gp-heading); }

/* badges: neutral tint (eyebrow badges, "Nyhed" keeps coral); .badge--status = the functional green (Gratis, versions) */
.eyebrow--badge, .badge { border-radius: var(--gp-radius-status-chip); background: var(--gp-accent-tint);
  color: var(--gp-accent-text); }
.badge--status { background: var(--gp-status-bg); color: var(--gp-status-text); }
.badge--dot::before { background: var(--gp-accent); }

/* swipe row (spec §5.9, D12): scroll-snap on phones; containers become grids from 768 (in their own CSS) */
.gp-swipe {
  display: flex; gap: 12px; overflow-x: auto; overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory; scroll-padding-inline: var(--gutter);
  margin-inline: calc(-1 * var(--gutter)); padding: 4px var(--gutter) 12px;
  list-style: none;
}
.gp-swipe > * { position: relative; flex: 0 0 85%; scroll-snap-align: start; }
.gp-swipe:focus-visible { outline-offset: -2px; }

/* form inputs: radius 12, 48 high, line-strong border, focus = focus border + a soft halo */
.form-input { min-height: 48px; border-radius: var(--gp-radius-input); border-color: var(--border-strong); }
.form-input:hover { border-color: var(--heading); }
.form-input:focus { border-color: var(--focus); box-shadow: var(--focus-ring); }
.form-check input { accent-color: var(--gp-action); }

/* icons (static/css/icons.css reads --icon-*): the line colour follows the tone */
.icon--line-32 { color: var(--icon-line, currentColor); }

/* utilities */
.skip-link { left: 12px; top: -80px; z-index: calc(var(--z-header) + 2); border-radius: var(--gp-radius-button);
  background: var(--gp-heading); color: var(--gp-on-dark); font-weight: 600; text-decoration: none; }
.skip-link:focus { top: 12px; color: var(--gp-on-dark); }

/* motion: nothing moves under reduced motion (colour changes may stay) */
@media (prefers-reduced-motion: reduce) {
  .link-arrow::after { transition: none; margin-left: 0 !important; }
  .btn, .gp-chip { transition: none; }
}