/* Mobile Fix CSS - Comprehensive fix for all links and buttons on mobile */

/* ============================================
   GLOBAL FIXES FOR ALL INTERACTIVE ELEMENTS
   ============================================ */

/* Ensure ALL links are clickable on mobile */
a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3) !important;
    cursor: pointer !important;
    display: inline !important;
    position: relative !important;
    z-index: 1 !important;
}

/* Ensure ALL buttons are clickable on mobile */
button,
input[type="button"],
input[type="submit"],
input[type="reset"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3) !important;
    cursor: pointer !important;
    min-height: 44px !important; /* iOS recommended touch target */
    min-width: 44px !important;
}

/* Ensure checkboxes and radio buttons work */
input[type="checkbox"],
input[type="radio"] {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
    cursor: pointer !important;
    min-width: 24px !important;
    min-height: 24px !important;
    -webkit-appearance: checkbox !important;
    appearance: checkbox !important;
}

/* Ensure labels are clickable */
label {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
    -webkit-user-select: none !important;
    user-select: none !important;
}

/* Ensure select elements work */
select {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    cursor: pointer !important;
}

/* ============================================
   FIX OVERLAYS THAT MIGHT BLOCK CLICKS
   ============================================ */

/* Ensure no overlay blocks content (except when popup is actually visible) */
body:not(.age-popup-open) [class*="fixed"]:not([class*="z-[9999]"]):not([class*="z-40"]) {
    pointer-events: auto !important;
}

/* Ensure main content is always clickable */
main,
main *,
section,
section *,
article,
article *,
div[class*="container"],
div[class*="container"] * {
    pointer-events: auto !important;
}

/* But allow links and buttons to be on top */
main a,
main button,
section a,
section button,
article a,
article button {
    pointer-events: auto !important;
    position: relative !important;
    z-index: 10 !important;
}

/* ============================================
   POPUP SPECIFIC FIXES
   ============================================ */

/* Age verification popup */
.fixed.inset-0.z-\[9999\] > div {
    max-height: 100vh;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    pointer-events: auto !important;
}

.fixed.inset-0.z-\[9999\] a,
[class*="z-[9999]"] a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10000 !important;
    cursor: pointer !important;
}

.fixed.inset-0.z-\[9999\] button,
[class*="z-[9999]"] button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 10000 !important;
    min-height: 44px !important;
}

/* Cookie consent popup */
.fixed.bottom-0.z-40,
[class*="fixed"][class*="bottom-0"] {
    pointer-events: auto !important;
}

.fixed.bottom-0.z-40 a,
[class*="fixed"][class*="bottom-0"] a {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    position: relative !important;
    z-index: 50 !important;
    cursor: pointer !important;
    display: inline !important;
}

.fixed.bottom-0.z-40 button,
[class*="fixed"][class*="bottom-0"] button {
    pointer-events: auto !important;
    touch-action: manipulation !important;
    min-height: 44px !important;
}

.fixed.bottom-0.z-40 > div,
[class*="fixed"][class*="bottom-0"] > div {
    pointer-events: auto !important;
}

.fixed.bottom-0.z-40 p,
[class*="fixed"][class*="bottom-0"] p {
    pointer-events: auto !important;
}

.fixed.bottom-0.z-40 p a,
[class*="fixed"][class*="bottom-0"] p a {
    pointer-events: auto !important;
    z-index: 101 !important;
    position: relative !important;
}

/* ============================================
   PREVENT BODY SCROLL WHEN POPUP OPEN
   ============================================ */

body.age-popup-open {
    overflow: hidden !important;
    position: fixed !important;
    width: 100% !important;
    height: 100% !important;
}

/* ============================================
   MOBILE SPECIFIC FIXES
   ============================================ */

@media (max-width: 768px) {
    /* Ensure all interactive elements work on mobile */
    a, button, input, select, label {
        pointer-events: auto !important;
        touch-action: manipulation !important;
        -webkit-tap-highlight-color: rgba(59, 130, 246, 0.3) !important;
    }
    
    /* Prevent accidental text selection during touch */
    * {
        -webkit-touch-callout: none;
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
    }
    
    /* Allow text selection in content areas */
    p, span, h1, h2, h3, h4, h5, h6 {
        -webkit-user-select: text;
        -moz-user-select: text;
        -ms-user-select: text;
        user-select: text;
    }
    
    /* Links should always be selectable/clickable */
    a {
        -webkit-user-select: none;
        -moz-user-select: none;
        -ms-user-select: none;
        user-select: none;
        pointer-events: auto !important;
    }
    
    /* Ensure buttons have proper touch targets */
    button,
    input[type="button"],
    input[type="submit"] {
        min-height: 44px !important;
        padding: 12px 24px !important;
    }
}

/* ============================================
   SCROLLING FIXES
   ============================================ */

html, body {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    pointer-events: auto !important;
}

main {
    -webkit-overflow-scrolling: touch;
    overflow-scrolling: touch;
    pointer-events: auto !important;
}

