/*
 * @file: breadcrumb-fix.css
 * @description: Stili per un breadcrumb accessibile, coerente e responsivo
 *               - Ultima briciola tronca con ellissi
 *               - Evidenza visiva con border-bottom puntinato, più cross-browser di text-decoration
 * @author: Altoprofilo Studio
 * @last-updated: 2025-09-24
 * @version: V.1.6
 *
 * NOTE:
 * - Ellissi: funziona grazie a flex + min-width:0
 * - Puntinato: reso con border-bottom per consistenza
 * - Evitato !important: si usa specificità
 */

/* ==========================================================================
   CONTENITORE
   ========================================================================== */
.breadcrumb-container {
  width: 100%;
  overflow: hidden; /* Previene overflow orizzontale del wrapper */
}

/* ==========================================================================
   LISTA BREADCRUMB (FLEX)
   ========================================================================== */
.breadcrumbs ol {
  display: flex;
  flex-wrap: nowrap;
  gap: .5rem;
  width: 100%;
  overflow: hidden; /* Nessuno scroll: preferiamo ellissi */
}

.breadcrumbs ol li {
  flex: 0 1 auto;
  min-width: 0; /* fondamentale per ellissi */
}

.breadcrumbs ol li > a,
.breadcrumbs ol li > span {
  white-space: normal;
}

/* L’ultima briciola prende lo spazio residuo */
.breadcrumbs ol li:last-child {
  flex: 1 1 auto;
  min-width: 0;
}

/* ==========================================================================
   STATO CORRENTE (aria-current="page")
   ========================================================================== */
.breadcrumbs ol li:last-child > span[aria-current="page"] {
  display: block;
  max-width: 100%;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;

  /* Evidenza con bordo puntinato cross-browser */
  border-bottom: 1px dotted currentColor;
  padding-bottom: 2px;
}

.breadcrumbs ol li:last-child > span[aria-current="page"][title] {
  cursor: help; /* Tooltip naturale se c’è title */
}

/* ==========================================================================
   ACCESSIBILITÀ / FOCUS
   ========================================================================== */
.breadcrumbs a:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: .125rem;
}

@media (forced-colors: active) {
  .breadcrumbs ol li:last-child > span[aria-current="page"] {
    border-bottom-style: dotted;
  }
}