/* Breadcrumb
   A trail of links showing the current location. Use an ordered list inside a
   nav with aria-label. Mark the last item with aria-current="page". Separators
   are drawn with inline SVG. Colour and type from tokens.css. */

.dp-breadcrumb ol {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--dp-space-2);
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--dp-text-sm);
}

.dp-breadcrumb li {
  display: inline-flex;
  align-items: center;
  gap: var(--dp-space-2);
}

.dp-breadcrumb a {
  color: var(--dp-text-muted);
  text-decoration: none;
  font-weight: var(--dp-weight-semibold);
}

.dp-breadcrumb a:hover {
  color: var(--dp-link);
}

.dp-breadcrumb [aria-current="page"] {
  color: var(--dp-navy);
  font-weight: var(--dp-weight-bold);
}

.dp-breadcrumb-sep {
  width: 1rem;
  height: 1rem;
  color: var(--dp-text-subtle);
  flex: none;
}