/* ===== RASTRO DE NAVEGACION =====
 * El markup lo genera Rank Math: <nav class="fz-breadcrumbs"><p>
 * <a>..</a><span class="separator"></span><span class="last">..</span></p></nav>.
 * De su interior solo se estilizan tres selectores: a, .separator y .last.
 *
 * Hoja aparte y sin acotar por vista a proposito: el rastro sale en el indice,
 * en los archivos, en la busqueda y en la entrada, y esas vistas cargan hojas
 * distintas (editorial.css o single.css). Ponerlo en una de las dos obligaria a
 * duplicarlo en la otra.
 *
 * Replica el de Noticias para que los dos sitios se vean igual. */

.fz-breadcrumbs {
  padding-block: 0.875rem;
  font-family: var(--fz-font);
}

.fz-breadcrumbs p {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.625rem;
  margin: 0;
  font-size: var(--fz-font-size-sm);
}

.fz-breadcrumbs a {
  color: var(--fz-text-muted);
  text-decoration: none;
  transition: color var(--fz-transition);
}

.fz-breadcrumbs a:hover {
  color: var(--fz-blue);
}

/* El primer enlace se sustituye por el icono de casa y el separador por un
   chevron. En los dos casos el texto sigue en el arbol de accesibilidad: se
   recorta con overflow mas text-indent al 100%, no con display:none. */
.fz-breadcrumbs a:first-of-type,
.fz-breadcrumbs .separator {
  display: inline-flex;
  width: 1em;
  height: 1em;
  overflow: hidden;
  white-space: nowrap;
  text-indent: 100%;
}

.fz-breadcrumbs a:first-of-type {
  background: url("../images/breadcrumb-home.svg") center / contain no-repeat;
}

.fz-breadcrumbs .separator {
  background: url("../images/breadcrumb-chevron.svg") center / contain no-repeat;
}

.fz-breadcrumbs .last {
  color: var(--fz-blue);
  font-weight: var(--fz-font-weight-semibold);
}