/**
 * Il colore del testo del sito, portato sopra la soglia di leggibilità.
 * v1.0
 *
 * ☠️ IL PROBLEMA, MISURATO.
 * Il tema usa `--theme-color-text` = #787370, un grigio caldo. Contro
 * il bianco fa 4,68:1 — passa il minimo di 4,5 per un soffio. Ma il
 * tema stesso usa come fondo di quasi tutte le sezioni il crema
 * #FFF4EE (`--theme-color-alter_bg_color`), e lì lo stesso grigio
 * scende a **4,33:1**: sotto la soglia.
 *
 * Il contrasto va misurato sul fondo su cui il testo sta DAVVERO, non
 * sul bianco per comodità: è esattamente lì che il difetto si
 * nascondeva.
 *
 * Sostituto: #5f5a56 — stessa famiglia calda, nessun cambio nel
 * carattere del marchio, ma 6,81:1 su bianco e 6,30:1 sul crema.
 *
 * ⚠️ SI TOCCA SOLO IL TESTO SU FONDI CHIARI.
 * Il tema tiene token separati per le zone scure (`extra_text` per il
 * piè di pagina su #202020, `inverse_text` per i blocchi invertiti):
 * quelli restano come sono. Scurire un testo che sta su fondo scuro lo
 * renderebbe MENO leggibile, che è il difetto opposto.
 */

:root,
html body.scheme_default,
html body .scheme_default,
html body.scheme_light,
html body .scheme_light {
	/*
	 * ⚠️ PERCHE `html body` E NON SOLO `.scheme_default`.
	 * Il tema dichiara `.scheme_default, body.scheme_default` con la
	 * stessa forza di una regola nostra, e **la combinazione CSS di
	 * LiteSpeed mette questo foglio PRIMA di quello del tema**: a
	 * parita di specificita vince chi arriva dopo, cioe il tema.
	 * Verificato: il token restava #787370 nonostante la priorita 999
	 * sull'accodamento, che governa l'ordine di richiesta ma non
	 * quello dentro il file combinato.
	 *
	 * Con `html body` la regola vince per specificita, e l'ordine
	 * smette di contare.
	 */
	--theme-color-text: #5f5a56;
	--theme-color-alter_text: #5f5a56;
	--theme-color-input_text: #5f5a56;

	/*
	 * `text_light` (#9A9A9A) fa 2,81:1 su bianco: non passa da nessuna
	 * parte. Il tema lo usa per note e didascalie, cioe testo che va
	 * letto davvero.
	 */
	--theme-color-text_light: #767069;   /* 4,80:1 su bianco */
	--theme-color-alter_light: #767069;
	--theme-color-input_light: #767069;
}

/* ═══════════ titoli della home: semantica corretta, misura invariata ═══════════ */

/*
 * ☠️ LA HOME AVEVA CINQUE h1.
 * Quattro sono titoli di sezione, non titoli della pagina. Portati a
 * h2 — ma quei titoli NON dichiarano la propria dimensione, la
 * prendono dal tag: misurato, h1 = 38px/42px e h2 = 30px/32px.
 * Cambiare il tag e basta avrebbe rimpicciolito quattro titoli della
 * home di 8px, cioe una modifica visibile fatta per una ragione
 * invisibile. Qui la misura torna quella di prima, legata ai singoli
 * elementi per non toccare nessun altro h2 del sito.
 */
.elementor-element-c657ac8 h2.sc_item_title,
.elementor-element-b512f48 h2.sc_item_title,
.elementor-element-335ff9c h2.sc_item_title,
.elementor-element-37db898d h2.sc_item_title {
	font-size: 38px;
	line-height: 42px;
	font-weight: 400;
}