/* ============================================
   FIX FOR SPECIFIC COMMON ISSUES
   ============================================ */

/* Fix for elements with pointer-events: none that shouldn't have it */
[style*="pointer-events: none"] a,
[style*="pointer-events: none"] button {
    pointer-events: auto !important;
}

/* Fix for backdrop elements that might block */
[class*="backdrop"],
[class*="overlay"] {
    pointer-events: none !important;
}

[class*="backdrop"] + *,
[class*="overlay"] + * {
    pointer-events: auto !important;
}

/* Ensure clickable elements inside non-clickable containers work */
[class*="pointer-events-none"] a,
[class*="pointer-events-none"] button,
[style*="pointer-events: none"] a,
[style*="pointer-events: none"] button {
    pointer-events: auto !important;
}

/* Override any inline styles that block clicks */
a[style*="pointer-events"],
button[style*="pointer-events"] {
    pointer-events: auto !important;
}

/* Fix for common blocking patterns */
.overflow-hidden a,
.overflow-hidden button,
.relative a,
.relative button,
.absolute a,
.absolute button {
    pointer-events: auto !important;
}

/* Ensure header links work */
header a,
header button {
    pointer-events: auto !important;
    z-index: 60 !important;
    position: relative !important;
}

/* Ensure footer links work */
footer a,
footer button {
    pointer-events: auto !important;
    z-index: 10 !important;
    position: relative !important;
}

/* ============================================
   BABL/BALLPIT ANIMATION FIX FOR MOBILE
   ============================================ */

/* Hide Ballpit animation canvas on mobile */
@media (max-width: 768px) {
    /* Hide canvas elements (Ballpit animation) on mobile */
    canvas {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        position: absolute !important;
        z-index: -1 !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Hide any container with absolute inset-0 that contains canvas */
    div[class*="absolute"][class*="inset-0"] canvas,
    div.absolute.inset-0 canvas,
    div[style*="absolute"][style*="inset-0"] canvas,
    div[class*="absolute"][class*="w-full"][class*="h-full"] canvas {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
        width: 0 !important;
        height: 0 !important;
    }
    
    /* Add gradient background for mobile hero section */
    main > div.relative.w-full.overflow-hidden::before,
    main > div[class*="relative"][class*="w-full"][class*="overflow-hidden"]::before {
        content: '' !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background: linear-gradient(to bottom right, rgba(139, 92, 246, 0.2), rgba(59, 130, 246, 0.2), rgba(139, 92, 246, 0.2)) !important;
        pointer-events: none !important;
        z-index: 0 !important;
    }
    
    /* Ensure animation containers don't block interactions on mobile */
    div[class*="absolute"][class*="inset-0"],
    div.absolute.inset-0,
    div[class*="absolute"][class*="w-full"][class*="h-full"] {
        pointer-events: none !important;
        z-index: 0 !important;
        touch-action: none !important;
    }
    
    /* Ensure content is above background */
    main > div.relative.w-full.overflow-hidden > div[class*="relative"][class*="z-10"],
    main > div.relative.w-full.overflow-hidden > div.relative.z-10,
    main > div[class*="relative"][class*="w-full"] > div[class*="relative"][class*="z-10"] {
        position: relative !important;
        z-index: 10 !important;
        pointer-events: auto !important;
    }
    
    /* Hero content container styling for mobile */
    div[class*="relative"][class*="z-10"][class*="mx-auto"][class*="mb-5"][class*="flex"][class*="max-w-7xl"][class*="flex-col"][class*="hero-height"],
    div.relative.z-10.mx-auto.mb-5.flex.max-w-7xl.flex-col.hero-height,
    main > div.relative.w-full.overflow-hidden > div[class*="relative"][class*="z-10"][class*="mx-auto"][class*="mb-5"],
    main > div.relative.w-full.overflow-hidden > div.relative.z-10.mx-auto.mb-5 {
        padding-bottom: 15px !important;
        background: linear-gradient(45deg, #673AB7, transparent) !important;
    }
    
    /* Ensure hero section allows scrolling */
    main > div.relative.w-full.overflow-hidden,
    main > div[class*="relative"][class*="w-full"][class*="overflow-hidden"] {
        overflow: visible !important;
        -webkit-overflow-scrolling: touch !important;
    }
}

/* Desktop: Keep animation but ensure it doesn't block */
@media (min-width: 769px) {
    /* Ensure Ballpit animation doesn't block interactions */
    div[class*="absolute"][class*="inset-0"] canvas,
    div.absolute.inset-0 canvas,
    div[class*="absolute"][class*="w-full"][class*="h-full"] canvas {
        pointer-events: none !important;
        touch-action: none !important;
    }
    
    /* Ensure animation container doesn't block */
    div[class*="absolute"][class*="inset-0"],
    div.absolute.inset-0 {
        pointer-events: none !important;
        z-index: 0 !important;
    }
}