/* ============================================================================
 * Suunta.ai Landing v2 — Header (adaptive glass, 2026-05-21)
 * ----------------------------------------------------------------------------
 * Premium-minimalistinen sticky header joka MUKAUTUU allaan olevan
 * section:n teemaan. Linear/Stripe/Vercel-tyyli.
 *
 * Käyttäytyminen:
 *   1. Initial (top, scrollY < 8): transparent — ei bg, ei border, ei blur
 *      Tekstit värittyvät data-active-theme mukaan (light = white, dark = navy)
 *   2. Scrolled DARK-osion päällä: dark-glass 0.72 alpha, light tekstit, hairline
 *   3. Scrolled LIGHT-osion päällä: light-glass 0.72 alpha, dark tekstit, hairline
 *
 * Active-section detection: HeaderV2.astro:n JS käyttää IntersectionObserver:ia
 * jolla seuraa jokaisen <section data-theme>:n top-rajaa header-korkeuden alla.
 *
 * Transition: 280ms cubic-bezier — hieman pidempi kuin standard 180ms koska
 * väri+bg+korkeus vaihtuu yhtä aikaa.
 *
 * Subtle scroll-shrink: 72→60px desktop, 64→56px mobile.
 * ============================================================================ */

.v2-header {
  /* Layout */
  position: sticky;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  width: 100%;

  /* Initial — transparent, ei chrome:a */
  background: transparent;
  border-bottom: 1px solid transparent;
  backdrop-filter: none;
  -webkit-backdrop-filter: none;

  /* Premium transition — koko paketti vaihtuu yhdessä rytmissä */
  transition:
    background 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    backdrop-filter 280ms cubic-bezier(0.4, 0, 0.2, 1),
    -webkit-backdrop-filter 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ════════════════════════════════════════════════════════════════════════
 * Scrolled — glass + hairline ilmestyy
 * Erikseen DARK ja LIGHT bg:n päällä (data-active-theme attribuutista)
 * ════════════════════════════════════════════════════════════════════════ */

/* Dark glass — käytetään kun aktiivi section on data-theme="dark" */
.v2-header.is-scrolled[data-active-theme="dark"] {
  background: rgba(18, 22, 34, 0.72);
  border-bottom-color: rgba(255, 255, 255, 0.06);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

/* Light glass — käytetään kun aktiivi section on data-theme="light" */
.v2-header.is-scrolled[data-active-theme="light"] {
  background: rgba(246, 248, 251, 0.72);
  border-bottom-color: rgba(15, 23, 42, 0.06);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

/* ════════════════════════════════════════════════════════════════════════
 * Inner shell — grid-layout, scroll-shrink
 * ════════════════════════════════════════════════════════════════════════ */

.v2-header__inner {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: var(--space-8);
  height: 64px;
  width: 100%;
  max-width: var(--container-wide);
  margin-inline: auto;
  padding-inline: var(--space-6);
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 768px) {
  .v2-header__inner {
    padding-inline: var(--space-8);
    height: 72px;
  }
}

/* Scroll-shrink — pienempi header kun scrollataan */
.v2-header.is-scrolled .v2-header__inner {
  height: 56px;
}

@media (min-width: 768px) {
  .v2-header.is-scrolled .v2-header__inner {
    height: 60px;
  }
}

/* ════════════════════════════════════════════════════════════════════════
 * Brand (logo) — currentColor adoptoituu themen mukaan
 * Subtle scale-shrink scrollissa
 * ════════════════════════════════════════════════════════════════════════ */

.v2-header__brand {
  display: inline-flex;
  align-items: center;
  text-decoration: none;
  transition:
    opacity var(--transition),
    color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    transform 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-header__brand:hover { opacity: 0.85; }

.v2-header__brand svg {
  height: 24px;
  width: auto;
  display: block;
  transition: height 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

.v2-header.is-scrolled .v2-header__brand svg {
  height: 22px;
}

/* ════════════════════════════════════════════════════════════════════════
 * Nav links — center
 * ════════════════════════════════════════════════════════════════════════ */

.v2-header__nav {
  display: none;
  align-items: center;
  justify-content: center;
  gap: var(--space-6);
}

@media (min-width: 900px) {
  .v2-header__nav { display: flex; }
}

.v2-header__link {
  position: relative;
  display: inline-flex;
  align-items: center;
  padding: var(--space-2) 0;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  letter-spacing: var(--tracking-tight);
  text-decoration: none;
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* Aktiivilinkki — 2px emerald under-rule. Premium-yksityiskohta: aktiivi
   ei vain matchaa muiden linkkien väriä, vaan saa accent-värin alapuolelle —
   pieni mutta selvä distinguisher. */
.v2-header__link.is-active::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 2px;
  background: var(--accent);
  border-radius: 1px;
  transform-origin: center;
  animation: v2HeaderUnderline 320ms var(--ease-out-soft) backwards;
}

@keyframes v2HeaderUnderline {
  from { transform: scaleX(0); opacity: 0; }
  to   { transform: scaleX(1); opacity: 1; }
}

/* Hover-link saa subtle underline indicator (puolikas opacity) */
.v2-header__link:hover:not(.is-active)::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -2px;
  height: 1px;
  background: currentColor;
  opacity: 0.3;
}

/* ════════════════════════════════════════════════════════════════════════
 * CTAs — sign-in + primary button + mobile toggle
 * ════════════════════════════════════════════════════════════════════════ */

.v2-header__cta {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  justify-self: end;
}

.v2-header__signin {
  display: none;
  align-items: center;
  padding: var(--space-2) var(--space-3);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--weight-medium);
  text-decoration: none;
  transition: color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 640px) {
  .v2-header__signin { display: inline-flex; }
}

/* Mobile menu toggle */
.v2-header__menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    background 280ms cubic-bezier(0.4, 0, 0.2, 1),
    border-color 280ms cubic-bezier(0.4, 0, 0.2, 1),
    color 280ms cubic-bezier(0.4, 0, 0.2, 1);
}

@media (min-width: 900px) {
  .v2-header__menu-toggle { display: none; }
}

.v2-header__menu-toggle svg { width: 16px; height: 16px; }

/* ════════════════════════════════════════════════════════════════════════
 * THEME-ADAPTIVE TEXT COLORS
 *
 * Tämä on header:n premium-ydin: värit adaptoituvat dynaamisesti
 * data-active-theme-attribuutin mukaan, sekä initial-tilassa että
 * scrolled-tilassa.
 *
 * 4 kombinaatiota:
 *   1. Initial + over LIGHT: dark text on transparent bg
 *   2. Initial + over DARK:  light text on transparent bg
 *   3. Scrolled + LIGHT:     dark text on light glass
 *   4. Scrolled + DARK:      light text on dark glass
 *
 * Käytetään saman näköisiä alpha-arvoja themasta riippuen jotta visuaalinen
 * "weight" on yhtenäinen molemmissa themoissa.
 * ════════════════════════════════════════════════════════════════════════ */

/* Default — fallback jos data-active-theme puuttuu (esim. JS off):
   käytetään light theme -arvoja koska html data-theme="light" on default */
.v2-header .v2-header__brand,
.v2-header .v2-header__menu-toggle {
  color: rgba(15, 23, 42, 0.92);
}
.v2-header .v2-header__link,
.v2-header .v2-header__signin {
  color: rgba(15, 23, 42, 0.60);
}
.v2-header .v2-header__link:hover,
.v2-header .v2-header__signin:hover,
.v2-header .v2-header__link.is-active {
  color: rgba(15, 23, 42, 0.92);
}

/* ─── Theme: LIGHT (active section data-theme="light") ────────────────── */
.v2-header[data-active-theme="light"] .v2-header__brand,
.v2-header[data-active-theme="light"] .v2-header__menu-toggle {
  color: rgba(15, 23, 42, 0.92);
}
.v2-header[data-active-theme="light"] .v2-header__link,
.v2-header[data-active-theme="light"] .v2-header__signin {
  color: rgba(15, 23, 42, 0.62);
}
.v2-header[data-active-theme="light"] .v2-header__link:hover,
.v2-header[data-active-theme="light"] .v2-header__signin:hover,
.v2-header[data-active-theme="light"] .v2-header__link.is-active {
  color: rgba(15, 23, 42, 1);
}
.v2-header[data-active-theme="light"] .v2-header__menu-toggle:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.10);
}

