/**
 * Sitewide breadcrumb bar, based on the Location trail's visual language.
 * Loaded by inc/breadcrumbs.php after the theme styles. Keep these tokens
 * local: the bar is outside the .ks-blog/.ks-loc design-system scopes.
 */
.ks-breadcrumb-bar {
    --ks-crumb-bg: #102694;
    --ks-crumb-link: #c9d3ff;
    --ks-crumb-current: #ffffff;
    --ks-crumb-accent: #ffcc00;
    --ks-crumb-border: rgba(201, 211, 255, 0.25);
    --ks-crumb-separator: #8899d5;
    box-sizing: border-box;
    width: 100%;
    margin: 0;
    border-block-start: 1px solid var(--ks-crumb-border);
    background: var(--ks-crumb-bg);
    color: var(--ks-crumb-current);
    font-family: "Open Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
    font-size: 0.9375rem;
    font-weight: 400;
    line-height: 1.5;
    letter-spacing: normal;
    text-transform: none;
}

/* Separate the breadcrumb from a navy hero that touches its bottom edge. */
.ks-breadcrumb-bar:has(+ .content_container > .banner.very_top:first-child),
.ks-breadcrumb-bar:has(+ .content_container > .ks-loc > .loc-hero-band:first-child) {
    border-block-end: 1px solid var(--ks-crumb-border);
}

.ks-breadcrumb-bar *,
.ks-breadcrumb-bar *::before {
    box-sizing: border-box;
}

.ks-breadcrumb-bar__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 0.5rem 1rem;
    width: 100%;
    max-width: 1450px;
    margin-inline: auto;
    padding: 1rem 20px;
}

.ks-breadcrumb-bar__trail {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 100%;
}

.ks-breadcrumb-bar__scroll-shell { position: relative; }

.ks-breadcrumb-bar .ks-breadcrumb-bar__list {
    display: flex;
    flex: 1 1 auto;
    flex-wrap: wrap;
    min-width: 0;
    max-width: 100%;
    align-items: flex-start;
    gap: 0.35rem 0.7rem;
    margin: 0;
    padding: 0;
    list-style: none;
    font: inherit;
}

.ks-breadcrumb-bar .ks-breadcrumb-bar__label {
    display: inline-flex;
    align-items: baseline;
    gap: 0.5rem;
    flex-shrink: 0;
    max-width: 100%;
    margin: 0;
    color: var(--ks-crumb-accent);
    font: inherit;
    font-size: 0.75rem;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    overflow-wrap: anywhere;
}

.ks-breadcrumb-bar__arrow {
    font-size: 1rem;
    font-weight: 400;
    line-height: 1;
    letter-spacing: 0;
}

.ks-breadcrumb-bar__item {
    display: flex;
    align-items: baseline;
    gap: 0.7rem;
    min-width: 0;
    max-width: 100%;
    margin: 0;
    padding: 0;
}

/* Decorative slash drawn with a border: no generated text for screen readers. */
.ks-breadcrumb-bar__item + .ks-breadcrumb-bar__item::before {
    content: "";
    flex: 0 0 auto;
    align-self: flex-start;
    height: 0.85em;
    margin-block-start: 0.35em;
    border-inline-start: 1px solid var(--ks-crumb-separator);
    transform: rotate(20deg);
}

.ks-breadcrumb-bar a,
.ks-breadcrumb-bar__item > span {
    min-width: 0;
    overflow-wrap: anywhere;
}

.ks-breadcrumb-bar a {
    color: var(--ks-crumb-link);
    text-decoration: none;
    text-underline-offset: 0.2em;
    /* Override the theme's global all-property transition for an immediate focus ring. */
    transition: color 0.15s ease !important;
}

.ks-breadcrumb-bar a:hover {
    color: var(--ks-crumb-accent);
    text-decoration: underline;
}

.ks-breadcrumb-bar a:focus-visible {
    color: var(--ks-crumb-accent);
    /* The theme globally applies a { outline: none !important; }. */
    outline: 2px solid var(--ks-crumb-accent) !important;
    outline-offset: 3px;
    text-decoration: underline;
}

.ks-breadcrumb-bar [aria-current="page"] {
    color: var(--ks-crumb-current);
    font-weight: 600;
}

/* Match the compact header; scrolling remains native for touch and trackpads. */
@media (max-width: 79.99rem) {
    .ks-breadcrumb-bar__inner { flex-direction: column; align-items: stretch; gap: 0.375rem; }
    .ks-breadcrumb-bar__arrow { display: none; }
    .ks-breadcrumb-bar .ks-breadcrumb-bar__list {
        flex-wrap: nowrap;
        overflow-x: auto;
        overflow-y: hidden;
        overscroll-behavior-inline: contain;
        scroll-padding-inline: 5px;
        padding-block: 5px;
    }
    .ks-breadcrumb-bar__item { flex: 0 0 auto; max-width: none; white-space: nowrap; }
    .ks-breadcrumb-bar a, .ks-breadcrumb-bar__item > span { overflow-wrap: normal; white-space: nowrap; }
    /* Without the enhancement, the native scrollbar remains available. */
    .ks-breadcrumb-bar.is-enhanced .ks-breadcrumb-bar__list { scrollbar-width: none; }
    .ks-breadcrumb-bar.is-enhanced .ks-breadcrumb-bar__list::-webkit-scrollbar { display: none; }
    .ks-breadcrumb-bar .ks-breadcrumb-bar__list:focus-visible,
    .ks-breadcrumb-bar a:focus-visible { outline: 2px solid var(--ks-crumb-accent) !important; outline-offset: -2px; }
    .ks-breadcrumb-bar__scroll-shell::before,
    .ks-breadcrumb-bar__scroll-shell::after {
        content: "";
        position: absolute;
        inset-block: 0;
        z-index: 1;
        width: 24px;
        opacity: 0;
        pointer-events: none;
    }
    .ks-breadcrumb-bar__scroll-shell::before { inset-inline-start: 0; background: linear-gradient(to right, var(--ks-crumb-bg), transparent); }
    .ks-breadcrumb-bar__scroll-shell::after { inset-inline-end: 0; background: linear-gradient(to left, var(--ks-crumb-bg), transparent); }
    .ks-breadcrumb-bar.can-scroll-start .ks-breadcrumb-bar__scroll-shell::before,
    .ks-breadcrumb-bar.can-scroll-end .ks-breadcrumb-bar__scroll-shell::after { opacity: 1; }
    .ks-breadcrumb-bar__scroll-shell:focus-within::before,
    .ks-breadcrumb-bar__scroll-shell:focus-within::after { opacity: 0; }
}

@media (max-width: 640px) {
    .ks-breadcrumb-bar {
        font-size: 0.875rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .ks-breadcrumb-bar a {
        transition: none !important;
    }
}

@media (forced-colors: active) {
    .ks-breadcrumb-bar {
        background: Canvas;
        color: CanvasText;
        border-color: CanvasText;
    }

    .ks-breadcrumb-bar a {
        color: LinkText;
    }

    .ks-breadcrumb-bar [aria-current="page"] {
        color: CanvasText;
    }

    .ks-breadcrumb-bar__item + .ks-breadcrumb-bar__item::before {
        border-color: CanvasText;
    }

    .ks-breadcrumb-bar a:focus-visible {
        color: LinkText;
        outline-color: Highlight !important;
    }

    .ks-breadcrumb-bar__scroll-shell::before,
    .ks-breadcrumb-bar__scroll-shell::after { display: none; }
    .ks-breadcrumb-bar .ks-breadcrumb-bar__list:focus-visible { outline-color: Highlight !important; }
}