/**
 * Hero Text Readability Enhancement
 * Improves contrast between hero text and background image
 * Version: 1.0.0
 * Date: June 22, 2025
 */

/* Enhance the overlay for better text readability */
body.home .page-header::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    /* Darker gradient overlay for better contrast */
    background: linear-gradient(
        to bottom, 
        rgba(0,0,0,0.4) 0%, 
        rgba(0,0,0,0.6) 50%,
        rgba(0,0,0,0.5) 100%
    ) !important;
    z-index: 1 !important;
}

/* Ensure hero content sits above the overlay */
body.home .hero-content {
    position: relative !important;
    z-index: 2 !important;
}

/* Add subtle text shadow for extra readability */
body.home .hero-content h1,
body.home .page-header h1,
.hero-content .hero-title {
    text-shadow: 
        2px 2px 4px rgba(0,0,0,0.8),
        0 0 20px rgba(0,0,0,0.5) !important;
    /* Ensure text is white for maximum contrast */
    color: #ffffff !important;
}

/* Enhance tagline readability */
body.home .hero-content p,
body.home .page-header p,
.hero-tagline {
    text-shadow: 
        1px 1px 3px rgba(0,0,0,0.8),
        0 0 15px rgba(0,0,0,0.4) !important;
    color: #ffffff !important;
    /* Slightly increase font weight for better visibility */
    font-weight: 500 !important;
}

/* Mobile adjustments for better readability on small screens */
@media (max-width: 768px) {
    body.home .page-header::after {
        /* Slightly darker on mobile for outdoor viewing */
        background: linear-gradient(
            to bottom, 
            rgba(0,0,0,0.5) 0%, 
            rgba(0,0,0,0.7) 50%,
            rgba(0,0,0,0.6) 100%
        ) !important;
    }
    
    /* Stronger text shadow on mobile */
    body.home .hero-content h1,
    body.home .page-header h1 {
        text-shadow: 
            3px 3px 6px rgba(0,0,0,0.9),
            0 0 25px rgba(0,0,0,0.6) !important;
    }
}

/* Additional enhancements for other hero text elements */
.hero-buttons a,
.hero-content .wp-element-button,
.hero-content a.button {
    /* Add subtle shadow to buttons for better visibility */
    box-shadow: 0 2px 10px rgba(0,0,0,0.3) !important;
    /* Ensure button text is readable */
    text-shadow: 1px 1px 2px rgba(0,0,0,0.5) !important;
}

/* Debug: Add a subtle border to verify CSS is loading */
.hero-readability-test {
    border: 1px solid transparent !important;
}