/**
 * NAV MENU COMPONENT
 * Dropdown menu for site navigation
 *
 * BEM NAMING:
 * - Block: .nav-menu
 * - Elements: .nav-menu__toggle, .nav-menu__bar, .nav-menu__panel, .nav-menu__link, .nav-menu__dot
 * - States: [aria-expanded="true"], .is-current
 */

/* ==========================================================================
   NAV MENU - Container (always fixed in top-right corner)
   ========================================================================== */

.nav-menu {
  /* Button sizing */
  --_btn-half: 1.375rem; /* half of 2.75rem toggle */

  /* Positioning anchor — JS sets --_main-right at runtime */
  --_main-right: max(0px, calc(max(var(--pad-lg), env(safe-area-inset-right)) - var(--_btn-half)));

  /* Alignment offset from main's right edge (tune this to taste)
     0px          = button right edge flush with content edge
     -btn-half    = button center on content edge
     -btn-full    = button left edge on content edge (fully inset) */
  --_nav-offset: 0px;

  position: fixed;
  top: clamp(var(--pad-md), 3vw, var(--pad-xl));
  right: calc(var(--_main-right) + var(--_nav-offset));
  z-index: var(--z-modal);
}

/* ==========================================================================
   TOGGLE BUTTON - Dark glassmorphism
   ========================================================================== */

.nav-menu__toggle {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  background: rgba(255, 255, 255, 0.06);
  border: var(--border-subtle);
  border-radius: var(--radius-full);
  cursor: pointer;
  flex-shrink: 0;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  box-shadow: var(--neu-raised-sm), var(--neu-edge-highlight-subtle);
  transition:
    box-shadow var(--transition-fast),
    transform var(--transition-fast),
    background var(--transition-fast);
}

.nav-menu__toggle:hover {
  background: rgba(255, 255, 255, 0.1);
  box-shadow:
    var(--neu-raised-sm),
    var(--neu-edge-highlight-subtle),
    0 0 12px var(--glow-purple-xs);
  transform: translateY(-1px);
}

.nav-menu__toggle:active,
.nav-menu__toggle[aria-expanded='true'] {
  box-shadow: var(--neu-pressed);
  transform: translateY(0);
}

/* ---------- Animated + / x bars ---------- */

.nav-menu__bar {
  position: absolute;
  width: 18px;
  height: 2px;
  background: var(--color-text-secondary);
  border-radius: 1px;
  transition: transform var(--transition-base);
}

/* Closed: + shape */
.nav-menu__bar:first-child {
  transform: rotate(0deg);
}
.nav-menu__bar:last-child {
  transform: rotate(90deg);
}

/* Open: x shape */
.nav-menu__toggle[aria-expanded='true'] .nav-menu__bar:first-child {
  transform: rotate(45deg);
}
.nav-menu__toggle[aria-expanded='true'] .nav-menu__bar:last-child {
  transform: rotate(-45deg);
}

/* ==========================================================================
   PANEL - Glass dropdown (matches toggle style)
   ========================================================================== */

.nav-menu__panel {
  position: absolute;
  top: calc(100% + var(--space-sm));
  right: 0;
  min-width: 13rem;
  padding: var(--pad-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  z-index: var(--z-dropdown);
  background: rgba(255, 255, 255, 0.06);
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
  border: var(--border-subtle);
  border-radius: var(--radius-xl);
  box-shadow: var(--neu-raised-sm), var(--neu-edge-highlight-subtle);
  animation: navMenuFadeIn 0.15s ease-out;
}

.nav-menu__panel[hidden] {
  display: none;
}

/* ==========================================================================
   LINKS - Light text on dark panel
   ========================================================================== */

.nav-menu__link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--pad-xs) var(--pad-sm);
  font-family: var(--font-ui);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-medium);
  color: var(--color-muted);
  text-decoration: none;
  border-radius: var(--radius-xs);
  transition:
    background var(--transition-base),
    color var(--transition-base);
}

.nav-menu__link:hover {
  background: rgba(255, 255, 255, 0.06);
  color: var(--color-text-primary);
}

.nav-menu__link:focus-visible {
  outline: 2px solid var(--color-purple-primary);
  outline-offset: 2px;
}

/* ==========================================================================
   CURRENT PAGE DOT
   ========================================================================== */

.nav-menu__dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: transparent;
  flex-shrink: 0;
  transition: background var(--transition-base);
}

.nav-menu__link.is-current .nav-menu__dot {
  background: var(--color-purple-primary);
  box-shadow:
    0 0 8px var(--glow-purple),
    0 0 20px var(--glow-purple-md);
}

.nav-menu__link.is-current {
  color: var(--color-text-primary);
}

/* ==========================================================================
   STUDIO LINK - Track-pill style with time-based color
   Day (6am-6pm): red | Night (6pm-6am): blue
   ========================================================================== */

.nav-menu__link--studio {
  margin-top: var(--space-lg);
  font-family: var(--font-mono);
  font-size: var(--text-xs);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  white-space: nowrap;
  border: var(--border-width-base) solid transparent;
  border-radius: var(--radius-sm);
  color: var(--color-white);
  transition:
    background var(--transition-base),
    color var(--transition-base),
    opacity var(--transition-base);
}

.nav-menu__link--studio .nav-menu__arrow {
  font-size: var(--text-sm);
  margin-left: var(--space-2xs);
  vertical-align: middle;
}

.nav-menu__link--studio:hover,
.nav-menu__link--studio:focus-visible {
  color: var(--color-white);
  opacity: 0.85;
}

/* Night mode: blue */
.nav-menu__link--studio[data-time='night'],
.nav-menu__link--studio[data-time='night']:hover {
  background: var(--color-blue-primary);
}

/* Day mode: red */
.nav-menu__link--studio[data-time='day'],
.nav-menu__link--studio[data-time='day']:hover {
  background: var(--color-red-primary);
}

/* Current-page dot color matches time-based accent */
.nav-menu__link--studio.is-current[data-time='night'] .nav-menu__dot {
  background: var(--color-blue-primary);
  box-shadow:
    0 0 8px var(--glow-blue),
    0 0 20px var(--glow-blue-sm);
}

.nav-menu__link--studio.is-current[data-time='day'] .nav-menu__dot {
  background: var(--color-red-primary);
  box-shadow:
    0 0 8px var(--glow-red),
    0 0 20px var(--glow-red-sm);
}

/* ==========================================================================
   ANIMATIONS
   ========================================================================== */

@keyframes navMenuFadeIn {
  from {
    opacity: 0;
    transform: translateY(-4px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ==========================================================================
   RESPONSIVE
   ========================================================================== */

@media (max-width: 24rem) {
  .nav-menu {
    --_btn-half: 1.25rem; /* half of 2.5rem toggle button */
  }

  .nav-menu__toggle {
    width: 2.5rem;
    height: 2.5rem;
  }

  .nav-menu__bar {
    width: 15px;
  }

  .nav-menu__panel {
    min-width: 11rem;
  }

  .nav-menu__link {
    font-size: var(--text-xs);
    padding: var(--pad-2xs) var(--pad-xs);
  }
}

/* ==========================================================================
   REDUCED MOTION
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
  .nav-menu__panel {
    animation: none;
  }

  .nav-menu__toggle {
    transition:
      box-shadow var(--transition-fast),
      background var(--transition-fast);
  }

  .nav-menu__toggle:hover {
    transform: none;
  }

  .nav-menu__bar {
    transition: none;
  }
}