/**
 * common/breadcrumbs — Migas de navegación.
 * Handle: pf_pfuture_component_breadcrumbs
 *
 * Tokens: solo los canónicos de style.css (issue #60), sin literales de respaldo.
 */

.pf-breadcrumbs {
  --pf-breadcrumbs-text: var(--pf-color-text-muted);
  --pf-breadcrumbs-link: var(--pf-color-link);
  --pf-breadcrumbs-link-hover: var(--pf-color-link-hover);
  --pf-breadcrumbs-current: var(--pf-color-text-soft);
  /* Token de TEXTO, no de borde (issue #86). Antes tenía --pf-color-border-strong,
     que está calibrado para dibujar una línea de 1px: como color de texto daba
     1,53:1 en claro y 2,27:1 en oscuro, y AA pide 4,5:1. `--pf-color-text-muted`
     es el gris más claro de la paleta que aún cumple AA, así que es el único
     candidato: cualquier cosa más tenue no existe en la paleta. */
  --pf-breadcrumbs-separator: var(--pf-color-text-muted);

  width: 100%;
  color: var(--pf-breadcrumbs-text);
  font-size: var(--pf-text-sm);
  line-height: var(--pf-leading-snug);
}

/* La lista se desplaza en horizontal en lugar de partirse o de esconder migas.
   Antes, por debajo de 600px, se ocultaban con `display:none` todas menos las dos
   últimas: eso las saca también del árbol de accesibilidad, así que quien navega con
   lector de pantalla perdía el rastro entero. Desplazándola no se pierde ninguna. */
.pf-breadcrumbs__list {
  display: flex;
  align-items: center;
  gap: var(--pf-space-2xs);
  margin: 0;
  padding: 0;
  list-style: none;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}

.pf-breadcrumbs__list::-webkit-scrollbar {
  display: none;
}

.pf-breadcrumbs__item {
  display: inline-flex;
  align-items: center;
  gap: var(--pf-space-2xs);
  flex: 0 0 auto;
  min-width: 0;
  white-space: nowrap;
}

.pf-breadcrumbs__link {
  color: var(--pf-breadcrumbs-link);
  text-decoration: none;
}

.pf-breadcrumbs__link:hover,
.pf-breadcrumbs__link:focus-visible {
  color: var(--pf-breadcrumbs-link-hover);
  text-decoration: underline;
}

.pf-breadcrumbs__link:focus-visible {
  outline: 2px solid var(--pf-color-focus);
  outline-offset: 2px;
  border-radius: var(--pf-radius-sm);
}

/* La miga actual no es enlace: se distingue por color y peso, no solo por no
   subrayarse, para que no dependa del color en exclusiva. */
.pf-breadcrumbs__current {
  display: inline-block;
  max-width: 40ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  color: var(--pf-breadcrumbs-current);
  font-weight: var(--pf-weight-medium);
  vertical-align: bottom;
}

/* El separador ya va con `aria-hidden="true"` desde component.php, así que no lo
   anuncia ningún lector de pantalla. Podría por tanto acogerse a la excepción de
   decoración de WCAG 1.4.3, pero se sube a un token de texto igualmente: un
   separador que no se ve no separa nada, y el defecto era de legibilidad antes
   que de norma. Ver issue #86. */
.pf-breadcrumbs__separator {
  color: var(--pf-breadcrumbs-separator);
  user-select: none;
}

@media (max-width: 600px) {
  .pf-breadcrumbs__current {
    max-width: 24ch;
  }
}