/*
 * Bottone (Button.jsx dell'oracolo, DS re-mirrorato 2026-08-01). Il default
 * "flash" (gradiente) vive in theme.json (styles.elements.button) e copre
 * anche i bottoni classici che WordPress marca con .wp-element-button (es.
 * .single_add_to_cart_button di WooCommerce). Le 5 varianti restanti sono
 * qui: il meccanismo nativo di theme.json per le block style variations
 * (styles.blocks.core/button.variations, WP 6.6+) genera CSS per-istanza a
 * runtime ma non si è dimostrato affidabile dentro il rendering di
 * wp:post-content nei nostri template a blocchi — CSS statica, stessa fonte
 * di token, stesso risultato, senza il meccanismo fragile (PROGRESS-tema.md §1).
 * Interazione (transform in hover/press) e dimensioni: non esprimibili in
 * theme.json in nessun caso.
 */

/* ---- Interazione e struttura comuni a tutte le varianti ---- */
.wp-element-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	height: var(--wp--custom--control--md);
	cursor: pointer;
	transition:
		transform var(--wp--custom--dur--fast) var(--wp--custom--ease--snap),
		box-shadow var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		background var(--wp--custom--dur--base) var(--wp--custom--ease--out),
		color var(--wp--custom--dur--base) var(--wp--custom--ease--out);
}

@media (hover: hover) {
	.wp-element-button:hover {
		transform: translateY(var(--wp--custom--hover-lift));
	}
}

.wp-element-button:active {
	transform: scale(var(--wp--custom--press-scale));
}

/* Disabled — 2026-08-01: non più un'opacità sul colore della variante (il
   gradiente flash/surge sbiadito lascia testo bianco su rosa slavato, sotto
   soglia di contrasto). Una sola superficie neutra opaca per TUTTE le
   varianti, gradiente incluso, così "disabilitato" si legge come un unico
   stato a prescindere dal colore del bottone. --text-muted qui è stato
   scartato dall'oracolo (~4.0:1 chiaro / ~4.4:1 scuro, sotto 4.5:1) a favore
   di --text-body. Specificità (0,2,0): basta per il bottone di base
   (.wp-element-button, 0,1,0); le varianti sotto la superano esplicitamente. */
.wp-element-button:disabled,
.wp-element-button[disabled],
.wp-element-button[aria-disabled="true"] {
	cursor: not-allowed;
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
}

/* ---- Dimensioni — sm/lg via classe sul wrapper .wp-block-button in editor.
   L'add-to-cart classico è sempre lg (misura verificata: altezza 56, font 19,
   peso 700, radius 14 — PROMPT.md). Il default (nessuna classe) è md. ---- */
.wp-block-button.is-size-sm .wp-block-button__link {
	height: var(--wp--custom--control--sm);
	padding-left: var(--wp--custom--control-padding-x--sm);
	padding-right: var(--wp--custom--control-padding-x--sm);
	font-size: var(--wp--preset--font-size--sm);
}

.wp-block-button.is-size-lg .wp-block-button__link,
.single_add_to_cart_button {
	height: var(--wp--custom--control--lg);
	padding-left: var(--wp--custom--control-padding-x--lg);
	padding-right: var(--wp--custom--control-padding-x--lg);
	font-size: var(--wp--preset--font-size--lg);
}

/* ---- Varianti — stesso schema di stati di "flash" (default, in theme.json):
   riposo, :hover (lift universale sopra + cambio colore/ombra), :focus (ring),
   :disabled (superficie neutra uniforme, sopra). Ogni blocco varante include
   il proprio override :disabled con selettore a 4 parti — più specifico della
   regola universale (0,2,0) sopra e del riposo della variante stessa (0,3,0),
   quindi vince sempre, indipendentemente dall'ordine nel file. ---- */

/* surge — gradiente arancio→rosa→viola; hover identico a "flash" (glow-flash),
   per costruzione anche nell'oracolo (Button.jsx: isGradient copre flash e surge). */
