/* ============================================
   BREADCRUMBS — proposed canonical (.breadcrumbs-next)
   Replaces three near-identical .breadcrumb definitions
   that diverged across docs.css, product-news.css, and
   location-detail.css. One rule set + a CSS-only chevron
   separator auto-injected between items via ::after, plus
   a --custom-separator escape hatch for cases where the
   consumer wants a manual separator slot.
   ============================================ */
.breadcrumbs-next {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-sm);
    font-size: var(--font-md);
    color: var(--color-text-muted);
    line-height: var(--line-normal);
}

.breadcrumbs-next a {
    color: var(--color-text-secondary);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: color var(--transition-fast), border-color var(--transition-fast);
}

.breadcrumbs-next a:hover {
    color: var(--color-primary);
    border-bottom-color: rgba(var(--color-primary-rgb), 0.4);
}

.breadcrumbs-next a:focus-visible {
    outline: 2px solid var(--color-primary);
    outline-offset: 2px;
    border-bottom-color: transparent;
}

/* Current page — the last (non-link) crumb. Slightly brighter +
   medium weight so the user can read where they are at a glance. */
.breadcrumbs-next-current {
    color: var(--color-text);
    font-weight: 500;
}

/* Auto-separator — CSS-only chevron drawn via two rotated borders.
   Sits after every item except the last via :not(:last-child). No
   SVG, no extra DOM. Crisp at any size, follows currentColor via
   border-color. */
.breadcrumbs-next > *:not(:last-child)::after {
    content: '';
    display: inline-block;
    width: 6px;
    height: 6px;
    margin-left: var(--space-sm);
    border-right: 1.5px solid currentColor;
    border-bottom: 1.5px solid currentColor;
    transform: rotate(-45deg);
    transform-origin: center;
    vertical-align: middle;
    opacity: 0.55;
    color: var(--color-text-muted);
}

/* --- Custom separator escape hatch ---
   For markup with explicit separator <span>s (legacy patterns,
   custom characters, emoji, slashes…). Disables the auto chevron
   and styles consumer-supplied .breadcrumbs-next-separator slots. */
.breadcrumbs-next--custom-separator > *:not(:last-child)::after {
    content: none;
}

.breadcrumbs-next-separator {
    color: var(--color-text-muted);
    opacity: 0.55;
    user-select: none;
}

/* --- Size: --sm — for compact contexts (footer, side rails) --- */
.breadcrumbs-next--sm {
    font-size: var(--font-sm);
    gap: var(--space-xs);
}

.breadcrumbs-next--sm > *:not(:last-child)::after {
    width: 5px;
    height: 5px;
    margin-left: var(--space-xs);
    border-right-width: 1px;
    border-bottom-width: 1px;
}

/* --- Reduced motion --- */
@media (prefers-reduced-motion: reduce) {
    .breadcrumbs-next a { transition-duration: 0.01ms; }
}