/* ─── Theme: DARK (active section data-theme="dark") ──────────────────── */
.v2-header[data-active-theme="dark"] .v2-header__brand,
.v2-header[data-active-theme="dark"] .v2-header__menu-toggle {
  color: rgba(255, 255, 255, 0.98);
}
.v2-header[data-active-theme="dark"] .v2-header__link,
.v2-header[data-active-theme="dark"] .v2-header__signin {
  color: rgba(255, 255, 255, 0.78);
}
.v2-header[data-active-theme="dark"] .v2-header__link:hover,
.v2-header[data-active-theme="dark"] .v2-header__signin:hover,
.v2-header[data-active-theme="dark"] .v2-header__link.is-active {
  color: rgba(255, 255, 255, 1);
}
.v2-header[data-active-theme="dark"] .v2-header__menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.14);
}

/* ════════════════════════════════════════════════════════════════════════
 * Mobile dropdown — full-width sheet alle headerin
 * Adoptoituu also data-active-theme-attribuuttiin
 * ════════════════════════════════════════════════════════════════════════ */

.v2-header__mobile {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  padding: var(--space-4) var(--space-6) var(--space-6);
  display: none;
  flex-direction: column;
  gap: var(--space-2);
  background: var(--bg-page);
  border-bottom: 1px solid var(--border-subtle);
  /* Inherit glass-tyyli pääheaderista */
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
}

