/* Tutokupisz – Breadcrumbs (2025) */
/* Cel: czytelność, dostępność, respons, ładny hover i focus, kontrola przelewania tekstu */

.tuto-breadcrumbs{
  /* responsywny rozmiar, neutralna szarość, dziedziczenie z motywu */
  font-size: clamp(.8125rem, 1.2vw, .95rem);
  color:#6b7280;
  line-height: 1.4;
  /* w razie sticky headerów zapewnij miejsce dla focus-outline */
  position: relative;
}

.tuto-breadcrumbs ol{
  list-style:none;
  display:flex;
  flex-wrap:wrap;          /* zawijanie przy wąskim ekranie */
  gap:.5rem;
  padding:0;
  margin:0;
}

/* Elementy listy: stabilny layout + elipsa dla za długich nazw */
.tuto-breadcrumbs li{
  display:inline-flex;
  align-items:center;
  min-width:0;             /* pozwala na text-overflow w flex-item */
  max-width:100%;
}

/* Linki: dziedziczą kolor, ale mają wyraźny hover i focus */
.tuto-breadcrumbs a{
  color:inherit;
  text-decoration:none;
  max-width: 28ch;         /* ogranicz ekstremalnie długie nazwy */
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

.tuto-breadcrumbs a:hover{
  text-decoration:underline;
}

.tuto-breadcrumbs a:focus-visible{
  outline: 2px solid currentColor;
  outline-offset: 2px;
  border-radius: 3px;
}

/* Ostatni element (bieżąca strona) – nie-link: pełna nazwa z elipsą gdy potrzeba */
.tuto-breadcrumbs [aria-current="page"]{
  font-weight: 600;
  color:#374151;           /* nieco ciemniejszy odcień dla akcentu */
  max-width: 32ch;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

/* Separator: wstawiamy dekoracyjnie po każdym LI poza ostatnim */
.tuto-breadcrumbs li::after{
  content:'›';
  margin-left:.5rem;
  margin-right:.25rem;
  opacity:.7;
}

.tuto-breadcrumbs li:last-child::after{
  content:'';
  margin:0;
}

/* Mikro-dopieszczanie responsywne */
@media (max-width: 480px){
  .tuto-breadcrumbs{
    font-size: .8125rem;
  }
  .tuto-breadcrumbs a,
  .tuto-breadcrumbs [aria-current="page"]{
    max-width: 22ch; /* krótsze etykiety na bardzo małych ekranach */
  }
}

/* Tryb RTL – zamień kierunek separatora */
:root[dir="rtl"] .tuto-breadcrumbs li::after{
  content:'‹';
  margin-left:.25rem;
  margin-right:.5rem;
}