/* Mobile-First Critical CSS */
/* This file should be loaded before the main CSS for better mobile performance */

/* Prevent horizontal scrolling */
html, body {
    overflow-x: hidden;
    width: 100%;
    max-width: 100%;
}

/* Ensure images don't break layout */
img {
    max-width: 100%;
    height: auto;
}

/* Fix for viewport issues on mobile */
@media screen and (max-width: 768px) {
    /* Force hardware acceleration for smoother scrolling */
    body {
        -webkit-overflow-scrolling: touch;
        transform: translate3d(0,0,0);
    }
    
    /* Prevent zoom on form inputs on iOS */
    input, select, textarea {
        font-size: 16px !important;
    }
    
    /* Fix for mobile Safari viewport height issues */
    .hero {
        min-height: 100vh;
        min-height: calc(var(--vh, 1vh) * 100);
    }
    
    /* Reduce animations to improve performance */
    *, *:before, *:after {
        animation-duration: 0.3s !important;
        animation-delay: 0s !important;
        transition-duration: 0.3s !important;
    }
    
    /* Disable backdrop-filter for better performance */
    .navbar,
    .extension-card,
    .feedback-form {
        backdrop-filter: none !important;
        -webkit-backdrop-filter: none !important;
    }
    
    /* Optimize grid layouts */
    .extensions-grid {
        grid-template-columns: 1fr !important;
        gap: 1rem !important;
    }
    
    /* Better touch targets */
    .btn,
    .nav-link,
    .filter-btn {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Fix for mobile menu */
    .nav-menu {
        position: fixed !important;
        top: 70px !important;
        left: 0 !important;
        right: 0 !important;
        background: rgba(15, 15, 35, 0.98) !important;
        z-index: 1001 !important;
    }
}

/* Fix for very small screens */
@media screen and (max-width: 320px) {
    .container {
        padding: 0 0.5rem !important;
    }
    
    .hero-title {
        font-size: 1.8rem !important;
    }
    
    .btn {
        font-size: 0.9rem !important;
        padding: 0.75rem 1rem !important;
    }
}