/* ============================================================
   BASE RESET
============================================================ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; font-size: 16px; }

/* Red scroll thumb floating over the page (Martin, 2026-10-05): no track
   and no gutter, the page runs full width under it. Browsers always set
   aside a gutter for a native scrollbar, so on mouse/trackpad devices the
   native one is hidden and #scroll-thumb is drawn and dragged by the
   "Scroll thumb" script in js/page-chrome.js. Touch devices keep their
   own overlay scrollbar, which already takes no space. */
#scroll-thumb { display: none; }
@media (pointer: fine) {
  html { scrollbar-width: none; }
  html::-webkit-scrollbar { display: none; }
  #scroll-thumb {
    --grip: rgba(255, 255, 255, 0.9);
    display: block; position: fixed; top: 0; right: 4px; z-index: var(--z-scroll-thumb);
    width: 8px; border-radius: 999px; cursor: grab; touch-action: none;
    background:
      linear-gradient(var(--grip), var(--grip)) center calc(50% - 5px) / 6px 2px no-repeat,
      linear-gradient(var(--grip), var(--grip)) center 50% / 6px 2px no-repeat,
      linear-gradient(var(--grip), var(--grip)) center calc(50% + 5px) / 6px 2px no-repeat,
      var(--red);
    box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06);
    transition: width 0.15s ease, right 0.15s ease;
  }
  #scroll-thumb[hidden] { display: none; }
  #scroll-thumb:hover { width: 12px; right: 2px; background-color: #B13528; }
  #scroll-thumb.is-dragging { width: 12px; right: 2px; background-color: #962C22; cursor: grabbing; }
}

body {
  font-family: Helvetica, 'Helvetica Neue', Arial, sans-serif;
  background: var(--white);
  color: var(--navy);
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}

a { color: inherit; text-decoration: none; }
img { display: block; max-width: 100%; }
button { font-family: inherit; cursor: pointer; border: none; background: none; }

/* ============================================================
   LANGUAGE TOGGLE
============================================================ */
.en { display: none; }
body.show-en .da { display: none; }
body.show-en .en { display: revert; }

/* .lang-swap wraps a DA/EN pair whose size change would move things
   around it. It fits its own text; setLang() glides it from the old size
   to the new one (see "Language glide" in the script), so buttons and
   their neighbours grow and shrink instead of popping. */
.lang-swap { display: inline-flex; }   /* flex: its baseline is the first line's, like plain text, even while its box is shorter than its text */
.lang-swap.is-gliding { clip-path: inset(0); }
.lang-swap.is-gliding-line { white-space: nowrap; }
.is-gliding-block { clip-path: inset(0 -100vw); }   /* clip only below: bullets and hanging marks stay */

/* ============================================================
   COLOUR & TYPE TOKENS
============================================================ */
:root {
  /* One navy and one red, site-wide (Martin, 2026-10-05). The navy is the
     footer's shade; the red is sampled from the client's FAQ graphics
     (OrangeColor/FAQ.pdf). */
  --navy:    #111D40;
  --red:     #C1392B;
  --white:   #FFFFFF;
  --off:     #F5F4F0;
  --light:   #ECEAE4;
  --muted:   #6B6E7A;
  --border:  #D8D5CD;
  --red-hover: #A63125;   /* buttons and the nav CTA on hover */
  --body-text: #3A3D4A;   /* running text in .t-body, the FAQ and the form's thank-you */

  /* Shape. ONE radius for media (photos, video, image placeholders), and
     one for buttons — rectangles with 10px corners, no pills (Martin's
     call). Nothing else gets rounded corners — too many rounded boxes is
     what reads as generic "AI" design. --radius-pill is kept only for
     round icon controls (the film and reel sound buttons). */
  --radius-media: 18px;
  --radius-btn:   10px;
  --radius-pill:  999px;

  /* Spacing scale (8px base) */
  --space-1: 8px;
  --space-2: 16px;
  --space-3: 24px;
  --space-4: 32px;
  --space-5: 48px;
  --space-6: 64px;
  --space-7: 96px;
  --space-8: 128px;
  --section-y: clamp(72px, 9vw, 128px);   /* vertical padding of a section */

  /* Layout */
  --nav-h:       68px;
  --gutter:      max(5vw, env(safe-area-inset-left), env(safe-area-inset-right));   /* clears an iPhone notch in landscape (viewport-fit=cover) */

  /* Type scale (Helvetica, inherited from body) */
  --fs-display: clamp(2.6rem, 6vw, 5.2rem);
  --fs-h2:      clamp(2rem, 3.6vw, 3.2rem);
  --fs-h3:      clamp(1.3rem, 1.8vw, 1.6rem);
  --fs-lead:    clamp(1.15rem, 1.5vw, 1.35rem);
  --fs-body:    17px;
  --fs-small:   14px;
  --fs-label:   13px;

  /* Motion */
  --dur:  180ms;
  --ease: cubic-bezier(.2, .7, .2, 1);

  /* Page-level stacking, bottom to top. z-indexes below 90 only order things
     inside their own component. */
  --z-journey-chrome: 90;      /* the fixed Rail and Escape */
  --z-mobile-nav:     99;
  --z-nav:            100;
  --z-progress:       999;
  --z-scroll-thumb:   10000;
}

