/**
 * Navigation CSS Components
 *
 * Mobile-first navigation styles with responsive breakpoints.
 * Following shadcn design patterns and TangoAtlas brand guidelines.
 *
 * Breakpoints:
 * - Mobile: < 768px (default)
 * - Tablet: >= 768px (md)
 * - Desktop: >= 1024px (lg)
 * - Wide: >= 1280px (xl)
 */

/* =================================================================
   CSS CUSTOM PROPERTIES FOR TRANSITIONS
   ================================================================= */

:root {
  --nav-transition-duration: 200ms;
  --nav-transition-easing: cubic-bezier(0.4, 0, 0.2, 1);
  --nav-breakpoint-transition: opacity var(--nav-transition-duration) var(--nav-transition-easing),
                                transform var(--nav-transition-duration) var(--nav-transition-easing),
                                visibility 0ms linear var(--nav-transition-duration);
}

/* =================================================================
   MOBILE NAVIGATION (Default - Mobile First)
   ================================================================= */

/* Touch target sizing - WCAG 2.1 AA minimum 44x44px */
.tap-target {
  min-height: 44px;
  min-width: 44px;
}

/* Mobile menu sheet overlay */
[data-slot="sheet-overlay"] {
  background-color: hsl(var(--background) / 0.8);
  backdrop-filter: blur(4px);
  transition: opacity var(--nav-transition-duration) var(--nav-transition-easing);
}

/* Mobile menu content - slides from left */
[data-slot="sheet-content"][data-side="left"] {
  border-right: 1px solid hsl(var(--border));
  transition: transform 300ms var(--nav-transition-easing);
}

/* Navigation item base styles */
.nav-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  border-radius: 0.375rem;
  padding: 0.75rem;
  font-size: 1rem;
  font-weight: 500;
  transition: all 150ms ease;
  min-height: 44px;
}

.nav-item:hover {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

.nav-item:focus-visible {
  outline: 2px solid hsl(var(--ring));
  outline-offset: 2px;
}

/* Active navigation item */
.nav-item[aria-current="page"],
.nav-item.active {
  background-color: hsl(var(--accent));
  color: hsl(var(--accent-foreground));
}

/* Navigation section label */
.nav-section-label {
  padding: 0.5rem 0.75rem;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: hsl(var(--muted-foreground));
}

/* Navigation icon */
.nav-icon {
  width: 1.25rem;
  text-align: center;
  flex-shrink: 0;
}

.nav-shell {
  border-bottom: 1px solid hsl(var(--border) / 0.72);
  background:
    linear-gradient(to bottom, hsl(var(--background) / 0.98), hsl(var(--background) / 0.92));
  box-shadow: 0 8px 24px -22px rgb(15 23 42 / 0.32);
  backdrop-filter: blur(14px) saturate(1.08);
}

.nav-brand-mark {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, hsl(var(--primary) / 0.18), hsl(var(--accent) / 0.16));
  color: hsl(var(--primary));
  box-shadow: inset 0 1px 0 rgb(255 255 255 / 0.4);
}

.nav-link-soft {
  border-radius: 9999px;
  transition:
    background-color var(--nav-transition-duration) var(--nav-transition-easing),
    color var(--nav-transition-duration) var(--nav-transition-easing),
    box-shadow var(--nav-transition-duration) var(--nav-transition-easing);
}

.nav-link-soft:hover {
  box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.65);
}

.nav-link-soft[aria-current="page"],
.nav-link-soft.active {
  box-shadow: inset 0 0 0 1px hsl(var(--primary) / 0.14);
}

.nav-dropdown-trigger {
  border-radius: 9999px;
  box-shadow: inset 0 0 0 1px transparent;
}

.nav-dropdown-trigger:hover,
.nav-dropdown-trigger[data-state="open"] {
  box-shadow: inset 0 0 0 1px hsl(var(--border) / 0.72);
}

.nav-dropdown-content {
  min-width: 17rem;
  padding: 0.5rem;
  border-radius: 1rem;
  border: 1px solid hsl(var(--border) / 0.9);
  background: linear-gradient(to bottom, hsl(var(--popover) / 0.99), hsl(var(--card) / 0.97));
  box-shadow:
    0 22px 42px -24px rgb(15 23 42 / 0.42),
    0 10px 18px -18px rgb(15 23 42 / 0.28);
  backdrop-filter: blur(18px) saturate(1.08);
}

