/* Enhanced Breadcrumb Styling for TCL Website - Modern Design */

/* Breadcrumb Container - Glass Morphism Design */
.breadcrumb {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    border: 1px solid var(--neutral-200, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
    list-style: none !important;
}

/* Breadcrumb Links */
.breadcrumb-item a {
    color: var(--primary, #004d99) !important;
    text-decoration: none !important;
    font-weight: 500 !important;
    transition: color 0.3s ease !important;
}

.breadcrumb-item a:hover {
    color: var(--primary-light, #0066cc) !important;
    text-decoration: underline !important;
}

/* Active Breadcrumb Item */
.breadcrumb-item.active {
    color: #2c3e50 !important;
    font-weight: 600 !important;
}

/* Breadcrumb Separators */
.breadcrumb-item + .breadcrumb-item::before {
    color: #6c757d !important;
    content: "›" !important;
    font-weight: bold !important;
    margin: 0 0.5rem !important;
}

/* Ensure all breadcrumb text is visible */
.breadcrumb-item,
.breadcrumb-item span {
    color: #2c3e50 !important;
}

/* Override any conflicting styles */
.breadcrumb-item a {
    color: var(--primary, #004d99) !important;
}

/* Responsive Design */
@media (max-width: 768px) {
    .breadcrumb {
        padding: 0.5rem 0.75rem !important;
        margin-bottom: 1rem !important;
        font-size: 0.9rem !important;
    }
}

/* Print Styles */
@media print {
    .breadcrumb {
        background: none !important;
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    .breadcrumb-item a {
        color: #000 !important;
    }
    
    .breadcrumb-item.active {
        color: #000 !important;
    }
}

/* High Contrast Mode Support */
@media (prefers-contrast: more) {
    .breadcrumb {
        background-color: #ffffff !important;
        border: 2px solid #000000 !important;
    }
    
    .breadcrumb-item a {
        color: #0000ff !important;
    }
    
    .breadcrumb-item.active {
        color: #000000 !important;
    }
    
    .breadcrumb-item + .breadcrumb-item::before {
        color: #000000 !important;
    }
}

/* Focus States for Accessibility */
.breadcrumb-item a:focus {
    outline: 3px solid rgba(0, 77, 153, 0.3) !important;
    outline-offset: 2px !important;
    border-radius: 2px !important;
}

/* Ensure consistent styling across different page templates */
nav[aria-label="breadcrumb"] .breadcrumb,
nav[aria-label="Breadcrumb"] .breadcrumb {
    background-color: rgba(255, 255, 255, 0.9) !important;
    backdrop-filter: blur(10px) !important;
    border: 1px solid var(--neutral-200, #e5e7eb) !important;
    border-radius: 8px !important;
    padding: 0.75rem 1rem !important;
    margin-bottom: 1.5rem !important;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}