/*
 * Bottoni condivisi: le varianti di Button.astro del Design Kit.
 *
 * Stavano nel CSS dell'hero, che era l'unico modulo con delle CTA. Con la Sala
 * Stampa e l'agenda la stessa pillola serve in tre moduli, e un modulo non può
 * dipendere dal CSS di un altro: qui è nella shell, caricata su ogni pagina.
 */

.fi-btn {
	display: inline-flex;
	align-items: center;
	gap: var(--wp--preset--spacing--20);
	padding: 13px 24px;
	border: 1.5px solid transparent;
	border-radius: var(--wp--custom--radius--pill);
	font-size: var(--wp--preset--font-size--body);
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1;
	text-decoration: none;
	transition: background 0.16s ease, color 0.16s ease, border-color 0.16s ease;
}

.fi-btn--navy {
	background: var(--wp--preset--color--navy);
	color: var(--wp--preset--color--white);
}

.fi-btn--navy:hover {
	background: var(--wp--custom--hover--navy);
}

.fi-btn--orange {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--navy);
}

.fi-btn--orange:hover {
	background: var(--wp--preset--color--white);
}

.fi-btn--outline-light {
	border-color: var(--wp--custom--on-navy--control);
	color: var(--wp--preset--color--white);
}

.fi-btn--outline-light:hover {
	background: var(--wp--custom--on-navy--hairline);
}

/* Anelli di colore opposto: navy fuori sui bottoni chiari, bianco fuori su quelli
   scuri, così l'anello si vede su qualunque fondo. */
.fi-btn:focus-visible {
	outline: 2px solid var(--wp--preset--color--navy);
	outline-offset: 2px;
	box-shadow: 0 0 0 4px var(--wp--preset--color--white);
}

.fi-btn--navy:focus-visible,
.fi-btn--outline-light:focus-visible {
	outline-color: var(--wp--preset--color--white);
	box-shadow: 0 0 0 4px var(--wp--preset--color--navy);
}

@media (max-width: 1100px) {
	/* Sotto il breakpoint si tocca col dito: 44px, contro i 40 del Kit.
	   box-sizing esplicito perché qui il default è content-box e il padding si
	   sommerebbe al min-height (misurato: 70px invece di 44). */
	.fi-btn {
		box-sizing: border-box;
		justify-content: center;
		min-height: 44px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.fi-btn {
		transition: none;
	}
}