/* Mobile Fixes for UnitedSets Tennis */
/* Last updated: January 2026 */

/* ===================================
   1. Footer Background Fix
   =================================== */

/* Apply teal gradient to footer on all devices to match design system */
footer,
.site-footer {
    background: linear-gradient(135deg, #0a5566 0%, #1a7d94 100%) !important;
    background-color: #0a5566 !important; /* Fallback */
}

/* Remove any pseudo-element backgrounds that might interfere */
footer::before,
footer::after,
.site-footer::before,
.site-footer::after {
    background: none !important;
    display: none !important;
}

/* Ensure footer text remains visible with gradient background */
footer,
footer *,
.site-footer,
.site-footer * {
    color: #ffffff;
}

/* CRITICAL: Override any mobile-specific footer background rules */
@media screen and (max-width: 768px) {
    footer,
    .site-footer {
        background: linear-gradient(135deg, #0a5566 0%, #1a7d94 100%) !important;
        background-color: #0a5566 !important;
    }
}

@media screen and (max-width: 576px) {
    footer,
    .site-footer {
        background: linear-gradient(135deg, #0a5566 0%, #1a7d94 100%) !important;
        background-color: #0a5566 !important;
    }
}

/* ===================================
   2. Mobile Spacing Fixes
   =================================== */

/* Reduce excessive vertical spacing between testimonials and CTA on mobile */
@media (max-width: 768px) {
    /* Reduce testimonials section bottom margin */
    .testimonials {
        margin-bottom: 2rem !important;
        padding-bottom: 2rem !important;
    }
    
    /* Reduce CTA section top margin */
    .cta {
        margin-top: 1rem !important;
        padding-top: 3rem !important;
    }
    
    /* Additional spacing optimization for better mobile experience */
    section {
        padding-top: 3rem;
        padding-bottom: 3rem;
    }
}

/* Tablet adjustments */
@media (min-width: 769px) and (max-width: 992px) {
    .testimonials {
        margin-bottom: 3rem !important;
    }
    
    .cta {
        margin-top: 2rem !important;
    }
}

/* ===================================
   3. Additional Mobile Optimizations
   =================================== */

@media (max-width: 576px) {
    /* Further reduce spacing on very small screens */
    .testimonials {
        margin-bottom: 1.5rem !important;
        padding-bottom: 1.5rem !important;
    }
    
    .cta {
        padding-top: 2rem !important;
    }
}