/**
 * Ben Live TV - Navigation Component
 * Responsive navigation with mobile hamburger menu and desktop horizontal layout
 * Mobile-first: stacked menu on small screens, horizontal on 768px+
 */

/* ============================================================================
   Base Navigation Styles
   ============================================================================ */

nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  line-height: 1.6;
  padding: clamp(0.75rem, 2vh, 1.5rem) 0;
  --nav-primary: var(--accent-green, var(--primary));
  --nav-secondary: var(--accent-blue, var(--secondary));
  /* Dark mode: delegate to shared gradient token from _gradients.css */
  --nav-prism-dark: var(--prism-gradient-112);
  --nav-prism-light: linear-gradient(
    112deg,
    oklch(0.62 0.22 188) 0%,
    oklch(0.59 0.24 220) 8.33%,
    oklch(0.56 0.25 248) 16.66%,
    oklch(0.54 0.24 282) 25%,
    oklch(0.55 0.23 322) 33.33%,
    oklch(0.58 0.21 166) 41.66%,
    oklch(0.62 0.22 188) 50%,
    oklch(0.59 0.24 220) 58.33%,
    oklch(0.56 0.25 248) 66.66%,
    oklch(0.54 0.24 282) 75%,
    oklch(0.55 0.23 322) 83.33%,
    oklch(0.58 0.21 166) 91.66%,
    oklch(0.62 0.22 188) 100%
  );
  background: transparent;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 1px solid transparent;
  color-scheme: dark;
  /* Keep nav typography identical across pages with different body text features. */
  font-kerning: normal;
  font-feature-settings: normal;
  font-variant-ligatures: normal;
  transition: padding 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              background 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-radius 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              backdrop-filter 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              box-shadow 0.4s cubic-bezier(0.4, 0, 0.2, 1),
              border-color 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

html[data-theme="light"] nav {
  color-scheme: light;
}

/* Scrolled state - Floating island pill (all widths) */
nav.nav-scrolled {
  top: 1rem;
  left: clamp(1rem, 2vw, 1.5rem);
  right: clamp(1rem, 2vw, 1.5rem);
  padding: 0.75rem 1.75rem;
  border-radius: 9999px;
  background: rgba(15, 23, 42, 0.88);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: 1px solid rgba(255, 255, 255, 0.08);
  box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
}

html[data-theme="light"] nav.nav-scrolled {
  background: rgba(248, 250, 252, 0.92);
  border-color: rgba(15, 23, 42, 0.06);
}

/* Desktop: center the pill when scrolled */
@media (min-width: 800px) {
  nav.nav-scrolled {
    left: 50%;
    right: auto;
    transform: translateX(-50%);
    width: fit-content;
    max-width: min(95vw, var(--nav-content-max, 1200px));
    padding: 0.75rem 2rem;
  }

  /* Increase gap in pill state for better spacing */
  nav.nav-scrolled .nav-content {
    gap: clamp(1rem, 2.2vw, 2rem);
  }
}

.nav-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  gap: 1rem;
  flex-wrap: nowrap;
  min-width: 0;
  white-space: nowrap;
}

/* Ensure consistent horizontal padding on mobile */
.nav-content.container,
.container.nav-content {
  padding-left: clamp(1rem, 3vw, 2rem);
  padding-right: clamp(1rem, 3vw, 2rem);
}

/* Override container constraints for full-width nav */
@media (min-width: 800px) {
  nav .nav-content.container,
  nav .container.nav-content {
    max-width: var(--nav-content-max, var(--container-max-width));
    width: min(100%, var(--nav-content-max, var(--container-max-width)));
    margin: 0 auto;
    padding-left: var(--container-padding);
    padding-right: var(--container-padding);
  }
}

/* ============================================================================
   Logo Styles
   ============================================================================ */

.logo {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  flex-wrap: nowrap;
  font-size: clamp(1.1rem, 3vw, 1.3rem);
  font-weight: 700;
  --logo-gradient: linear-gradient(135deg, var(--accent-cyan), var(--accent-blue));
  text-decoration: none;
  transition: opacity 0.2s ease, text-shadow 0.3s ease, filter 0.3s ease;
  perspective: 600px;
}

.logo-text,
.logo-tagline {
  white-space: nowrap;
  color: var(--primary);
  background-image: var(--logo-gradient);
  background-size: 200% 200%;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: transparent;
}

