/*
 * Mobile Browser Optimizations
 * Specific optimizations for mobile browsers and touch devices
 * Requirements: 2.1, 2.2, 2.3, 6.1
 */

/* ===== iOS SAFARI OPTIMIZATIONS ===== */

/* Fix for iOS Safari viewport units */
@supports (-webkit-touch-callout: none) {
  .hero-section {
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Use CSS custom property for dynamic viewport height */
  .hero-section {
    min-height: calc(var(--vh, 1vh) * 100);
  }
  
  /* Fix for iOS Safari's bounce scrolling */
  body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* Prevent zoom on input focus */
  input, select, textarea, button {
    font-size: 16px !important;
    transform: translateZ(0);
  }
  
  /* Fix for iOS Safari's tap highlight */
  .navigation-card,
  .modern-header__nav-link,
  .ec-footerNavi__link a {
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.2);
    -webkit-touch-callout: none;
  }
  
  /* Fix for iOS Safari's momentum scrolling */
  .navigation-section,
  .hero-section {
    -webkit-overflow-scrolling: touch;
  }
  
  /* Optimize for iOS Safari's rendering */
  .hero-section,
  .navigation-card {
    -webkit-transform: translateZ(0);
    -webkit-backface-visibility: hidden;
    -webkit-perspective: 1000px;
  }
}

/* ===== ANDROID CHROME OPTIMIZATIONS ===== */

/* Fix for Android Chrome's viewport */
@media screen and (-webkit-device-pixel-ratio: 1) {
  .hero-section {
    background-attachment: scroll; /* Fix for Android background-attachment: fixed */
  }
}

/* Android Chrome specific touch optimizations */
@media screen and (max-width: 768px) and (-webkit-min-device-pixel-ratio: 1) {
  .navigation-card {
    -webkit-tap-highlight-color: rgba(108, 92, 231, 0.3);
    tap-highlight-color: rgba(108, 92, 231, 0.3);
  }
  
  /* Optimize scrolling performance */
  .navigation-section {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    transform: translateZ(0);
  }
  
  /* Fix for Android Chrome's input zoom */
  input, select, textarea {
    font-size: 16px;
    max-width: 100%;
  }
}

/* ===== SAMSUNG INTERNET OPTIMIZATIONS ===== */

/* Samsung Internet specific fixes */
@supports (-webkit-appearance: none) and (color: -webkit-focus-ring-color) {
  .navigation-card {
    -webkit-user-select: none;
    user-select: none;
    -webkit-touch-callout: none;
  }
  
  /* Fix for Samsung Internet's backdrop-filter */
  .navigation-card {
    background: rgba(255, 255, 255, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.3);
  }
  
  [data-theme="dark"] .navigation-card {
    background: rgba(45, 45, 45, 0.9);
    border: 1px solid rgba(255, 255, 255, 0.2);
  }
}

/* ===== FIREFOX MOBILE OPTIMIZATIONS ===== */

/* Firefox Mobile specific fixes */
@supports (-moz-appearance: none) and (max-width: 768px) {
  .hero-section {
    background-attachment: scroll;
  }
  
  .navigation-card {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: none;
  }
  
  /* Fix for Firefox Mobile's touch events */
  .navigation-card {
    touch-action: manipulation;
  }
}

/* ===== TOUCH DEVICE OPTIMIZATIONS ===== */