.nav-dropdown-item {
  border-radius: 0.85rem;
  padding: 0.625rem 0.75rem;
}

.nav-dropdown-item:hover {
  background-color: hsl(var(--accent) / 0.64);
}

.icon-chip,
.nav-icon-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 1.5rem;
  height: 1.5rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  flex-shrink: 0;
  box-shadow: inset 0 0 0 1px rgb(255 255 255 / 0.18);
}

.icon-chip--links,
.nav-icon-chip--links {
  background-color: hsl(var(--info) / 0.14);
  color: hsl(var(--info));
}

.icon-chip--articles,
.nav-icon-chip--articles {
  background-color: hsl(var(--role-author) / 0.14);
  color: hsl(var(--role-author));
}

.icon-chip--people,
.nav-icon-chip--people {
  background-color: hsl(var(--role-teacher) / 0.14);
  color: hsl(var(--role-teacher));
}

.icon-chip--organizations,
.nav-icon-chip--organizations {
  background-color: hsl(var(--role-dj) / 0.14);
  color: hsl(var(--role-dj));
}

.icon-chip--events,
.nav-icon-chip--events {
  background-color: hsl(var(--warning) / 0.18);
  color: hsl(var(--warning-foreground));
}

.icon-chip--venues,
.nav-icon-chip--venues {
  background-color: hsl(var(--role-photographer) / 0.14);
  color: hsl(var(--role-photographer));
}

.icon-chip--videos,
.nav-icon-chip--videos {
  background-color: hsl(var(--destructive) / 0.14);
  color: hsl(var(--destructive));
}

.icon-chip--categories,
.nav-icon-chip--categories {
  background-color: hsl(var(--secondary) / 0.14);
  color: hsl(var(--secondary));
}

.icon-chip--search,
.nav-icon-chip--search {
  background-color: hsl(var(--accent) / 0.18);
  color: hsl(var(--foreground));
}

.icon-chip--submit,
.nav-icon-chip--submit {
  background-color: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}

.icon-chip--community,
.nav-icon-chip--community {
  background-color: hsl(var(--role-organizer) / 0.14);
  color: hsl(var(--role-organizer));
}

.icon-chip--content,
.nav-icon-chip--content {
  background-color: hsl(var(--secondary) / 0.14);
  color: hsl(var(--secondary));
}

.icon-chip--cms,
.nav-icon-chip--cms {
  background-color: hsl(var(--warning) / 0.18);
  color: hsl(var(--warning-foreground));
}

.icon-chip--login,
.nav-icon-chip--login {
  background-color: rgb(255 255 255 / 0.18);
  color: hsl(var(--primary-foreground));
}

.icon-chip--compass {
  background-color: hsl(var(--primary) / 0.14);
  color: hsl(var(--primary));
}

.icon-chip--empty {
  background-color: hsl(var(--muted));
  color: hsl(var(--muted-foreground));
}

.icon-inline--user {
  color: hsl(var(--role-teacher));
}

.icon-inline--calendar {
  color: hsl(var(--warning));
}

.icon-inline--building {
  color: hsl(var(--role-dj));
}

.icon-inline--search {
  color: hsl(var(--primary));
}

.icon-inline--article {
  color: hsl(var(--role-author));
}

.nav-mobile-card {
  border-radius: 1rem;
  border: 1px solid hsl(var(--border) / 0.72);
  background: linear-gradient(to bottom, hsl(var(--card)), hsl(var(--background)));
  box-shadow: 0 18px 40px -30px rgb(15 23 42 / 0.34);
}

/* =================================================================
   BREAKPOINT TRANSITION HANDLING (US5)
   ================================================================= */

/**
 * Mobile menu toggle - smoothly fades out at tablet breakpoint
 * Uses visibility delay to prevent flash during resize
 */
[data-testid="mobile-menu-toggle"] {
  opacity: 1;
  visibility: visible;
  transform: scale(1);
  transition: var(--nav-breakpoint-transition);
}

