/*
 * Briciole: stile di base del partial template-parts/components/breadcrumb.php (prototipo sito.css 23-25).
 *
 * Non è il foglio di un widget: sta in widgets/ perché così la registrazione per convenzione
 * (inc/elementor/widgets.php) gli dà l'handle on-w-briciole. I fogli dei widget che stampano il
 * partial (ON Nastro VHS, ON Hero Raduno) lo richiamano con "@on-briciole" nel commento iniziale:
 * diventa una dipendenza della registrazione, quindi arriva anche quando Elementor accoda gli
 * asset dalla cache della pagina (_elementor_page_assets) salvata prima. Prima stava nel foglio
 * del nastro, che era l'unico a usarlo.
 * Colore e ombra del testo li decide la scena che ospita le briciole.
 */

.on-briciole {
	font-family: var(--on-font-cond);
	font-size: .8125rem;
	letter-spacing: var(--on-ls-label);
	line-height: 1.2;
	text-transform: uppercase;
}

.on-briciole .on-briciole__elenco {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.on-briciole__voce {
	display: inline-flex;
	gap: 10px;
}

.on-briciole a {
	color: inherit;
	text-decoration: none;
}

.on-briciole a:hover {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/*
 * Focus da tastiera: anello bianco con alone nero, leggibile su qualunque foto. Serve la regola
 * propria: il reset di Hello (a:focus-visible, 0,1,1) batte il :focus-visible di base.css (0,1,0)
 * e lo rifà nero, e ".elementor a { box-shadow: none }" di Elementor toglie l'anello di Hello.
 * Due classi bastano a vincere su entrambi.
 */
.on-briciole a:focus-visible {
	outline: 2px solid var(--on-focus, var(--on-white));
	outline-offset: 3px;
	box-shadow: 0 0 0 7px var(--on-black);
}

.on-briciole__sep {
	opacity: .5;
}