/**
 * BREADCRUMBS COMPONENT - UNIFIED VERSION 2.0
 * ============================================
 *
 * ✅ 100% BEM Methodology
 * ✅ CSS Variables from Design System
 * ✅ Full WCAG 2.1 AA Accessibility
 * ✅ Responsive (mobile-first)
 * ✅ Print-friendly
 * ✅ Dark mode support
 * ✅ Schema.org structured data
 *
 * @version 2.0.0
 * @author Suite Education Team
 */

/* ==========================================================================
   CONTAINER
   ========================================================================== */

.breadcrumb-nav {
    margin: 0 auto var(--spacing-6, 1.5rem) auto;
    padding: 0 var(--spacing-6, 1.5rem);
    max-width: 1400px;
}

/* ==========================================================================
   BREADCRUMB LIST
   ========================================================================== */

.breadcrumb {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--spacing-2, 0.5rem);
    list-style: none;
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    margin: 0;
    background: rgba(255, 255, 255, 0.7);
    backdrop-filter: blur(8px);
    border-radius: var(--radius-lg, 0.75rem);
    font-size: var(--text-sm, 0.875rem);
    line-height: 1.5;
}

/* Variant: Glass (for backgrounds with images) */
.breadcrumb--glass {
    background: rgba(255, 255, 255, 0.9);
    backdrop-filter: blur(20px) saturate(180%);
    border: 1px solid rgba(0, 73, 255, 0.12);
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: 0 8px 32px rgba(0, 73, 255, 0.15);
}

