/* Hero Transparency Override
 * Created: 2025-09-07
 * Purpose: Force 90% transparency on hero overlays and remove ugly white/grey boxes
 * Priority: Maximum specificity to override inline styles
 */

/* Target the specific hero overlay with inline styles */
[data-site="dnaromance"] .hero-modern .card-glass-transparent[style*="background"],
[data-site="apps"] .hero-modern .card-glass-transparent[style*="background"],
.hero-modern .card-glass-transparent[style*="background"] {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Alternative targeting by ID and class combinations */
#topp .card-glass-transparent,
.banner3 .card-glass-transparent,
.hero-modern__content .card-glass-transparent {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Remove any solid backgrounds from hero sections */
[data-site="dnaromance"] .hero-modern,
[data-site="apps"] .hero-modern,
[data-site="dnaromance"] .banner3,
[data-site="apps"] .banner3 {
    /* Let the background image show through */
    background-color: transparent !important;
}

/* Fix the banner3:before overlay */
[data-site="dnaromance"] .banner3:before,
[data-site="apps"] .banner3:before,
.banner3:before {
    background: rgba(0,0,0,0.1) !important; /* 90% transparent dark overlay */
}

/* Target any card inside hero sections */
[data-site="dnaromance"] .hero-modern .card,
[data-site="apps"] .hero-modern .card,
[data-site="dnaromance"] .banner3 .card,
[data-site="apps"] .banner3 .card,
.hero-modern .card-glass,
.banner3 .card-glass {
    background: rgba(255,255,255,0.1) !important;
    backdrop-filter: blur(10px) !important;
    -webkit-backdrop-filter: blur(10px) !important;
}

/* Ensure text remains readable */
.hero-modern .hero-title,
.hero-modern .hero-subtitle,
.banner3 h1,
.banner3 h2,
.banner3 h3,
.card-glass-transparent h1,
.card-glass-transparent h2,
.card-glass-transparent h3 {
    color: #ffffff !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.8) !important;
}

/* Remove box shadows that might create "boxy" appearance */
[data-site="dnaromance"] .hero-modern .card[style*="box-shadow"],
[data-site="apps"] .hero-modern .card[style*="box-shadow"],
.card-glass-transparent[style*="box-shadow"] {
    box-shadow: none !important;
}

/* Force transparency with maximum specificity */
body[data-site="dnaromance"] .hero-modern .card-glass-transparent,
body[data-site="apps"] .hero-modern .card-glass-transparent,
html body .hero-modern .card-glass-transparent[style] {
    background: rgba(255,255,255,0.1) !important;
    background-color: rgba(255,255,255,0.1) !important;
}

/* Nuclear option - target by exact style attribute */
[style*="rgba(0, 0, 0, 0.6)"] {
    background: rgba(255,255,255,0.1) !important;
}

/* Remove grey secondary backgrounds in hero areas */
.hero-modern .bg-secondary,
.banner3 .bg-secondary {
    background-color: transparent !important;
}

/* Ensure no white or grey boxes appear */
.hero-modern [class*="bg-white"],
.hero-modern [class*="bg-light"],
.hero-modern [class*="bg-grey"],
.hero-modern [class*="bg-gray"],
.banner3 [class*="bg-white"],
.banner3 [class*="bg-light"],
.banner3 [class*="bg-grey"],
.banner3 [class*="bg-gray"] {
    background-color: rgba(255,255,255,0.1) !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .hero-modern .card-glass-transparent,
    .banner3 .card-glass-transparent {
        padding: 20px !important;
        margin: 0 10px !important;
    }
}