/* SchoolCMS – Breadcrumbs (template-parts/breadcrumbs/breadcrumbs.php)
   Burlington House School, Figma `breadcrumbs` 10001:1335: the row between
   the banner photo and the page title – "Home  |  Page Title  |  Sub Page
   Title" in body grey, one <li> per crumb with the bar drawn between them,
   the current page in the same ink. */

/* With no banner above it – the search results – the crumbs row IS the top
   of the page, so it takes the page body's own clearance from the header
   bar (.pageBody, css/base/content.css) rather than the 16 / 22px it sits
   under the banner photo with. */
.site-main > .breadcrumbs:first-child {
    padding-top: var(--space-xl);
}

.breadcrumbs {
    padding: 16px 0 0;
    font:    var(--text-18kl);
    color:   var(--color-grey-800);

    @media (min-width: 992px) {
        padding-top: 22px;
    }

    ul {
        display:     flex;
        flex-wrap:   wrap;
        align-items: center;
        margin:      0;
        padding:     0;
        list-style:  none;
    }

    li {
        display:     inline-flex;
        align-items: center;

        /* the separator – drawn, not typed, so it never wraps away from
           the crumb it belongs to */
        & + li::before {
            content: '|';
            margin:  0 12px;
        }
    }

    a {
        color:                 inherit;
        text-decoration:       underline;
        text-decoration-color: transparent;
        transition:            text-decoration-color var(--transition-base);

        &:hover,
        &:focus-visible {
            color:                 inherit;
            text-decoration-color: currentColor;
        }
    }
}