/* ========================================================
   BREADCRUMBS — secondary navigation bar
   ========================================================
   Rendered by client/templates/_breadcrumbs.html. The chevron
   separator is generated in CSS so the markup stays clean, and
   the trailing crumb is the current page (aria-current="page").
   Colours come from the shared theme tokens, so light and dark
   mode are handled automatically. */

.breadcrumb-bar {
  background: var(--bg-alt);
  border-bottom: 1px solid var(--border);
  padding: 0.7rem 0;
}

.breadcrumb-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: var(--text-xs);
  letter-spacing: 0.01em;
}

.breadcrumb-item {
  display: inline-flex;
  align-items: center;
  min-width: 0;
}

/* Chevron between crumbs (never before the first one). */
.breadcrumb-item + .breadcrumb-item::before {
  content: "\203A";            /* › */
  margin-right: 0.45rem;
  color: var(--muted);
  opacity: 0.6;
}

.breadcrumb-item a {
  color: var(--fg-2);
  text-decoration: none;
  border-radius: var(--r-sm);
  transition: color 0.15s ease;
}

.breadcrumb-item a:hover,
.breadcrumb-item a:focus-visible {
  color: var(--primary);
  text-decoration: underline;
  text-underline-offset: 3px;
}

/* Current page: legible, non-interactive, truncates when long. */
.breadcrumb-item [aria-current="page"] {
  color: var(--fg);
  font-weight: 600;
  max-width: 65ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Small screens: keep every crumb on one scrollable row so a long
   page title never pushes the hero down. */
@media (max-width: 640px) {
  .breadcrumb-list {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .breadcrumb-list::-webkit-scrollbar {
    display: none;
  }
  .breadcrumb-item [aria-current="page"] {
    max-width: 45vw;
  }
}