/* /public/css/components/breadcrumbs.css
   Shared breadcrumb component for public-facing pages.
   Members-area breadcrumbs use .header-breadcrumb (in header.css).
   ================================================================ */

/* ── Default: light background (gray text on white) ─────────────── */
.breadcrumb {
    display: flex;
    align-items: center;
    gap: 0;
    font-size: var(--font-size-xs);
    font-weight: 500;
    color: var(--color-gray-400);
    margin: 0;
    padding: 0;
}
.breadcrumb a {
    color: var(--color-gray-500);
    text-decoration: none;
    transition: color 0.15s ease;
}
.breadcrumb a:hover {
    color: var(--color-primary);
    text-decoration: underline;
}
.breadcrumb__sep {
    font-size: 0.5rem;
    color: var(--color-gray-300);
    margin: 0 6px;
}
.breadcrumb__current {
    color: var(--color-gray-500);
}

/* ── ol/li structure support (semantic HTML) ──────────────────── */
.breadcrumb__list {
    display: flex;
    align-items: center;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}
.breadcrumb__list li {
    display: flex;
    align-items: center;
}
.breadcrumb__list li:not(:last-child)::after {
    content: '/';
    font-size: 0.5rem;
    color: var(--color-gray-300);
    margin: 0 6px;
}
.breadcrumb--on-dark .breadcrumb__list li:not(:last-child)::after {
    color: rgba(255, 255, 255, 0.3);
}

/* ── Dark variant: white text on dark backgrounds (e.g. hire hero) ── */
.breadcrumb--on-dark {
    color: rgba(255, 255, 255, 0.55);
}
.breadcrumb--on-dark a {
    color: rgba(255, 255, 255, 0.65);
}
.breadcrumb--on-dark a:hover {
    color: rgba(255, 255, 255, 0.9);
}
.breadcrumb--on-dark .breadcrumb__sep {
    color: rgba(255, 255, 255, 0.3);
}
.breadcrumb--on-dark .breadcrumb__current {
    color: rgba(255, 255, 255, 0.8);
}