/**
 * ☠️ IL ROSA SOTTO IL MOUSE: 1,58:1.
 * Il tema usa `--theme-color-text_hover` = #FFB6F8 come SFONDO dei
 * bottoni al passaggio del mouse, tenendo il testo bianco
 * (`--theme-color-inverse_link`). Misurato sul bottone «ACQUISTA» di
 * ogni scheda prodotto del negozio: fondo rgb(255,182,248), testo
 * rgb(255,255,255), contrasto **1,58:1**. La soglia per un testo di
 * quella dimensione e 4,5:1. Nel momento in cui il cliente punta il
 * bottone per comprare, la scritta sparisce.
 *
 * ⚠️ NON E' UN CASO ISOLATO: sono 177 i selettori del tema che
 * impostano quel rosa come sfondo hover. `css/moduli.css` ne copriva
 * solo tre — quelli dei moduli — quindi «Accedi» e «Registrati»
 * risultavano corretti e tutto il resto no. In particolare restavano
 * scoperti i bottoni che sono COLLEGAMENTI (`a.button`): il bottone
 * d'acquisto delle schede prodotto, «Procedi all'ordine» del carrello,
 * i bottoni del mini-carrello.
 *
 * ⚠️ IL ROSA NON SI TOCCA DOVE E' TESTO.
 * La stessa variabile e usata come COLORE DEL TESTO in altri 174
 * selettori — `a:hover` fra questi — dove sta su fondi scuri e
 * funziona. Qui si interviene solo dove e SFONDO con testo bianco
 * sopra, cioe dove il difetto e.
 *
 * Sostituto: `--theme-color-text_link_blend` (#690D4C), che e gia il
 * colore usato dai moduli e dal tema per lo stesso scopo: **11,91:1**.
 * Non e un colore nuovo, e quello che il tema stesso considera la
 * variante scura del proprio bordeaux.
 *
 * ⚠️ IL PREFISSO `body` NON E' DECORATIVO.
 * Aggiunge un elemento alla specificita (+0,0,1) e mette queste regole
 * sopra quelle del tema anche quando LiteSpeed combina i CSS e sposta
 * il foglio del tema figlio PRIMA di quello del tema: cosi il fix non
 * dipende dall'ordine di dichiarazione.
 *
 * ☠ IL PRIMO TENTATIVO USAVA `body`, E NON FUNZIONAVA.
 * Su negozio, carrello e cassa la classe `woocommerce` sta sul `body`
 * STESSO, non su un contenitore interno: `body .woocommerce` cerca un
 * discendente con quella classe, che li non esiste, e la regola non
 * matchava nulla. `html` e antenato in entrambi i casi.
 */

