/* GeoAudit Mobile Optimizations */

/* Base responsive typography */
@media (max-width: 640px) {
    /* Hero sections */
    h1 {
        font-size: 2.25rem !important; /* 36px */
        line-height: 1.1 !important;
        padding: 0 1rem !important;
    }
    
    h2 {
        font-size: 1.875rem !important; /* 30px */
        line-height: 1.2 !important;
    }
    
    h3 {
        font-size: 1.5rem !important; /* 24px */
    }
    
    /* Adjust body text */
    p {
        font-size: 0.9375rem !important; /* 15px */
        line-height: 1.6 !important;
    }
    
    /* Navigation spacing */
    nav {
        padding: 0.5rem 1rem !important;
    }
    
    /* Section padding */
    section {
        padding-top: 3rem !important;
        padding-bottom: 3rem !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }
    
    /* Pricing cards */
    #pricing .grid {
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
    }
    
    /* Forms */
    input, button {
        font-size: 16px !important; /* Prevents zoom on iOS */
        padding: 0.875rem 1rem !important;
    }
    
    /* Touch targets */
    a, button {
        min-height: 44px !important;
        min-width: 44px !important;
    }
    
    /* Remove excessive animations on mobile */
    * {
        animation-duration: 0.3s !important;
    }
}

/* Tablet optimizations */
@media (min-width: 641px) and (max-width: 1024px) {
    h1 {
        font-size: 3.5rem !important;
    }
    
    h2 {
        font-size: 2.5rem !important;
    }
    
    /* 2-column grid for pricing on tablets */
    #pricing .grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* Ensure images are responsive */
img {
    max-width: 100%;
    height: auto;
}

/* Prevent horizontal scroll */
body {
    overflow-x: hidden;
}

/* Mobile menu styles */
#mobile-menu {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.3s ease-in-out;
}

#mobile-menu:not(.hidden) {
    max-height: 600px;
}