/**
 * HI Breadcrumbs.
 *
 * Il breadcrumb di prodotto, articolo e servizio: una riga di link separati da
 * "/" con l'ultimo livello non cliccabile.
 *
 * Qui si dichiarano solo tipografia, colori e disposizione. Larghezza, padding
 * laterali e spazi sopra/sotto restano alla riga Impreza che ospita lo
 * shortcode: il `nav` riempie il contenitore in cui viene messo, cosi' resta
 * allineato al corpo della pagina senza gradini e senza duplicare il gutter
 * della sezione.
 *
 * Misure in px: il rem di Impreza cambia sotto i 1280px.
 *
 * Colori dal blocco Content del tema (--color-content-*), mai esadecimali: i
 * valori del mockup (#8B96A5, #2B72C7, #0A1326) sono gia' quelli di quelle
 * variabili, quindi non c'e' nessun colore da aggiungere al tema.
 *
 * Selettori a due classi: le regole del tema sui link di contenuto (`a`,
 * `a:hover`) hanno specificita' minore e non vincono sui colori qui.
 */

.hi-breadcrumbs {
	display: flex;
	flex-wrap: wrap;
	gap: 8px;
	/*
	 * Il font del corpo e' Inter (--font-family). Lo si dichiara comunque:
	 * dentro un contenitore con tipografia da titolo il breadcrumb
	 * erediterebbe Onest.
	 */
	font-family: var(--font-family, Inter, sans-serif);
	font-size: 12.5px;
	font-weight: 400;
	line-height: normal;
	text-transform: none;
}

/* --------------------------------------------------------------------------
 * Livelli cliccabili: Home e intermedi
 * -------------------------------------------------------------------------- */

.hi-breadcrumbs .hi-breadcrumbs__link {
	color: var(--color-content-faded);
	text-decoration: none;
	transition: color 0.2s ease;
}

.hi-breadcrumbs .hi-breadcrumbs__link:hover,
.hi-breadcrumbs .hi-breadcrumbs__link:focus-visible {
	color: var(--color-content-primary);
	text-decoration: none;
}

/* --------------------------------------------------------------------------
 * Separatore
 * -------------------------------------------------------------------------- */

/*
 * Testo semplice e aria-hidden: lo screen reader legge la lista di link senza
 * uno "slash" fra ogni voce.
 */
.hi-breadcrumbs .hi-breadcrumbs__separator {
	color: var(--color-content-faded);
	-webkit-user-select: none;
	user-select: none;
}

/* --------------------------------------------------------------------------
 * Pagina corrente
 * -------------------------------------------------------------------------- */

/*
 * Nome completo, nessun troncamento: i titoli lunghi vanno a capo grazie al
 * flex-wrap del contenitore.
 */
.hi-breadcrumbs .hi-breadcrumbs__current {
	color: var(--color-content-heading);
}

/*
 * Livello intermedio di cui non si e' potuto risolvere l'URL: colore dei link
 * ma senza stato hover, perche' non e' cliccabile e non e' la pagina corrente.
 */
.hi-breadcrumbs .hi-breadcrumbs__item {
	color: var(--color-content-faded);
}