/* ===================================================================
   UNIFIED BREADCRUMB SYSTEM - MacroFix
   A comprehensive breadcrumb styling system for consistent navigation
   =================================================================== */

/* Breadcrumb Navigation Container */
.breadcrumb-navigation {
    margin-bottom: 2rem;
    padding: 1.5rem 0;
    background: linear-gradient(135deg, rgba(242, 227, 198, 0.1), rgba(255, 255, 255, 0.05));
    border-left: 4px solid #d4af37;
    border-radius: 0 8px 8px 0;
    position: relative;
    z-index: 1;
    pointer-events: none;
}

.breadcrumb-navigation::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='20' height='20' viewBox='0 0 20 20' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='%23d4af37' fill-opacity='0.03'%3E%3Cpath d='M10 0l10 10-10 10L0 10z'/%3E%3C/g%3E%3C/svg%3E");
    pointer-events: none;
}

.breadcrumb-navigation .container {
    position: relative;
    z-index: 2;
    pointer-events: auto;
}

/* Breadcrumb List */
.breadcrumb {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    list-style: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background: transparent !important;
    border-radius: 0 !important;
    font-family: 'Playfair Display', serif !important;
    font-size: 1rem !important;
    font-weight: 500 !important;
    pointer-events: none !important;
}

/* Breadcrumb Items */
.breadcrumb-item {
    display: inline-flex !important;
    align-items: center !important;
    color: #666 !important;
    font-size: 0.95rem !important;
    position: relative !important;
    margin-right: 1.5rem !important;
    pointer-events: auto !important;
}

.breadcrumb-item:last-child {
    margin-right: 0 !important;
}

/* Remove ALL default separators from any framework */
.breadcrumb-item::before,
.breadcrumb-item::after,
.breadcrumb-item + .breadcrumb-item::before,
.breadcrumb-item + .breadcrumb-item::after {
    display: none !important;
    content: "" !important;
}

/* Custom separator for non-last items */
.breadcrumb-item:not(:last-child)::after {
    content: "→" !important;
    display: inline-flex !important;
    align-items: center !important;
    margin-left: 0.75rem !important;
    color: #d4af37 !important;
    font-weight: bold !important;
    font-size: 1.1rem !important;
    line-height: 1 !important;
}

/* Breadcrumb Links */
.breadcrumb-item a {
    color: var(--breadcrumb-link-color) !important;
    text-decoration: none !important;
    padding: 0.5rem 0.75rem !important;
    border-radius: 6px !important;
    transition: all 0.3s ease !important;
    display: inline-flex !important;
    align-items: center !important;
    gap: 0.5rem !important;
    font-weight: 500 !important;
    background: transparent !important;
    border: 1px solid transparent !important;
    pointer-events: auto !important;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus {
    color: white !important;
    background: linear-gradient(135deg, #7C0A02, #a01209) !important;
    text-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
    transform: translateY(-2px) !important;
    box-shadow: 0 4px 15px rgba(124, 10, 2, 0.3) !important;
    text-decoration: none !important;
    border-color: #d4af37 !important;
}

/* Active (current page) item */
.breadcrumb-item.active {
    color: #333 !important;
    font-weight: 600 !important;
    pointer-events: auto !important;
}

.breadcrumb-item.active span {
    color: #333 !important;
    font-weight: 600 !important;
    padding: 0.5rem 0.75rem !important;
    background: transparent !important;
    border-radius: 6px !important;
    border: none !important;
    pointer-events: auto !important;
}

/* Home icon styling */
.breadcrumb-item.home-item .fas.fa-home {
    color: #7C0A02 !important;
    font-size: 1rem !important;
    margin-right: 0.25rem !important;
}

.breadcrumb-item.home-item a:hover .fas.fa-home {
    color: white !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .breadcrumb-navigation {
        padding: 1rem 0 !important;
        margin-bottom: 1.5rem !important;
    }
    
    .breadcrumb {
        font-size: 0.9rem !important;
    }
    
    .breadcrumb-item {
        font-size: 0.85rem !important;
        margin-right: 1rem !important;
    }
    
    .breadcrumb-item:not(:last-child)::after {
        margin-left: 0.5rem !important;
        font-size: 1rem !important;
    }
    
    .breadcrumb-item a,
    .breadcrumb-item.active span {
        padding: 0.4rem 0.6rem !important;
    }
}

@media (max-width: 480px) {
    .breadcrumb-navigation {
        padding: 0.75rem 0 !important;
        margin-bottom: 1rem !important;
    }
    
    .breadcrumb {
        font-size: 0.8rem !important;
        flex-wrap: wrap !important;
    }
    
    .breadcrumb-item {
        font-size: 0.8rem !important;
        margin-right: 0.75rem !important;
        margin-bottom: 0.25rem !important;
    }
    
    .breadcrumb-item:not(:last-child)::after {
        margin-left: 0.4rem !important;
        font-size: 0.9rem !important;
    }
    
    .breadcrumb-item a,
    .breadcrumb-item.active span {
        padding: 0.3rem 0.5rem !important;
        font-size: 0.8rem !important;
    }
}

/* Print Styles */
@media print {
    .breadcrumb-navigation {
        background: none !important;
        border: none !important;
        padding: 0.5rem 0 !important;
        margin-bottom: 1rem !important;
    }
    
    .breadcrumb-navigation::before {
        display: none !important;
    }
    
    .breadcrumb-item a {
        color: #000 !important;
        background: none !important;
        box-shadow: none !important;
        text-decoration: underline !important;
    }
    
    .breadcrumb-item:not(:last-child)::after {
        color: #000 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: high) {
    .breadcrumb-navigation {
        background: #fff !important;
        border-color: #000 !important;
    }
    
    .breadcrumb-item a {
        color: #000 !important;
        border-color: #000 !important;
    }
    
    .breadcrumb-item a:hover,
    .breadcrumb-item a:focus {
        background: #000 !important;
        color: #fff !important;
    }
    
    .breadcrumb-item.active span {
        background: #f0f0f0 !important;
        border-color: #000 !important;
        color: #000 !important;
    }
}

/* Reduced Motion Support */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb-item a {
        transition: none !important;
    }
    
    .breadcrumb-item a:hover,
    .breadcrumb-item a:focus {
        transform: none !important;
    }
}

/* Focus Management for Screen Readers */
.breadcrumb-item a:focus {
    outline: 2px solid #d4af37 !important;
    outline-offset: 2px !important;
}

/* Ensure breadcrumb is always visible and accessible */
.breadcrumb-navigation {
    isolation: isolate;
}

/* Override any Bootstrap or framework breadcrumb styles */
.breadcrumb > li + li:before,
.breadcrumb-item + .breadcrumb-item:before {
    display: none !important;
    content: none !important;
}

/* Force consistency across all pages */
body .breadcrumb-navigation,
main .breadcrumb-navigation,
section .breadcrumb-navigation,
div .breadcrumb-navigation {
    /* Reset any inherited styles */
    font-family: 'Playfair Display', serif !important;
    color: initial !important;
    background: linear-gradient(135deg, rgba(242, 227, 198, 0.1), rgba(255, 255, 255, 0.05)) !important;
}

/* Specific overrides for any conflicting styles */
.luxury-product-breadcrumb-container,
.product-breadcrumb-container,
nav[aria-label="breadcrumb"].product-breadcrumb-container,
nav[aria-label="breadcrumb"].luxury-product-breadcrumb-container {
    /* This will be replaced by the unified breadcrumb component */
    display: none !important;
}

/* Ensure the new breadcrumb component takes precedence */
.breadcrumb-navigation {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}