/* ============================================================
   DESIGN SYSTEM (WP0) — shared building blocks for every package.
   Use these instead of inventing new colours, radii or type sizes.
============================================================ */
::selection { background: var(--red); color: var(--white); }   /* spec p22 */

[id] { scroll-margin-top: calc(var(--nav-h) + 12px); }  /* anchors clear the fixed nav */

/* Containers */
/* Edge-glued: every section runs to the window's gutter (Martin, 2026-10-04); readable measure is kept per text block. */
.wrap        { width: 100%; margin: 0 auto; padding: 0 var(--gutter); }
.section-y   { padding-top: var(--section-y); padding-bottom: var(--section-y); }

/* Type */
.t-display { font-size: var(--fs-display); font-weight: 900; line-height: 1.0;  letter-spacing: -0.03em; color: var(--navy); }
.t-h2      { font-size: var(--fs-h2);      font-weight: 900; line-height: 1.05; letter-spacing: -0.02em; color: var(--navy); }
.t-h3      { font-size: var(--fs-h3);      font-weight: 700; line-height: 1.2;  letter-spacing: -0.01em; color: var(--navy); }
.t-lead    { font-size: var(--fs-lead);    font-weight: 400; line-height: 1.6;  color: var(--navy); }
.t-body    { font-size: var(--fs-body);    line-height: 1.7; color: var(--body-text); }
.t-body p + p { margin-top: 1em; }
.t-label   { display: block; font-size: var(--fs-label); font-weight: 700; letter-spacing: 0.02em; color: var(--muted); margin-bottom: var(--space-2); }
.t-blue    { color: var(--navy); }

/* Button — the one filled CTA shape, a rectangle with --radius-btn corners.
   (The class keeps its old .btn-pill name so existing markup needn't change.)
   Default red; --outline and --blue variants.
   Text fills the button (Martin, 2026-10-05): every rectangular text button
   keeps its height, with ~14% of it as top/bottom padding, twice that at the
   sides, and the text taking the rest. Set first on Priser's "Book din plads". */
.btn-pill {
  display: inline-flex; align-items: center; gap: 10px;
  padding: 7px 14px; border-radius: var(--radius-btn);
  background: var(--red); color: var(--white); border: 1.5px solid var(--red);
  font-size: 27px; font-weight: 700; letter-spacing: -0.01em; line-height: 1.2;
  cursor: pointer; text-decoration: none;
  transition: background var(--dur) var(--ease), color var(--dur) var(--ease), border-color var(--dur) var(--ease), transform var(--dur) var(--ease);
}
.btn-pill:hover { background: var(--red-hover); border-color: var(--red-hover); }
.btn-pill:active { transform: translateY(1px); }
.btn-pill:focus-visible { outline: 2px solid var(--navy); outline-offset: 3px; }
.btn-pill--outline { background: transparent; color: var(--navy); border-color: var(--navy); }
.btn-pill--outline:hover { background: var(--navy); border-color: var(--navy); color: var(--white); }
.btn-pill--blue { background: var(--navy); border-color: var(--navy); }
.btn-pill--blue:hover { background: var(--red); border-color: var(--red); }

