/* Mobile Compact Spacing - Reduce white space on mobile devices */



/* Apply to all mobile devices */
@media (max-width: 768px) {
    /* Global spacing reductions */
    * {
        box-sizing: border-box;
    }
    
    /* Body and main containers */
    body {
        margin: 0;
        padding: 0;
    }
    
    .container {
        padding: 0 8px !important;
        max-width: 100% !important;
    }
    
    /* Section spacing */
    section {
        padding: 15px 0 !important;
        margin: 0 !important;
    }
    
    /* Banner sections */
    .teams-banner, .coaching-banner, .schedule-banner, 
    .news-banner, .contact-banner, .merchandise-banner {
        padding: 15px 8px !important;
        margin-bottom: 15px !important;
        margin-top: 95px !important; /* Increased mobile navbar spacing */
    }
    
    /* Hero section mobile spacing */
    .hero-section {
        padding-top: 300px !important; /* Further increased mobile navbar spacing for maximum comfort */
    }
    
    /* Override any conflicting hero padding */
    .hero-section .hero-content {
        padding-top: 0 !important;
    }
    
    /* Mobile hero text spacing */
    .hero-section h1 {
        margin-bottom: 25px !important; /* Increased spacing between title and tagline */
    }
    
    .hero-section p {
        margin-bottom: 40px !important; /* Significantly increased spacing before buttons */
    }
    
    /* High specificity mobile navbar spacing override */
    @media screen and (max-width: 768px) {
        body .hero-section {
            padding-top: 300px !important;
            margin-top: 0 !important;
        }
        
        body .hero-section .hero-content {
            padding-top: 0 !important;
            margin-top: 0 !important;
        }
        
        body .hero-section h1 {
            margin-bottom: 25px !important;
        }
        
        body .hero-section p {
            margin-bottom: 40px !important;
        }
        
        /* Compact hero to upcoming events spacing */
        body .hero-section {
            margin-bottom: -20px !important;
        }
        
        body .upcoming-events {
            margin-top: -30px !important;
            padding-top: 40px !important;
        }
        
        /* Consistent mobile navbar spacing across all pages */
        body .banner-section,
        body .page-header,
        body .main-content,
        body .content-section,
        body .teams-section,
        body .coaching-section,
        body .schedule-section,
        body .news-section,
        body .contact-section,
        body .merchandise-section {
            padding-top: 200px !important;
            margin-top: 0 !important;
        }
        
        /* Force consistent spacing on page containers */
        body .container:first-of-type {
            margin-top: 200px !important;
            padding-top: 0 !important;
        }
        
        /* Contact page specific mobile spacing - ultra compact */
        body.contact-page .container:first-of-type,
        body.contact-page .main-content,
        body.contact-page .contact-section {
            margin-top: 65px !important;
            padding-top: 0 !important;
        }
        
        /* Merchandise page specific mobile spacing - minimal */
        body.merchandise-page .container:first-of-type,
        body.merchandise-page .main-content,
        body.merchandise-page .page-header {
            margin-top: 15px !important;
            padding-top: 0 !important;
        }
    }
    
    .banner-content h1 {
        font-size: 1.8rem !important;
        margin-bottom: 8px !important;
        line-height: 1.3 !important;
    }
    
    .banner-content p {
        font-size: 0.9rem !important;
        margin-bottom: 10px !important;
        line-height: 1.4 !important;
    }
    
    /* Card spacing */
    .team-card, .coach-card, .social-post-card {
        margin: 8px 0 !important;
        padding: 12px !important;
        border-radius: 8px !important;
    }
    
    /* Tournament cards - preserve home page styling */
    .tournament-card {
        margin: 8px 0 !important;
        border-radius: 12px !important;
        /* Don't override padding - let inline styles control */
    }
    
    .team-content, .coach-content {
        padding: 8px !important;
    }
    
    .team-title, .coach-title {
        font-size: 1.1rem !important;
        margin-bottom: 5px !important;
    }
    
    .team-details, .coach-bio {
        font-size: 0.85rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }
    
    /* Grid spacing */
    .team-grid, .coach-grid, .tournament-grid, .social-posts-grid {
        gap: 8px !important;
        padding: 5px !important;
        margin: 10px 0 !important;
    }
    
    /* Form spacing */
    .form-group {
        margin-bottom: 12px !important;
    }
    
    .form-control {
        padding: 8px !important;
        font-size: 14px !important;
    }
    
    /* Button spacing */
    .btn {
        padding: 8px 16px !important;
        font-size: 0.9rem !important;
        margin: 4px !important;
    }
    
    /* Tournament card buttons - keep consistent with home page */
    a[style*="background: linear-gradient(135deg, #E63946, #d62e39)"],
    a[href*="exposure"],
    a[href*="basketball.exposureevents.com"],
    a[href*="docs.google.com/forms"] {
        padding: 14px 28px !important;
        font-size: 1em !important;
        margin: 0 !important;
        display: inline-block !important;
        text-align: center !important;
        width: auto !important;
        max-width: none !important;
        box-sizing: content-box !important;
        white-space: nowrap !important;
    }
    
    .hero-btns .btn {
        margin: 8px 0 !important;
        padding: 12px 24px !important;
    }
    
    /* Additional hero button spacing on mobile */
    .hero-btns {
        margin-top: 15px !important;
        margin-bottom: 10px !important; /* Reduced bottom margin to decrease space to upcoming events */
    }
    
    /* Reduce spacing between hero and upcoming events on mobile */
    .upcoming-events {
        margin-top: -30px !important;
        padding-top: 40px !important;
    }
    
    /* Apply consistent mobile navbar spacing to all pages */
    .banner-section,
    .page-header,
    .main-content,
    .content-section,
    .teams-section,
    .coaching-section,
    .schedule-section,
    .news-section,
    .contact-section,
    .merchandise-section {
        padding-top: 200px !important;
    }
    
    /* Override any existing spacing on other pages */
    .container:first-child,
    .row:first-child {
        margin-top: 200px !important;
    }
    
    /* Grade tabs compact */
    .grade-tabs {
        padding: 8px !important;
        margin: 10px 0 !important;
        border-radius: 6px !important;
    }
    
    .grade-tab {
        padding: 6px 10px !important;
        margin: 2px !important;
        font-size: 0.8rem !important;
        min-width: 60px !important;
    }
    
    /* Footer spacing */
    footer {
        padding: 15px 8px !important;
    }
    
    .footer-content {
        padding: 0 !important;
    }
    
    .footer-section {
        margin-bottom: 15px !important;
    }
}