/* General touch device optimizations */
@media (hover: none) and (pointer: coarse) {
  /* Increase touch target sizes */
  .navigation-card {
    min-height: 120px;
    padding: var(--space-8) var(--space-6);
  }
  
  .navigation-card-icon {
    width: 60px;
    height: 60px;
  }
  
  /* Remove hover effects on touch devices */
  .navigation-card:hover {
    transform: none;
    background: var(--glass-bg);
    box-shadow: var(--shadow-lg);
    border-color: var(--glass-border);
  }
  
  .navigation-card:hover::before {
    opacity: 0;
  }
  
  .navigation-card:hover .navigation-card-icon {
    transform: none;
    box-shadow: var(--shadow-md);
  }
  
  /* Add tap feedback */
  .navigation-card:active {
    transform: scale(0.95);
    background: var(--glass-bg-light);
    transition-duration: var(--duration-fast);
  }
  
  /* Optimize touch scrolling */
  .navigation-section {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
  }
  
  /* Prevent text selection on touch */
  .navigation-card,
  .hero-content {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
  }
  
  /* Allow text selection for readable content */
  .hero-title,
  .hero-subtitle,
  .hero-description,
  .navigation-card-title,
  .navigation-card-description {
    -webkit-user-select: text;
    -moz-user-select: text;
    -ms-user-select: text;
    user-select: text;
  }
}

/* ===== HIGH DPI DISPLAY OPTIMIZATIONS ===== */

/* Retina and high DPI displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .navigation-card-icon svg {
    width: 32px;
    height: 32px;
  }
  
  /* Optimize gradients for high DPI */
  .hero-section {
    background-size: 200% 200%;
  }
  
  .hero-section::before {
    background-size: 200% 200%;
  }
}

/* ===== SMALL SCREEN OPTIMIZATIONS ===== */

/* Very small screens (< 360px) */
@media (max-width: 359px) {
  .hero-section {
    min-height: 50vh;
    padding: var(--space-4) var(--space-2);
  }
  
  .hero-content {
    padding: var(--space-2);
  }
  
  .hero-title {
    font-size: clamp(1.25rem, 6vw, 1.75rem);
    margin-bottom: var(--space-2);
  }
  
  .hero-subtitle {
    font-size: clamp(0.875rem, 4vw, 1rem);
    margin-bottom: var(--space-3);
  }
  
  .hero-description {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    margin-bottom: var(--space-4);
  }
  
  .navigation-section {
    padding: var(--space-6) var(--space-2);
  }
  
  .navigation-card {
    padding: var(--space-4) var(--space-3);
    min-height: 100px;
  }
  
  .navigation-card-icon {
    width: 40px;
    height: 40px;
    margin-bottom: var(--space-2);
  }
  
  .navigation-card-icon svg {
    width: 20px;
    height: 20px;
  }
  
  .navigation-card-title {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-1);
  }
  
  .navigation-card-description {
    font-size: var(--font-size-xs);
  }
}

/* ===== LANDSCAPE ORIENTATION OPTIMIZATIONS ===== */

/* Landscape orientation on mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .hero-section {
    min-height: 100vh;
    padding: var(--space-2) var(--space-4);
  }
  
  .hero-content {
    padding: var(--space-2) var(--space-4);
    max-width: 600px;
  }
  
  .hero-title {
    font-size: var(--font-size-xl);
    margin-bottom: var(--space-2);
  }
  
  .hero-subtitle {
    font-size: var(--font-size-base);
    margin-bottom: var(--space-3);
  }
  
  .hero-description {
    font-size: var(--font-size-sm);
    margin-bottom: var(--space-4);
  }
  
  .navigation-section {
    padding: var(--space-6) var(--space-4);
  }
  
  .navigation-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-4);
  }
  
  .navigation-card {
    padding: var(--space-4) var(--space-3);
  }
}

/* ===== PERFORMANCE OPTIMIZATIONS FOR MOBILE ===== */

/* Disable all animations on mobile for stability */
@media (max-width: 768px) {
  .hero-section,
  .hero-section::before,
  .hero-section::after {
    animation: none;
  }
  
  .navigation-card {
    transition: none;
  }
}

/* Remove complex visual effects on mobile */
@media (max-width: 480px) {
  .hero-section::after {
    display: none;
  }
  
  .navigation-card::before {
    display: none;
  }
  
  .navigation-card-icon::before {
    display: none;
  }
}