/**
 * Desktop navigation - smoothly fades in at tablet breakpoint
 * Hidden by default (mobile-first)
 */
.desktop-nav {
  display: flex;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: var(--nav-breakpoint-transition);
}

/* =================================================================
   TABLET NAVIGATION (md: >= 768px)
   ================================================================= */

@media (min-width: 768px) {
  /* Fade out mobile menu toggle */
  [data-testid="mobile-menu-toggle"] {
    opacity: 0;
    visibility: hidden;
    transform: scale(0.95);
    pointer-events: none;
    transition: opacity var(--nav-transition-duration) var(--nav-transition-easing),
                transform var(--nav-transition-duration) var(--nav-transition-easing),
                visibility 0ms linear 0ms;
  }

  /* Fade in desktop navigation */
  .desktop-nav {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    transition: opacity var(--nav-transition-duration) var(--nav-transition-easing) 50ms,
                transform var(--nav-transition-duration) var(--nav-transition-easing) 50ms,
                visibility 0ms linear 0ms;
  }

  /* Desktop nav item sizing - smaller than mobile */
  .desktop-nav .nav-item {
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    min-height: auto;
  }
}

/* =================================================================
   DESKTOP NAVIGATION (lg: >= 1024px)
   ================================================================= */

@media (min-width: 1024px) {
  /* Desktop dropdown menu */
  .nav-dropdown-content {
    min-width: 200px;
    padding: 0.25rem 0;
    border-radius: 0.5rem;
    border: 1px solid hsl(var(--border));
    background-color: hsl(var(--popover));
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1),
                0 4px 6px -4px rgb(0 0 0 / 0.1);
    /* Smooth dropdown appearance */
    transition: opacity 150ms var(--nav-transition-easing),
                transform 150ms var(--nav-transition-easing);
  }

  .nav-dropdown-item {
    display: flex;
    align-items: center;
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
    color: hsl(var(--popover-foreground));
    transition: background-color 150ms ease;
  }

  .nav-dropdown-item:hover {
    background-color: hsl(var(--accent));
  }

  .nav-dropdown-separator {
    height: 1px;
    margin: 0.25rem 0;
    background-color: hsl(var(--border));
  }
}

/* =================================================================
   WIDE DESKTOP (xl: >= 1280px)
   ================================================================= */

@media (min-width: 1280px) {
  /* Increased spacing on wide screens */
  .nav-container {
    gap: 0.5rem;
  }
}

/* =================================================================
   ACCESSIBILITY
   ================================================================= */

/* Skip link - visible on focus */
.skip-link {
  position: absolute;
  top: -100%;
  left: 1rem;
  z-index: 50;
  padding: 0.5rem 1rem;
  background-color: hsl(var(--primary));
  color: hsl(var(--primary-foreground));
  border-radius: 0.375rem;
  font-weight: 500;
  text-decoration: none;
  transition: top 200ms ease;
}

.skip-link:focus {
  top: 1rem;
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  .nav-item {
    border: 2px solid transparent;
  }

  .nav-item:hover,
  .nav-item:focus-visible {
    border-color: currentColor;
  }

  .nav-item[aria-current="page"] {
    border-color: hsl(var(--primary));
  }
}

/* Reduced motion support - CRITICAL for US5 transitions */
@media (prefers-reduced-motion: reduce) {
  :root {
    --nav-transition-duration: 0ms;
    --nav-breakpoint-transition: none;
  }

  .nav-item,
  [data-slot="sheet-content"],
  [data-slot="sheet-overlay"],
  .nav-dropdown-content,
  [data-testid="mobile-menu-toggle"],
  .desktop-nav {
    transition: none !important;
  }

  [x-transition\:enter],
  [x-transition\:leave] {
    transition: none !important;
  }
}

/* =================================================================
   DARK MODE ADJUSTMENTS
   ================================================================= */

.dark .nav-item:hover {
  background-color: hsl(var(--accent));
}

.dark [data-slot="sheet-overlay"] {
  background-color: hsl(var(--background) / 0.85);
}

/* =================================================================
   PRINT STYLES
   ================================================================= */

@media print {
  header,
  .nav-dropdown-content,
  [data-testid="mobile-nav-menu"] {
    display: none !important;
  }
}