/**
 * Breadcrumb trail — used on every non-front-page template.
 */

.breadcrumbs {
  padding-block: var(--space-sm);
}

.breadcrumbs__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-3xs);
  font-size: var(--fs-eyebrow);
  color: var(--color-text-muted);
}

.breadcrumbs__item:not(:last-child)::after {
  content: "/";
  margin-left: var(--space-3xs);
  color: var(--color-border);
}

.breadcrumbs__item a:hover,
.breadcrumbs__item a:focus-visible {
  color: var(--color-primary-600);
}

.breadcrumbs__item [aria-current="page"] {
  color: var(--color-heading);
  font-weight: 600;
}

.section--dark .breadcrumbs__list {
  color: var(--color-text-on-dark-muted);
}

.section--dark .breadcrumbs__item:not(:last-child)::after {
  color: rgba(255, 255, 255, 0.35);
}

.section--dark .breadcrumbs__item a:hover,
.section--dark .breadcrumbs__item a:focus-visible {
  color: var(--color-white);
}

.section--dark .breadcrumbs__item [aria-current="page"] {
  color: var(--color-white);
}