/* ═══════════════════════════════════════════════════════════════════════════
   Breadcrumb — single source of truth for all pages.
   Usage: {% include "components/breadcrumb.html" %}
   Context: breadcrumb_items — list of {"label": str, "url": str (omit for current)}
   ═══════════════════════════════════════════════════════════════════════════ */

.breadcrumb {
    margin: 0;
}

.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-1);
    list-style: none;
    padding: 0;
    margin: 0;
    font-size: var(--text-sm);
    color: var(--text-muted);
}

.breadcrumb__item {
    display: flex;
    align-items: center;
    gap: var(--space-1);
}

/* Separator before every item except the first */
.breadcrumb__item + .breadcrumb__item::before {
    content: '/';
    color: var(--border-medium);
    user-select: none;
}

.breadcrumb__link {
    color: var(--text-secondary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.breadcrumb__link:hover { color: var(--accent-gold); }

.breadcrumb__link:focus-visible {
    outline: 2px solid var(--accent-gold);
    outline-offset: 2px;
    border-radius: var(--radius-sm);
}

.breadcrumb__item--current {
    color: var(--text-primary);
    font-weight: 500;
}