html form button:not(.components-button):hover,
html form button:not(.components-button):focus,
html input[type="submit"]:hover,
html input[type="submit"]:focus,
html input[type="reset"]:hover,
html input[type="reset"]:focus,
html input[type="button"]:hover,
html input[type="button"]:focus,
html .theme_button:hover,
html .theme_button:focus,
html .post_item .more-link:hover,
html .wp-block-button:not(.is-style-outline) .wp-block-button__link:hover,
html .wp-block-button:not(.is-style-outline) .wp-block-button__link:focus,
html .wp-block-search button.wp-block-search__button:hover,
html .sc_button_default:hover,
html .sc_button_default:focus,
html .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):hover,
html .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image):focus,
html .sc_item_pagination_load_more .nav-links:hover,
html .sc_item_pagination_load_more .nav-load-more:hover,
html .sc_item_pagination_load_more .woocommerce-load-more:hover,
html .nav-links-more .nav-links:hover,
html .nav-links-more .nav-load-more:hover,
html .nav-links-more .woocommerce-load-more:hover,
html .woocommerce #btn-buy:hover,
html .woocommerce #btn-buy:focus,
html .woocommerce #respond input#submit:hover,
html .woocommerce #respond input#submit:focus,
html .woocommerce #respond input#submit.alt:hover,
html .woocommerce #respond input#submit.alt:focus,
html .woocommerce .button:hover,
html .woocommerce .button:focus,
html .woocommerce-page .button:hover,
html .woocommerce-page .button:focus,
html .woocommerce a.button:hover,
html .woocommerce a.button:focus,
html .woocommerce-page a.button:hover,
html .woocommerce-page a.button:focus,
html .woocommerce a.button.alt:hover,
html .woocommerce a.button.alt:focus,
html .woocommerce button.button:hover,
html .woocommerce button.button:focus,
html .woocommerce-page button.button:hover,
html .woocommerce-page button.button:focus,
html .woocommerce button.button.alt:hover,
html .woocommerce button.button.alt:focus,
html .woocommerce input.button:hover,
html .woocommerce input.button:focus,
html .woocommerce-page input.button:hover,
html .woocommerce-page input.button:focus,
html .woocommerce input.button.alt:hover,
html .woocommerce input.button.alt:focus,
html .woocommerce input[type="button"]:hover,
html .woocommerce input[type="button"]:focus,
html .woocommerce-page input[type="button"]:hover,
html .woocommerce-page input[type="button"]:focus,
html .woocommerce input[type="submit"]:hover,
html .woocommerce input[type="submit"]:focus,
html .woocommerce-page input[type="submit"]:hover,
html .woocommerce-page input[type="submit"]:focus,
html .woocommerce ul.products li.product .button:hover,
html .woocommerce ul.products li.product .button:focus,
html .woocommerce div.product form.cart .button:hover,
html .woocommerce div.product form.cart .button:focus,
html .woocommerce table.cart td.actions .button:hover,
html .woocommerce table.cart td.actions .button:focus,
html .woocommerce table.my_account_orders .order-actions .button:hover,
html .woocommerce table.my_account_orders .order-actions .button:focus,
html .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:hover,
html .woocommerce-cart .wc-proceed-to-checkout a.checkout-button:focus,
html .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:hover,
html .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button:focus,
html #add_payment_method .wc-proceed-to-checkout a.checkout-button:hover,
html #add_payment_method .wc-proceed-to-checkout a.checkout-button:focus,
html .woocommerce #review_form #respond p.form-submit input[type="submit"]:hover,
html .woocommerce #review_form #respond p.form-submit input[type="submit"]:focus,
html .woocommerce-page #review_form #respond p.form-submit input[type="submit"]:hover,
html .woocommerce-page #review_form #respond p.form-submit input[type="submit"]:focus {
	background-color: var( --theme-color-text_link_blend, #690D4C );
	border-color: var( --theme-color-text_link_blend, #690D4C );
	color: var( --theme-color-inverse_link, #FFFFFF );
}

/**
 * ☠️ OGNI BOTTONE SI ACCENDEVA IN MODO DIVERSO.
 * Il colore hover ormai e lo stesso dappertutto (blocco qui sopra), ma
 * il MODO in cui ci arriva no. Misurato sui bottoni veri:
 *
 *   ISCRIVITI (newsletter)  background-color .18s cubic-bezier(.22,1,.36,1)
 *   ACQUISTA, Pagamento     0.3s          ← «tutte le proprieta», curva predefinita
 *   APPLICA FILTRI          background .2s
 *   filtri colore/lunghezza border-color .15s, background .15s
 *   icone della barra fissa color .16s ease-out, background-color .16s ease-out
 *   barra d'acquisto        background .18s
 *
 * Sei comportamenti diversi sullo stesso gesto. E `transition: 0.3s`
 * senza proprieta significa «anima TUTTO»: se una regola cambia anche
 * un padding o un bordo, quello si anima insieme al colore, con effetti
 * che nessuno ha voluto.
 *
 * ✅ IL RIFERIMENTO E' IL BOTTONE DELLA NEWSLETTER, scelto dal cliente.
 * Solo il colore cambia, in 18 centesimi, con una curva che parte veloce
 * e si posa (`cubic-bezier(.22,1,.36,1)`, la «ease-out-quint»). Il
 * bottone non si muove, non si ingrandisce, non prende ombra — e infatti
 * nessun bottone del sito ha trasformazioni in hover: quello era gia
 * coerente.
 *
 * ⚠️ SI DICHIARA A RIPOSO, NON IN HOVER.
 * Una transizione scritta dentro `:hover` vale solo all'andata: al
 * ritorno il colore scatta. Va sull'elemento normale, cosi vale in
 * entrambe le direzioni.
 *
 * ⚠️ SI ELENCANO LE PROPRIETA', non si scrive `all`.
 * Animare `all` e la ragione per cui i bottoni del tema si comportano in
 * modo imprevedibile: qui si animano solo il fondo e il bordo, che sono
 * le uniche cose che cambiano.
 */

html #add_payment_method .wc-proceed-to-checkout a.checkout-button,
html .nav-links-more .nav-links,
html .nav-links-more .nav-load-more,
html .nav-links-more .woocommerce-load-more,
html .post_item .more-link,
html .sc_button:not(.sc_button_simple):not(.sc_button_bordered):not(.sc_button_bg_image),
html .sc_button_default,
html .sc_item_pagination_load_more .nav-links,
html .sc_item_pagination_load_more .nav-load-more,
html .sc_item_pagination_load_more .woocommerce-load-more,
html .theme_button,
html .woocommerce #btn-buy,
html .woocommerce #respond input#submit,
html .woocommerce #respond input#submit.alt,
html .woocommerce #review_form #respond p.form-submit input[type="submit"],
html .woocommerce .button,
html .woocommerce a.button,
html .woocommerce a.button.alt,
html .woocommerce button.button,
html .woocommerce button.button.alt,
html .woocommerce div.product form.cart .button,
html .woocommerce input.button,
html .woocommerce input.button.alt,
html .woocommerce input[type="button"],
html .woocommerce input[type="submit"],
html .woocommerce table.cart td.actions .button,
html .woocommerce table.my_account_orders .order-actions .button,
html .woocommerce ul.products li.product .button,
html .woocommerce-cart .wc-proceed-to-checkout a.checkout-button,
html .woocommerce-checkout .wc-proceed-to-checkout a.checkout-button,
html .woocommerce-page #review_form #respond p.form-submit input[type="submit"],
html .woocommerce-page .button,
html .woocommerce-page a.button,
html .woocommerce-page button.button,
html .woocommerce-page input.button,
html .woocommerce-page input[type="button"],
html .woocommerce-page input[type="submit"],
html .wp-block-button:not(.is-style-outline) .wp-block-button__link,
html .wp-block-search button.wp-block-search__button,
html form button:not(.components-button),
html input[type="button"],
html input[type="reset"],
html input[type="submit"]
 {
	transition: background-color 0.18s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            border-color     0.18s cubic-bezier( 0.22, 1, 0.36, 1 );
}

/**
 * I componenti nostri: stessa durata e stessa curva, ma ciascuno
 * continua ad animare le proprie proprieta.
 *
 * ⚠️ NON SI UNIFORMA CIO' CHE ANIMANO, SOLO COME LO ANIMANO.
 * Le icone della barra fissa cambiano anche il colore del segno, e i
 * filtri anche il bordo: toglierglielo li farebbe scattare. Quello che
 * si allinea e il tempo e la curva, cioe la sensazione.
 */
/*
 * ⚠️ I BOTTONI DEL PANNELLO FILTRI NON STANNO QUI.
 * `.ch-dd-btn`, `.ch-mode-btn` e `.ch-apply-btn` dichiarano la propria
 * transizione in `css/ch-filter-dropdown.css` con `!important` — serve
 * loro contro il `button { transition: 0.3s }` del tema. Ripeterli qui
 * avrebbe lasciato una regola che non vince mai, cioe una bugia nel
 * foglio: sono stati allineati al riferimento nel file che li possiede.
 */
html .ch-barra__azione,
html .ch-ba-bottone {
	transition: background-color 0.18s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            border-color     0.18s cubic-bezier( 0.22, 1, 0.36, 1 ),
	            color            0.18s cubic-bezier( 0.22, 1, 0.36, 1 );
}

/**
 * ⚠️ CHI HA CHIESTO DI NON VEDERE ANIMAZIONI NON DEVE VEDERLE.
 * Non e una cortesia: per alcune persone il movimento sullo schermo
 * provoca nausea o emicrania, e il sistema operativo ha un interruttore
 * apposta. Il colore cambia lo stesso, di colpo.
 */
@media ( prefers-reduced-motion: reduce ) {
	html a,
	html button,
	html input[type="submit"],
	html input[type="button"],
	html input[type="reset"],
	html .button,
	html .theme_button,
	html .sc_button,
	html .ch-barra__azione,
	html .ch-dd-btn,
	html .ch-mode-btn,
	html .ch-apply-btn,
	html .ch-ba-bottone {
		/*
		 * ⚠️ QUI `!important` E' LEGITTIMO, ED E' L'UNICO POSTO.
		 * I bottoni del pannello filtri dichiarano la loro transizione
		 * con `!important`: senza pari peso questa regola perderebbe, e
		 * chi ha chiesto di non vedere animazioni continuerebbe a
		 * vederle. Contro un `!important` si puo rispondere solo con un
		 * `!important` — e una garanzia di accessibilita e il caso in
		 * cui vale la pena.
		 */
		transition-duration: 0.01ms !important;
	}
}

/**
 * ☠️ VENTINOVE REGOLE DEL TEMA IMPONGONO IL ROSA CON `!important`.
 * Il blocco piu sopra copre i bottoni WooCommerce e quelli del tema, ma
 * perde su una famiglia intera: i bottoni disegnati con Elementor e con
 * gli shortcode del tema (`.sc_button`, `.theme_button`), dove il rosa
 * e dichiarato `!important` e quindi vince a prescindere dalla
 * specificita.
 *
 * Misurato sul bottone «CONTATTACI» della pagina Chi Siamo: la regola
 * vincente e `.sc_button.sc_button_decoration:not(.color_style_dark):hover`,
 * specificita (0,5,0) ma con `!important`, contro la nostra (0,8,1)
 * senza. Risultato: #FFB6F8 su testo bianco, **1,58:1**, sul bottone che
 * porta alla pagina dei contatti.
 *
 * ⚠️ QUI `!important` E' L'UNICA RISPOSTA POSSIBILE, ed e il caso in cui
 * e legittimo: contro un altro `!important`. Non e una scorciatoia per
 * evitare di capire la cascata — la cascata e stata calcolata, ed e
 * questo che dice.
 *
 * ⚠️ ANCHE I BOTTONI CON IL BORDO.
 * `.sc_button_bordered` e `.wp-block-button.is-style-outline` a riposo
 * sono vuoti col solo contorno, e al passaggio del mouse si RIEMPIONO:
 * si riempivano di rosa, con lo stesso problema di leggibilita.
 *
 * ⚠️ COSA NON E' STATO TOCCATO.
 * Le etichette di categoria che il tema sovrappone alle foto degli
 * articoli (`.sc_blogger_*`, `.post_meta`) usano lo stesso rosa, ma non
 * sono bottoni: sono un accento decorativo su un'immagine, e cambiarle
 * sarebbe una scelta di design, non una correzione.
 */

html .sidebar_small_screen_above .sidebar_control:hover,
html .sidebar_small_screen_above .sidebar_control:focus,
html .sc_button_bordered:not(.sc_button_bg_image):hover,
html .sc_button_bordered:not(.sc_button_bg_image):focus,
html .wp-block-button.is-style-outline .wp-block-button__link:hover,
html .wp-block-button.is-style-outline .wp-block-button__link:focus,
html .theme_button:hover,
html .theme_button:focus,
html .theme_button.color_style_link2:hover,
html .theme_button.color_style_link2:focus,
html .color_style_link2 .theme_button:hover,
html .color_style_link2 .theme_button:focus,
html .theme_button.color_style_link3:hover,
html .theme_button.color_style_link3:focus,
html .color_style_link3 .theme_button:hover,
html .color_style_link3 .theme_button:focus,
html .sc_price_light .sc_price_item .sc_price_item_link:hover,
html .sc_price_light .sc_price_item .sc_price_item_link:focus,
html .sc_price_simple .sc_price_item .sc_price_item_link:hover,
html .sc_price_simple .sc_price_item .sc_price_item_link:focus,
html .sc_price_simple_shadow .sc_price_item .sc_price_item_link:hover,
html .sc_price_simple_shadow .sc_price_item .sc_price_item_link:focus,
html .sc_price_plain .sc_price_item .sc_price_item_link:hover,
html .sc_price_plain .sc_price_item .sc_price_item_link:focus,
html .sc_price_focus .sc_price_item .sc_price_item_link:hover,
html .sc_price_focus .sc_price_item .sc_price_item_link:focus,
html .sc_button.sc_button_decoration:not(.color_style_dark):hover,
html .sc_button.sc_button_decoration:not(.color_style_dark).color_style_link2:hover,
html .sc_button.sc_button_decoration:not(.color_style_dark).color_style_link3:hover {
	background-color: var( --theme-color-text_link_blend, #690D4C ) !important;
	border-color:     var( --theme-color-text_link_blend, #690D4C ) !important;
	color:            var( --theme-color-inverse_link, #FFFFFF ) !important;
}