/**
 * Hero Images Ultimate Fix
 * This file ensures the hero image displays by overriding ALL conflicting styles
 */

/* Remove any gradient background from child theme */
body.home .page-header {
    background: none !important;
    background-color: transparent !important;
    background-image: none !important;
}

/* Ensure the pseudo-element with the image is visible */
body.home .page-header::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-image: url('/wp-content/uploads/2025/06/IMG_1809-optimized.jpg') !important;
    background-size: cover !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
    z-index: -2 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* Ensure the overlay gradient works */
body.home .page-header::after {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background: linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%) !important;
    z-index: -1 !important;
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
    pointer-events: none !important;
}

/* Alternative approach using direct background */
@supports (background-blend-mode: multiply) {
    body.home .page-header {
        background-image: 
            linear-gradient(to bottom, rgba(0,0,0,0.4) 0%, rgba(0,0,0,0.6) 100%),
            url('/wp-content/uploads/2025/06/IMG_1809-optimized.jpg') !important;
        background-size: cover, cover !important;
        background-position: center, center !important;
        background-repeat: no-repeat, no-repeat !important;
        background-blend-mode: multiply !important;
    }
}

/* Debug helper - adds a red border if the element exists */
body.home .page-header {
    /* Uncomment the line below to debug */
    /* border: 5px solid red !important; */
}

/* Import Google Fonts for Irish/Celtic style */
@import url('https://fonts.googleapis.com/css2?family=Uncial+Antiqua&family=Cinzel:wght@400;600&family=Cinzel+Decorative:wght@700&display=swap');

/* Hero title styles with Irish-inspired font */
.home .page-header .page-title {
    color: white !important;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7) !important;
    font-size: 5rem !important;
    font-weight: 400 !important;
    margin: 0 !important;
    z-index: 10 !important;
    position: relative !important;
    font-family: 'Cinzel Decorative', 'Uncial Antiqua', serif !important;
    letter-spacing: 3px !important;
    text-transform: none !important;
}

/* Add tagline underneath */
.home .page-header .page-title::after {
    content: 'Your Guide To Trekking In Ireland' !important;
    display: block !important;
    font-size: 1.8rem !important;
    font-weight: 400 !important;
    margin-top: 15px !important;
    font-family: 'Cinzel', serif !important;
    letter-spacing: 2px !important;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.6) !important;
    opacity: 0.95 !important;
    font-style: italic !important;
}

/* Mobile responsive adjustments */
@media (max-width: 768px) {
    .home .page-header .page-title {
        font-size: 3rem !important;
        letter-spacing: 2px !important;
    }
    
    .home .page-header .page-title::after {
        font-size: 1.3rem !important;
        margin-top: 10px !important;
    }
}

/* Hide the original "Treks" text */
.home .page-header .page-title {
    text-indent: -9999px !important;
    overflow: hidden !important;
}

/* Replace with "WildRover" using ::before */
.home .page-header .page-title::before {
    content: 'WildRover' !important;
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
    color: white !important;
    text-shadow: 3px 3px 6px rgba(0,0,0,0.7) !important;
    font-size: 5rem !important;
    font-weight: 400 !important;
    font-family: 'Cinzel Decorative', 'Uncial Antiqua', serif !important;
    letter-spacing: 3px !important;
}

/* Adjust tagline position */
.home .page-header .page-title::after {
    position: absolute !important;
    left: 50% !important;
    transform: translateX(-50%) !important;
    top: 5.5rem !important;
    text-indent: 0 !important;
    white-space: nowrap !important;
}

/* Mobile adjustments for replaced text */
@media (max-width: 768px) {
    .home .page-header .page-title::before {
        font-size: 3rem !important;
    }
    
    .home .page-header .page-title::after {
        top: 3.5rem !important;
    }
}