/* Shared Navigation Styles */

/* Fixed navigation bar - make selectors more specific */
nav {
  position: sticky !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
  background: rgba(255, 255, 255, 0.1) !important;
  backdrop-filter: blur(15px) !important;
  -webkit-backdrop-filter: blur(15px) !important;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2) !important;
  z-index: 50 !important;
  height: auto !important;
  box-sizing: border-box !important;
  margin: 0 !important;
  transform: translateZ(0) !important;
}

nav .max-w-6xl {
  max-width: 72rem !important;
  margin: 0 auto !important;
  padding: 0.75rem 1rem !important;
  box-sizing: border-box !important;
}

nav .flex {
  display: flex !important;
}

nav .items-center {
  align-items: center !important;
}

nav .justify-between {
  justify-content: space-between !important;
}

nav .space-x-4 > * + * {
  margin-left: 1rem !important;
}

nav .space-x-3 > * + * {
  margin-left: 0.75rem !important;
}

nav a {
  color: white !important;
  text-decoration: none !important;
  font-weight: 500 !important;
  transition: color 0.2s ease-in-out !important;
  line-height: 1.5 !important;
}

nav a:hover {
  color: rgb(196 181 253) !important; /* purple-200 */
}

nav .text-white\/50,
nav [class*="text-white/50"] {
  color: rgba(255, 255, 255, 0.5) !important;
}

nav .text-purple-200,
nav [class*="text-purple-200"] {
  color: rgb(196 181 253) !important;
}

nav .text-white\/80,
nav [class*="text-white/80"] {
  color: rgba(255, 255, 255, 0.8) !important;
}

nav .font-medium {
  font-weight: 500 !important;
}

nav .text-sm {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
}

nav span {
  line-height: 1.5 !important;
}

/* Hide quick links on small screens */
@media (max-width: 640px) {
  nav .hidden {
    display: none;
  }

  nav .sm\:flex {
    display: none;
  }
}

/* Show quick links on larger screens */
@media (min-width: 640px) {
  nav .sm\:flex {
    display: flex;
  }
}

/* Dark mode styles */
@media (prefers-color-scheme: dark) {
  nav {
    background: rgba(15, 23, 42, 0.8) !important; /* slate-900 with opacity */
    border-color: rgba(
      226,
      232,
      240,
      0.1
    ) !important; /* slate-200 with opacity */
  }
}