/* Nirmata Events — fil d'Ariane partagé (composant Frontend\Breadcrumb).
 *
 * Dépend de tokens.css (variables de la charte). Dark par défaut, comme le
 * reste du frontend. Séparateurs « › » dessinés en CSS (::before) entre les
 * maillons. Se replie proprement sur plusieurs lignes si l'espace manque.
 */

.nirmata-breadcrumb {
	font-family: inherit;
	/* Par défaut : largeur « content » (720) — aligne le fil sur le formulaire
	 * de recrutement, à la même colonne que le thème (layout contraint). Les
	 * pages larges (événements/planning) passent la variante --wide ci-dessous. */
	max-width: var( --wp--style--global--content-size, 720px );
	margin: 0 auto 1.5em; /* repli thèmes classiques ; écrasé ci-dessous sur le thème blocs */
	font-size: 0.85rem;
	line-height: 1.4;
}

/* Marge basse en unité relative, RÉ-imposée en double classe (0,2,0). Le
 * thème blocs réinitialise `margin-block-end: 0` sur les enfants du layout
 * contraint (`:root :where(.is-layout-constrained) > *`, spécificité (0,1,0),
 * chargé après notre feuille) et écraserait sinon notre marge basse. */
.nirmata-breadcrumb.nirmata-breadcrumb {
	margin-bottom: 1.5em;
}

/* Variante « large » (pages événements + planning) : cale le fil sur la
 * colonne de contenu large (grille de cartes / tuiles) pour que son bord
 * gauche s'aligne avec celui de la liste. La double classe porte la
 * spécificité à (0,2,0) pour battre la règle de layout contraint du thème
 * (`.is-layout-constrained > :where(...)`, spécificité (0,1,0)) qui est
 * chargée APRÈS notre feuille et rabattrait sinon le fil à « content ». */
.nirmata-breadcrumb--wide.nirmata-breadcrumb--wide {
	max-width: var( --wp--style--global--wide-size, 1140px );
}

.nirmata-breadcrumb__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 2px 0;
}

.nirmata-breadcrumb__item {
	display: inline-flex;
	align-items: center;
	color: var( --nirmata-text-muted );
	min-width: 0;
}

/* Séparateur « › » avant chaque maillon sauf le premier. */
.nirmata-breadcrumb__item + .nirmata-breadcrumb__item::before {
	content: "\203A"; /* › */
	margin: 0 8px;
	color: var( --nirmata-border );
	flex: 0 0 auto;
}

.nirmata-breadcrumb__link {
	color: var( --nirmata-text-muted );
	text-decoration: none;
	border-radius: 4px;
	transition: color 0.15s ease;
}

.nirmata-breadcrumb__link:hover,
.nirmata-breadcrumb__link:focus-visible {
	color: var( --nirmata-primary );
	text-decoration: underline;
}

.nirmata-breadcrumb__link:focus-visible {
	outline: 2px solid var( --nirmata-primary );
	outline-offset: 2px;
}

/* Maillon courant (page en cours) : plus appuyé, non cliquable. Tronqué si
 * le titre d'événement est très long (évite de casser la mise en page). */
.nirmata-breadcrumb__current {
	color: var( --nirmata-text );
	font-weight: 600;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	max-width: 60vw;
}