/* Basic Navigation Styles */

/* Page transition animations */
.page-transition {
  animation: page-fade-in 0.3s ease-out;
}

@keyframes page-fade-in {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Dropdown menu improvements */
.dropdown-menu {
  border: none;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
  border-radius: 12px;
  padding: 0.5rem;
  animation: dropdown-fade-in 0.2s ease-out;
}

@keyframes dropdown-fade-in {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.dropdown-item {
  border-radius: 8px;
  padding: 0.5rem 0.75rem;
  transition: all 0.2s ease;
}

.dropdown-item:hover {
  background-color: var(--bs-primary);
  color: white;
  transform: translateX(2px);
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .page-transition,
  .dropdown-menu {
    animation: none !important;
    transition: none !important;
  }
}

/* Focus states for accessibility */
.nav-link:focus {
  outline: 2px solid var(--bs-primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Loading states for entire page */
.turbo-progress-bar {
  background: linear-gradient(
    90deg,
    var(--bs-primary) 0%,
    var(--bs-info) 50%,
    var(--bs-success) 100%
  );
  height: 3px;
}