/* NUCLEAR OPTION - Force Hero Transparency
 * Created: 2025-09-07  
 * Purpose: Forcefully remove ALL white boxes in hero sections
 * Priority: Maximum with !important on everything
 */

/* Target EVERYTHING in hero sections and force transparency */
.hero-modern *,
.banner3 *,
#topp *,
[class*="hero"] *,
[class*="banner"] * {
    background-color: transparent !important;
    background: transparent !important;
}

/* Only allow transparent overlays in hero sections */
.hero-modern .card,
.hero-modern .card-glass,
.hero-modern .card-glass-transparent,
.hero-modern [class*="card"],
.banner3 .card,
.banner3 .card-glass,
.banner3 .card-glass-transparent,
.banner3 [class*="card"],
#topp .card,
#topp .card-glass,
#topp .card-glass-transparent,
#topp [class*="card"] {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Remove ALL white backgrounds */
.hero-modern .bg-white,
.hero-modern .bg-light,
.banner3 .bg-white,
.banner3 .bg-light,
#topp .bg-white,
#topp .bg-light {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Target any element with white in style attribute */
.hero-modern [style*="background: white"],
.hero-modern [style*="background-color: white"],
.hero-modern [style*="background:#fff"],
.hero-modern [style*="background-color:#fff"],
.hero-modern [style*="background: #fff"],
.hero-modern [style*="background-color: #fff"],
.hero-modern [style*="background:rgb(255,255,255)"],
.hero-modern [style*="background-color:rgb(255,255,255)"],
.banner3 [style*="background: white"],
.banner3 [style*="background-color: white"],
.banner3 [style*="background:#fff"],
.banner3 [style*="background-color:#fff"],
.banner3 [style*="background: #fff"],
.banner3 [style*="background-color: #fff"],
.banner3 [style*="background:rgb(255,255,255)"],
.banner3 [style*="background-color:rgb(255,255,255)"] {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Specific targeting for the card-glass-transparent */
.card-glass-transparent {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Override with attribute selectors for maximum specificity */
div[class*="card-glass-transparent"],
div[class*="card-glass"],
div[class*="hero"] div[class*="card"],
div[class*="banner"] div[class*="card"] {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Target by structure */
.hero-modern > div > div > div,
.banner3 > div > div > div,
#topp > div > div > div {
    background: transparent !important;
    background-color: transparent !important;
}

/* Ensure containers don't have white backgrounds */
.hero-modern .container,
.hero-modern .container-fluid,
.banner3 .container,
.banner3 .container-fluid,
#topp .container,
#topp .container-fluid {
    background: transparent !important;
    background-color: transparent !important;
}

/* Make sure text is still visible */
.hero-modern h1,
.hero-modern h2,
.hero-modern h3,
.hero-modern p,
.banner3 h1,
.banner3 h2,
.banner3 h3,
.banner3 p {
    color: #ffffff !important;
    text-shadow: 2px 2px 6px rgba(0,0,0,0.9) !important;
}

/* Remove any box-shadows that might look like white boxes */
.hero-modern *,
.banner3 *,
#topp * {
    box-shadow: none !important;
}

/* Last resort - use filter to reduce opacity of any white */
.hero-modern > *,
.banner3 > *,
#topp > * {
    filter: opacity(0.9);
}

/* Ultra-specific targeting */
body .hero-modern .card-glass-transparent,
html body .hero-modern .card-glass-transparent,
body.theme-dnaromance .hero-modern .card-glass-transparent,
body[data-site="dnaromance"] .hero-modern .card-glass-transparent {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Debug mode - add red border to see what's causing white box */
/*
.hero-modern > *,
.banner3 > *,
#topp > * {
    border: 2px solid red !important;
}
*/