/* ============================================================
   BREADCRUMB NAVIGATION
   Shared across all pages. Uses WAI-ARIA breadcrumb pattern
   with <ol> list structure and CSS-only separators.
   ============================================================ */
.breadcrumb {
  margin-bottom: var(--space-4);
}

/* #633: center (not baseline) so a wrapped crumb can't detach its "/"
   separator, and wrap whole crumbs in order rather than shrinking them
   below content width */
.breadcrumb ol {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-2);
  list-style: none;
  margin: 0;
  padding: 0;
  font-size: var(--text-sm);
  color: var(--color-text-secondary);
}

.breadcrumb ol li {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  min-width: 0;
}

/* #633: on a phone, truncate long crumbs (e.g. an org name) so the
   trail stays on one readable line */
@media (max-width: 640px) {
  .breadcrumb ol li a,
  .breadcrumb ol li span {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-width: 14ch;
    /* #666: 44px tap target (Apple HIG / WCAG 2.5.8) via line-height, NOT
       display: inline-flex - text-overflow only renders on a block container,
       so a flex display hard-clips the crumb instead of showing the ellipsis */
    min-height: 44px;
    line-height: 44px;
  }
}

.breadcrumb ol li:not(:last-child)::after {
  content: "/";
  color: var(--color-text-tertiary);
}

.breadcrumb a {
  color: var(--color-primary-500);
  text-decoration: none;
  transition: color var(--transition-fast);
}

.breadcrumb a:hover {
  color: var(--color-primary-600);
  text-decoration: underline;
}