/*
 * Breadcrumb trail
 *
 * Colour is inherited rather than set, so the trail reads correctly whichever
 * section it lands under. Sections here carry their own text colour classes
 * (imt-text-color-default, imt-text-color-light), and hardcoding a value would
 * break the trail on any dark hero.
 *
 * Sizing and spacing use the theme's existing custom properties, with fallbacks
 * in case the trail is ever rendered outside the theme.
 */

/*
 * Side padding matches --imt--section--padding, and the inner max-width matches
 * the section content width, so the trail lines up with the section above and
 * below it. Both are set here rather than borrowed from .imt-content, because
 * that rule is scoped to a .imt-section ancestor this nav does not have.
 */
.jsz-breadcrumbs {
    font-size: calc(var(--wp--custom--imt--font-size, 1rem) * 0.875);
    font-weight: var(--wp--custom--imt--font-weight, 300);
    line-height: 1.4;
    padding-top: calc(var(--wp--custom--imt--spacer, 16px) * 0.875);
    padding-bottom: calc(var(--wp--custom--imt--spacer, 16px) * 0.875);
    padding-left: calc(var(--wp--custom--imt--spacer, 16px) * 2);
    padding-right: calc(var(--wp--custom--imt--spacer, 16px) * 2);
    color: inherit;
}

.jsz-breadcrumbs__inner {
    max-width: var(--wp--custom--imt--section--content-width--max--lg, 1200px);
    margin-left: auto;
    margin-right: auto;
}

.jsz-breadcrumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: calc(var(--wp--custom--imt--spacer, 16px) * 0.5);
    margin: 0;
    padding: 0;
    list-style: none;
}

.jsz-breadcrumbs__item {
    display: flex;
    align-items: center;
    gap: calc(var(--wp--custom--imt--spacer, 16px) * 0.5);
}

/*
 * Separator as generated content keeps it out of the markup. The second
 * declaration supplies empty alternative text so screen readers skip it, and
 * browsers that cannot parse that syntax fall back to the first.
 */
.jsz-breadcrumbs__item + .jsz-breadcrumbs__item::before {
    content: "/";
    content: "/" / "";
    opacity: 0.45;
}

.jsz-breadcrumbs__link {
    color: inherit;
    text-decoration: none;
    opacity: 0.7;
    transition: opacity 0.15s ease;
}

.jsz-breadcrumbs__link:hover,
.jsz-breadcrumbs__link:focus-visible {
    opacity: 1;
    text-decoration: underline;
    text-underline-offset: 0.2em;
}

/* Unlinked middle crumb. Present for orientation, not interactive. */
.jsz-breadcrumbs__text {
    opacity: 0.7;
}

.jsz-breadcrumbs__current {
    opacity: 1;
}

@media (prefers-reduced-motion: reduce) {
    .jsz-breadcrumbs__link {
        transition: none;
    }
}