/*
 * Infobar LearnDash — FM Framework PULSE.
 *
 * Palette ONLINE, non AULA: in LearnDash vivono solo i corsi online, mentre i
 * corsi in aula sono prodotti WooCommerce senza LearnDash. Quindi qui si usano
 * "Accento ONLINE", "Fondo Riquadro ONLINE+" e "Fondo Riquadro ONLINE-" dei
 * Colori globali, non gli equivalenti AULA.
 *
 *   Accento ONLINE          #885FC9  --e-global-color-0ed7c7a
 *   Fondo Riquadro ONLINE+  #BDA2C5  --e-global-color-b0c5a7a
 *   Fondo Riquadro ONLINE-  #E7DDE8  --e-global-color-c121010
 *   Testo Pulsanti SHOP Hover #2E2E2E --e-global-color-96dc944
 *
 * Se cambi i Colori globali del Kit, l'infobar si adegua da sola: gli hex sono
 * solo fallback. Per ritoccare senza toccare il Kit, ridefinisci le --fmldch-*
 * su .fmldch-infobar da CSS aggiuntivo.
 */

.fmldch-infobar {
	--fmldch-ink: var(--e-global-color-text, #333749);
	--fmldch-muted: var(--e-global-color-secondary, #786b76);
	--fmldch-surface: var(--e-global-color-c121010, #e7dde8);
	--fmldch-accent: var(--e-global-color-0ed7c7a, #885fc9);
	--fmldch-soft: var(--e-global-color-b0c5a7a, #bda2c5);
	--fmldch-on-accent: var(--e-global-color-fb91e95, #fff);
	--fmldch-on-soft: var(--e-global-color-96dc944, #2e2e2e);

	align-items: center;
	background: var(--fmldch-surface);
	border-radius: 0;
	color: var(--fmldch-ink);
	column-gap: 20px;
	display: flex;
	flex-wrap: wrap;
	font-family: var(--e-global-typography-text-font-family, "Montserrat"), sans-serif;
	justify-content: space-between;
	line-height: 1.4;
	padding: 14px 18px;
	row-gap: 10px;
}

.fmldch-infobar *,
.fmldch-infobar *::before,
.fmldch-infobar *::after {
	box-sizing: border-box;
}

.fmldch-infobar__trail {
	align-items: center;
	column-gap: 8px;
	display: flex;
	flex: 1 1 auto;
	flex-wrap: wrap;
	font-size: 13px;
	font-weight: 500;
	min-width: 0;
	row-gap: 4px;
}

.fmldch-infobar__step {
	color: var(--fmldch-muted);
	text-decoration: none;
}

a.fmldch-infobar__step:hover,
a.fmldch-infobar__step:focus-visible {
	color: var(--fmldch-accent);
	text-decoration: underline;
	text-underline-offset: 0.2em;
}

.fmldch-infobar__step--current {
	color: var(--fmldch-ink);
	font-weight: 700;
}

.fmldch-infobar__sep {
	color: var(--fmldch-muted);
	opacity: 0.5;
}

/*
 * Badge sempre maiuscolo e in risalto, come i pulsanti PULSE.
 * Pieno = completato, tenue = ancora in corso: una sola famiglia di colore,
 * la differenza la fa il riempimento.
 */
.fmldch-infobar__badge {
	background: var(--fmldch-soft);
	border-radius: 0;
	color: var(--fmldch-on-soft);
	flex: 0 0 auto;
	font-size: 11px;
	font-weight: 700;
	letter-spacing: 0.08em;
	padding: 6px 12px;
	text-transform: uppercase;
	white-space: nowrap;
}

.fmldch-infobar[data-state="complete"] .fmldch-infobar__badge {
	background: var(--fmldch-accent);
	color: var(--fmldch-on-accent);
}

@media (max-width: 600px) {
	.fmldch-infobar {
		align-items: flex-start;
		flex-direction: column;
		padding: 12px 14px;
	}

	.fmldch-infobar__trail {
		font-size: 12px;
	}
}