/* Nav transition and scrolled state styles for smooth animations */
:root {
  /* fallback mapping for --primary as hsl components already used in style.css */
}

nav {
  transition: background-color 220ms cubic-bezier(.4,0,.2,1), box-shadow 220ms cubic-bezier(.4,0,.2,1), color 220ms cubic-bezier(.4,0,.2,1);
  will-change: background-color, box-shadow, color;
}

/* scrolled state */
nav.nav-scrolled {
  background-color: white !important;
  -webkit-backdrop-filter: saturate(180%) blur(6px);
  backdrop-filter: saturate(180%) blur(6px);
  box-shadow: 0 6px 20px rgba(16,24,40,0.06);
}

/* ensure interactive items transition color and inherit correctly */
nav a,
nav button,
nav span {
  transition: color 220ms cubic-bezier(.4,0,.2,1);
}

/* Default nav uses foreground; when scrolled we set color to --primary */
nav.nav-scrolled a,
nav.nav-scrolled button,
nav.nav-scrolled span {
  color: hsl(var(--primary)) !important;
}

/* Make SVG icons inherit currentColor for stroke/fill */
nav .lucide,
nav svg {
  transition: color 220ms cubic-bezier(.4,0,.2,1), stroke 220ms cubic-bezier(.4,0,.2,1);
  color: inherit;
}

nav.nav-scrolled .lucide,
nav.nav-scrolled svg {
  color: hsl(var(--primary)) !important;
  stroke: currentColor !important;
  fill: none !important;
}

/* Mobile menu styles */
#mobile-menu {
  position: absolute;
  top: 100%;
  left: 0;
  right: 0;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05);
  z-index: 10;
  background-color: white; /* White background */
  color: #1e293b; /* text-foreground color */
}

/* Mobile menu links */
#mobile-menu a {
  color: #1e293b; /* text-foreground color */
}

#mobile-menu a:hover {
  color: hsl(var(--primary)); /* primary color on hover */
}

/* Mobile menu button */
#mobile-menu button {
  color: #1e293b; /* text-foreground color */
  border-color: #1e293b; /* border color */
}

#mobile-menu button:hover {
  background-color: rgba(30, 41, 59, 0.1); /* light overlay on hover */
  border-color: #1e293b; /* border color */
}

/* Prefer reduced motion respect */
@media (prefers-reduced-motion: reduce) {
  nav, nav a, nav button, nav span, nav svg { transition: none !important; }
}