/*
 * Breadcrumbs — [academics_breadcrumbs].
 *
 * Two looks from one markup, chosen by where the list sits:
 *
 *   in the hero band (desktop, 1095:10361 / 1095:10818): everything
 *   off-white — "All Programs" Barlow ExtraBold 14, the current page
 *   Regular 14, 5% tracking, uppercase, a 2px rule 15 tall between them.
 *   READ OFF THE FRAME'S RENDER, not its layer data: the "All Programs"
 *   text layer reports a Rich Blue fill that a component override paints
 *   over, and building from the layer put a near-invisible navy-on-navy
 *   link in the band for a day (2026-09-23). When a colour looks wrong
 *   against the ground, sample the export.
 *
 *   in the light strip under the band (tablet & phone, 1095:10119): "All
 *   Programs" Barlow ExtraBold 16, the current page Regular 14, everything
 *   Rich Blue, the rule Rich Blue, 1px.
 *
 * The strip's container class (`pk-hero-crumbs`, hero stylesheet) flips the
 * custom properties; nothing here knows about breakpoints. Every selector is
 * two classes deep (design-parts.md); the theme styles bare `li` and `a`.
 */

.pk-crumbs {
    --crumb-fg: var(--pk-off-white, #FCF9F9);
    --crumb-current: var(--pk-off-white, #FCF9F9);
    --crumb-rule: var(--pk-off-white, #FCF9F9);
    --crumb-rule-w: 2px;
    --crumb-link-size: 14px;
    --crumb-link-weight: 800;
    --crumb-current-size: 14px;
    --crumb-current-weight: 400;
    margin: 0;
    padding: 0;
    font-family: var(--pk-sans);
}

.pk-hero-crumbs .pk-crumbs {
    --crumb-fg: var(--pk-rich-blue, #0E1781);
    --crumb-current: var(--pk-rich-blue, #0E1781);
    --crumb-rule: var(--pk-rich-blue, #0E1781);
    --crumb-rule-w: 1px;
    --crumb-link-size: 16px;
    --crumb-current-size: 14px;
    --crumb-current-weight: 400;
}

/*
 * The list and the items inherit the family explicitly: the theme's
 * `* { font-family: Poppins }` sets it on every element, so a link that says
 * `inherit` takes Poppins from its <li> unless the <li> inherits too — the
 * crumbs computed as Poppins until this rule (parts.css makes the same move
 * with `.pk-sec *`).
 */
.pk-crumbs .pk-crumbs__list,
.pk-crumbs .pk-crumbs__item {
    font-family: inherit;
}

.pk-crumbs .pk-crumbs__list {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 15px;
    margin: 0;
    padding: 0;
    list-style: none;
}

.pk-crumbs .pk-crumbs__item {
    display: flex;
    align-items: center;
    gap: 0 15px;
    margin: 0;
    padding: 0;
    line-height: 20px;
}

/* The rule between crumbs: every item after the first carries one before it. */
.pk-crumbs .pk-crumbs__item + .pk-crumbs__item::before {
    content: '';
    display: block;
    width: var(--crumb-rule-w, 1px);
    height: 15px;
    background: var(--crumb-rule);
}

.pk-crumbs .pk-crumbs__link,
.pk-crumbs .pk-crumbs__current {
    font-family: inherit;
    font-size: var(--crumb-current-size);
    font-weight: var(--crumb-current-weight);
    line-height: 20px;
    letter-spacing: .05em;
    text-transform: uppercase;
    text-decoration: none;
    color: var(--crumb-current);
}

.pk-crumbs .pk-crumbs__link {
    font-size: var(--crumb-link-size);
    font-weight: var(--crumb-link-weight);
    color: var(--crumb-fg);
}

.pk-crumbs .pk-crumbs__link:hover,
.pk-crumbs .pk-crumbs__link:focus-visible {
    color: var(--crumb-fg);
    text-decoration: underline;
}