/**
 * Hero Background Override Fix
 * Ensures background images are visible by overriding hero-modern gradient
 * Must be loaded AFTER all other CSS files
 */

/* DNA Romance - Use background3XL image */
.hero-modern.banner3,
.hero-modern#topp {
    background: url('../images/background/background3XL.webp') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Fallback for browsers without WebP support */
.no-webp .hero-modern.banner3,
.no-webp .hero-modern#topp {
    background: url('../images/background/background3XL.jpeg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}

/* Mobile responsive for DNA Romance */
@media (max-width: 768px) {
    .hero-modern.banner3,
    .hero-modern#topp {
        background: url('../images/background/backgroundmobile1XL.webp') !important;
        background-size: cover !important;
        background-position: center !important;
    }
    
    .no-webp .hero-modern.banner3,
    .no-webp .hero-modern#topp {
        background: url('../images/background/backgroundmobile1XL.jpg') !important;
        background-size: cover !important;
        background-position: center !important;
    }
}

/* DateMetriX - Personality focused background */
.hero-modern.banner3-datemetrix {
    background: url('../images/background/Personalities.png') !important;
    background-size: cover !important;
    background-position: center !important;
}

.webp .hero-modern.banner3-datemetrix {
    background: url('../images/background/Personalities.webp') !important;
}

/* GenePool - Donor/Co-parent focused background */
.hero-modern.banner3-genepool {
    background: url('../images/genepool/pexels-pavel-danilyuk-6025139.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* WellMatched - Medical/carrier screening focused */
.hero-modern.banner3-wellmatched {
    background: linear-gradient(135deg, rgba(25, 118, 210, 0.8), rgba(66, 165, 245, 0.8)),
                url('../images/background/wellmatched-hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

/* GeneRecovery - Recovery focused background */
.hero-modern.banner3-generecovery {
    background: url('../images/background/generecovery-hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

.no-webp .hero-modern.banner3-generecovery {
    background: url('../images/background/generecovery-hero.jpg') !important;
}

/* HeritableHealth - Health focused background */
.hero-modern.banner3-heritablehealth {
    background: url('../images/background/heritablehealth-hero.webp') !important;
    background-size: cover !important;
    background-position: center !important;
}

.no-webp .hero-modern.banner3-heritablehealth {
    background: url('../images/background/heritablehealth-hero.jpg') !important;
}

/* Ensure text remains readable over background images */
.hero-modern .banner3-content {
    position: relative;
    z-index: 2;
}

/* Optional: Add subtle overlay for better text contrast if needed */
.hero-modern.banner3::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.3);
    z-index: 1;
}