/* ============================================
   HERO MOBILE FIX - XPANDSIA
   Purpose: Fix hero title overlap with fixed navbar on mobile
   ============================================ */

/* Mobile & Tablet (max-width: 768px) */
@media (max-width: 768px) {
    /* Fix 1: Increase hero section padding-top */
    #hero {
        padding-top: 120px !important;
        /* Ensures 70px navbar + 50px clearance */
    }
    
    /* Fix 2: Ensure navbar height consistency */
    header {
        height: 70px !important;
    }
    
    /* Fix 3: Additional clearance for hero title */
    #hero h1,
    #hero .hero-title,
    .hero-content h1 {
        margin-top: var(--space-20) !important;
        /* Additional 20px clearance from navbar */
    }
}

/* Small Mobile (max-width: 480px) */
@media (max-width: 480px) {
    /* Adjust for smaller screens */
    #hero {
        padding-top: 100px !important;
        /* Slightly less padding for small screens */
    }
    
    header {
        height: 60px !important;
        /* Smaller navbar on very small screens */
    }
}

/* Landscape Mobile (max-height: 500px) */
@media (max-height: 500px) and (orientation: landscape) {
    #hero {
        padding-top: 90px !important;
        min-height: 400px !important;
    }
}