/* Text link CTA: plain "Læs mere →" that becomes a filled red button on
   hover, like "Book din plads" (Martin's idea; filled since 2026-10-05). The negative margin keeps the resting
   text flush with its column. Hover runs 15% slower than --dur.
   Same text-fills-the-button proportions as .btn-pill, a touch smaller (Martin, 2026-10-05).
   The right padding is the grown arrow's reach (translateX 4px + 0.6em from
   the 1.6x scale) plus a 5px gap, so on hover it never meets the edge. */
.link-cta {
  --link-dur: calc(var(--dur) * 1.15);
  display: inline-flex; align-items: center; gap: 8px;
  padding: 5px calc(0.6em + 9px) 5px 9px; margin-left: -9px; border-radius: var(--radius-btn);
  color: var(--navy); font-size: 20px; font-weight: 700; line-height: 1.2; letter-spacing: -0.01em; text-decoration: none;
  transition: background var(--link-dur) var(--ease), color var(--link-dur) var(--ease);
}
/* The arrow grows and slides on hover with a small springy overshoot, to feel
   a little more fun (Martin, 2026-10-05). --arrow-spring is shared with the
   ERGO band's "her →". */
:root { --arrow-spring: cubic-bezier(.34, 1.7, .5, 1); }
.link-cta::after { content: '→'; display: inline-block; transform-origin: 0% 55%; transition: transform 380ms var(--arrow-spring); }
.link-cta:hover, .link-cta:focus-visible { background: var(--red); color: var(--white); outline: none; }
.link-cta:hover::after, .link-cta:focus-visible::after { transform: translateX(4px) scale(1.6); }

/* Rounded media frame (photo/video). Give it a height or aspect-ratio. */
.media { position: relative; overflow: hidden; border-radius: var(--radius-media); background: var(--light); }
.media > img, .media > video { display: block; width: 100%; height: 100%; object-fit: cover; }

/* Image placeholder: <div class="ph"><span class="da">Billede kommer</span><span class="en">Image coming</span></div>
   Default 4:3 — override aspect-ratio or height inline as needed. */
.ph {
  display: flex; align-items: center; justify-content: center; text-align: center;
  aspect-ratio: 4 / 3; padding: var(--space-2); border-radius: var(--radius-media);
  background: repeating-linear-gradient(135deg, var(--off) 0 14px, var(--light) 14px 28px);
  color: var(--muted); font-size: var(--fs-small); font-weight: 700; letter-spacing: 0.02em;
}

/* Clean bullet list — no checkmarks. A short red dash per item. */
.list-clean { list-style: none; display: flex; flex-direction: column; gap: 12px; }
.list-clean > li { position: relative; padding-left: 26px; font-size: 16px; line-height: 1.5; color: var(--navy); }
.list-clean > li::before { content: ''; position: absolute; left: 0; top: 0.75em; width: 14px; height: 2px; background: var(--red); }

/* Views. #main-view is the landing page; .page-view are sub-pages. The
   router (showView) toggles .is-active and body.view-active. */
.page-view { display: none; padding-top: var(--nav-h); min-height: 60vh; }
.page-view.is-active { display: block; }
/* The Rail and Escape belong to the landing journey only. They also sit
   inside #main-view, so they vanish with it — this is belt and braces. */
body.view-active .jr-rail-global,
body.view-active .jr-escape-global { display: none !important; }
.mobile-nav a.is-current { color: var(--white); box-shadow: inset 0 -2px 0 var(--red); }
/* the nav link sits in a rounded hover box, so its marker is a straight line under the text, not an inset edge */
.nav-links a.is-current { position: relative; }
.nav-links a.is-current::after {
  content: ''; position: absolute; left: 6px; right: 6px; bottom: -3px;
  height: 2px; background: var(--red);
}
.nav-links a.is-current:hover::after { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .btn-pill, .link-cta, .link-cta::after { transition: none; }
}


/* ============================================================
   SCROLL PROGRESS
============================================================ */
#progress {
  position: fixed;
  top: 0; left: 0;
  height: 2px;
  width: 0%;
  background: var(--red);
  z-index: var(--z-progress);
  pointer-events: none;
  transition: width 0.1s linear;
}