/**
 * Mobile Booking Compact View
 * 
 * Optimizes booking form for mobile by hiding contact header
 * to provide more space for the actual booking flow.
 * 
 * @package BlueMotosSouthampton
 * @since 1.4.0
 * @version 1.0.0
 */

/* =================================================================
   MOBILE OPTIMIZATION: Hide Contact Header on Mobile
   ================================================================= */

/**
 * Contact header takes valuable vertical space on mobile (80-100px).
 * Hide on small screens where booking form should be the immediate focus.
 * Show on desktop where space isn't critical.
 * 
 * Target: The purple/blue contact information card at top of booking form
 * Classes: .competitive-header, .bms-contact-header, .booking-contact-info
 * 
 * Benefits:
 * - Saves 80-100px vertical space (8-10% of mobile screen)
 * - Users see booking form immediately
 * - Reduces scrolling needed to start booking
 * - Contact info still accessible via footer/contact page
 */

/* =================================================================
   MOBILE PORTRAIT AND SMALL SCREENS (≤768px)
   ================================================================= */

@media (max-width: 768px) {
    /* Primary contact header selectors */
    .competitive-header,
    .bms-contact-header,
    .booking-contact-info {
        display: none !important;
    }
    
    /* Catch any variations of contact header */
    [class*="contact-header"],
    [class*="contact-info"],
    .bms-booking-container > .contact-section:first-child {
        display: none !important;
    }
}

/* =================================================================
   EXTRA SMALL SCREENS (≤480px)
   ================================================================= */

/**
 * On very small screens, absolutely ensure contact header is hidden
 * Priority: Booking form must be immediately visible
 */
@media (max-width: 480px) {
    .competitive-header,
    .bms-contact-header,
    .booking-contact-info,
    [class*="contact-header"],
    [class*="contact-info"] {
        display: none !important;
        visibility: hidden !important;
        height: 0 !important;
        overflow: hidden !important;
    }
}

/* =================================================================
   TABLET AND DESKTOP (≥769px)
   ================================================================= */

/**
 * Show contact header normally on larger screens
 * where vertical space is not a constraint
 */
@media (min-width: 769px) {
    .competitive-header,
    .bms-contact-header,
    .booking-contact-info {
        display: block !important;
        visibility: visible !important;
        height: auto !important;
    }
}

/* =================================================================
   MOBILE LANDSCAPE (≤768px landscape)
   ================================================================= */

/**
 * Even in landscape, vertical space is still limited
 * Keep header hidden to maximize booking form visibility
 */
@media (max-width: 768px) and (orientation: landscape) {
    .competitive-header,
    .bms-contact-header,
    .booking-contact-info {
        display: none !important;
    }
}

/* =================================================================
   ACCESSIBILITY & PRINT
   ================================================================= */

/**
 * For screen readers: Keep content accessible
 * Header is hidden visually but remains in DOM for SEO
 */
@media (max-width: 768px) {
    /* Ensure no layout shift when hiding */
    .competitive-header,
    .bms-contact-header {
        margin: 0 !important;
        padding: 0 !important;
    }
}

/**
 * Print view: Show contact information
 * Important for printed booking confirmations
 */
@media print {
    .competitive-header,
    .bms-contact-header,
    .booking-contact-info {
        display: block !important;
        visibility: visible !important;
    }
}

/* =================================================================
   ALTERNATIVE: MINIMAL PHONE NUMBER ONLY (COMMENTED)
   ================================================================= */

/**
 * If you want to keep minimal contact info (phone only) on mobile,
 * uncomment the code below and comment out the "display: none" rules above
 */

/*
@media (max-width: 768px) {
    .competitive-header,
    .bms-contact-header {
        padding: 6px 12px !important;
        min-height: auto !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        gap: 0 !important;
    }
    
    .competitive-header > *,
    .bms-contact-header > * {
        display: none !important;
    }
    
    .competitive-header .phone,
    .competitive-header [href^="tel"],
    .bms-contact-header .phone,
    .bms-contact-header [href^="tel"] {
        display: inline-flex !important;
        font-size: 14px !important;
        color: white !important;
        text-decoration: none !important;
    }
}
*/

/* =================================================================
   END OF FILE
   ================================================================= */