frontend/src/css/responsive/mobile-nav.css

/* Mobile Navigation Optimizations */

/* Ensure smooth scrolling on mobile */
.mobile-menu-content {
  -webkit-overflow-scrolling: touch;
}

/* Hide scrollbar on mobile for cleaner look */
.mobile-menu-content::-webkit-scrollbar {
  display: none;
}

/* Animation optimizations for mobile */
@media (max-width: 767px) {
  .mobile-menu-content {
    will-change: transform;
    backface-visibility: hidden;
  }
  
  .animate-slide-in {
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
  }
  
  .animate-fade-in {
    animation-duration: 0.2s;
    animation-timing-function: ease-out;
  }
}

/* Touch target optimization for mobile menu items */
.mobile-nav-item {
  min-height: 48px;
  display: flex;
  align-items: center;
  touch-action: manipulation;
}

/* Prevent text selection on mobile menu items */
.mobile-nav-item,
.mobile-menu-button {
  -webkit-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
}

/* Focus states for accessibility */
.mobile-nav-item:focus,
.mobile-menu-button:focus {
  outline: 2px solid var(--primary-color);
  outline-offset: 2px;
}

/* High contrast mode support */
@media (prefers-contrast: high) {
  .mobile-menu-content {
    border-left: 2px solid currentColor;
  }
  
  .mobile-nav-item {
    border-bottom: 1px solid currentColor;
  }
  
  .mobile-menu-button {
    border: 2px solid currentColor;
  }
}

/* Reduced motion support */
@media (prefers-reduced-motion: reduce) {
  .animate-slide-in,
  .animate-fade-in {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
  
  .mobile-optimized:active {
    transform: none;
  }
}