/* ============================================================
   Navigation Component
   ============================================================ */

.nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: var(--z-nav);
  height: var(--nav-height);
  display: flex;
  align-items: center;
  background-color: transparent;
  transition: background-color var(--transition-base), box-shadow var(--transition-base);
}

/* Scrolled state — added via JS */
.nav.is-scrolled {
  background-color: var(--color-white);
  box-shadow: var(--shadow-sm);
}

.nav__inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--space-6);
}

@media (max-width: 480px) {
  .nav__inner { padding-inline: var(--space-4); }
}

/* --- Logo (SVG: tagline = "Functional Medicine", word = "WQHolystic" — only word gets gold) --- */
.nav__logo {
  display: block;
  height: 42px;
  width: auto;
}

.nav__logo .wqh-logo {
  display: block;
  height: 100%;
  width: auto;
}

/* Thicker stroke on paths (paint-order: stroke then fill) */
.nav__logo .wqh-logo path {
  paint-order: stroke fill;
  stroke-width: 0.6;
}

/* Header dark (default): tagline white */
.nav__logo .wqh-logo__tagline {
  fill: var(--color-white);
  stroke: var(--color-white);
  transition: fill var(--transition-base), stroke var(--transition-base);
}
.nav__logo .wqh-logo__word {
  fill: var(--color-gold);
  stroke: var(--color-gold);
}

/* Header light (scrolled or nav--light): tagline green */
.nav.is-scrolled .nav__logo .wqh-logo__tagline,
.nav--light .nav__logo .wqh-logo__tagline {
  fill: var(--color-green);
  stroke: var(--color-green);
}
.nav--light { background-color: var(--color-white); box-shadow: var(--shadow-sm); }

/* --- Links --- */
.nav__links {
  display: flex;
  align-items: center;
  gap: var(--space-8);
}

.nav__link {
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
  position: relative;
  padding-block: var(--space-3);
  min-height: 44px;
  display: inline-flex;
  align-items: center;
}

.nav__link::after {
  content: '';
  position: absolute;
  bottom: -4px;
  left: 0;
  right: 0;
  height: 2px;
  background-color: var(--color-gold);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform var(--transition-fast);
}

.nav__link:hover { color: var(--color-white); }
.nav__link:hover::after,
.nav__link.is-active::after { transform: scaleX(1); }
.nav__link.is-active { color: var(--color-gold); }

/* Scrolled link colors */
.nav.is-scrolled .nav__link,
.nav--light .nav__link {
  color: var(--color-text-muted);
}
.nav.is-scrolled .nav__link:hover,
.nav--light .nav__link:hover {
  color: var(--color-green);
}
.nav.is-scrolled .nav__link.is-active,
.nav--light .nav__link.is-active {
  color: var(--color-gold);
}

/* --- Dropdown --- */
.nav__dropdown {
  position: relative;
}

.nav__dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding-block: var(--space-3);
  min-height: 44px;
  font-size: var(--text-sm);
  font-weight: var(--weight-bold);
  letter-spacing: var(--tracking-wide);
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  transition: color var(--transition-fast);
  cursor: pointer;
}

.nav__dropdown-toggle svg {
  transition: transform var(--transition-fast);
}

.nav.is-scrolled .nav__dropdown-toggle,
.nav--light .nav__dropdown-toggle {
  color: var(--color-text-muted);
}

.nav__dropdown-menu {
  position: absolute;
  top: calc(100% + var(--space-4));
  right: 0;
  min-width: 200px;
  background-color: var(--color-white);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-lg);
  padding: var(--space-2) 0;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-8px);
  transition: all var(--transition-base);
}

.nav__dropdown:hover .nav__dropdown-menu,
.nav__dropdown:focus-within .nav__dropdown-menu {
  opacity: 1;
  visibility: visible;
  transform: translateY(0);
}

.nav__dropdown:hover .nav__dropdown-toggle svg {
  transform: rotate(180deg);
}

.nav__dropdown-item {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: var(--space-3) var(--space-5);
  font-size: var(--text-sm);
  color: var(--color-text-muted);
  transition: all var(--transition-fast);
}

.nav__dropdown-item:hover {
  background-color: var(--color-cream);
  color: var(--color-green);
  padding-left: var(--space-6);
}

/* --- CTA Button --- */
.nav__cta {
  margin-left: var(--space-4);
}

/* --- Mobile hamburger --- */
.nav__burger {
  display: none;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  gap: 5px;
  padding: var(--space-3);
  min-width: 44px;
  min-height: 44px;
  cursor: pointer;
}

.nav__burger-line {
  display: block;
  width: 24px;
  height: 2px;
  background-color: var(--color-white);
  transition: all var(--transition-fast);
  border-radius: var(--radius-full);
}

.nav.is-scrolled .nav__burger-line,
.nav--light .nav__burger-line {
  background-color: var(--color-green);
}

/* Mobile nav open state */
.nav__burger.is-open .nav__burger-line:nth-child(1) {
  transform: translateY(7px) rotate(45deg);
}
.nav__burger.is-open .nav__burger-line:nth-child(2) {
  opacity: 0;
}
.nav__burger.is-open .nav__burger-line:nth-child(3) {
  transform: translateY(-7px) rotate(-45deg);
}

/* --- Responsive --- */
@media (max-width: 900px) {
  .nav__burger {
    display: flex;
    position: relative;
    z-index: 101;
    touch-action: manipulation;
    -webkit-tap-highlight-color: transparent;
  }
  .nav__links {
    position: fixed;
    top: var(--nav-height);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99;
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    background-color: var(--color-green-dark);
    padding: var(--space-8) var(--space-6);
    transform: translateX(100%);
    visibility: hidden;
    pointer-events: none;
    transition: transform 0.3s ease;
    overflow-y: auto;
  }
  .nav__links.is-open {
    transform: translateX(0);
    visibility: visible;
    pointer-events: auto;
  }
  /* Mobile panel is always dark green — force white text even when nav bar is scrolled/light */
  .nav__links .nav__link,
  .nav__links .nav__dropdown-toggle {
    color: rgba(255, 255, 255, 0.85);
    font-size: var(--text-lg);
    padding: var(--space-4) 0;
    width: 100%;
    border-bottom: 1px solid rgba(255,255,255,0.1);
  }
  .nav__links .nav__link:hover,
  .nav.is-scrolled .nav__links .nav__link:hover,
  .nav--light .nav__links .nav__link:hover {
    color: var(--color-white);
  }
  .nav__links .nav__link.is-active,
  .nav.is-scrolled .nav__links .nav__link.is-active,
  .nav--light .nav__links .nav__link.is-active {
    color: var(--color-gold);
  }
  .nav__dropdown-menu {
    position: static;
    box-shadow: none;
    background: rgba(255,255,255,0.05);
    border-radius: var(--radius-md);
    opacity: 1;
    visibility: visible;
    transform: none;
    margin-top: var(--space-2);
  }
  .nav__dropdown-item {
    color: rgba(255,255,255,0.7);
  }
  .nav__dropdown-item:hover {
    background: rgba(255,255,255,0.05);
    color: var(--color-gold);
  }
  .nav__cta { margin-left: 0; margin-top: var(--space-4); }
}