.logo-tagline {
  font-weight: 600;
  font-size: 0.92em;
}

.logo-divider {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.4rem;
  height: 1.4rem;
  transform-style: preserve-3d;
}

.logo-divider-icon {
  width: 100%;
  height: 100%;
  stroke-linecap: round;
  stroke-linejoin: round;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.25));
  transform-origin: center;
}

.logo.logo-static {
  border: none;
  background-color: transparent;
  padding: 0;
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  -webkit-tap-highlight-color: transparent;
}

.logo.logo-static:active {
  transform: translateY(1px) scale(0.98);
}

.logo:hover {
  opacity: 1;
  text-shadow:
    0 0 12px color-mix(in oklch, var(--accent-cyan) 55%, transparent),
    0 0 24px color-mix(in oklch, var(--accent-purple) 45%, transparent);
  filter: drop-shadow(0 0 10px rgba(56, 189, 248, 0.25));
}

.logo:hover .logo-text,
.logo:hover .logo-tagline {
  animation: logoShimmer 2.4s ease-in-out infinite;
}

.logo:active,
.logo:focus-visible {
  -webkit-text-fill-color: transparent;
}

.logo:hover .logo-divider-icon,
.logo:focus-visible .logo-divider-icon {
  animation: logoDividerSpin 1.2s cubic-bezier(0.2, 0.7, 0.3, 1.2);
}

@keyframes logoDividerSpin {
  0% {
    transform: rotateY(0deg) rotateZ(0deg);
  }
  60% {
    transform: rotateY(200deg) rotateZ(10deg) translateZ(6px);
  }
  100% {
    transform: rotateY(360deg) rotateZ(0deg);
  }
}

/* ============================================================================
   Mobile Navigation (Default)
   ============================================================================ */

.nav-links {
  --nav-flyout-gap: 1rem;
  position: absolute;
  top: calc(100% + var(--nav-flyout-gap) + var(--nav-extra-offset, 0px));
  left: var(--nav-flyout-gap);
  right: var(--nav-flyout-gap);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
  list-style: none;
  margin: 0 auto;
  padding: 1rem 1.25rem 1.1rem;
  background: rgba(9, 12, 20, 0.95);
  -webkit-backdrop-filter: blur(16px);
  backdrop-filter: blur(16px);
  border: 1px solid color-mix(in oklch, var(--border) 75%, transparent);
  border-radius: 0.95rem;
  box-shadow: 0 18px 38px rgba(5, 8, 16, 0.45);
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  max-height: 0;
  max-width: min(400px, calc(100vw - 2rem));
  min-width: 0;
  overflow: hidden;
  transition: opacity 0.2s ease, transform 0.2s ease, max-height 0.2s ease;
}

html[data-theme="light"] .nav-links {
  background: rgba(248, 250, 252, 0.96);
}

.nav-links a {
  --nav-link-prism: var(--nav-prism-dark);
  --nav-link-loop-end: var(--interactive-prism-loop-end, 200%);
  color: var(--text-secondary);
  text-decoration: none;
  font-size: clamp(0.9rem, 1.5vw, 1rem);
  font-weight: 500;
  transition: color 0.3s ease, text-shadow 0.35s ease, filter 0.35s ease;
  position: relative;
  padding: 0.5rem 0.32rem;
  min-height: 44px;
  min-inline-size: max-content;
  display: inline-flex;
  align-items: center;
  line-height: 1.3;
  background-image: var(--nav-link-prism);
  background-size: var(--prism-size);
  background-repeat: repeat;
  background-position: 0% 50%;
  -webkit-background-clip: text;
  background-clip: text;
  -webkit-text-fill-color: currentColor;
  /* Ensure readability over hero when nav is transparent */
  text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
}

html[data-theme="light"] .nav-links a {
  --nav-link-prism: var(--nav-prism-light);
}

/* Remove text-shadow in scrolled state (has background) */
nav.nav-scrolled .nav-links a {
  text-shadow: none;
}

@media (hover: hover) and (pointer: fine) {
  .nav-links a:hover {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-position: 0% 50%;
    animation: prismFlow 2.35s linear infinite;
    text-shadow:
      0 0 14px color-mix(in oklch, var(--nav-primary) 38%, transparent),
      0 0 26px color-mix(in oklch, var(--nav-secondary) 28%, transparent);
    filter: saturate(1.1);
    will-change: background-position;
  }
}

