/* breadcrumb.css — <nav aria-label="Breadcrumb"><ol class="breadcrumb"> (12 §5). */

.breadcrumb {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-1) var(--sp-2);
  padding: 0;
  list-style: none;
  font-size: var(--fs-sm);
  color: var(--text-muted);
}

.breadcrumb__item { display: inline-flex; align-items: center; gap: var(--sp-2); }

.breadcrumb__item + .breadcrumb__item::before {
  content: "›";
  color: var(--text-subtle);
}

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

.breadcrumb [aria-current="page"] { color: var(--text-strong); font-weight: var(--fw-medium); }