/**
 * Hero Background Visible
 * Ensures hero background image is visible on mobile devices
 * Highest priority to override all other CSS
 */

/* Remove ALL overlays that hide the background */
@media (max-width: 767px) {
    .hero::before,
    .hero::after,
    .hero__style-one::before,
    .hero__style-one::after,
    section.hero::before,
    section.hero::after {
        display: none !important;
        content: none !important;
        background: none !important;
        opacity: 0 !important;
    }
}

/* Ensure background image is visible */
@media (max-width: 767px) {
    .hero.bg_img,
    .hero[data-background],
    section.hero.bg_img,
    .hero__style-one.bg_img {
        /* Reset all background properties */
        background-color: transparent !important;
        background-attachment: scroll !important;
        background-repeat: no-repeat !important;
        background-size: cover !important;
        background-position: center center !important;
        
        /* Ensure visibility */
        opacity: 1 !important;
        visibility: visible !important;
        display: block !important;
        
        /* Remove any filters */
        filter: none !important;
        -webkit-filter: none !important;
        
        /* Remove transforms that might hide it */
        transform: none !important;
        -webkit-transform: none !important;
        
        /* Ensure proper positioning */
        position: relative !important;
        overflow: visible !important;
        z-index: 0 !important;
    }
    
    /* Specific for inline styles */
    .hero[style*="background-image"] {
        background-attachment: scroll !important;
        background-size: cover !important;
        background-position: center center !important;
        background-repeat: no-repeat !important;
    }
}

/* Container positioning */
@media (max-width: 767px) {
    .hero .container {
        position: relative !important;
        z-index: 1 !important;
        background: transparent !important;
    }
    
    .hero__content {
        position: relative !important;
        z-index: 2 !important;
        background: transparent !important;
    }
}

/* Text visibility improvements without hiding background */
@media (max-width: 767px) {
    .hero__content h1,
    .hero__content p,
    .hero__content .xb-list li {
        /* Strong text shadow for readability */
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.9),
            0px 0px 8px rgba(0, 0, 0, 0.8),
            0px 0px 16px rgba(0, 0, 0, 0.6) !important;
        font-weight: bold !important;
    }
    
    .hero__content h1 {
        color: #ffffff !important;
    }
    
    .hero__content p {
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    
    .hero__content .xb-list li {
        color: #ffffff !important;
        font-weight: 500 !important;
    }
    
    .hero__content .xb-list li i {
        color: #FFC107 !important;
        text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.8) !important;
    }
}

/* Button improvements */
@media (max-width: 767px) {
    .hero__content .thm-btn {
        box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5) !important;
        font-weight: 600 !important;
    }
    
    .hero__content .thm-btn:first-child {
        background: #FFC107 !important;
        color: #000 !important;
        border: none !important;
    }
    
    .hero__content .thm-btn--white {
        background: rgba(255, 255, 255, 0.95) !important;
        color: #000 !important;
        border: 2px solid rgba(255, 255, 255, 0.9) !important;
    }
}

/* Different screen sizes */
@media (max-width: 480px) {
    .hero.bg_img,
    .hero[data-background] {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 450px !important;
    }
}

/* Landscape mode */
@media (max-width: 767px) and (orientation: landscape) {
    .hero.bg_img,
    .hero[data-background] {
        background-size: cover !important;
        background-position: center center !important;
        min-height: 350px !important;
    }
}

/* iOS specific fix */
@supports (-webkit-touch-callout: none) {
    @media (max-width: 767px) {
        .hero.bg_img {
            background-attachment: scroll !important;
            -webkit-background-size: cover !important;
        }
    }
}

/* CRITICAL: Override any inline background that might be hidden */
@media (max-width: 767px) {
    .hero[style*="background"] {
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Remove any black or dark backgrounds */
    .hero {
        background-color: transparent !important;
    }
}

/* Ensure hero height is appropriate */
@media (max-width: 767px) {
    .hero {
        min-height: 450px !important;
        height: auto !important;
    }
}

/* SUPER CRITICAL: Remove all pseudo elements globally from hero */
@media (max-width: 767px) {
    .hero *::before,
    .hero *::after {
        display: none !important;
    }
    
    /* Only allow specific needed pseudo elements */
    .hero__content .xb-list li i::before {
        display: inline-block !important;
    }
}