/* lib/styles/components/breadcrumbs.css */

/* =============================================================================
   BREADCRUMB — lib/components/navigation/breadcrumb.dart
   Brand Palette: Inter 14px 
   Light mode: Soft Gray #64748B ancestors | Deep Trust Blue #0D3557 current
   Hover/Focus: Calm Teal #0E9E8E
   ============================================================================= */

/* 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: #64748B; /* Soft Gray */
    text-decoration: none;
    border-radius: 3px;
    white-space: nowrap;
    transition: color var(--motion-fast);
}

.breadcrumb__link:hover {
    color: #0E9E8E; /* Calm Teal on hover */
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-color: rgba(14, 158, 142, 0.60);
}

.breadcrumb__link:focus-visible {
    outline: 2px solid #0E9E8E; /* Calm Teal focus ring */
    outline-offset: 3px;
}

/* ---- Chevron separator ---- */
.breadcrumb__separator {
    font-size: 10px;
    color: #94A3B8; /* Lighter 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: #0D3557; /* Deep Trust Blue */
    white-space: nowrap;
    margin-left: 8px; /* Prevent current label from wrapping mid-word */
}

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

.breadcrumb--dark .breadcrumb__link {
    color: rgba(248, 250, 251, 0.70); /* Off White at 70% */
}

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

.breadcrumb--dark .breadcrumb__separator {
    color: rgba(248, 250, 251, 0.35); /* Subtle on dark background */
}

.breadcrumb--dark .breadcrumb__current {
    color: #FFFFFF; /* Full opacity Off White/White 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;
    }
}