/**
 * Desktop Navigation Module
 *
 * Contains all desktop navigation menu styles including:
 * - Desktop navigation layout and positioning
 * - Menu items and links
 * - Active states and indicators
 * - Hover effects and animations
 * - Transparent navbar state styles
 */

/* ==========================================================================
   Desktop Navigation
   ========================================================================== */

.navbar__nav--desktop {
  flex: 1 1 auto; /* Take remaining space, grow and shrink as needed */
  display: flex !important; /* Use !important to ensure it's not overridden by responsive rules on desktop */
  justify-content: center; /* Center nav links within allocated space */
  margin-left: 0; /* No left margin - spacing handled by search section margin-right */
  margin-right: 2rem; /* 32px spacing to Actions section (industry standard) */
  position: static; /* Ensure dropdowns aren't cut off */
  min-width: 0; /* Allow shrinking */
  flex-shrink: 1; /* Allow shrinking before being hidden */
}

.navbar__menu {
  display: flex;
  align-items: center;
  list-style: none;
  margin: 0;
  padding: 0;
  gap: 0.5rem; /* 8px gap between nav links (tight but readable) */
}

.navbar__item {
  position: relative;
  z-index: 1; /* Ensure dropdowns stack properly */
}

.navbar__link {
  position: relative;
  display: flex;
  align-items: center;
  gap: var(--navbar-spacing-sm);
  padding: 0.375rem 0.75rem; /* Reduced from var(--navbar-spacing-sm) var(--navbar-spacing-md) for compact navbar */
  border-radius: var(--navbar-border-radius);
  text-decoration: none;
  font-size: 0.8125rem; /* Reduced from 0.875rem for more compact navbar */
  font-weight: var(--navbar-font-weight-medium);
  color: var(--navbar-text-secondary);
  transition: all var(--navbar-transition-base);
  cursor: pointer;
  border: none;
  background: transparent;
  white-space: nowrap;
}

.navbar__link:hover {
  color: var(--navbar-text-primary);
  background: var(--navbar-hover);
  transform: translateY(-1px);
}

.navbar__link--active {
  color: var(--navbar-primary);
  background: var(--navbar-active);
}

/* Default state - when navbar is scrolled (not transparent) */
.navbar:not(.navbar--transparent) .navbar__link {
  background: transparent;
  color: var(--navbar-text-secondary);
}

.navbar:not(.navbar--transparent) .navbar__link:hover {
  background: var(--navbar-hover);
  color: var(--navbar-text-primary);
}

.navbar:not(.navbar--transparent) .navbar__link--active {
  background: var(--navbar-active);
  color: var(--navbar-primary);
}

/* Light mode - non-transparent navbar should have dark text */
:root:not([data-theme="dark"]) .navbar:not(.navbar--transparent) .navbar__link,
.navbar:not(.navbar--transparent):not([data-theme="dark"]) .navbar__link {
  color: var(--navbar-text-primary-light) !important;
}

:root:not([data-theme="dark"]) .navbar:not(.navbar--transparent) .navbar__link:hover,
.navbar:not(.navbar--transparent):not([data-theme="dark"]) .navbar__link:hover {
  color: var(--navbar-text-primary-light) !important;
  background: var(--navbar-hover-light) !important;
}

:root:not([data-theme="dark"]) .navbar:not(.navbar--transparent) .navbar__action-button,
.navbar:not(.navbar--transparent):not([data-theme="dark"]) .navbar__action-button {
  color: var(--navbar-text-primary-light) !important;
}

:root:not([data-theme="dark"]) .navbar:not(.navbar--transparent) .navbar__auth-link,
.navbar:not(.navbar--transparent):not([data-theme="dark"]) .navbar__auth-link {
  color: var(--navbar-text-primary-light) !important;
}

:root:not([data-theme="dark"]) .navbar:not(.navbar--transparent) .navbar__auth-button,
.navbar:not(.navbar--transparent):not([data-theme="dark"]) .navbar__auth-button {
  color: var(--navbar-text-primary-light) !important;
  border-color: var(--navbar-text-primary-light) !important;
}

