/* Shared page breadcrumb. Top is hosted by the global header module; bottom by the footer module. */
.c-breadcrumb--top {
  padding-top: calc(var(--header-h, 72px) + clamp(14px, 2vw, 26px));
  background: var(--breadcrumb-paper, var(--paper));
  border-bottom: 1px solid var(--breadcrumb-line, var(--hairline));
}

.c-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin: 0;
  padding-block: 12px;
  list-style: none;
  color: var(--breadcrumb-muted, var(--muted));
  font-size: var(--fs-caption);
}

.c-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.c-breadcrumb__item + .c-breadcrumb__item::before {
  color: var(--breadcrumb-line, var(--hairline));
  content: "/";
}

.c-breadcrumb__item a {
  color: var(--breadcrumb-muted, var(--muted));
  text-decoration: underline;
  text-decoration-color: var(--breadcrumb-line, var(--hairline));
  text-underline-offset: 3px;
}

.c-breadcrumb__item a:hover {
  color: var(--breadcrumb-navy, var(--navy));
}

.c-breadcrumb__item a:focus-visible {
  outline: 2px solid var(--breadcrumb-gold, var(--gold));
  outline-offset: 3px;
}

.c-breadcrumb__item [aria-current="page"] {
  color: var(--breadcrumb-ink, var(--ink));
  font-weight: var(--fw-medium);
}

.c-breadcrumb--bottom {
  border-top: 1px solid var(--breadcrumb-line, var(--hairline));
  background: var(--breadcrumb-paper, var(--paper));
  color: var(--breadcrumb-muted, var(--muted));
}

.c-breadcrumb__inner {
  display: flex;
  align-items: center;
  gap: 18px;
  width: min(1160px, calc(100% - 48px));
  min-width: 0;
  margin-inline: auto;
  padding-block: 12px;
}

.c-breadcrumb__label {
  flex: 0 0 auto;
  margin: 0;
  color: var(--breadcrumb-navy, var(--navy));
  font-size: var(--fs-caption);
  font-weight: var(--fw-bold);
  letter-spacing: .08em;
}

.c-breadcrumb--bottom .c-breadcrumb__list {
  gap: 0 6px;
  min-width: 0;
  padding-block: 0;
}

.c-breadcrumb--bottom .c-breadcrumb__item a,
.c-breadcrumb--bottom .c-breadcrumb__item span {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding-inline: 4px;
}

@media (max-width: 640px) {
  .c-breadcrumb__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0;
    width: min(100% - 32px, 1160px);
    padding-block: 14px;
  }

  .c-breadcrumb--bottom .c-breadcrumb__list {
    width: 100%;
  }
}