/* ============================================================================
   OnlyPedia — Breadcrumbs
   Portable, theme-aware, self-contained. Uses the --op-* design tokens from
   header-styles.css. Separators are CSS-drawn chevrons (never read by screen
   readers). Single-line, horizontally scrollable on small screens so a long
   trail never wraps into an ugly stack.
   ============================================================================ */

.op-bc-nav {
    width: 100%;
    margin-bottom: 14px; /* breathing room before the page title/content below */
    /* Let the trail scroll sideways instead of wrapping; hide the scrollbar. */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;              /* Firefox */
    -webkit-mask-image: none;
}
.op-bc-nav::-webkit-scrollbar { display: none; }   /* WebKit */

.op-bc {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    align-items: center;
    flex-wrap: nowrap;
    white-space: nowrap;
    gap: 0;
    font-family: 'Roboto', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    font-size: 13px;
    line-height: 1.2;
}

.op-bc__item {
    display: inline-flex;
    align-items: center;
    min-width: 0;                        /* allows the current label to ellipsize */
}

/* CSS-drawn chevron separator before every crumb except the first. Decorative,
   so it lives in a pseudo-element and is invisible to assistive tech. */
.op-bc__item:not(:first-child)::before {
    content: '';
    flex: 0 0 auto;
    width: 6px; height: 6px;
    margin: 0 10px;
    border-right: 1.6px solid currentColor;
    border-bottom: 1.6px solid currentColor;
    transform: rotate(-45deg);
    color: var(--op-text-muted, #aeaeb2);
    opacity: 0.75;
}

.op-bc__link {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--op-text-secondary, #6e6e80);
    text-decoration: none;
    padding: 3px 2px;
    border-radius: 6px;
    transition: color 0.18s ease;
}
.op-bc__link:hover,
.op-bc__link:focus-visible {
    color: var(--op-accent, #f857a6);
    text-decoration: none;
}
.op-bc__link:focus-visible {
    outline: 2px solid var(--op-accent, #f857a6);
    outline-offset: 2px;
}

.op-bc__home {
    flex: 0 0 auto;
    display: block;
    margin-top: -1px;                    /* optical centering with the text */
}

/* Current page — text, not a link. Strongest weight/colour; ellipsizes if long. */
.op-bc__current {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    color: var(--op-text-primary, #1a1a2e);
    font-weight: 600;
    padding: 3px 2px;
    min-width: 0;
}
.op-bc__current .op-bc__label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 42ch;
}

.op-bc__label { min-width: 0; }

/* ---- Mobile: keep it single-line, tighten, and let it scroll ------------- */
@media (max-width: 600px) {
    .op-bc { font-size: 12.5px; }
    .op-bc__item:not(:first-child)::before { margin: 0 7px; }
    /* Hide the "Home" word (keep the house icon) to save width on small screens. */
    .op-bc__item:first-child .op-bc__label { display: none; }
    .op-bc__current .op-bc__label { max-width: 22ch; }
    /* Soft fade at the right edge hints there's more to scroll toward. */
    .op-bc-nav {
        -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
                mask-image: linear-gradient(to right, #000 calc(100% - 22px), transparent);
    }
}

@media (prefers-reduced-motion: reduce) {
    .op-bc__link { transition: none; }
}