/**
 * Breadcrumb Overlay Fix
 * Adds overlay on desktop for better text readability
 * Removes circle elements
 */

/* Hide circle elements on all devices */
.breadcrumb__circle {
    display: none !important;
    visibility: hidden !important;
}

.breadcrumb__circle .big,
.breadcrumb__circle .small {
    display: none !important;
}

/* DESKTOP - Add dark overlay for better contrast */
@media (min-width: 768px) {
    .breadcrumb {
        position: relative !important;
    }
    
    /* Dark overlay for desktop */
    .breadcrumb::before {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.5) !important;
        background: linear-gradient(
            to bottom,
            rgba(0, 0, 0, 0.3) 0%,
            rgba(0, 0, 0, 0.5) 50%,
            rgba(0, 0, 0, 0.3) 100%
        ) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    /* Ensure content is above overlay */
    .breadcrumb .container {
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* With overlay, text should be white on desktop */
    .breadcrumb__title,
    .breadcrumb h1,
    .breadcrumb h2,
    .breadcrumb h3 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
        text-shadow: 2px 2px 4px rgba(0,0,0,0.5) !important;
    }
    
    /* Breadcrumb list - override inline styles to black */
    .breadcrumb__list,
    .breadcrumb__list li,
    .breadcrumb__list li.breadcrumb-item,
    .breadcrumb__list a {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
        text-shadow: none !important;
    }
    
    /* Force black color with attribute selector for inline styles */
    .breadcrumb__list[style*="color"],
    .breadcrumb__list li[style*="color"],
    .breadcrumb__list a[style*="color"] {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
    }
    
    .breadcrumb__list a:hover {
        color: #000000 !important;
        opacity: 1 !important;
        text-decoration: underline !important;
    }
    
    /* Separator */
    .breadcrumb__list li:not(:last-child)::after {
        color: #666666 !important;
    }
}

/* MOBILE - Keep white text with overlay */
@media (max-width: 767px) {
    .breadcrumb::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        background: rgba(0, 0, 0, 0.6) !important;
        z-index: 1 !important;
        pointer-events: none !important;
    }
    
    .breadcrumb .container,
    .breadcrumb__content {
        position: relative !important;
        z-index: 2 !important;
    }
    
    /* Ensure white text on mobile */
    .breadcrumb__title,
    .breadcrumb__list,
    .breadcrumb__list li,
    .breadcrumb__list a {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* Override inline styles from JavaScript */
@media (min-width: 768px) {
    /* Desktop - Title stays white */
    .breadcrumb__title[style*="color: rgb(26, 26, 26)"] {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    /* Desktop - List becomes black */
    .breadcrumb__list[style*="color: rgb(51, 51, 51)"],
    .breadcrumb__list li[style*="color: rgb(51, 51, 51)"],
    .breadcrumb__list a[style*="color: rgb(51, 51, 51)"] {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
    }
}

@media (max-width: 767px) {
    /* Mobile - Everything white */
    .breadcrumb__title[style*="color: rgb(26, 26, 26)"],
    .breadcrumb__list[style*="color: rgb(51, 51, 51)"],
    .breadcrumb__list li[style*="color: rgb(51, 51, 51)"],
    .breadcrumb__list a[style*="color: rgb(51, 51, 51)"] {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
}

/* Tablet specific */
@media (min-width: 768px) and (max-width: 991px) {
    .breadcrumb__title {
        font-size: 36px !important;
    }
    
    .breadcrumb__list {
        font-size: 14px !important;
    }
}

/* Force removal of circles with highest priority */
body .breadcrumb__circle,
html body .breadcrumb__circle,
.breadcrumb .breadcrumb__circle {
    display: none !important;
    opacity: 0 !important;
    visibility: hidden !important;
    width: 0 !important;
    height: 0 !important;
    overflow: hidden !important;
}

/* ULTIMATE OVERRIDE - Desktop colors */
@media (min-width: 768px) {
    html body .breadcrumb__title,
    html body h2.breadcrumb__title,
    html body .breadcrumb h2 {
        color: #ffffff !important;
        -webkit-text-fill-color: #ffffff !important;
    }
    
    html body .breadcrumb__list,
    html body .breadcrumb__list li,
    html body .breadcrumb__list li.breadcrumb-item,
    html body .breadcrumb__list a {
        color: #333333 !important;
        -webkit-text-fill-color: #333333 !important;
        text-shadow: none !important;
    }
}