/* =============================================================================
   lib/styles/components/breadcrumbs.css — Filtra-Core Breadcrumb Styles
   ============================================================================= */

.breadcrumb--empty { display: none; }
.breadcrumb { display: block; width: 100%; }

.breadcrumb__list {
    display: flex; align-items: center; flex-wrap: wrap; gap: 0;
    list-style: none; margin: 0; padding: 0;
}

.breadcrumb__item { display: inline-flex; align-items: center; gap: 6px; }

.breadcrumb__link {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 500;
    color: #6B7280; /* Medium Gray */
    text-decoration: none;
    border-radius: 3px;
    white-space: nowrap;
    transition: color 150ms ease-out;
}

.breadcrumb__link:hover {
    color: var(--color-accent, #00B4D8);
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(0, 180, 216, 0.60);
}

.breadcrumb__link:focus-visible { outline: 2px solid var(--color-accent, #00B4D8); outline-offset: 3px; }

.breadcrumb__separator {
    font-size: 10px;
    color: #6B7280;
    line-height: 1;
    flex-shrink: 0;
    margin: 0 2px;
}

.breadcrumb__current {
    font-family: var(--font-sans, 'Inter', sans-serif);
    font-size: 14px;
    font-weight: 700;
    color: var(--color-primary, #0A192F);
    white-space: nowrap;
    margin-left: 10px;
}

/* =============================================================================
   DARK VARIANT (For deep navy headers)
   ============================================================================= */
.breadcrumb--dark .breadcrumb__link { color: rgba(243, 244, 246, 0.7); }
.breadcrumb--dark .breadcrumb__link:hover { color: var(--color-accent, #00B4D8); text-decoration-color: rgba(0, 180, 216, 0.50); }
.breadcrumb--dark .breadcrumb__separator { color: rgba(243, 244, 246, 0.4); }
.breadcrumb--dark .breadcrumb__current { color: #FFFFFF; }

@media (max-width: 639px) {
    .breadcrumb__link, .breadcrumb__current { font-size: 13px; }
    .breadcrumb__separator { font-size: 9px; margin: 0 1px; }
}