/**
 * Breadcrumb global — Zigg 2026
 *
 * Componente compartilhado entre singulares, archives (CPT/category/tag/
 * taxonomias custom), página de busca, autor e 404. Estilo mono uppercase,
 * mute → ember on hover, separador discreto. O item atual aparece em
 * --ink (não link).
 *
 * Markup esperado (renderizado por template-parts/breadcrumb.php):
 *   <nav class="zigg-breadcrumb">
 *     <a href="...">Início</a>
 *     <span class="sep">›</span>
 *     <a href="...">Categoria</a>
 *     <span class="sep">›</span>
 *     <span aria-current="page">Item atual</span>
 *   </nav>
 *
 * Enfileirado em inc/enqueue.php (helper $enqueue_component). Carregado
 * em is_singular CPT + is_post_type_archive + is_tax custom +
 * is_category + is_tag + is_author + is_search + is_404.
 */

.zigg-breadcrumb {
  font-family: var(--f-mono);
  font-size: 11px;
  line-height: 1.4;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--mute);
  margin: 20px 0 16px;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
  /* Trim em telas muito largas pra não engolir o hero */
  max-width: 100%;
}

/* Items: link + current */
.zigg-breadcrumb a,
.zigg-breadcrumb [aria-current="page"] {
  font-weight: 500;
  white-space: nowrap;
  max-width: 24ch;
  overflow: hidden;
  text-overflow: ellipsis;
}
.zigg-breadcrumb a {
  color: var(--mute);
  text-decoration: none;
  transition: color .15s ease;
}
.zigg-breadcrumb a:hover,
.zigg-breadcrumb a:focus-visible {
  color: var(--ember);
}
.zigg-breadcrumb [aria-current="page"] {
  color: var(--ink);
  font-weight: 600;
}

/* Separador */
.zigg-breadcrumb .sep {
  color: var(--mute);
  opacity: .5;
  font-weight: 400;
  user-select: none;
}

/* Dark mode */
html[data-theme="dark"] .zigg-breadcrumb { color: var(--mute-2); }
html[data-theme="dark"] .zigg-breadcrumb a { color: var(--mute-2); }
html[data-theme="dark"] .zigg-breadcrumb a:hover { color: var(--ember); }
html[data-theme="dark"] .zigg-breadcrumb [aria-current="page"] { color: var(--paper); }
html[data-theme="dark"] .zigg-breadcrumb .sep { color: var(--mute-2); }

/* Mobile: mais compacto, primeiro nível "Início" pode encolher pra ícone */
@media (max-width: 720px) {
  .zigg-breadcrumb {
    margin: 14px 0 12px;
    font-size: 10.5px;
    gap: 4px;
  }
  .zigg-breadcrumb a,
  .zigg-breadcrumb [aria-current="page"] {
    max-width: 14ch;
  }
}