/* wa-lint: skip */
/* Forside hero — stage-præsentation, hero-exits, scenes-nav.
   Tidligere duplikeret i src/{,sv/,en/}index.njk inline \3c style>.
   Udflyttet 2026-05-15. */

/* Forsiden: kør stage-præsentation, skjul topbar mens spinderen kører.
   Topbaren overlejrer scenerne (fixed) så scenerne får hele 100dvh til rådighed. */
body.forside .topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
}
body.forside.spinder-active .topbar {
  opacity: 0;
  pointer-events: none;
  transform: translateY(-12px);
}

/* Hero scene takes the whole viewport, payload-style background.
   The scene is a flex column: .hpl-stage fills the available top region,
   .hero-exits sits at the bottom in flex-flow (no absolute positioning,
   so the two can never overlap).
   padding-top reserves space for the fixed topbar so the spinder/icon
   isn't hidden behind it once the menu fades in after the animation. */
.scene--hero {
  background:
    radial-gradient(circle at 22% 28%, rgba(127, 190, 198, 0.18), transparent 55%),
    radial-gradient(circle at 78% 72%, rgba(184, 90, 58, 0.12), transparent 55%),
    var(--bg);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding-top: var(--topbar-h, 72px);
  padding-bottom: 0;
  padding-inline: 0;
}

/* "Hvad leder du efter?" — overskrift over de tre vejvalg.
   Inviterer som ved en messes hovedindgang. */
.hero-exits-prompt {
  margin: 0;
  padding: 0;
  font-size: var(--fs-display-md);
  font-weight: var(--fw-light);
  letter-spacing: -0.015em;
  color: var(--primary);
  white-space: nowrap;
  pointer-events: none;
}
.hero-exits__row {
  display: flex;
  justify-content: center;
  gap: 14px;
  flex-wrap: wrap;
  width: 100%;
}
[data-theme="dark"] .hero-exits-prompt {
  color: var(--ink);
}
.hero-exits-prompt.show {
  opacity: 1;
  transform: none;
}
@media (max-width: 600px) {
  .hero-exits-prompt {
    font-size: var(--fs-base);
  }
}

/* Three exits — synlige fra første paint så hero ikke fremstår tom mens
   spinderen kører. Pointer-events tændes først efter animationens afslutning
   via .show, så vi undgår klik mens layoutet er ved at lande. (FIX R5:
   tidligere opacity:0 → ~3s tom hvid hero, dårlig FCP-oplevelse). */
.hero-exits {
  position: static;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 0 20px max(22px, env(safe-area-inset-bottom));
  min-height: clamp(160px, 20vh, 220px);
  opacity: 1;
  transform: none;
  transition: opacity 0.6s ease 0.1s, transform 0.6s ease 0.1s;
  pointer-events: none;
  z-index: 12;
}
.hero-exits.show {
  opacity: 1;
  transform: translateY(0);
}
.hero-exits.show .hero-exits__row,
.hero-exits.show .hero-exit {
  pointer-events: auto;
}
.hero-exit {
  /* wa-button's appearance=plain sætter sin interne .button til at have
     egen color OG egen hover-fill - hvilket gør at slotted spans arver grå
     farve, OG hover-bg kun dækker det indre .button-element (ikke host'ens
     padding). Override begge variabler så host'en alene kontrollerer
     bg + farve på alle states. */
  --wa-color-on-quiet: rgb(50, 79, 89);
  --wa-color-neutral-on-quiet: rgb(50, 79, 89);
  --wa-color-fill-quiet: transparent;
  --wa-color-neutral-fill-quiet: transparent;
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 12px 20px;
  background: rgba(255, 255, 255, 0.85);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border: 1px solid rgba(50, 79, 89, 0.14);
  border-radius: 20px;
  color: rgb(50, 79, 89);
  font-family: inherit;
  cursor: pointer;
  text-decoration: none;
  transition: all 0.2s ease;
  box-shadow: 0 6px 24px -8px rgba(50, 79, 89, 0.18);
  text-align: center;
  min-width: 180px;
}
/* wa-button slotter alt indhold ind i sin shadow-DOM ::part(label).
   Column-flex skal anvendes der, ikke på host'en, for at få __main og
   __hint stablet vertikalt og centreret. */
