/**
 * Hero Overlay Force
 * Forces overlay to appear on hero background
 * HIGHEST PRIORITY - Loads last to override everything
 */

/* Force overlay on mobile */
@media (max-width: 767px) {
    /* Create overlay with pseudo element */
    .hero.bg_img {
        position: relative !important;
    }
    
    .hero.bg_img::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        height: 100% !important;
        background-color: rgba(0, 0, 0, 0.3) !important; /* 30% black overlay */
        z-index: 1 !important;
        pointer-events: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Alternative method using gradient */
    .hero.bg_img::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(
            180deg,
            rgba(0, 0, 0, 0.2) 0%,
            rgba(0, 0, 0, 0.3) 50%,
            rgba(0, 0, 0, 0.4) 100%
        ) !important;
        z-index: 1 !important;
        pointer-events: none !important;
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    /* Ensure content is above overlays */
    .hero .container {
        position: relative !important;
        z-index: 10 !important;
    }
    
    .hero__content {
        position: relative !important;
        z-index: 11 !important;
    }
    
    /* Make sure all content elements are above overlay */
    .hero__content * {
        position: relative !important;
        z-index: 12 !important;
    }
}

/* Ensure overlay works on all screen sizes */
@media (max-width: 480px) {
    .hero.bg_img::after,
    .hero.bg_img::before {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Landscape mode */
@media (max-width: 767px) and (orientation: landscape) {
    .hero.bg_img::after,
    .hero.bg_img::before {
        display: block !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* SUPER CRITICAL - Override any CSS that removes overlays */
@media (max-width: 767px) {
    section.hero.hero__style-one.bg_img::after {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
    
    section.hero.hero__style-one.bg_img::before {
        content: "" !important;
        display: block !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.2),
            rgba(0, 0, 0, 0.3),
            rgba(0, 0, 0, 0.35)
        ) !important;
        z-index: 1 !important;
        opacity: 1 !important;
        visibility: visible !important;
    }
}

/* Fix for inline styles */
@media (max-width: 767px) {
    .hero[style*="background-image"]::after {
        content: "" !important;
        display: block !important;
        background-color: rgba(0, 0, 0, 0.3) !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        z-index: 1 !important;
    }
}

/* Ensure text visibility with strong shadows */
@media (max-width: 767px) {
    .hero__content h1,
    .hero__content p,
    .hero__content .xb-list li {
        text-shadow: 
            2px 2px 4px rgba(0, 0, 0, 0.9),
            0px 0px 10px rgba(0, 0, 0, 0.8) !important;
    }
}