/* Variant: Card (for visual separation) */
.breadcrumb--card {
    background: var(--color-white, #ffffff);
    border: 1px solid var(--color-gray-200, #e5e7eb);
    padding: var(--spacing-4, 1rem) var(--spacing-5, 1.25rem);
    border-radius: var(--radius-lg, 0.75rem);
    box-shadow: var(--shadow-sm, 0 1px 3px rgba(0, 0, 0, 0.05));
}

/* ==========================================================================
   BREADCRUMB ITEMS
   ========================================================================== */

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
}

/* ==========================================================================
   BREADCRUMB LINKS
   ========================================================================== */

.breadcrumb__link {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    text-decoration: none;
    color: #374151 !important;
    font-weight: 500 !important;
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
    border-radius: var(--radius-md, 0.375rem);
    transition: all var(--transition-base, 150ms ease);
}

.breadcrumb__link:hover {
    color: var(--color-primary-600, #0049ff);
    background-color: var(--color-primary-50, #e6f0ff);
}

.breadcrumb__link:focus {
    outline: 2px solid var(--color-primary-600, #0049ff);
    outline-offset: 2px;
}

.breadcrumb__link:active {
    transform: scale(0.98);
}

/* ==========================================================================
   BREADCRUMB ICONS
   ========================================================================== */

.breadcrumb__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-base, 1rem);
    line-height: 1;
}

/* Emoji icons */
.breadcrumb__link .breadcrumb__icon,
.breadcrumb__current .breadcrumb__icon {
    font-size: var(--text-lg, 1.125rem);
}

/* FontAwesome icons */
.breadcrumb__link .breadcrumb__icon i,
.breadcrumb__current .breadcrumb__icon i {
    font-size: var(--text-sm, 0.875rem);
}

/* ==========================================================================
   BREADCRUMB TEXT
   ========================================================================== */

.breadcrumb__text {
    font-size: var(--text-sm, 0.875rem);
    white-space: nowrap;
}

/* ==========================================================================
   SEPARATOR
   ========================================================================== */

.breadcrumb__separator {
    color: #9ca3af !important;
    font-size: var(--text-sm, 0.875rem);
    font-weight: var(--font-normal, 400);
    user-select: none;
    pointer-events: none;
    margin: 0 var(--spacing-1, 0.25rem);
}

/* ==========================================================================
   CURRENT PAGE
   ========================================================================== */

.breadcrumb__current {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-2, 0.5rem);
    color: #374151 !important;
    font-weight: 600 !important;
    padding: var(--spacing-1, 0.25rem) var(--spacing-2, 0.5rem);
}

/* ==========================================================================
   RESPONSIVE (Mobile-First)
   ========================================================================== */

/* Small devices (phones, less than 640px) */
@media (max-width: 640px) {
    .breadcrumb-nav {
        padding: 0 var(--spacing-4, 1rem);
    }

    .breadcrumb {
        padding: var(--spacing-2, 0.5rem) 0;
        font-size: var(--text-xs, 0.8125rem);
    }

    .breadcrumb--glass,
    .breadcrumb--card {
        padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
    }

    .breadcrumb__link,
    .breadcrumb__current {
        gap: var(--spacing-1, 0.25rem);
    }

    .breadcrumb__icon {
        font-size: var(--text-base, 1rem);
    }

    .breadcrumb__text {
        font-size: var(--text-xs, 0.8125rem);
    }

    /* Option: Hide text on very small screens, show only icons */
    .breadcrumb--icons-only .breadcrumb__text {
        position: absolute;
        width: 1px;
        height: 1px;
        padding: 0;
        margin: -1px;
        overflow: hidden;
        clip: rect(0, 0, 0, 0);
        white-space: nowrap;
        border: 0;
    }

    .breadcrumb--icons-only .breadcrumb__icon {
        font-size: var(--text-lg, 1.125rem);
    }
}

/* Extra small devices (phones in portrait, less than 480px) */
@media (max-width: 480px) {
    .breadcrumb-nav {
        padding: 0 var(--spacing-3, 0.75rem);
    }

    .breadcrumb {
        gap: var(--spacing-1, 0.25rem);
    }

    .breadcrumb__separator {
        margin: 0;
    }
}

/* Medium devices (tablets, 768px and up) */
@media (min-width: 768px) {
    .breadcrumb-nav {
        margin-bottom: var(--spacing-8, 2rem);
    }
}

/* ==========================================================================
   DARK MODE SUPPORT
   ========================================================================== */

@media (prefers-color-scheme: dark) {
    .breadcrumb__link {
        color: var(--color-gray-400, #9ca3af);
    }

    .breadcrumb__link:hover {
        color: var(--color-primary-400, #60a5fa);
        background-color: rgba(96, 165, 250, 0.1);
    }

    .breadcrumb__separator {
        color: var(--color-gray-600, #4b5563);
    }

    .breadcrumb__current {
        color: var(--color-gray-100, #f3f4f6);
    }

    .breadcrumb--glass {
        background: rgba(31, 41, 55, 0.9);
        border-color: rgba(255, 255, 255, 0.1);
    }

    .breadcrumb--card {
        background: var(--color-gray-800, #1f2937);
        border-color: var(--color-gray-700, #374151);
    }
}

/* ==========================================================================
   PRINT STYLES
   ========================================================================== */

@media print {
    .breadcrumb-nav {
        padding: 0;
        margin-bottom: 1rem;
    }

    .breadcrumb {
        padding: 0.5rem 0;
        background: transparent !important;
        border: none !important;
        box-shadow: none !important;
    }

    .breadcrumb__link {
        color: #000;
        text-decoration: underline;
        padding: 0;
    }

    .breadcrumb__link:hover {
        background: none;
    }

    .breadcrumb__separator {
        color: #666;
    }

    .breadcrumb__current {
        color: #000;
        font-weight: 700;
        padding: 0;
    }

    .breadcrumb__icon {
        display: none;
    }
}

/* ==========================================================================
   ACCESSIBILITY
   ========================================================================== */

/* Focus visible (for keyboard navigation) */
.breadcrumb__link:focus-visible {
    outline: 2px solid var(--color-primary-600, #0049ff);
    outline-offset: 2px;
    border-radius: var(--radius-md, 0.375rem);
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
    .breadcrumb__link {
        transition: none;
    }

    .breadcrumb__link:active {
        transform: none;
    }
}

/* High contrast mode */
@media (prefers-contrast: high) {
    .breadcrumb__link {
        text-decoration: underline;
    }

    .breadcrumb__link:hover {
        text-decoration: none;
        background-color: transparent;
        font-weight: 700;
    }

    .breadcrumb--glass,
    .breadcrumb--card {
        border-width: 2px;
    }
}

/* Screen reader only text */
.sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/* ==========================================================================
   UTILITIES
   ========================================================================== */

/* Compact variant (less spacing) */
.breadcrumb--compact {
    padding: var(--spacing-2, 0.5rem) 0;
    gap: var(--spacing-1, 0.25rem);
}

.breadcrumb--compact.breadcrumb--glass,
.breadcrumb--compact.breadcrumb--card {
    padding: var(--spacing-3, 0.75rem) var(--spacing-4, 1rem);
}

/* Larger variant (more prominence) */
.breadcrumb--large {
    padding: var(--spacing-4, 1rem) 0;
}

.breadcrumb--large .breadcrumb__text {
    font-size: var(--text-base, 1rem);
}

.breadcrumb--large .breadcrumb__icon {
    font-size: var(--text-xl, 1.25rem);
}

/* Colorful variant (with primary color) */
.breadcrumb--colorful .breadcrumb__link {
    color: var(--color-primary-700, #0039cc);
}

.breadcrumb--colorful .breadcrumb__link:hover {
    color: var(--color-primary-800, #002999);
    background-color: var(--color-primary-100, #cce0ff);
}

.breadcrumb--colorful .breadcrumb__current {
    color: var(--color-primary-900, #001966);
}