/**
 * Stile componente del blocco `bricks/breadcrumb`.
 *
 * Caricato in front solo sulle pagine che contengono il blocco (vedi
 * `render_block` in block.php). Brand-neutrale: geometria e colori dai
 * token `--bricks-breadcrumb-*` del preset (sovrascrivibili dal tema
 * cliente nel proprio @theme, stessa filosofia di bricks/post-author).
 *
 * Separatore: carattere via custom property (`content: var(...)`), non
 * un'icona SVG — un tema che lo vuole diverso ("›", "→", …) sovrascrive
 * solo il token, senza toccare markup o CSS del componente.
 *
 * SEMVER — selettori CSS pubblici (vedi conventions.md §6):
 * - .bricks-breadcrumb
 * - .bricks-breadcrumb__list
 * - .bricks-breadcrumb__item (+ modifier --current)
 * - .bricks-breadcrumb__link / __current
 * Rinominarli è MAJOR.
 */

.bricks-breadcrumb {
    display: block;
}

.bricks-breadcrumb__list {
    align-items: center;
    display: flex;
    flex-wrap: wrap;
    font-size: var(--bricks-breadcrumb-font-size);
    gap: var(--bricks-breadcrumb-gap);
    list-style: none;
    margin: 0;
    padding: 0;
}

.bricks-breadcrumb__item {
    align-items: center;
    display: flex;
    gap: var(--bricks-breadcrumb-gap);
}

/* Separatore prima di ogni tappa tranne la prima. */
.bricks-breadcrumb__item:not(:first-child)::before {
    color: var(--bricks-breadcrumb-separator-color);
    content: var(--bricks-breadcrumb-separator);
}

.bricks-breadcrumb__link {
    color: var(--bricks-breadcrumb-link-color);
    text-decoration: none;
}

.bricks-breadcrumb__link:hover,
.bricks-breadcrumb__link:focus-visible {
    text-decoration: underline;
}

.bricks-breadcrumb__link:focus-visible {
    outline: 2px solid var(--bricks-breadcrumb-link-color);
    outline-offset: 2px;
}

/* Tappa corrente: non linkata, colore attenuato — è già la pagina che si sta
   guardando, non serve la stessa enfasi delle tappe cliccabili. */
.bricks-breadcrumb__current {
    color: var(--bricks-breadcrumb-current-color);
}