/* ==========================================================================
   Elementor Buttons - Olimpia Milano
   File condiviso (enqueued ovunque dal child theme).

   Sistema UNICO per i bottoni Elementor (widget "Button" / "Call to Action").
   Rispecchia il design language del sistema condiviso buttons.css
   (.olimpia-btn): forma a pillola, font Inter, design token, geometria e
   transizioni coerenti.

   USO: nel widget Elementor, campo "Avanzate → CSS Classes", aggiungere UNA
   di queste classi al wrapper:
     .main-red            filled rosso  (sfondo primary, testo bianco)
     .main-red-dark       filled rosso, hover rosso scuro
     .main-white          outline rosso (trasparente, bordo/testo rossi)
     .main-white-black    outline rosso con hover nero
     .main-black-outline  outline chiaro su sfondo scuro

   Gli stili usano !important perché devono vincere sugli stili inline/globali
   generati da Elementor per a.elementor-button.

   NOTA: questi stili erano duplicati (con bug) nel "Custom CSS" delle singole
   pagine Elementor (wp-content/uploads/elementor/css/post-*.css). Ora che sono
   centralizzati qui, quel Custom CSS per-pagina può essere rimosso lasciando
   solo la classe sul widget.
   ========================================================================== */


/* ==========================================================================
   Base condivisa (geometria/tipografia comuni a tutte le varianti)
   ========================================================================== */

.main-red a.elementor-button,
.main-red-dark a.elementor-button,
.main-white a.elementor-button,
.main-white-black a.elementor-button,
.main-black-outline a.elementor-button {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 12px;
	padding: 16px 32px !important;
	border: 1.5px solid transparent !important;
	border-radius: 999px !important;
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	line-height: 1.25 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	text-decoration: none !important;
	transition: all var(--transition-fast) !important;
}

/* Le icone (SVG Elementor) ereditano il colore del testo:
   così cambiano automaticamente anche in hover. */
.main-red a.elementor-button svg,
.main-red-dark a.elementor-button svg,
.main-white a.elementor-button svg,
.main-white-black a.elementor-button svg,
.main-black-outline a.elementor-button svg {
	fill: currentColor !important;
	transition: fill var(--transition-fast) !important;
}


/* ==========================================================================
   Filled Rosso — sfondo primary, testo bianco. Hover: inverte (bianco/rosso).
   ========================================================================== */

.main-red a.elementor-button {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

.main-red a.elementor-button:hover,
.main-red a.elementor-button:focus-visible {
	background: var(--color-white) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}


/* ==========================================================================
   Filled Rosso / Hover Rosso Scuro — sfondo primary, testo bianco.
   Hover: sfondo primary-dark (nessuna inversione).
   ========================================================================== */

.main-red-dark a.elementor-button {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}

.main-red-dark a.elementor-button:hover,
.main-red-dark a.elementor-button:focus-visible {
	background: var(--color-primary-dark) !important;
	border-color: var(--color-primary-dark) !important;
	color: var(--color-white) !important;
}


/* ==========================================================================
   Outline Rosso — trasparente, bordo/testo rossi. Hover: fill rosso.
   ========================================================================== */

.main-white a.elementor-button {
	background: var(--color-white) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
}

.main-white a.elementor-button:hover,
.main-white a.elementor-button:focus-visible {
	background: var(--color-primary) !important;
	border-color: var(--color-primary) !important;
	color: var(--color-white) !important;
}


/* ==========================================================================
   Outline Rosso / Hover Nero — trasparente, bordo/testo rossi. Hover: fill scuro.
   ========================================================================== */

.main-white-black a.elementor-button {
	background: transparent !important;
	border-color: var(--color-primary) !important;
	color: var(--color-primary) !important;
	background-color: var(--color-white) !important;
}

.main-white-black a.elementor-button:hover,
.main-white-black a.elementor-button:focus-visible {
	background: var(--color-gray-900) !important;
	border-color: var(--color-gray-900) !important;
	color: var(--color-white) !important;
}


/* ==========================================================================
   Outline Chiaro (su sfondo scuro) — sfondo scuro, bordo/testo bianchi.
   Hover: fill bianco, testo scuro.
   ========================================================================== */

.main-black-outline a.elementor-button {
	background: var(--color-gray-900) !important;
	border-color: var(--color-white) !important;
	color: var(--color-white) !important;
}

.main-black-outline a.elementor-button:hover,
.main-black-outline a.elementor-button:focus-visible {
	background: var(--color-white) !important;
	border-color: var(--color-white) !important;
	color: var(--color-gray-900) !important;
}