/* Transparent navbar state - glassmorphism effect for better readability */
.navbar--transparent {
  background: rgba(0, 0, 0, 0.1) !important;
  border-bottom-color: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  box-shadow: 0 2px 20px rgba(0, 0, 0, 0.3) !important;
}

.navbar--transparent .navbar__link,
.navbar--transparent .navbar__action-button,
.navbar--transparent .navbar__auth-button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

/* Override dark mode colors for transparent state */
.dark-mode .navbar--transparent .navbar__link,
[data-theme="dark"] .navbar--transparent .navbar__link,
.dark-mode .navbar--transparent .navbar__action-button,
[data-theme="dark"] .navbar--transparent .navbar__action-button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
}

.dark-mode .navbar--transparent .navbar__link:hover,
[data-theme="dark"] .navbar--transparent .navbar__link:hover,
.dark-mode .navbar--transparent .navbar__action-button:hover,
[data-theme="dark"] .navbar--transparent .navbar__action-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.dark-mode .navbar--transparent .navbar__link--active,
[data-theme="dark"] .navbar--transparent .navbar__link--active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

.navbar--transparent .navbar__link:hover,
.navbar--transparent .navbar__action-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
}

.navbar--transparent .navbar__link--active {
  background: rgba(255, 255, 255, 0.15) !important;
  color: white !important;
}

/* Transparent navbar - Light mode: Use gradient for visibility */
:root:not([data-theme="dark"]) .navbar--transparent .navbar__auth-button,
html:not([data-theme="dark"]) .navbar--transparent .navbar__auth-button {
  background: linear-gradient(135deg, #2563eb 0%, #1e40af 50%, #1e3a8a 100%) !important;
  color: white !important;
  border: none !important;
  box-shadow: 0 2px 8px rgba(37, 99, 235, 0.4) !important;
}

:root:not([data-theme="dark"]) .navbar--transparent .navbar__auth-button:hover,
html:not([data-theme="dark"]) .navbar--transparent .navbar__auth-button:hover {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e3a8a 50%, #172554 100%) !important;
  color: white !important;
  box-shadow: 0 4px 12px rgba(37, 99, 235, 0.6) !important;
  transform: translateY(-1px);
}

/* Transparent navbar - Dark mode: Keep transparent style */
[data-theme="dark"] .navbar--transparent .navbar__auth-button,
.dark-mode .navbar--transparent .navbar__auth-button {
  background: transparent !important;
  color: rgba(255, 255, 255, 0.9) !important;
  border: 1px solid rgba(255, 255, 255, 0.3) !important;
}

[data-theme="dark"] .navbar--transparent .navbar__auth-button:hover,
.dark-mode .navbar--transparent .navbar__auth-button:hover {
  background: rgba(255, 255, 255, 0.1) !important;
  color: white !important;
  border-color: rgba(255, 255, 255, 0.5) !important;
}

.navbar__link-icon {
  font-size: 1rem;
  transition: transform var(--navbar-transition-base);
}

.navbar__link:hover .navbar__link-icon {
  transform: scale(1.1);
}

.navbar__link-text {
  transition: all var(--navbar-transition-base);
}

.navbar__link-indicator {
  position: absolute;
  bottom: -2px;
  left: 50%;
  width: 0;
  height: 2px;
  background: var(--navbar-primary);
  border-radius: 1px;
  transform: translateX(-50%);
  transition: width var(--navbar-transition-base);
}

.navbar__link--active .navbar__link-indicator {
  width: calc(100% - var(--navbar-spacing-md));
}

.navbar__link-chevron {
  font-size: 0.75rem;
  transition: transform var(--navbar-transition-base);
  color: var(--navbar-text-muted);
}

.navbar__link--dropdown[aria-expanded="true"] .navbar__link-chevron {
  transform: rotate(180deg);
  color: var(--navbar-primary);
}