/* Bottoni CTA riutilizzabili in tutto il sito: classe propria .btn, non piu'
   agganciata al markup di wp:button. Inseribili anche nel testo tramite
   TextareaCustom (nodo "ctaButton", vedi assets/textarea-custom/): i
   template selezionabili dal pannello "Inserisci bottone" sono dichiarati in
   assets/textarea-custom/text-formats.js (window.NMA_BUTTON_TEMPLATES),
   questo file decide solo il loro aspetto (colore, hover) — fonte unica,
   stesso principio delle classi di formato testo in text-formats.css. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	font-weight: 700;
	text-decoration: none;
	padding: calc(0.667em + 2px) calc(1.333em + 2px);
	border: 0;
	border-radius: 0;
	cursor: pointer;
	transition: background-color 0.15s ease, color 0.15s ease, filter 0.15s ease, opacity 0.15s ease;
}

/* L'icona (opzionale, nodo ctaButton) e' nel markup prima o dopo il testo a
   seconda della posizione scelta nel pannello "Inserisci bottone"
   (sinistra/destra, vedi attrs.iconPosition in
   assets/textarea-custom/src/editor.js): con .btn in flex-row l'ordine nel
   DOM e' gia' l'ordine visivo, nessuna classe modificatrice o regola
   d'ordine necessaria qui. Un bottone senza icona ha un solo figlio:
   justify-content:center sopra lo mantiene centrato anche se il bottone
   dovesse avere una larghezza propria (es. piu' bottoni affiancati con la
   stessa larghezza). */
.btn i {
	font-size: 0.9em;
}

/* Piu' bottoni CTA inseriti uno accanto all'altro nello stesso testo (nodo
   ctaButton inline, si affiancano nella stessa riga senza bisogno di
   spazi/interruzioni manuali): un margine solo tra bottoni consecutivi,
   mai prima del primo. */
.btn + .btn {
	margin-left: 8px;
}

.btn--primary {
	background-color: var(--color-primario);
	color: var(--color-mainText);
}

.btn--primary:hover {
	filter: brightness(0.92);
}

.btn--secondary {
	background-color: var(--color-grigio);
	color: var(--color-mainText);
}

.btn--secondary:hover {
	opacity: 0.85;
}

.btn--outline {
	background-color: transparent;
	color: var(--color-mainText);
	box-shadow: inset 0 0 0 2px var(--color-mainText);
}

.btn--outline:hover {
	background-color: var(--color-mainText);
	color: var(--color-bianco);
}

.btn--ghost {
	background-color: transparent;
	color: var(--color-primario);
}

.btn--ghost:hover {
	background-color: rgba(255, 204, 2, 0.12);
}

/* Azione "off" (nessuna azione, vedi attrs.off in
   assets/textarea-custom/src/editor.js): puro elemento grafico, stesso
   template scelto ma senza cursore a manina ne' hover. pointer-events:none
   solo su a.btn--off (mai su .btn--off generico): oltre a impedire il click
   sul frontend, disattiva anche l'attivazione stessa di :hover (nessun
   evento del mouse raggiunge piu' l'elemento, i filtri/opacita'/colori delle
   regole :hover dei template sopra non scattano mai). Lo <span> con questa
   classe nell'editor di wp-admin resta invece cliccabile di suo (nessun
   pointer-events qui), per poter riaprire il pannello di modifica. */
.btn.btn--off {
	cursor: default;
}

a.btn.btn--off {
	pointer-events: none;
}