/**
 * Breadcrumb (feature 016, T4, plan.md D) — wayfinding trail above the
 * masthead: `<nav>` + `<ol>` rendered by
 * `templates/components/breadcrumb.php`. Small, muted, single-line trail —
 * visually distinct from `.ugel-archive-chips` (012), which are large pill
 * navigation, not a hierarchical trail. Tokens only, zero new hex
 * (tech-stack.md).
 */
.ugel-breadcrumb {
  margin: 0 0 1.25rem;
}

.ugel-breadcrumb__list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .4rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-family: var(--ugel-font-sans);
  font-size: var(--ugel-fs-sm);
  color: var(--ugel-muted);
}

.ugel-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: .4rem;
}

.ugel-breadcrumb__item:not(:first-child)::before {
  content: "/";
  color: var(--ugel-border);
}

.ugel-breadcrumb__item a {
  color: var(--ugel-muted);
  text-decoration: none;
}

.ugel-breadcrumb__item a:hover {
  color: var(--ugel-blue);
  text-decoration: underline;
}

.ugel-breadcrumb__item a:focus-visible {
  outline: 2px solid var(--ugel-gold);
  outline-offset: 2px;
  border-radius: var(--ugel-r8);
}

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

@media (max-width: 600px) {
  .ugel-breadcrumb__list {
    font-size: var(--ugel-fs-xs);
    gap: .3rem;
  }
}