/* Mobile-specific fixes */

/* Hide mobile menu and toggle button completely */
.mobile-menu-toggle,
.mobile-menu,
.mobile-menu *,
[class*="mobile"],
[class^="mobile-"],
[class$="-mobile"] {
    display: none !important;
    visibility: hidden !important;
    position: absolute !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Hide mobile menu styles */
@media (max-width: 991px) {
    .mobile-menu,
    .mobile-menu-toggle,
    .mobile-menu * {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        height: 0 !important;
        width: 0 !important;
        overflow: hidden !important;
        position: absolute !important;
        pointer-events: none !important;
    }
}

/* Hide duplicate logo and tagline in hero section */
.hero-section .altare-logo,
.hero-section .logo-tagline,
.hero-section .logo-container img,
.hero-section .logo-container .logo-tagline,
.hero-section .hero-container img,
.hero-section .hero-container .logo-tagline,
.hero-section .hero-content .altare-logo,
.hero-section .hero-content .logo-tagline,
.hero-section .flex-hero-container .altare-logo,
.hero-section .flex-hero-container .logo-tagline,
.hero-section .hero-title-container .altare-logo,
.hero-section .hero-title-container .logo-tagline,
.modern-hero .altare-logo,
.modern-hero .logo-tagline {
    display: none !important;
    visibility: hidden !important;
    opacity: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* Hide logo and tagline in hero section */
.hero-section .altare-logo,
.hero-section .logo-tagline,
.hero-section .logo-container,
.hero-section .logo-main-link,
.hero-section .logo-wrapper,
.hero-section .logo {
    display: none !important;
    visibility: hidden !important;
    height: 0 !important;
    width: 0 !important;
    overflow: hidden !important;
    position: absolute !important;
    opacity: 0 !important;
    pointer-events: none !important;
}

/* Ensure the hero section content is properly displayed */
.hero-section {
    padding-top: 30px !important;
}

/* Mobile fix for hero video spacing */
@media (max-width: 768px) {
    .hero-main {
        height: 100svh !important;           /* Use small viewport height to avoid iOS address bar bounce */
        min-height: 100svh !important;       /* Ensure at least full small viewport height */
        /* Fallback to dynamic viewport height for older browsers */
        min-height: 100dvh !important;
        padding: 0 !important;               /* Remove internal padding on mobile */
        position: relative !important;       /* Ensure positioned ancestor for absolute children */
        overflow: hidden !important;         /* Hide any bleed */
    }
    .fullscreen-video-container {
        position: absolute !important;       /* Anchor video container to hero edges */
        inset: 0 !important;                 /* top:0; right:0; bottom:0; left:0 */
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    /* Ensure container fills hero */
    .hero-main-video,
    .hero-main .hero-main-video {
        position: absolute !important;
        inset: 0 !important;
        width: 100% !important;
        height: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: 0 !important;
    }

    /* Center and oversize iframe to eliminate letterboxing on mobile */
    .hero-main .hero-main-video iframe {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        width: calc(100svh * 16 / 9) !important; /* 16:9 using small viewport height */
        height: 100svh !important;
        min-width: 100vw !important;
        min-height: calc(100vw * 9 / 16) !important; /* 16:9 using viewport width */
        transform: translate(-50%, -50%) !important;
        border: 0 !important;
        margin: 0 !important;
        padding: 0 !important;
        pointer-events: none !important;
    }
    /* Tighten overlay spacing */
    .flex-hero-container { padding: 0.75rem 1rem !important; }
    .hero-section { padding-top: 0 !important; }
    /* Ensure the section immediately after the hero has no top gap */
    .hero-main + section,
    .hero-main + .rebel-manifesto-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Ensure page chrome doesn't add unexpected gaps on mobile */
    html, body { height: 100%; margin: 0 !important; padding: 0 !important; }
    
    /* Prevent margins around the banner right after hero */
    .tagline-scrolling-banner { margin-top: 0 !important; }
}

/* Mobile-only tweak for hero video sizing */
@media (max-width: 768px) {
    .modern-hero {
        height: 100dvh;
    }
    .hero-iframe {
        width: 100%;
        height: 100%;
    }
    .flex-hero-container {
        padding: 1rem 1rem !important; /* Further reduce vertical padding on mobile */
    }
    .hero-section {
        padding-top: 0 !important; /* Remove extra top space on mobile */
    }
}

/* Fix any potential issues with the header on mobile */
@media only screen and (max-width: 768px) {
    .mobile-only {
        display: block !important;
    }
    .desktop-only {
        display: none !important;
    }
    .quote-intro {
        white-space: normal !important;
        word-break: break-word !important;
    }
    .quote-intro .mobile-only {
        display: inline !important;
    }
    .quote-intro {
        white-space: normal !important;
    }

    /* Make the quotes section title fit on mobile */
    .quote-intro {
        font-size: clamp(1.8rem, 7vw, 3rem) !important; /* smaller range */
        white-space: normal !important; /* allow wrap if needed */
        line-height: 1.15 !important;
        letter-spacing: -0.5px !important;
        margin-bottom: 0.25rem !important;
        width: 100% !important;
        text-align: center !important;
    }
    
    /* Chrome-specific fix for quotes section title */
    @media screen and (-webkit-min-device-pixel-ratio:0) {
        .quote-intro {
            white-space: nowrap !important;
            font-size: clamp(2.2rem, 7vw, 3rem) !important;
            letter-spacing: -0.5px !important;
            transform: scale(0.9) !important;
            width: 110% !important;
            margin-left: -5% !important;
        }
    }
    .bold-header {
        padding: 1rem 0 !important;
    }
    
    .header-container {
        padding: 0 1rem !important;
    }
    
    .logo-container {
        margin: 0 auto !important;
    }
    
    .altare-logo {
        height: 90px !important; /* Increased size for mobile */
    }
    
    .logo-tagline {
        font-size: 1rem !important;
    }
    
    /* Remove extra space between app section and next section */
    .rebel-app-section {
        margin-bottom: 0 !important;
        padding-bottom: 0 !important;
    }
    
    /* Ensure sections touch on mobile */
    .quote-section {
        margin-top: 0 !important;
        padding-top: 0 !important;
    }
    
    /* Triple the size of testimonials on mobile */
    .quote-slide div div {
        font-size: 7.5vw !important; /* Tripled from 2.5vw */
        line-height: 1.2 !important; /* Improved line height for readability */
        padding: 0 15px !important;
    }
    
    .quote-slide p {
        font-size: 3vw !important; /* Tripled from 1vw */
        margin-top: 1rem !important;
    }
    
    /* Make sure the carousel has enough height - reduced by 50% */
    .quotes-carousel {
        min-height: 150px !important;
    }
    
    /* Make scrolling title banner scroll faster on mobile */
    .scrolling-title-container {
        animation: scroll 8s linear infinite !important; /* Even faster scrolling */
    }
    
    /* Make Pinterest quote section much wider on mobile */
    .rebel-manifesto-content {
        transform: scale(1) !important; /* Reset transform to avoid scaling issues */
        max-width: 100% !important; /* Full width container */
        padding: 15px 5px !important; /* Reduce horizontal padding */
    }
    
    .rebel-manifesto-container {
        max-width: 100% !important; /* Full width container */
        padding: 0 !important;
    }
    
    .rebel-manifesto-image {
        max-width: 90% !important; /* Wider image */
    }
    
    .rebel-quote.pinterest-quote h2 {
        font-size: 1.5rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        padding: 0 10px !important;
        margin-bottom: 15px !important;
        max-width: 100% !important;
    }
    
    .rebel-quote.planner-quote p {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        text-align: center !important;
        padding: 0 10px !important;
        max-width: 100% !important;
    }
    
    .rebel-manifesto-buttons {
        display: flex !important;
        flex-direction: row !important; /* Change to row layout */
        justify-content: center !important;
        flex-wrap: wrap !important;
        width: 100% !important;
        gap: 10px !important;
        margin-top: 15px !important;
    }
    
    .rebel-manifesto-buttons a {
        min-width: 140px !important;
        text-align: center !important;
    }
    
    /* Further reduce Pinterest section bottom padding on mobile */
    .rebel-manifesto-section {
        padding-bottom: 10px !important;
    }
    
    /* Make tagline scrolling banner faster and more compact on mobile */
    .tagline-scrolling-container {
        animation: tagline-scroll 10s linear infinite !important; /* Even faster than desktop */
    }
    
    /* Further reduce coordinators section padding on mobile */
    .coordinators-section {
        padding-top: 10px !important; /* Even less padding on mobile */
    }
    
    /* Make coordinator section title fit on mobile screens and use fire cracker color */
    .coordinators-header .rebel-title {
        font-size: 2rem !important;
        line-height: 1.2 !important;
        text-align: center !important;
        width: 100% !important;
        word-wrap: break-word !important;
        padding: 0 10px !important;
        color: #F3471F !important; /* Fire cracker orange color */
    }
    
    /* Replace MANAGERS/COORDINATORS with MANAGERS COORDINATORS on mobile */
    .coordinators-header .rebel-title::after {
        content: 'MEET YOUR EVENT MANAGERS COORDINATORS' !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: inherit !important;
        z-index: 1 !important;
    }

    .coordinators-section {
        padding-top: 0 !important;
    }
    
    .coordinators-header .rebel-title {
        position: relative !important;
        color: transparent !important;
        z-index: 0 !important;
    }
}