/* =============================================================================
   BREADCRUMB — lib/components/navigation/breadcrumb.dart
   Spec: Inter 14px | Medium Gray #6B7280 ancestors | Deep Navy #0B172A current
         Gold #FFB800 hover | Cyan #00B4E4 focus | fa-chevron-right separator
   ============================================================================= */


/* Invisible placeholder rendered when items.length < 2 */
.breadcrumb--empty {
    display: none;
}


/* <nav> wrapper */
.breadcrumb {
    display: block;
    width: 100%;
}


/* <ol> — horizontal flex row, wraps gracefully on narrow viewports */
.breadcrumb__list {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}


/* Each <li> */
.breadcrumb__item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}


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

.breadcrumb__link:hover {
    color: #FFB800;
    /* Energetic Gold on hover */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(255, 184, 0, 0.60);
}

.breadcrumb__link:focus-visible {
    outline: 2px solid #00B4E4;
    /* Electric Cyan focus ring */
    outline-offset: 3px;
}


/* ---- Chevron separator ---- */
.breadcrumb__separator {
    font-size: 10px;
    color: #6B7280;
    /* Medium Gray */
    line-height: 1;
    flex-shrink: 0;
    margin: 0 2px;
    /* Extra breathing room around the glyph */
}


/* ---- Current page label ---- */
.breadcrumb__item--current {
    /* No separator after the current item — nothing to append */
}

.breadcrumb__current {
    font-family: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif;
    font-size: 14px;
    font-weight: 600;
    /* Semi-Bold — current page is visually prominent */
    color: #0B172A;
    /* Deep Navy Blue */
    white-space: nowrap;
    margin-left: 10px;
    /* Prevent current label from wrapping mid-word */
}


/* =============================================================================
   DARK VARIANT — .breadcrumb--dark
   For use on Deep Navy (#0B172A) background sections / page hero headers.
   ============================================================================= */

.breadcrumb--dark .breadcrumb__link {
    color: rgba(226, 232, 240, 0.55);
    /* Light Steel at 55% — visible but subordinate on navy */
}

.breadcrumb--dark .breadcrumb__link:hover {
    color: #FFB800;
    text-decoration-color: rgba(255, 184, 0, 0.50);
}

.breadcrumb--dark .breadcrumb__separator {
    color: rgba(226, 232, 240, 0.25);
    /* Subtle on dark background */
}

.breadcrumb--dark .breadcrumb__current {
    color: #E2E8F0;
    /* Light Steel — full opacity for current page on dark */
}


/* =============================================================================
   RESPONSIVE — compact on mobile
   ============================================================================= */

@media (max-width: 639px) {

    /* Slightly smaller text on mobile to prevent overflow */
    .breadcrumb__link,
    .breadcrumb__current {
        font-size: 13px;
    }

    .breadcrumb__separator {
        font-size: 9px;
        margin: 0 1px;
    }
}