/* Shared page navigation.
   This file is loaded after page-level styles so every breadcrumb keeps the
   same geometry, color and responsive behavior across the site. */
.page-breadcrumb-bar {
    border-block-end: 1px solid var(--color-border);
    background: #fff;
}

.page-breadcrumb-bar__container {
    width: min(100%, calc(var(--container-width) + (2 * var(--page-gutter))));
    margin-inline: auto;
    padding-inline: var(--page-gutter);
}

.page-breadcrumb {
    padding-block: 10px;
}

.page-breadcrumb ol {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 7px;
    margin: 0;
    padding: 0;
    color: var(--color-muted);
    font-size: .75rem;
    line-height: 1.6;
    list-style: none;
}

.page-breadcrumb li {
    min-width: 0;
}

.page-breadcrumb li + li::before {
    margin-inline-end: 7px;
    color: #b4b7c3;
    content: "/";
}

.page-breadcrumb a {
    color: var(--color-primary);
    transition: color 160ms ease;
}

.page-breadcrumb a:hover,
.page-breadcrumb a:focus-visible {
    color: var(--color-cta);
}

@media (max-width: 1023.98px) {
    .page-breadcrumb a {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        min-inline-size: 44px;
        min-height: 44px;
    }
}

@media (max-width: 639.98px) {
    .page-breadcrumb-bar__container {
        padding-inline: 16px;
    }

    .page-breadcrumb {
        padding-block: 4px;
    }

    .page-breadcrumb ol {
        flex-wrap: nowrap;
        gap: 6px;
        overflow: hidden;
    }

    .page-breadcrumb li {
        flex: 0 0 auto;
    }

    .page-breadcrumb li:last-child {
        overflow: hidden;
        flex: 1 1 auto;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    .page-breadcrumb li + li::before {
        margin-inline-end: 6px;
    }
}