/* ═══════════════════════════════════════════════════════════════
   MOBILE FIX - Addresses Mobile Display Issues
   Loads LAST to fix mobile without affecting desktop
   ═══════════════════════════════════════════════════════════════ */

/* ═══════════════════════════════════════════════════════════════
   FIX 1: Festival Logo Sizing on Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Make corner logo bigger and more visible on mobile */
    .hero-logo-corner {
        max-width: 120px !important;
        top: 0.75rem !important;
        left: 0.75rem !important;
    }
}

@media (max-width: 480px) {
    /* Slightly smaller on very small phones but still readable */
    .hero-logo-corner {
        max-width: 100px !important;
        top: 0.5rem !important;
        left: 0.5rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 2: Ensure All Content Sections Are Visible
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Make sure all sections display properly */
    section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 2.5rem 1.5rem !important;
    }
    
    /* Container must not overflow */
    .container {
        max-width: 100% !important;
        padding: 0 1.5rem !important;
        overflow-x: hidden !important;
    }
    
    /* Ensure text is readable */
    body {
        font-size: 16px !important;
        line-height: 1.6 !important;
    }
    
    /* Make sure headings are visible and properly sized */
    h1, h2, h3, h4, h5, h6 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    h2 {
        font-size: 1.75rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    h3 {
        font-size: 1.4rem !important;
        margin-bottom: 1rem !important;
    }
    
    /* Ensure paragraphs are visible */
    p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    /* Make sure all content cards/sections show */
    .about,
    .services,
    .schedule,
    .format-explainer,
    .testimonials,
    .gallery,
    .wormsley,
    .faq-section,
    .corporate-hospitality {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    /* TESTIMONIALS - Must be visible */
    .testimonials,
    section.testimonials,
    section#testimonials {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 3rem 1.5rem !important;
        background: white !important;
    }
    
    .testimonials h2,
    section.testimonials h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        font-size: 1.75rem !important;
        color: #000 !important;
    }
    
    .testimonials-grid,
    .testimonials .testimonials-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        visibility: visible !important;
    }
    
    .testimonial-card,
    .testimonials .testimonial-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: #f8f9fa !important;
        padding: 2rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .testimonial-card p,
    .testimonial-quote,
    .testimonials p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #333 !important;
        margin-bottom: 1rem !important;
    }
    
    .testimonial-author,
    .testimonial-card .testimonial-author {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-weight: 600 !important;
        margin-top: 1rem !important;
        color: #0095DB !important;
        font-size: 0.9rem !important;
    }
    
    /* FORMAT EXPLAINER - Must be visible */
    .format-explainer,
    section.format-explainer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 3rem 1.5rem !important;
        background: #f8f9fa !important;
    }
    
    .format-explainer h2 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin-bottom: 1.5rem !important;
        font-size: 1.75rem !important;
        color: #000 !important;
    }
    
    .format-intro,
    .format-explainer .format-intro {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        text-align: center !important;
        margin-bottom: 2rem !important;
        font-size: 1rem !important;
        color: #333 !important;
    }
    
    .format-grid,
    .format-explainer .format-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 1.5rem !important;
        visibility: visible !important;
    }
    
    .format-card,
    .format-card-modern,
    .format-explainer .format-card,
    .format-explainer .format-card-modern {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: white !important;
        padding: 1.5rem !important;
        border-radius: 8px !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.1) !important;
    }
    
    .format-card h3,
    .format-card-modern h3,
    .format-explainer h3 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1.25rem !important;
        margin-bottom: 0.75rem !important;
        color: #0095DB !important;
    }
    
    .format-card p,
    .format-card-modern p,
    .format-explainer p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.95rem !important;
        line-height: 1.6 !important;
        color: #555 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 3: Service/Team Cards - Must Be Visible on Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .services-grid {
        display: grid !important;
        grid-template-columns: 1fr !important;
        gap: 2rem !important;
        visibility: visible !important;
    }
    
    .service-card {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 2rem !important;
    }
    
    .service-card img,
    .badge-container img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 120px !important;
        margin: 0 auto 1rem !important;
    }
    
    .team-name,
    .service-card h3,
    .service-card p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 4: Hero Section Content - Ensure Visibility
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .hero {
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
        justify-content: space-between !important;
        padding: 1rem !important;
    }
    
    .hero-badge-top {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.7rem !important;
        padding: 0.7rem 1.2rem !important;
        margin-top: 5rem !important;
    }
    
    .hero-content {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin: auto 0 !important;
        padding: 1rem !important;
    }
    
    .hero h1 {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
    
    .hero-hundred {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: clamp(4rem, 12vw, 6rem) !important;
    }
    
    .hero-festival {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: clamp(2rem, 8vw, 3rem) !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 5: Countdown Section - RED BACKGROUND, WHITE TEXT
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .countdown,
    section.countdown {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 3rem 1.5rem !important;
        background: #C8102E !important; /* Flyer red */
        background-color: #C8102E !important;
        color: white !important;
        text-align: center !important;
    }
    
    .countdown h2,
    section.countdown h2 {
        display: block !important;
        visibility: visible !important;
        font-size: 1.8rem !important;
        color: white !important;
        margin-bottom: 2rem !important;
        letter-spacing: 2px !important;
    }
    
    .countdown-timer,
    .countdown .countdown-timer {
        display: flex !important;
        flex-wrap: wrap !important;
        justify-content: center !important;
        gap: 1rem !important;
        visibility: visible !important;
    }
    
    .countdown-item,
    .countdown .countdown-item {
        display: flex !important;
        flex-direction: column !important;
        visibility: visible !important;
        opacity: 1 !important;
        background: rgba(255, 255, 255, 0.15) !important;
        padding: 1rem 1.5rem !important;
        border-radius: 8px !important;
        min-width: 70px !important;
    }
    
    .countdown-number,
    .countdown .countdown-number,
    .countdown-item .countdown-number,
    #days, #hours, #minutes, #seconds {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 2.5rem !important;
        font-weight: 700 !important;
        color: white !important;
        line-height: 1 !important;
    }
    
    .countdown-label,
    .countdown .countdown-label,
    .countdown-item .countdown-label {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.75rem !important;
        color: white !important;
        letter-spacing: 1px !important;
        margin-top: 0.5rem !important;
    }
    
    .countdown-register,
    .countdown .countdown-register {
        display: block !important;
        visibility: visible !important;
        margin-top: 2rem !important;
    }
    
    .countdown .register-btn,
    .countdown-register .register-btn {
        background: white !important;
        background-color: white !important;
        color: #C8102E !important;
        padding: 1rem 2rem !important;
        font-weight: 700 !important;
        border-radius: 50px !important;
        display: inline-block !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 6: Gallery - Must Show on Mobile
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .gallery {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .carousel-container {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .carousel-slide img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 7: FAQ Section
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .faq-section {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .faq-container {
        display: block !important;
        visibility: visible !important;
    }
    
    .faq-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
    
    .faq-question {
        display: flex !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 1.2rem 1.5rem !important;
        font-size: 1rem !important;
    }
    
    .faq-answer {
        visibility: visible !important;
        opacity: 1 !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 8: Corporate Hospitality Section
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .corporate-hospitality {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 3rem 1.5rem !important;
    }
    
    .corporate-content p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 1rem !important;
        margin-bottom: 1.5rem !important;
    }
    
    .corporate-packages {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }
    
    .corporate-package-item {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        margin-bottom: 1rem !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 9: Buttons and CTAs - Ensure Visibility
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .register-btn,
    .cta-button,
    .nav-register-btn {
        display: inline-block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 1rem 2rem !important;
        font-size: 1rem !important;
        width: auto !important;
        max-width: 90% !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 10: Charity Logo - SMALLER and Bottom-Right Position
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Force charity logo to be SMALL and bottom-right */
    .hero .hero-bottom-right,
    .hero-bottom-right,
    section.hero .hero-bottom-right {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        position: absolute !important;
        bottom: 0.75rem !important;
        right: 0.75rem !important;
        max-width: 75px !important;
        width: 75px !important;
        z-index: 10 !important;
    }
    
    .hero .hero-charity-image,
    .hero-charity-image,
    section.hero .hero-charity-image,
    .hero-bottom-right img {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-height: 42px !important;
        height: 42px !important;
        width: 100% !important;
        object-fit: contain !important;
    }
}

@media (max-width: 480px) {
    /* Even smaller on tiny phones */
    .hero .hero-bottom-right,
    .hero-bottom-right,
    section.hero .hero-bottom-right {
        max-width: 65px !important;
        width: 65px !important;
        bottom: 0.5rem !important;
        right: 0.5rem !important;
    }
    
    .hero .hero-charity-image,
    .hero-charity-image,
    section.hero .hero-charity-image,
    .hero-bottom-right img {
        max-height: 36px !important;
        height: 36px !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 11: Ensure No Horizontal Scroll
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    body,
    html {
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }
    
    * {
        max-width: 100% !important;
    }
    
    /* But allow sections to be full width */
    section,
    .hero,
    .countdown,
    footer {
        max-width: 100vw !important;
    }
}

/* ═══════════════════════════════════════════════════════════════
   FIX 12: Footer - Must Be Visible
   ═══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    footer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        padding: 2rem 1.5rem !important;
    }
    
    footer p {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        font-size: 0.9rem !important;
    }
}