/* ===== NETWORK CONDITION OPTIMIZATIONS ===== */

/* Optimize for slow connections */
@media (prefers-reduced-data: reduce) {
  .hero-section {
    background: var(--color-primary);
    animation: none;
  }
  
  .hero-section::before,
  .hero-section::after {
    display: none;
  }
  
  .navigation-card {
    backdrop-filter: none;
    -webkit-backdrop-filter: none;
    background: rgba(255, 255, 255, 0.95);
  }
  
  .navigation-card::before {
    display: none;
  }
}

/* ===== ACCESSIBILITY ON MOBILE ===== */

/* Improve accessibility on mobile devices */
@media (max-width: 768px) {
  /* Larger focus indicators for touch */
  .navigation-card:focus {
    outline: 3px solid var(--color-primary);
    outline-offset: 3px;
  }
  
  /* Better contrast for small screens */
  .hero-title {
    text-shadow: 0 2px 8px rgba(0, 0, 0, 0.7);
  }
  
  .hero-subtitle,
  .hero-description {
    text-shadow: 0 1px 4px rgba(0, 0, 0, 0.5);
  }
  
  /* Ensure minimum touch target size */
  .navigation-card {
    min-height: 44px; /* iOS minimum touch target */
    min-width: 44px;
  }
}

/* ===== MOBILE BROWSER SPECIFIC SCROLLBAR ===== */

/* Hide scrollbars on mobile for cleaner look */
@media (max-width: 768px) {
  ::-webkit-scrollbar {
    width: 0px;
    background: transparent;
  }
  
  /* For Firefox on mobile */
  * {
    scrollbar-width: none;
  }
}

/* ===== MOBILE KEYBOARD OPTIMIZATIONS ===== */

/* Optimize for virtual keyboard */
@media (max-width: 768px) {
  /* Prevent viewport zoom when keyboard appears */
  .hero-section {
    min-height: calc(var(--vh, 1vh) * 100);
  }
  
  /* Adjust layout when keyboard is visible */
  @supports (env(keyboard-inset-height)) {
    .hero-section {
      min-height: calc(100vh - env(keyboard-inset-height));
    }
  }
}

/* ===== MOBILE SAFE AREA OPTIMIZATIONS ===== */

/* Support for devices with notches/safe areas */
@supports (padding: max(0px)) {
  .hero-content {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
  
  .navigation-container {
    padding-left: max(var(--space-4), env(safe-area-inset-left));
    padding-right: max(var(--space-4), env(safe-area-inset-right));
  }
}

/* ===== MOBILE PRINT OPTIMIZATIONS ===== */

@media print and (max-width: 768px) {
  .hero-section {
    min-height: auto;
    padding: var(--space-4);
  }
  
  .navigation-grid {
    grid-template-columns: 1fr;
    gap: var(--space-2);
  }
  
  .navigation-card {
    padding: var(--space-3);
    margin-bottom: var(--space-2);
    page-break-inside: avoid;
  }
}

/* ===== MOBILE LOADING STATES ===== */

/* Static loading states for mobile stability */
@media (max-width: 768px) {
  .loading-skeleton {
    background: #f0f0f0;
  }
}

/* ===== MOBILE GESTURE OPTIMIZATIONS ===== */

/* Optimize for mobile gestures */
@media (max-width: 768px) and (hover: none) {
  /* Prevent pull-to-refresh on hero section */
  .hero-section {
    overscroll-behavior-y: contain;
  }
  
  /* Optimize swipe gestures */
  .navigation-grid {
    touch-action: pan-y;
  }
  
  .navigation-card {
    touch-action: manipulation;
  }
}

/* ===== MOBILE BATTERY OPTIMIZATION ===== */

/* Disable animations for better battery life and stability */
@media (max-width: 768px) {
  .hero-section,
  .hero-section::before,
  .hero-section::after {
    animation: none;
  }
}