/* Same type treatment as the eyebrow (Bolivia Extended, uppercase, tracked), but its own class
   since a breadcrumb needs link states an eyebrow never does.

   Every selector here is "nav.breadcrumb", not bare ".breadcrumb": Bootstrap ships its own real
   ".breadcrumb" component (a very different thing — a <nav>/<ol> pattern with its own
   margin-bottom, padding, list-style, background, border-radius, all driven by CSS custom
   properties), and our markup's class name collides with it by coincidence. Both rules have
   identical specificity, so whichever stylesheet happened to load second was silently winning
   individual properties — found as a real, measured bug: the gap below a breadcrumb was
   inflated by exactly Bootstrap's own 1rem (16px) --bs-breadcrumb-margin-bottom default, on
   every breadcrumb-hero page on the site, not something scoped to one page. Tag-qualifying our
   own selector (0,1,1) beats Bootstrap's bare class (0,1,0) outright, regardless of load order,
   so this never depends on which file happens to load later again. */
nav.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    margin: 0;
    padding: 0;
    font-family: var(--font-eyebrow);
    font-size: 16px;
    letter-spacing: 1.5px;
    text-transform: uppercase;
    color: rgba(var(--terra-green), 1);
    background-color: transparent;
    border-radius: 0;
    list-style: none;
}

nav.breadcrumb a {
    color: rgba(var(--terra-green), 1);
    text-decoration: none;
}

nav.breadcrumb a:hover,
nav.breadcrumb a:focus {
    text-decoration: underline;
}

nav.breadcrumb .separator {
    color: rgba(var(--terra-green), 0.5);
}

nav.breadcrumb .current {
    color: rgba(var(--terra-green), 1);
}