/*
 * Bloc breadcrumb-single — Fil d'Ariane visuel single pages.
 *
 * Typo : Agrandir Tight Bold 16px (cf. CCBLA-PROJECT.md design constants).
 * Couleur : --pop-dark (#111) — séparateur grisé pour hiérarchie visuelle.
 * Mobile : wrap naturel (line-height adaptée), pas de truncation —
 *          le titre courant est important pour le contexte utilisateur.
 *
 * A11y : focus-visible standard (#005fcc, offset 2px) sur les liens.
 *        Le séparateur → est aria-hidden côté HTML (rendu purement visuel).
 *
 * 2026-05-03 v1 : création.
 *
 * 2026-05-03 v2 : FIX alignement vertical du dernier item.
 *   Cause : le <a> a `text-decoration: underline` + `text-underline-offset:
 *   3px` qui modifie discrètement la baseline rendue. Le <span> du current
 *   item n'a pas cette décoration → baseline différente. Combiné à
 *   `align-items: center` du parent flex, ça produit un décalage visible.
 *   Fix : passer le list à `align-items: baseline` + forcer
 *   `display: inline-block` cohérent sur <a>, <span> et séparateur, avec
 *   `line-height` uniforme.
 */

.ccbla-breadcrumb {
    width: 100%;
    /* 2026-05-03 v4: margin retiré — l'espacement est désormais géré par le contexte (Kadence row/column où le bloc est inséré), pas par le bloc lui-même. */
    font-family: var(--wp--preset--font-family--agrandir-tight-bold), system-ui, sans-serif;
    font-size: 16px;
    line-height: 1.5;
    color: var(--pop-dark, #111);
}

.ccbla-breadcrumb__list {
    list-style: none;
    /* 2026-05-03 v4: margin retiré (héritage Kadence/UA réinitialisé via reset universel), padding-left forcé à 0 pour neutraliser le padding par défaut <ol> du UA et des thèmes parents Kadence. */
    padding: 0;
    padding-left: 0 !important;
    display: flex;
    flex-wrap: wrap;
    /* baseline = alignement par la ligne de base typographique, pas par le centre de la box. Cohérent quelle que soit la décoration des items. */
    align-items: baseline;
    gap: .5em;
}

.ccbla-breadcrumb__item,
.ccbla-breadcrumb__sep {
    margin: 0;
    padding: 0;
    /* 2026-05-03 v4: line-height 1.5→1.1 — compaction verticale, le bloc prend moins de place, plus aéré horizontalement vs le contenu. */
    line-height: 1.1;
    display: inline-block;
}

/* <a> ET <span> du current item: même display + line-height pour que leur boîte soit identique, indépendamment de la décoration underline. */
.ccbla-breadcrumb__item a,
.ccbla-breadcrumb__item--current span {
    display: inline-block;
    line-height: inherit;
    vertical-align: baseline;
}

.ccbla-breadcrumb__item a {
    color: var(--pop-dark, #111);
    /* 2026-05-03 v4: underline retiré par défaut, apparaît uniquement sur hover/focus pour signaler l'interactivité au moment de l'action. Cohérent avec le pattern UI moderne (text décoré au hover). */
    text-decoration: none;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
    transition: color .15s ease, text-decoration-color .15s ease;
}

.ccbla-breadcrumb__item a:hover,
.ccbla-breadcrumb__item a:focus-visible {
    color:  var(--pop-dark, #111);
    /* 2026-05-03 v4 : underline réintroduit ici (apparaît au hover/focus) */
    text-decoration: underline;
    text-decoration-color: var(--pop-primary, #6b4796);
}

.ccbla-breadcrumb__item a:focus-visible {
    outline: 3px solid #005fcc;
    outline-offset: 2px;
    border-radius: 2px;
}

/* Page courante : pas de lien, ton légèrement atténué pour signaler "tu es ici". */
.ccbla-breadcrumb__item--current span {
    color: var(--pop-dark, #111);
    opacity: .65;
}

/* Séparateur → entre les items. aria-hidden côté HTML. */
.ccbla-breadcrumb__sep {
    color: var(--pop-dark, #111);
    opacity: .4;
    user-select: none;
    font-weight: normal;
}

/* Mobile : on conserve la même typo, juste un peu d'air vertical en cas de wrap. */
@media (max-width: 767px) {
    .ccbla-breadcrumb {
        font-size: 15px;
        line-height: 1.6;
    }
    .ccbla-breadcrumb__list {
        gap: .4em;
    }
}