/* Non-Critical Mobile Optimizations for ISO 26262 Academy */
/* These styles enhance mobile performance and usability */

/* Enhanced Mobile Viewport Optimization */
@viewport {
  width: device-width;
  initial-scale: 1.0;
  maximum-scale: 5.0;
  user-scalable: yes;
}

/* Mobile-First Performance Optimizations */
@media (max-width: 768px) {
  /* Reduce paint complexity on mobile */
  * {
    will-change: auto !important;
  }
  
  /* Optimize transforms for better mobile performance */
  .transform,
  .transition-transform,
  .hover\:scale-105,
  .hover\:scale-110 {
    transform: translateZ(0); /* Force hardware acceleration */
    -webkit-transform: translateZ(0);
  }
  
  /* Mobile-specific input optimizations */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="url"],
  input[type="password"],
  input[type="search"],
  textarea {
    /* Prevent zoom on focus in iOS */
    font-size: 16px !important;
    
    /* Better touch targets */
    min-height: 48px !important;
    padding: 12px 16px !important;
    
    /* iOS specific optimizations */
    -webkit-appearance: none;
    -webkit-border-radius: 8px;
    border-radius: 8px;
    
    /* Disable autocorrect/autocapitalize where appropriate */
    autocomplete: on;
    autocorrect: on;
    autocapitalize: sentences;
  }
  
  /* Email inputs should not autocorrect */
  input[type="email"] {
    autocorrect: off;
    autocapitalize: none;
  }
  
  /* URL inputs should not autocorrect */
  input[type="url"] {
    autocorrect: off;
    autocapitalize: none;
  }
  
  /* Mobile navigation optimizations */
  .mobile-nav-btn,
  .nav-btn {
    /* Ensure proper touch targets */
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 48px;
    min-width: 48px;
    
    /* Better tap response */
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.2);
    tap-highlight-color: rgba(59, 130, 246, 0.2);
  }
  
  /* Mobile table optimizations */
  table {
    display: block;
    overflow-x: auto;
    white-space: nowrap;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile scrollbar styling */
  ::-webkit-scrollbar {
    width: 4px;
    height: 4px;
  }
  
  ::-webkit-scrollbar-track {
    background: rgba(148, 163, 184, 0.1);
  }
  
  ::-webkit-scrollbar-thumb {
    background: rgba(148, 163, 184, 0.3);
    border-radius: 2px;
  }
  
  ::-webkit-scrollbar-thumb:hover {
    background: rgba(148, 163, 184, 0.5);
  }
  
  /* Mobile modal optimizations */
  .modal,
  .modal-overlay {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* Prevent overscroll bounce on iOS */
  .modal-content,
  .form-container {
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }
  
  /* Mobile-friendly focus indicators */
  button:focus,
  input:focus,
  textarea:focus,
  select:focus,
  a:focus {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
    -webkit-tap-highlight-color: transparent;
  }
  
  /* Remove default button styles on mobile */
  button,
  input[type="submit"],
  input[type="button"] {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    border-radius: 8px;
  }
  
  /* Mobile text selection optimization */
  .user-select-none {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Better text rendering on mobile */
  body,
  h1, h2, h3, h4, h5, h6,
  p, span, div {
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    text-rendering: optimizeLegibility;
  }
  
  /* Mobile-specific spacing utilities */
  .mobile-px-4 {
    padding-left: 1rem;
    padding-right: 1rem;
  }
  
  .mobile-py-2 {
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  
  .mobile-m-2 {
    margin: 0.5rem;
  }
  
  .mobile-mt-4 {
    margin-top: 1rem;
  }
  
  .mobile-mb-4 {
    margin-bottom: 1rem;
  }
}

/* Touch Device Optimizations */
@media (pointer: coarse) {
  /* Better touch interaction feedback */
  button,
  .btn,
  .service-button,
  .nav-btn {
    transition: background-color 0.2s ease, transform 0.2s ease;
  }
  
  button:active,
  .btn:active,
  .service-button:active,
  .nav-btn:active {
    transform: scale(0.98);
    background-color: rgba(59, 130, 246, 0.1);
  }
  
  /* Disable hover effects that don't work on touch */
  .hover\:bg-slate-700:hover,
  .hover\:bg-slate-800:hover {
    background-color: inherit;
  }
  
  /* Touch-friendly card interactions */
  .course-card,
  .service-card {
    transition: transform 0.2s ease;
  }
  
  .course-card:active,
  .service-card:active {
    transform: scale(0.99);
  }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
  
  /* Disable all animations that might cause motion sickness */
  .animate-bounce,
  .animate-pulse,
  .animate-spin,
  .floating-element,
  .text-shimmer,
  .hero-bg {
    animation: none !important;
  }
  
  /* Reduce transform effects */
  .hover\:scale-105:hover,
  .hover\:scale-110:hover,
  .group-hover\:scale-105,
  .group-hover\:scale-110 {
    transform: none !important;
  }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
  /* Ensure sufficient contrast for accessibility */
  .text-slate-300,
  .text-slate-400,
  .text-slate-500 {
    color: #ffffff !important;
  }
  
  .bg-slate-800,
  .bg-slate-900 {
    background-color: #000000 !important;
  }
  
  /* High contrast borders */
  .border-slate-700,
  .border-slate-600 {
    border-color: #ffffff !important;
  }
  
  /* High contrast buttons */
  .bg-blue-600,
  .bg-blue-700 {
    background-color: #0066cc !important;
    color: #ffffff !important;
  }
}

/* Dark Mode Optimizations for mobile */
@media (prefers-color-scheme: dark) and (max-width: 768px) {
  /* Darker backgrounds for better battery life on OLED */
  .bg-slate-800 {
    background-color: #000000 !important;
  }
  
  .bg-slate-900 {
    background-color: #000000 !important;
  }
  
  /* Reduce blue light emission */
  .text-blue-400,
  .text-blue-500 {
    color: #60a5fa !important;
  }
}

/* Performance Optimizations for Older Mobile Devices */
@media (max-width: 768px) and (max-device-pixel-ratio: 2) {
  /* Reduce visual complexity for lower-end devices */
  .backdrop-blur-xl,
  .backdrop-blur-lg,
  .backdrop-blur-md {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
  }
  
  /* Simplify gradients */
  .bg-gradient-to-r,
  .bg-gradient-to-br,
  .bg-gradient-to-t {
    background: solid !important;
  }
  
  /* Reduce shadow complexity */
  .shadow-2xl,
  .shadow-xl,
  .shadow-lg {
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  }
}

/* iOS Specific Optimizations */
@supports (-webkit-touch-callout: none) {
  /* iOS Safari optimizations */
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  textarea {
    /* Prevent zoom on focus */
    font-size: 16px !important;
  }
  
  /* Fix iOS viewport height issue */
  .min-h-screen {
    min-height: -webkit-fill-available;
  }
  
  /* Better scrolling on iOS */
  .overflow-y-auto,
  .overflow-scroll {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Disable iOS rubber band scrolling */
  .no-bounce {
    overscroll-behavior: none;
  }
}

/* Android Specific Optimizations */
@media screen and (-webkit-min-device-pixel-ratio: 0) {
  /* Android Chrome optimizations */
  input[type="text"],
  input[type="email"],
  input[type="tel"] {
    background-color: transparent;
  }
  
  /* Better button styling on Android */
  button {
    -webkit-appearance: none;
    border-radius: 8px;
  }
}

/* Print Styles for Mobile */
@media print {
  /* Hide non-essential elements when printing from mobile */
  .mobile-nav,
  .floating-element,
  .hero-bg,
  .animate-pulse,
  .animate-bounce {
    display: none !important;
  }
  
  /* Optimize text for printing */
  body {
    font-size: 12pt !important;
    line-height: 1.4 !important;
    color: black !important;
    background: white !important;
  }
  
  /* Ensure links are visible in print */
  a::after {
    content: " (" attr(href) ")";
    font-size: 10pt;
    color: #666;
  }
}

/* Performance Monitoring and Debugging */
@media (max-width: 768px) {
  /* Add debugging outline for development */
  .debug-mobile * {
    outline: 1px solid red;
  }
  
  .debug-mobile .nav-btn,
  .debug-mobile button {
    outline: 2px solid green;
  }
}

/* Accessibility Enhancements for Mobile */
@media (max-width: 768px) {
  /* Screen reader optimizations */
  .sr-only {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
  }
  
  /* Skip to content link for mobile */
  .skip-to-content {
    position: absolute;
    top: -40px;
    left: 6px;
    background: #000;
    color: white;
    padding: 8px;
    border-radius: 4px;
    text-decoration: none;
    z-index: 1000;
    font-size: 14px;
  }
  
  .skip-to-content:focus {
    top: 6px;
  }
  
  /* Better focus management for mobile navigation */
  .mobile-nav:focus-within {
    outline: 3px solid #3b82f6;
    outline-offset: 2px;
  }
}

/* Custom Mobile Utility Classes */
@media (max-width: 768px) {
  .mobile-center {
    text-align: center !important;
  }
  
  .mobile-full-width {
    width: 100% !important;
  }
  
  .mobile-auto-margin {
    margin-left: auto !important;
    margin-right: auto !important;
  }
  
  .mobile-stack {
    display: flex !important;
    flex-direction: column !important;
    gap: 1rem !important;
  }
  
  .mobile-hide {
    display: none !important;
  }
  
  .mobile-show {
    display: block !important;
  }
}