/* ============================================================================
 * Breadcrumb — single-line trail with chevron separators.
 *
 *   <nav class="wb-breadcrumb" aria-label="Breadcrumb">
 *     <ol class="wb-breadcrumb__list">
 *       <li class="wb-breadcrumb__item"><a>Home</a></li>
 *       <li class="wb-breadcrumb__item" aria-current="page">Services</li>
 *     </ol>
 *   </nav>
 * ========================================================================== */

.wb-breadcrumb {
  font-size: var(--wb-text-sm);
  color: var(--wb-color-text-muted);
}

.wb-breadcrumb__list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-wrap: wrap;
  gap: var(--wb-space-2);
  align-items: center;
}

.wb-breadcrumb__item {
  display: inline-flex;
  align-items: center;
  gap: var(--wb-space-2);
  min-width: 0;
}

.wb-breadcrumb__item + .wb-breadcrumb__item::before {
  content: "";
  width: 6px;
  height: 6px;
  border-right: 1.5px solid currentColor;
  border-bottom: 1.5px solid currentColor;
  transform: rotate(-45deg);
  opacity: 0.5;
  flex-shrink: 0;
}

.wb-breadcrumb a {
  color: var(--wb-color-text-muted);
  text-decoration: none;
  transition: color var(--wb-duration-base) var(--wb-ease);
}
.wb-breadcrumb a:hover { color: var(--wb-color-ink); }

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