/* Extra compact for very small screens */
@media (max-width: 480px) {
    .container {
        padding: 0 5px !important;
    }
    
    section {
        padding: 10px 0 !important;
    }
    
    .team-card, .coach-card, .social-post-card {
        margin: 5px 0 !important;
        padding: 8px !important;
    }
    
    /* Tournament cards - preserve exact styling */
    .tournament-card, 
    div[style*="width: 320px"] {
        margin: 5px auto !important;
        padding: 0 !important;
        border-radius: 12px !important;
        width: 320px !important;
        max-width: 95vw !important;
    }
    
    .grade-tab {
        padding: 5px 8px !important;
        font-size: 0.75rem !important;
        min-width: 50px !important;
    }
    
    .banner-content h1 {
        font-size: 1.6rem !important;
    }
    
    .banner-content p {
        font-size: 0.85rem !important;
    }
    
    /* Footer mobile alignment fix - force left alignment on all mobile devices */
    .footer-bottom {
        text-align: left !important;
    }
    
    .footer-bottom p {
        text-align: left !important;
    }
}

/* Additional mobile footer fix with higher specificity for all breakpoints */
@media (max-width: 768px) {
    footer .footer-bottom,
    .footer .footer-bottom {
        text-align: left !important;
    }
    
    footer .footer-bottom p,
    .footer .footer-bottom p {
        text-align: left !important;
    }
    
    /* Target all footer content sections for left alignment */
    .footer-container,
    .footer-about,
    .footer-links,
    .footer-contact {
        text-align: left !important;
    }
    
    .footer-heading {
        text-align: left !important;
    }
    
    .footer-link {
        text-align: left !important;
    }
}
}