/**
 * Breadcrumbs Component — v3.2
 *
 * Estiliza o componente parts/breadcrumbs.php.
 * Classe raiz: .focofy-breadcrumbs
 *
 * @package FocofyFactory
 * @version 3.3
 * v3.2 → v3.3: max-width: 600px → 767px (breakpoint canônico)
 */

/* ══════════════════════════════════════════════════════════════════════════
   BASE
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-breadcrumbs {
  display:     flex;
  flex-wrap:   wrap;
  align-items: center;
  gap:         var(--space-1);

  font-size:   var(--font-size-sm);
  color:       var(--color-text-muted);
  line-height: 1;

  padding:      var(--space-3) 0;
  margin-bottom: var(--space-6);
}

/* Links */
.focofy-breadcrumbs a {
  color:           var(--color-text-muted);
  text-decoration: none;
  transition:      color var(--transition-fast) ease;
}

.focofy-breadcrumbs a:hover {
  color:           var(--color-accent);
  text-decoration: underline;
}

.focofy-breadcrumbs a:focus-visible {
  outline:        var(--focus-ring-size) solid var(--focus-ring-color);
  outline-offset: 2px;
  border-radius:  2px;
}

/* Separador (›) */
.focofy-breadcrumbs [aria-hidden="true"] {
  color:       color-mix(in srgb, var(--color-text-muted) 50%, transparent);
  font-size:   var(--font-size-xs);
  line-height: 1;
  flex-shrink: 0;
}

/* Item atual (último) — não é link */
.focofy-breadcrumbs > span:last-child:not([aria-hidden]) {
  color:        var(--color-text);
  font-weight:  var(--fw-medium);
  max-width:    240px;
  overflow:     hidden;
  text-overflow: ellipsis;
  white-space:  nowrap;
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE — sobre fundo escuro (data-bg="dark")
   ══════════════════════════════════════════════════════════════════════════ */

[data-bg="dark"] .focofy-breadcrumbs,
[data-bg="primary"] .focofy-breadcrumbs {
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

[data-bg="dark"] .focofy-breadcrumbs a,
[data-bg="primary"] .focofy-breadcrumbs a {
  color: color-mix(in srgb, var(--color-text-inverse) 60%, transparent);
}

[data-bg="dark"] .focofy-breadcrumbs a:hover,
[data-bg="primary"] .focofy-breadcrumbs a:hover {
  color: var(--color-text-inverse);
}

/* ══════════════════════════════════════════════════════════════════════════
   VARIANTE — no blog/single (com borda superior)
   ══════════════════════════════════════════════════════════════════════════ */

.focofy-breadcrumbs--bordered {
  border-top:  1px solid var(--color-border-subtle);
  padding-top: var(--space-4);
  margin-top:  var(--space-4);
}

/* ══════════════════════════════════════════════════════════════════════════
   RESPONSIVO
   ══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 767px) {             /* abaixo de --bp-tablet */
  /* Trunca itens do meio para economizar espaço */
  .focofy-breadcrumbs > *:not(:first-child):not(:last-child):not([aria-hidden]):not(:nth-last-child(2)) {
    display: none;
  }

  /* Esconde separadores de itens ocultos */
  .focofy-breadcrumbs > [aria-hidden]:not(:nth-last-child(2)) {
    display: none;
  }
}