/*
 * Breadcrumb component -- production styles.
 *
 * Structural properties reference only the resolved Stage 2 tokens
 * (spacing) -- no raw pixel value appears anywhere below. No CSS
 * `order` or reverse flex-direction is used anywhere, so DOM/source
 * order always matches visual order at every breakpoint, satisfying
 * the Stage 7 requirement against CSS-based reordering.
 *
 * Colour/typography (Stage 7.5 Visual Parity): muted grey for
 * ancestors, red for the current page -- matching the legacy site's
 * general "quiet secondary navigation, red for emphasis" pattern
 * (no direct breadcrumb precedent exists in index.html, so this
 * mirrors its .nav-link muted-text + red-accent-on-emphasis logic).
 */

@import url("../../config/tokens/tokens.generated.css");

.sr-breadcrumb {
  width: 100%;
  box-sizing: border-box;
  font-family: var(--font-family-body);
  font-size: var(--font-caption-size);
}

.sr-breadcrumb__list {
  display: flex;
  flex-wrap: wrap; /* long Spanish labels or many ancestors wrap naturally -- never truncated or collapsed, see CONTRACT.md */
  align-items: center;
  gap: var(--space-xs);
  margin: 0;
  padding: 0;
  list-style: none;
}

.sr-breadcrumb__item {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0; /* allows a long label to wrap inside its own item rather than forcing overflow */
}

.sr-breadcrumb__link,
.sr-breadcrumb__label,
.sr-breadcrumb__current {
  word-break: break-word;
}

.sr-breadcrumb__link {
  text-decoration: underline;
  color: var(--color-muted);
  transition: color var(--motion-functional-duration) var(--motion-functional-easing);
}

.sr-breadcrumb__link:hover {
  color: var(--color-primary);
}

.sr-breadcrumb__current {
  font-weight: var(--font-weight-semibold);
  color: var(--color-primary);
}

.sr-breadcrumb__separator {
  /* Decorative only -- aria-hidden in markup. */
  user-select: none;
  color: var(--color-muted);
}

@media (prefers-reduced-motion: reduce) {
  .sr-breadcrumb__link {
    transition: none;
  }
}