.wp-block-button.is-style-fm-surge .wp-block-button__link {
	background: var(--wp--preset--gradient--surge);
	color: var(--wp--custom--on-accent);
}
.wp-block-button.is-style-fm-surge .wp-block-button__link:hover {
	box-shadow: var(--wp--custom--glow--flash);
}
.wp-block-button.is-style-fm-surge .wp-block-button__link:focus {
	box-shadow: var(--wp--custom--ring-focus);
}
.wp-block-button.is-style-fm-surge .wp-block-button__link:disabled,
.wp-block-button.is-style-fm-surge .wp-block-button__link[disabled],
.wp-block-button.is-style-fm-surge .wp-block-button__link[aria-disabled="true"] {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
}

/* solid — rosa piatto, nessuna ombra a riposo o in hover. */
.wp-block-button.is-style-fm-solid .wp-block-button__link {
	background: var(--wp--custom--accent);
	color: var(--wp--custom--on-accent);
	box-shadow: none;
}
.wp-block-button.is-style-fm-solid .wp-block-button__link:hover {
	background: var(--wp--custom--accent-hover);
	box-shadow: none;
}
.wp-block-button.is-style-fm-solid .wp-block-button__link:focus {
	box-shadow: var(--wp--custom--ring-focus);
}
.wp-block-button.is-style-fm-solid .wp-block-button__link:disabled,
.wp-block-button.is-style-fm-solid .wp-block-button__link[disabled],
.wp-block-button.is-style-fm-solid .wp-block-button__link[aria-disabled="true"] {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
}

/* outline — trasparente, bordo che si accende in hover. */
.wp-block-button.is-style-fm-outline .wp-block-button__link {
	background: transparent;
	color: var(--wp--custom--text-strong);
	border-color: var(--wp--custom--border-strong);
	box-shadow: none;
}
.wp-block-button.is-style-fm-outline .wp-block-button__link:hover {
	border-color: var(--wp--custom--border-brand);
	box-shadow: none;
}
.wp-block-button.is-style-fm-outline .wp-block-button__link:focus {
	box-shadow: var(--wp--custom--ring-focus);
}
.wp-block-button.is-style-fm-outline .wp-block-button__link:disabled,
.wp-block-button.is-style-fm-outline .wp-block-button__link[disabled],
.wp-block-button.is-style-fm-outline .wp-block-button__link[aria-disabled="true"] {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
}

/* ghost — 2026-08-01: affordance a riposo passata da bordo a sottolineatura
   (un bordo la rendeva quasi identica a outline). Hover: superficie soft +
   sottolineatura rimossa (il fondo colorato è già l'affordance in quel momento). */
.wp-block-button.is-style-fm-ghost .wp-block-button__link {
	background: transparent;
	color: var(--wp--custom--text-body);
	box-shadow: none;
	text-decoration-line: underline;
	text-decoration-color: var(--wp--custom--border-strong);
	text-underline-offset: 3px;
}
.wp-block-button.is-style-fm-ghost .wp-block-button__link:hover {
	background: var(--wp--custom--accent-soft);
	box-shadow: none;
	text-decoration-line: none;
}
.wp-block-button.is-style-fm-ghost .wp-block-button__link:focus {
	box-shadow: var(--wp--custom--ring-focus);
}
.wp-block-button.is-style-fm-ghost .wp-block-button__link:disabled,
.wp-block-button.is-style-fm-ghost .wp-block-button__link[disabled],
.wp-block-button.is-style-fm-ghost .wp-block-button__link[aria-disabled="true"] {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
	/* la sottolineatura non è toccata dallo stato disabled nell'oracolo
	   (disabledStyle non la sovrascrive): resta visibile anche qui. */
}

/* dark — ink pieno; nessun cambio colore/ombra in hover nell'oracolo (solo il
   sollevamento universale), quindi qui non c'è una regola :hover dedicata. */
.wp-block-button.is-style-fm-dark .wp-block-button__link {
	background: var(--wp--preset--color--ink-950);
	color: var(--wp--custom--on-accent);
	box-shadow: none;
}
.wp-block-button.is-style-fm-dark .wp-block-button__link:focus {
	box-shadow: var(--wp--custom--ring-focus);
}
.wp-block-button.is-style-fm-dark .wp-block-button__link:disabled,
.wp-block-button.is-style-fm-dark .wp-block-button__link[disabled],
.wp-block-button.is-style-fm-dark .wp-block-button__link[aria-disabled="true"] {
	background: var(--wp--custom--surface-sunken);
	color: var(--wp--custom--text-body);
	border-color: var(--wp--custom--border-default);
	box-shadow: none;
}