.hero-exit::part(label) {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
}
/* wa-button's interne .button[part=base] sætter white-space: nowrap som
   forhindrer .hero-exit__hint i at wrappe over flere linjer trods max-width.
   Override så hint kan ombrydes på 2-3 linjer og pill'en bliver smalere. */
.hero-exit::part(base) {
  white-space: normal;
}
.hero-exit__main {
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  letter-spacing: -0.01em;
  color: inherit;
  white-space: nowrap;
  /* wa-button arver --wa-form-control-height (~40px) som line-height på
     slotted content → ekstra luft over+under teksten. Lås line-height eksplicit
     så .hero-exit__main fylder ~font-size×1.2 både i wa-button og i anchor. */
  line-height: 1.2;
}
.hero-exit__hint {
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--muted);
  letter-spacing: -0.005em;
  max-width: 22ch;
  line-height: 1.35;
  text-align: center;
}
/* Sekundære exits får synlig soft-fill + lift på hover (R7-fix: tidligere kun
   border-color-skifte var for diskret sammenlignet med primær CTA's solid fill). */
.hero-exit:hover {
  transform: translateY(-2px);
  background: rgba(184, 90, 58, 0.1);
  border-color: var(--accent);
  color: var(--accent);
  --wa-color-on-quiet: var(--accent);
  --wa-color-neutral-on-quiet: var(--accent);
  box-shadow: 0 10px 28px -8px rgba(184, 90, 58, 0.35);
}
.hero-exit:hover .hero-exit__hint { color: rgba(184, 90, 58, 0.9); }
.hero-exit--primary {
  background: var(--primary, rgb(49, 79, 89));
  color: rgb(255, 255, 255);
  --wa-color-on-quiet: rgb(255, 255, 255);
  --wa-color-neutral-on-quiet: rgb(255, 255, 255);
  border-color: var(--primary, rgb(49, 79, 89));
  box-shadow: 0 8px 24px -8px rgba(49, 79, 89, 0.45);
}
.hero-exit--primary .hero-exit__main { font-weight: 700; color: rgb(255, 255, 255); }
.hero-exit--primary .hero-exit__hint { color: rgba(255, 255, 255, 0.92); }
.hero-exit--primary:hover {
  background: var(--accent, rgb(184, 90, 58));
  color: rgb(255, 255, 255);
  --wa-color-on-quiet: rgb(255, 255, 255);
  --wa-color-neutral-on-quiet: rgb(255, 255, 255);
  border-color: var(--accent, rgb(184, 90, 58));
  box-shadow: 0 10px 28px -8px rgba(184, 90, 58, 0.45);
}
.hero-exit--primary:hover .hero-exit__hint { color: rgba(255, 255, 255, 0.92); }

/* Hero-exit labels with mobile-short variants: hide the short version on
   desktop. Mobile media query (<600px) flips full/short visibility. */
.hero-exit__main-short { display: none; }

[data-theme="dark"] .hero-exit {
  background: rgba(20, 30, 40, 0.7);
  border-color: rgba(255, 255, 255, 0.12);
  color: var(--ink);
}
[data-theme="dark"] .hero-exit:hover { background: rgba(30, 40, 50, 0.95); }
/* Primær CTA i dark: orange accent dominerer, så "Find vej" stadig
   er den tydeligt dominerende exit (i light er den solid teal rgb(49, 79, 89)). */
[data-theme="dark"] .hero-exit--primary {
  background: var(--accent, rgb(184, 90, 58));
  border-color: var(--accent, rgb(184, 90, 58));
  color: rgb(255, 255, 255);
  box-shadow: 0 8px 24px -8px rgba(184, 90, 58, 0.5);
}
[data-theme="dark"] .hero-exit--primary:hover {
  background: var(--brand-accent-hover, rgb(154, 72, 48));
  border-color: var(--brand-accent-hover, rgb(154, 72, 48));
}

