/* CompareSauna navigation — warm Nordic editorial shell */
.site-header {
  position: sticky;
  inset-block-start: 0;
  z-index: var(--z-header);
  border-bottom: 1px solid color-mix(in srgb, var(--border) 82%, transparent);
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  box-shadow: 0 1px 0 rgba(42, 48, 43, 0.03);
  -webkit-backdrop-filter: blur(18px) saturate(120%);
  backdrop-filter: blur(18px) saturate(120%);
}

.nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: min(100% - 2rem, var(--container-wide));
  min-height: 4.75rem;
  margin-inline: auto;
  gap: var(--s-5);
}

:root {
  /* Brand ember metals — amber-copper flame, theme-override via same vars */
  --brand-amber-hi: #f2b36b;
  --brand-amber-deep: #b05a24;
}

.brand {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  flex-shrink: 0;
  gap: 0.65rem;
  color: var(--forest-900);
  font-family: var(--font-serif);
  font-size: clamp(1.2rem, 2vw, 1.4rem);
  font-weight: 700;
  letter-spacing: -0.02em;
  text-decoration: none;
  white-space: nowrap;
}

.brand:hover {
  color: var(--cedar-700);
}

.brand-text__accent {
  padding-inline-start: 0.02em;
  font-style: italic;
  font-weight: 600;
  background: linear-gradient(105deg, var(--brand-amber-hi), var(--brand-amber-deep) 60%, var(--brand-amber-hi));
  background-size: 200% 100%;
  background-position: 0 0;
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  transition: background-position 0.6s ease;
}

@supports not ((background-clip: text) or (-webkit-background-clip: text)) {
  .brand-text__accent { background: none; color: var(--brand-amber-deep); }
}

.brand:hover .brand-text__accent {
  background-position: 100% 0;
}

.brand-mark {
  width: 2.15rem;
  height: 2.15rem;
  flex: 0 0 2.15rem;
  filter: drop-shadow(0 2px 6px rgba(120, 66, 25, 0.28));
}

@media (prefers-reduced-motion: no-preference) {
  .brand:hover .brand-mark {
    animation: brand-flicker 2.4s ease-in-out infinite;
  }

  /* Ember Flame — living flame: sway-dance, glow pulse, rising embers */
  .brand-flame-g {
    transform-box: fill-box;
    transform-origin: 50% 92%;
    animation: brand-flame-dance 4.2s ease-in-out infinite;
  }

  .brand-flame__glow {
    transform-box: fill-box;
    transform-origin: 50% 92%;
    filter: blur(2.5px);
    animation: brand-glow-pulse 3.2s ease-in-out infinite;
  }

  .brand-ember {
    --ember-drift: 1.6px;
    transform-box: fill-box;
    animation: brand-ember-rise 3.4s ease-out infinite;
  }
  .brand-ember--b { --ember-drift: -2px; animation-duration: 4.1s; animation-delay: -1.6s; }
  .brand-ember--c { --ember-drift: 1px;  animation-duration: 2.7s; animation-delay: -0.9s; }
}

@keyframes brand-flicker {
  0%, 100% { transform: scale(1); }
  50% { transform: scale(1.06) rotate(1.5deg); }
}

@keyframes brand-flame-dance {
  0%   { transform: rotate(-1.6deg) skewX(2deg) scaleY(1); }
  15%  { transform: rotate(1.2deg) skewX(-1.5deg) scaleY(1.04); }
  30%  { transform: rotate(-0.8deg) skewX(1deg) scaleY(0.98); }
  45%  { transform: rotate(1.8deg) skewX(-2deg) scaleY(1.05); }
  60%  { transform: rotate(-1.4deg) skewX(0.5deg) scaleY(1); }
  75%  { transform: rotate(0.9deg) skewX(-1deg) scaleY(1.03); }
  100% { transform: rotate(-1.6deg) skewX(2deg) scaleY(1); }
}

@keyframes brand-glow-pulse {
  0%, 100% { opacity: 0.22; }
  50% { opacity: 0.4; }
}

@keyframes brand-ember-rise {
  0%   { transform: translate(0, 0) scale(0.6); opacity: 0; }
  15%  { opacity: 0.95; }
  70%  { opacity: 0.5; }
  100% { transform: translate(var(--ember-drift, 1.6px), -9px) scale(1); opacity: 0; }
}