.nav-links a:focus-visible,
.nav-links a:active {
  color: transparent;
  -webkit-text-fill-color: transparent;
  background-position: 0% 50%;
  animation: prismFlow 2.35s linear infinite;
  text-shadow:
    0 0 14px color-mix(in oklch, var(--nav-primary) 44%, transparent),
    0 0 24px color-mix(in oklch, var(--nav-secondary) 32%, transparent);
  will-change: background-position;
}

html[data-theme="light"] .nav-links a:focus-visible,
html[data-theme="light"] .nav-links a:active {
  color: transparent;
  -webkit-text-fill-color: transparent;
}

.nav-links a::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: -0.35rem;
  height: 2px;
  border-radius: 999px;
  background: linear-gradient(90deg, var(--nav-primary), var(--nav-secondary));
  opacity: 0;
  transform: scaleX(0.4);
  transition: opacity 0.2s ease, transform 0.2s ease;
}

.nav-links a:hover::after,
.nav-links a:focus-visible::after,
.nav-links a:active::after {
  opacity: 1;
  transform: scaleX(1);
}

/* @keyframes navLinkPrismShimmer — removed; use prismFlow from _animations.css */

/* ============================================================================
   Hamburger Menu Toggle
   ============================================================================ */

.nav-toggle {
  width: 44px;
  height: 44px;
  min-width: 44px;
  flex-shrink: 0;
  border-radius: 0.75rem;
  border: 1px solid var(--border);
  background: rgba(15, 23, 42, 0.8);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: border-color 0.2s ease, background 0.2s ease;
  position: relative;
}

html[data-theme="light"] .nav-toggle {
  background: rgba(255, 255, 255, 0.85);
}

.nav-toggle:hover {
  border-color: rgba(16, 185, 129, 0.3);
}

.nav-toggle-bar {
  position: absolute;
  width: 20px;
  height: 2px;
  background: var(--text-secondary);
  border-radius: 999px;
  transition: transform 0.2s ease, opacity 0.2s ease;
}

.nav-toggle-bar:nth-child(1) {
  transform: translateY(-6px);
}

.nav-toggle-bar:nth-child(2) {
  transform: translateY(0);
}

.nav-toggle-bar:nth-child(3) {
  transform: translateY(6px);
}

/* Open state - hamburger transforms to X */
nav.nav-open .nav-links {
  opacity: 1;
  transform: translateY(0);
  pointer-events: auto;
  max-height: 400px;
}

nav.nav-open .nav-toggle-bar:nth-child(1) {
  transform: translateY(0) rotate(45deg);
}

nav.nav-open .nav-toggle-bar:nth-child(2) {
  opacity: 0;
}

nav.nav-open .nav-toggle-bar:nth-child(3) {
  transform: translateY(0) rotate(-45deg);
}

/* ============================================================================
   Desktop Navigation (800px and up)
   Precise breakpoint ensures nav links fit comfortably without wrapping
   ============================================================================ */

