/* ============================================
   ENHANCED MOBILE OPTIMIZATIONS
   ============================================ */

/* Prevent text inflation on mobile Safari */
html {
    -webkit-text-size-adjust: 100%;
    text-size-adjust: 100%;
}

/* Smooth scrolling with momentum on iOS */
body {
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-y: none;
}

/* Better tap highlights */
* {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.2);
    /* tap-highlight-color: rgba(102, 126, 234, 0.2); */ /* Non-standard property */
}

/* Remove tap delay on mobile */
a, button, input, select, textarea {
    touch-action: manipulation;
}

/* Improved focus states for accessibility */
*:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
}

/* ============================================
   MOBILE NAVIGATION IMPROVEMENTS
   ============================================ */
@media (max-width: 768px) {
    /* Fixed navbar on mobile */
    .navbar {
        position: sticky;
        top: 0;
        background: rgba(255, 255, 255, 0.95);
        backdrop-filter: blur(10px);
        -webkit-backdrop-filter: blur(10px);
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.05);
        z-index: 1000;
    }
    
    /* Mobile menu improvements */
    .mobile-menu {
        overscroll-behavior: contain;
    }
    
    .mobile-menu-content {
        max-height: calc(100vh - 70px);
        overflow-y: auto;
        -webkit-overflow-scrolling: touch;
    }
    
    .mobile-link {
        min-height: 48px;
        display: flex;
        align-items: center;
    }
}

/* ============================================
   LANDSCAPE MODE OPTIMIZATIONS
   ============================================ */
@media (max-width: 896px) and (orientation: landscape) {
    /* Reduce vertical spacing in landscape */
    .hero {
        padding: 60px 0 40px;
        min-height: auto;
    }
    
    section {
        padding: 2rem 0;
    }
    
    .hero-title {
        font-size: 1.75rem;
    }
    
    .section-title {
        font-size: 1.5rem;
    }
    
    /* Hide scroll indicator in landscape */
    .scroll-indicator {
        display: none;
    }
    
    /* Compact cards in landscape */
    .feature-compact-card,
    .module-compact-card {
        padding: 1rem;
    }
}

/* ============================================
   TABLET OPTIMIZATIONS (Portrait)
   ============================================ */
@media (min-width: 769px) and (max-width: 1024px) {
    .features-compact-grid,
    .modules-compact-grid,
    .benefits-compact-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .screenshots-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .roi-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ============================================
   SAFE AREA INSETS (iPhone X and newer)
   ============================================ */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .navbar {
        padding-left: max(1rem, env(safe-area-inset-left));
        padding-right: max(1rem, env(safe-area-inset-right));
    }
    
    .mobile-menu-content {
        padding-left: max(1.5rem, env(safe-area-inset-left));
        padding-right: max(1.5rem, env(safe-area-inset-right));
        padding-bottom: max(1.5rem, env(safe-area-inset-bottom));
    }
    
    .lightbox-close {
        top: max(20px, env(safe-area-inset-top));
        right: max(20px, env(safe-area-inset-right));
    }
}

/* ============================================
   IMPROVED TOUCH INTERACTIONS
   ============================================ */
@media (hover: none) {
    /* Remove hover effects completely on touch devices */
    .btn:hover,
    .nav-link:hover,
    .mobile-link:hover,
    .feature-compact-card:hover,
    .module-compact-card:hover,
    .benefit-compact-card:hover,
    .screenshot-item:hover {
        transform: none !important;
        box-shadow: inherit !important;
    }
    
    /* Better active states for touch */
    .btn:active {
        transform: scale(0.97);
        opacity: 0.9;
    }
    
    .screenshot-item:active {
        transform: scale(0.98);
    }
    
    /* Larger minimum touch targets (44x44 WCAG AAA) */
    .btn,
    .nav-link,
    .mobile-link,
    .view-image-btn {
        min-height: 44px;
        min-width: 44px;
    }
}

/* ============================================
   PERFORMANCE OPTIMIZATIONS
   ============================================ */
/* Use GPU acceleration for animations */
.animate-slide-up,
.fade-in-up,
.feature-compact-card,
.module-compact-card,
.benefit-compact-card,
.screenshot-item,
.gradient-orb,
.hero-image,
.lightbox-content {
    transform: translateZ(0);
    backface-visibility: hidden;
    -webkit-backface-visibility: hidden;
    perspective: 1000px;
    -webkit-perspective: 1000px;
}

/* Reduce complexity on lower-end devices */
@media (max-width: 480px) {
    /* Simplify gradients */
    .gradient-orb {
        opacity: 0.3;
        filter: none;
    }
    
    /* Disable blur effects on mobile for better performance */
    .glass-card,
    .navbar.scrolled {
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        background: rgba(255, 255, 255, 0.98);
    }
    
    /* Reduce shadow complexity */
    .feature-compact-card,
    .module-compact-card,
    .benefit-compact-card {
        box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
    }
}

/* ============================================
   ACCESSIBILITY IMPROVEMENTS
   ============================================ */
/* Skip to content link for keyboard users */
.skip-to-content {
    position: absolute;
    top: -40px;
    left: 0;
    background: var(--primary);
    color: white;
    padding: 8px 16px;
    text-decoration: none;
    z-index: 100000;
}

.skip-to-content:focus {
    top: 0;
}

/* Ensure sufficient color contrast */
@media (prefers-contrast: high) {
    :root {
        --gray-600: #374151;
        --gray-700: #1f2937;
    }
}

/* ============================================
   DARK MODE SUPPORT (Optional)
   ============================================ */
@media (prefers-color-scheme: dark) {
    /* Add dark mode styles here if needed */
    /* Example:
    body {
        background-color: #0f172a;
        color: #f1f5f9;
    }
    */
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {
    /* Hide unnecessary elements when printing */
    .navbar,
    .mobile-menu,
    .mobile-menu-btn,
    .cta-section,
    .footer,
    .scroll-indicator,
    .particle-canvas,
    .gradient-orb {
        display: none !important;
    }
    
    /* Reset colors for print */
    * {
        background: white !important;
        color: black !important;
    }
    
    /* Show URLs for links */
    a[href]:after {
        content: " (" attr(href) ")";
    }
    
    /* Page breaks */
    section {
        page-break-inside: avoid;
    }
}