.footer-brand { gap: 0.65rem; }
.footer-brand__mark { width: 1.9rem; height: 1.9rem; flex: 0 0 1.9rem; }
.footer-brand__accent { font-style: italic; font-weight: 600; color: var(--brand-amber-hi, #f2b36b); }
.footer-brand:hover .footer-brand__accent { color: #f7cd96; }

.nav-links {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  min-width: 0;
  gap: clamp(0.15rem, 0.75vw, 0.75rem);
}

.nav-links > a {
  display: inline-flex;
  align-items: center;
  min-height: 2.75rem;
  padding-inline: clamp(0.35rem, 0.6vw, 0.65rem);
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  text-decoration: none;
  white-space: nowrap;
}

.nav-links > a:hover,
.nav-links > a:focus-visible {
  background: var(--forest-050);
  color: var(--forest-800);
}

.nav-toggle {
  display: none;
  width: 2.75rem;
  height: 2.75rem;
  flex: 0 0 2.75rem;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: 50%;
  background: var(--surface);
  color: var(--forest-900);
  box-shadow: var(--shadow-xs);
}

.hamburger,
.hamburger::before,
.hamburger::after {
  display: block;
  width: 1.15rem;
  height: 1.5px;
  border-radius: var(--radius-full);
  background: currentColor;
  transition: transform var(--t-base), opacity var(--t-fast);
}

.hamburger {
  position: relative;
}

.hamburger::before,
.hamburger::after {
  position: absolute;
  inset-inline-start: 0;
  content: "";
}

.hamburger::before { transform: translateY(-0.35rem); }
.hamburger::after { transform: translateY(0.35rem); }

.nav-toggle[aria-expanded="true"] .hamburger { background: transparent; }
.nav-toggle[aria-expanded="true"] .hamburger::before { transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .hamburger::after { transform: rotate(-45deg); }

/* Tools dropdown in the main navigation (Power Calc + Space Planner). */
.nav-dropdown {
  position: relative;
  flex: 0 0 auto;
}

.nav-dropdown__toggle {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  min-height: 2.75rem;
  padding-inline: clamp(0.35rem, 0.6vw, 0.65rem);
  border: 0;
  border-radius: var(--radius-sm);
  background: none;
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  cursor: pointer;
}

.nav-dropdown__caret {
  width: 0.7rem;
  height: 0.7rem;
  flex: 0 0 auto;
  transition: transform var(--t-fast);
}

.nav-dropdown__toggle:hover,
.nav-dropdown__toggle:focus-visible,
.nav-dropdown__toggle[aria-expanded="true"] {
  background: var(--forest-050);
  color: var(--forest-800);
}

.nav-dropdown__toggle[aria-expanded="true"] .nav-dropdown__caret {
  transform: rotate(180deg);
}

.nav-dropdown__menu {
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-start: 0;
  z-index: var(--z-dropdown);
  display: none;
  width: max-content;
  min-width: 11rem;
  margin: 0;
  padding: 0.4rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.nav-dropdown__menu.open { display: block; }

/* D1 (qa-navfix-staging-0824): hover opens the Tools dropdown.
   No (hover)/(pointer) media gate: headless/verification browsers report
   hover:none even with a mouse, which would silently disable the feature.
   Touch safety comes from the JS suppression class (explicit close wins over
   CSS hover until re-entry) plus the existing click-outside close.
   Invisible bridge spans the toggle→menu gap so :hover never drops mid-travel;
   JS in nav.blade.php keeps aria-expanded in sync. */
.nav-dropdown::after {
  content: "";
  position: absolute;
  inset-block-start: 100%;
  inset-inline: 0;
  height: 0.55rem;
}

.nav-dropdown:hover:not(.nav-dropdown--hover-off) > .nav-dropdown__menu {
  display: block;
}

.nav-dropdown__menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
  white-space: nowrap;
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__menu a[aria-current="page"] {
  background: var(--forest-050);
  color: var(--forest-800);
}

/* Language selector used by the main navigation. */
.lang-switcher {
  position: relative;
  flex: 0 0 auto;
}

.lang-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.75rem;
  max-width: 9rem;
  padding: 0.55rem 0.8rem;
  border: 1px solid var(--border);
  border-radius: var(--radius-full);
  background: var(--surface);
  color: var(--forest-800);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  box-shadow: var(--shadow-xs);
}

.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  border-color: var(--cedar-400);
  background: var(--cedar-050);
  color: var(--cedar-800);
}

.lang-menu {
  position: absolute;
  inset-block-start: calc(100% + 0.55rem);
  inset-inline-end: 0;
  z-index: var(--z-dropdown);
  display: none;
  width: min(max-content, 16rem);
  min-width: 11rem;
  max-height: min(28rem, calc(100vh - 7rem));
  margin: 0;
  padding: 0.4rem;
  overflow-y: auto;
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  background: var(--surface);
  box-shadow: var(--shadow-lg);
  list-style: none;
}

.lang-menu.open { display: block; }

.lang-menu li { margin: 0; }

.lang-menu a {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  padding: 0.55rem 0.8rem;
  border-radius: var(--radius-sm);
  color: var(--text-dim);
  font-size: 0.875rem;
  font-weight: 550;
  text-decoration: none;
}

.lang-menu a:hover,
.lang-menu a.active,
.lang-menu a[aria-current="true"] {
  background: var(--forest-050);
  color: var(--forest-800);
}

/* Alternate details-based language component. */
.lang-dropdown { position: relative; }
.lang-dropdown__toggle { min-height: 2.75rem; cursor: pointer; list-style: none; }
.lang-dropdown__toggle::-webkit-details-marker { display: none; }
.lang-dropdown__menu { min-width: 11rem; }

@media (max-width: 1180px) {
  .nav-container {
    width: min(100% - 1.5rem, var(--container-wide));
    min-height: 4.25rem;
  }

  .nav-toggle { display: inline-flex; }

  .nav-links {
    position: absolute;
    inset-block-start: 100%;
    inset-inline: 0;
    z-index: var(--z-dropdown);
    display: grid;
    max-height: calc(100dvh - 4.25rem);
    padding: 0.75rem max(0.75rem, env(safe-area-inset-right)) calc(1rem + env(safe-area-inset-bottom)) max(0.75rem, env(safe-area-inset-left));
    overflow-y: auto;
    border-bottom: 1px solid var(--border);
    background: color-mix(in srgb, var(--bg) 97%, transparent);
    box-shadow: var(--shadow-md);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-0.65rem);
    transition: opacity var(--t-base), transform var(--t-base), visibility var(--t-base);
  }

  .nav-links.open {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }

  .nav-links > a {
    width: 100%;
    min-height: 2.875rem;
    padding-inline: 0.9rem;
  }

  .lang-switcher {
    width: 100%;
    padding-top: 0.35rem;
    border-top: 1px solid var(--border);
  }

  /* Tools dropdown collapses into the stacked mobile panel. */
  .nav-dropdown {
    width: 100%;
  }

  .nav-dropdown__toggle {
    width: 100%;
    min-height: 2.875rem;
    padding-inline: 0.9rem;
    justify-content: flex-start;
  }

  .nav-dropdown__caret {
    margin-inline-start: auto;
  }

  .nav-dropdown__menu {
    position: static;
    width: 100%;
    min-width: 0;
    margin-top: 0.25rem;
    border: 0;
    background: var(--stone-100);
    box-shadow: none;
  }

  .nav-dropdown__menu a {
    padding-inline: 1.4rem;
  }

  .lang-toggle {
    width: 100%;
    justify-content: flex-start;
    border-color: transparent;
    border-radius: var(--radius-sm);
    box-shadow: none;
  }

  .lang-menu {
    position: static;
    width: 100%;
    max-height: none;
    margin-top: 0.25rem;
    border: 0;
    background: var(--stone-100);
    box-shadow: none;
  }
}

@media (max-width: 420px) {
  .nav-container { width: min(100% - 1rem, var(--container-wide)); }
  .brand { font-size: 1.18rem; }
  .brand-mark { width: 2rem; height: 2rem; flex-basis: 2rem; }
}

@media (prefers-reduced-motion: reduce) {
  .nav-links,
  .hamburger,
  .hamburger::before,
  .hamburger::after { transition: none; }
}

/* NORDIC SPA LUX — dark header shell (2026-08-14) */
.site-header {
  border-bottom: 1px solid rgba(58, 51, 44, 0.55);
  background: rgba(20, 18, 16, 0.55);
  box-shadow: none;
  transition: background 0.3s ease, border-color 0.3s ease, box-shadow 0.3s ease;
}

.brand {
  color: var(--ivory-050);
  font-family: var(--font-serif);
}

.brand:hover { color: var(--accent); }

.brand-mark {
  filter: drop-shadow(0 3px 10px rgba(232, 150, 74, 0.35));
}

.nav-links > a:hover,
.nav-links > a:focus-visible {
  color: var(--ivory-050);
}

.nav-links > a[aria-current="page"],
.nav-links > a.active {
  color: var(--accent);
}

.nav-dropdown__toggle {
  background: none;
  color: var(--text-dim);
}

.nav-dropdown__toggle:hover,
.nav-dropdown__toggle:focus-visible,
.nav-dropdown__toggle[aria-expanded="true"] {
  background: none;
  color: var(--ivory-050);
}

.nav-dropdown__toggle[data-active="true"] {
  color: var(--accent);
}

.nav-dropdown__menu {
  border-color: rgba(58, 51, 44, 0.55);
  background: var(--bg-card);
}

.nav-dropdown__menu a {
  color: var(--text-dim);
}

.nav-dropdown__menu a:hover,
.nav-dropdown__menu a:focus-visible,
.nav-dropdown__menu a[aria-current="page"] {
  background: var(--forest-050);
  color: var(--ivory-050);
}

.lang-toggle {
  background: rgba(30, 26, 23, 0.7);
  color: var(--text-dim);
}

.lang-toggle:hover,
.lang-toggle[aria-expanded="true"] {
  border-color: var(--accent);
  background: var(--accent-dim);
  color: #f0b078;
}

.nav-toggle {
  background: rgba(30, 26, 23, 0.7);
  color: var(--ivory-050);
}

@media (max-width: 1180px) {
  .nav-links {
    border-bottom: 1px solid var(--border);
    background: rgba(20, 18, 16, 0.97);
    box-shadow: 0 24px 48px rgba(0, 0, 0, 0.5);
  }

  .lang-menu,
  .nav-dropdown__menu { background: var(--bg-card); }
}