.v2-header[data-active-theme="dark"] .v2-header__mobile {
  background: rgba(18, 22, 34, 0.94);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}

.v2-header[data-active-theme="light"] .v2-header__mobile {
  background: rgba(246, 248, 251, 0.94);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

.v2-header__mobile.is-open { display: flex; }

@media (min-width: 900px) {
  .v2-header__mobile { display: none !important; }
}

.v2-header__mobile-link {
  display: block;
  padding: var(--space-3) 0;
  font-family: var(--font-sans);
  font-size: var(--text-base);
  font-weight: var(--weight-medium);
  text-decoration: none;
  border-bottom: 1px solid var(--border-subtle);
  transition: color var(--transition);
}

.v2-header[data-active-theme="dark"] .v2-header__mobile-link {
  color: rgba(255, 255, 255, 0.92);
  border-bottom-color: rgba(255, 255, 255, 0.06);
}
.v2-header[data-active-theme="light"] .v2-header__mobile-link {
  color: rgba(15, 23, 42, 0.92);
  border-bottom-color: rgba(15, 23, 42, 0.06);
}

.v2-header__mobile-link:hover,
.v2-header__mobile-link.is-active { color: var(--accent-text); }
.v2-header__mobile-link:last-of-type { border-bottom: 0; }

.v2-header__mobile-cta {
  display: flex;
  flex-direction: column;
  gap: var(--space-3);
  margin-top: var(--space-4);
}

.v2-header__mobile-cta .btn {
  width: 100%;
  justify-content: center;
}

/* Mobile-CTA secondary ("Log in") — teema-adaptiivinen kontrasti.
   .btn--secondary käyttää globaalia --text-primary-tokenia, joka ei flippaa
   sivun light-defaultista → tumman mobile-sheetin (data-active-theme="dark")
   päällä teksti + reuna jäisivät tummaksi tummalle = näkymätön. Pakotetaan
   värit sheet-teeman mukaan, samaa kaavaa kuin .v2-header__mobile-link. */
.v2-header[data-active-theme="dark"] .v2-header__mobile-cta .btn--secondary {
  color: rgba(255, 255, 255, 0.92);
  border-color: rgba(255, 255, 255, 0.18);
}
.v2-header[data-active-theme="dark"] .v2-header__mobile-cta .btn--secondary:hover {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.30);
  color: rgba(255, 255, 255, 1);
}
.v2-header[data-active-theme="light"] .v2-header__mobile-cta .btn--secondary {
  color: rgba(15, 23, 42, 0.92);
  border-color: rgba(15, 23, 42, 0.16);
}
.v2-header[data-active-theme="light"] .v2-header__mobile-cta .btn--secondary:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.30);
  color: rgba(15, 23, 42, 1);
}

/* ════════════════════════════════════════════════════════════════════════
 * Respect prefers-reduced-motion — vältä smooth transitions
 * ════════════════════════════════════════════════════════════════════════ */

@media (prefers-reduced-motion: reduce) {
  .v2-header,
  .v2-header__inner,
  .v2-header__brand,
  .v2-header__brand svg,
  .v2-header__link,
  .v2-header__signin,
  .v2-header__menu-toggle {
    transition: none !important;
  }
}