/**
 * Image Overlay Text Visibility Fix
 * Ensures all text on dark image overlays is always white and readable
 */

/* Force white text on all image overlay sections */
.relative .absolute[class*="bg-gradient"] .text-white,
.relative .absolute[class*="bg-gradient"] h1,
.relative .absolute[class*="bg-gradient"] h2,
.relative .absolute[class*="bg-gradient"] h3,
.relative .absolute[class*="bg-gradient"] h4,
.relative .absolute[class*="bg-gradient"] p,
.relative .absolute[class*="bg-gradient"] span {
    color: #FFFFFF !important;
}

/* Ensure text shadows are always applied for readability */
.relative .absolute[class*="bg-gradient"] h1,
.relative .absolute[class*="bg-gradient"] h2,
.relative .absolute[class*="bg-gradient"] h3,
.relative .absolute[class*="bg-gradient"] h4 {
    text-shadow: 0 4px 12px rgba(0, 0, 0, 0.8), 0 2px 6px rgba(0, 0, 0, 0.6) !important;
}

.relative .absolute[class*="bg-gradient"] p {
    text-shadow: 0 3px 8px rgba(0, 0, 0, 0.7), 0 1px 4px rgba(0, 0, 0, 0.5) !important;
}

/* Standardize gradient overlays for consistent darkness */
.image-overlay-dark {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.95) 0%, rgba(0, 0, 0, 0.70) 50%, rgba(0, 0, 0, 0.40) 100%) !important;
}

.image-overlay-medium {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.80) 0%, rgba(0, 0, 0, 0.50) 50%, transparent 100%) !important;
}

.image-overlay-light {
    background: linear-gradient(to top, rgba(0, 0, 0, 0.50) 0%, transparent 100%) !important;
}