/* ===================================================================
   MOBILE & TOUCH OPTIMIZATIONS v2.0
   Based on Memory Spine learnings and best practices
   =================================================================== */

/* Safe Area for Notch Devices (iPhone X+) */
@supports (padding: max(0px)) {
    body {
        padding-left: max(0px, env(safe-area-inset-left));
        padding-right: max(0px, env(safe-area-inset-right));
    }
    
    .nav {
        padding-left: max(var(--space-lg), env(safe-area-inset-left));
        padding-right: max(var(--space-lg), env(safe-area-inset-right));
    }
}

/* Minimum Touch Targets (Apple HIG: 44px) */
.btn,
.nav-links a,
button,
a[role="button"] {
    min-width: 44px;
    min-height: 44px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

/* Improve Tap Highlighting */
* {
    -webkit-tap-highlight-color: rgba(102, 126, 234, 0.3);
}

button, a {
    touch-action: manipulation; /* Disable double-tap zoom */
}

/* Respect Reduced Motion Preference */
@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;
    }
    
    .parallax {
        transform: none !important;
    }
    
    .animate-float {
        animation: none !important;
    }
}

/* Mobile Navigation */
@media (max-width: 768px) {
    .nav-links {
        display: none;
        position: fixed;
        top: 60px;
        left: 0;
        right: 0;
        background: var(--bg-dark);
        flex-direction: column;
        padding: var(--space-lg);
        border-top: 1px solid var(--border-default);
        z-index: 99;
    }
    
    .nav-links.active {
        display: flex;
    }
    
    .nav-toggle {
        display: flex;
        flex-direction: column;
        gap: 4px;
        cursor: pointer;
        padding: var(--space-sm);
        min-width: 44px;
        min-height: 44px;
        justify-content: center;
        align-items: center;
    }
    
    .nav-toggle span {
        width: 24px;
        height: 2px;
        background: var(--text-primary);
        transition: all 0.3s ease;
    }
    
    .nav-toggle.active span:nth-child(1) {
        transform: rotate(45deg) translateY(8px);
    }
    
    .nav-toggle.active span:nth-child(2) {
        opacity: 0;
    }
    
    .nav-toggle.active span:nth-child(3) {
        transform: rotate(-45deg) translateY(-8px);
    }
}

/* Hide toggle on desktop */
@media (min-width: 769px) {
    .nav-toggle {
        display: none;
    }
}

/* Improved Mobile Typography */
@media (max-width: 768px) {
    :root {
        /* Slightly larger base for mobile readability */
        --fluid-base: clamp(1rem, 0.95rem + 0.5vw, 1.125rem);
        --fluid-sm: clamp(0.875rem, 0.8rem + 0.4vw, 1rem);
    }
    
    body {
        font-size: var(--fluid-base);
    }
    
    /* Tighter spacing on mobile */
    .hero {
        padding: var(--space-2xl) var(--space-md);
        min-height: 100svh; /* Use small viewport height */
    }
    
    .features,
    .how-it-works {
        padding: var(--space-2xl) var(--space-md);
    }
    
    /* Stack CTA buttons on mobile */
    .cta-group {
        flex-direction: column;
        width: 100%;
    }
    
    .cta-group .btn {
        width: 100%;
    }
    
    /* Better mobile grid */
    .stats {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-md);
    }
    
    .feature-grid {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }
    
    .steps {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }
}

/* Extra Small Devices (iPhone SE: 375px) */
@media (max-width: 390px) {
    .hero h1 {
        font-size: var(--fluid-2xl);
    }
    
    .hero .tagline {
        font-size: var(--fluid-base);
    }
    
    .stats {
        grid-template-columns: 1fr;
    }
    
    .stat-value {
        font-size: var(--fluid-xl);
    }
}

/* Tablet Portrait (768px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
    .feature-grid {
        grid-template-columns: repeat(2, 1fr);
    }
    
    .container {
        padding: 0 var(--space-xl);
    }
}

/* Improve Touch Scrolling */
html {
    -webkit-overflow-scrolling: touch;
}

/* Prevent iOS Zoom on Input Focus */
@media (max-width: 768px) {
    input[type="text"],
    input[type="email"],
    input[type="password"],
    textarea,
    select {
        font-size: 16px; /* Prevents zoom on iOS */
    }
}

/* Optimize Animations for Mobile */
@media (max-width: 768px) {
    .parallax {
        transform: none !important; /* Disable parallax on mobile */
    }
    
    /* Simpler animations on mobile */
    .feature-card:hover {
        transform: translateY(-2px); /* Less aggressive on mobile */
    }
    
    .hover-lift:hover {
        transform: translateY(-4px);
    }
}

/* Dark Mode Enhancement for Mobile */
@media (prefers-color-scheme: dark) {
    body {
        background: var(--bg-dark);
    }
    
    /* Ensure good contrast on OLED screens */
    .hero::before {
        opacity: 0.3;
    }
}

/* Print Styles (Bonus) */
@media print {
    .nav,
    .cta-group,
    footer {
        display: none;
    }
    
    * {
        animation: none !important;
        transition: none !important;
    }
}