@media (max-width: 600px) {
  .hero-exits {
    padding: 0 8px max(12px, env(safe-area-inset-bottom));
    min-height: clamp(160px, 24vh, 200px);
  }
  .hero-exits-prompt {
    font-size: var(--fs-sm);
    margin-bottom: 8px;
    padding: 3px 12px;
  }
  .hero-exits__row {
    gap: 6px;
    flex-wrap: nowrap;
  }
  .hero-exit {
    padding: 8px 6px;
    min-width: 0;
    flex: 1 1 0;
    border-radius: 14px;
    gap: 1px;
  }
  .hero-exit__main { font-size: var(--fs-sm); }
  .hero-exit__hint { display: none; }
  /* On 320px the four pills can't fit "Spørg vores AI-guide" / "Prøv vores
     demo-messer" without 3-line wraps. Show short labels on mobile, full
     labels on desktop — exits without a short variant just render the full
     label inline (default, no toggle needed). */
  .hero-exit__main-full { display: none; }
  .hero-exit__main-short { display: inline; }

  /* R6 Fix B: hold topbar synlig på mobil-forsiden så brugere kan tilgå
     menuen, selv mens spinderen kører. Tidligere blev topbar skjult af
     body.forside.spinder-active globalt — det fjernede mobil-navigationen. */
  body.forside.spinder-active .topbar {
    opacity: 1;
    transform: none;
    pointer-events: auto;
  }
}

/* R6 Fix B: hero CTA-stack — gør "Find vej" tydeligt primær ved at gøre
   de to sekundære exits visuelt mindre. Beholder den orange primære
   knap som dominerende på desktop. Mobil styles bevarer de eksisterende
   kompakte regler (hint skjules + lille font), så tre-kolonne-layoutet
   stadig fungerer. */
@media (min-width: 601px) {
  .hero-exit:not(.hero-exit--primary) {
    padding: 10px 16px;
    border-color: rgba(50, 79, 89, 0.10);
    box-shadow: 0 3px 12px -6px rgba(50, 79, 89, 0.12);
  }
  /* :hover skal vinde over default-state-reglen ovenfor - specificity er
     ens (begge 0,2,0) så vi gentager hover-fixet her under media-query'en. */
  .hero-exit:not(.hero-exit--primary):hover {
    border-color: var(--accent);
    box-shadow: 0 10px 28px -8px rgba(184, 90, 58, 0.35);
  }
  .hero-exit:not(.hero-exit--primary) .hero-exit__main {
    font-size: var(--fs-sm);
    font-weight: var(--fw-regular);
  }
  .hero-exit:not(.hero-exit--primary) .hero-exit__hint {
    font-size: 0.78rem;
  }
}

/* Arrangør-spor — eksplicit indgang under besøgendes 3 exits.
   Fader ind sammen med .hero-exits.show og placeres tæt under knaprækken
   uden at kapre opmærksomheden fra den primære "Find vej". */
.hero-exits-aside {
  margin: 14px 0 0;
  padding: 0 12px;
  font-size: var(--fs-sm);
  font-weight: var(--fw-regular);
  color: var(--muted);
  text-align: center;
  letter-spacing: -0.005em;
  position: relative;
  z-index: 9100;
}
.hero-exits-aside a {
  color: var(--primary);
  font-weight: var(--fw-bold);
  text-decoration: none;
  border-bottom: 1px solid rgba(50, 79, 89, 0.25);
  transition: color 0.2s ease, border-color 0.2s ease;
  pointer-events: auto;
  position: relative;
  z-index: 9100;
  /* WCAG 2.5.5 — stand-alone CTA i hero-aside skal være ≥44px tappable. */
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-block: 10px;
}
.hero-exits-aside a:hover {
  color: var(--accent);
  border-color: var(--accent);
}
[data-theme="dark"] .hero-exits-aside { color: rgba(255, 255, 255, 0.65); }
[data-theme="dark"] .hero-exits-aside a { color: var(--ink); border-color: rgba(255, 255, 255, 0.2); }
[data-theme="dark"] .hero-exits-aside a:hover { color: var(--accent); border-color: var(--accent); }
@media (max-width: 600px) {
  .hero-exits-aside {
    font-size: 0.78rem;
    margin-top: 10px;
    padding: 0 8px;
  }
}


/* News scene styles live in /assets/css/news-strip.css */