@media (min-width: 800px) {
  .nav-links {
    position: static;
    flex-direction: row;
    flex-wrap: nowrap;
    flex: 0 0 auto;
    background: none;
    border: 0;
    border-radius: 0;
    padding: 0;
    opacity: 1;
    transform: none;
    pointer-events: auto;
    max-height: none;
    margin-left: auto;
    margin-right: 0;
    gap: clamp(0.9rem, 1.8vw, 1.6rem);
    min-width: max-content;
    padding-inline-end: clamp(0.12rem, 0.25vw, 0.26rem);
    box-shadow: none;
    overflow: visible;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-links li {
    white-space: nowrap;
  }

  html[data-theme="light"] .nav-links {
    background: none;
    border: 0;
    box-shadow: none;
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
  }

  .nav-toggle {
    display: none;
  }

  .nav-links a {
    position: relative;
    padding: 0.28rem 0.24rem;
    background-image: var(--nav-link-prism);
    background-size: var(--prism-size);
    background-repeat: repeat;
    background-position: 0% 50%;
    -webkit-background-clip: text;
    background-clip: text;
  }

  .nav-links a::after {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    bottom: -0.35rem;
    height: 2px;
    border-radius: 999px;
    background: linear-gradient(90deg, var(--nav-primary), var(--nav-secondary));
    opacity: 0;
    transform: scaleX(0.4);
    transition: opacity 0.2s ease, transform 0.2s ease;
  }

  .nav-links a:hover,
  .nav-links a:focus-visible {
    color: transparent;
    -webkit-text-fill-color: transparent;
    background-position: 0% 50%;
    animation: prismFlow 2.35s linear infinite;
    text-shadow:
      0 0 18px color-mix(in oklch, var(--nav-primary) 45%, transparent),
      0 0 36px color-mix(in oklch, var(--nav-secondary) 35%, transparent);
    will-change: background-position;
  }

  .nav-links a:hover::after,
  .nav-links a:focus-visible::after {
    opacity: 1;
    transform: scaleX(1);
  }
}

@media (min-width: 1600px) {
  nav.nav-scrolled {
    max-width: min(95vw, var(--nav-content-max, var(--container-max-width, 1420px)));
  }

  nav .nav-content.container,
  nav .container.nav-content {
    padding-left: clamp(1.35rem, 1.5vw, 2.2rem);
    padding-right: clamp(1.35rem, 1.5vw, 2.2rem);
  }

  .nav-links {
    gap: clamp(0.82rem, 0.92vw, 1.28rem);
  }

  .logo {
    font-size: clamp(1.2rem, 0.5vw + 1rem, 1.44rem);
  }
}

@media (min-width: 2200px) {
  nav .nav-content.container,
  nav .container.nav-content {
    padding-left: clamp(1.4rem, 1.25vw, 2.4rem);
    padding-right: clamp(1.4rem, 1.25vw, 2.4rem);
  }

  .nav-links {
    gap: clamp(0.76rem, 0.68vw, 1.08rem);
  }

  nav.nav-scrolled .nav-content {
    gap: clamp(0.78rem, 0.95vw, 1.3rem);
  }

  .logo {
    font-size: clamp(1.26rem, 0.42vw + 1.08rem, 1.56rem);
  }
}

@media (min-width: 3200px) {
  nav .nav-content.container,
  nav .container.nav-content {
    padding-left: clamp(1.5rem, 1.1vw, 2.6rem);
    padding-right: clamp(1.5rem, 1.1vw, 2.6rem);
  }

  .logo {
    font-size: clamp(1.32rem, 0.38vw + 1.15rem, 1.68rem);
  }
}

@media (max-width: 420px) {
  .logo {
    flex-direction: row;
    align-items: center;
    gap: 0.4rem;
    font-size: 1rem;
  }

  .logo-divider {
    width: 1.2rem;
    height: 1.2rem;
  }

  .logo-tagline {
    font-size: 0.88em;
  }

  .nav-toggle {
    width: 40px;
    height: 40px;
    min-width: 40px;
  }
}

/* ============================================================================
   Accessibility
   ============================================================================ */

/* Focus visible styles for keyboard navigation */
.logo:focus-visible,
.nav-toggle:focus-visible,
.nav-links a:focus-visible {
  outline: 2px solid var(--nav-primary);
  outline-offset: 2px;
  border-radius: 0.5rem;
}

/*
 * Suppress focus ring on the menu container itself. It receives
 * programmatic focus when the hamburger is tapped so screen readers
 * know focus entered the menu, but it should never show a visible
 * outline. The first Tab press moves focus to the first link.
 */
.nav-links:focus {
  outline: none;
}

/* Respect user motion preferences */
@media (prefers-reduced-motion: reduce) {
  .logo,
  .logo-divider-icon,
  .nav-links,
  .nav-toggle-bar {
    transition-duration: 0.01ms !important;
    animation: none !important;
  }
}

/* ============================================================================
   Usage Notes
   ============================================================================ */

/*
  HTML Structure:

  <nav class="nav-open">
    <div class="container nav-content">
      <a href="/" class="logo">Ben Live TV</a>
      <button class="nav-toggle" aria-label="Toggle navigation">
        <span class="nav-toggle-bar"></span>
        <span class="nav-toggle-bar"></span>
        <span class="nav-toggle-bar"></span>
      </button>
      <ul class="nav-links">
        <li><a href="/ai-lab/">AI Lab</a></li>
        <li><a href="/hire-me/">Hire Me</a></li>
        <li><a href="/about/">Portfolio</a></li>
      </ul>
    </div>
  </nav>

  JavaScript Required:
  - Toggle .nav-open class on <nav> when .nav-toggle is clicked
  - Close menu when clicking outside or on a link (mobile)
  - See /public/js/nav-toggle.js for reference implementation
*/