/* ============================================================================
 * Soul Contact — allineamento delle sezioni vecchie al design system.
 *
 * Ridefinisce le variabili stampate da Enfold in dynamic_avia/enfold_child.css.
 * Nessuna opzione e nessun contenuto toccati: SC_RESTYLE = false in
 * functions.php e il sito torna com'era.
 * ========================================================================== */

:root {
	--sc-accent:        #bb5a37;  /* = --terra di promo.css */
	--sc-accent-deep:   #9c4527;
	--sc-accent-darker: #7f3620;
	--sc-accent-light:  #d1734f;
	--sc-accent-light2: #c46543;

	--sc-dark:      #2a241d;      /* = --band-dark di promo.css */
	--sc-dark-2:    #352e25;
	--sc-dark-line: #453d32;
	--sc-on-dark:   #d9d2c6;

	/* Colori dedicati al fondo scuro. Il terracotta pieno su #2a241d sta a
	 * 3.38:1, sotto la soglia AA per il testo normale (4.5:1): sui fondi scuri
	 * serve la versione schiarita. */
	--sc-on-dark-title: #f0e6cf;  /* 12.4:1 — = --gold-soft di promo.css */
	--sc-on-dark-link:  #e08a67;  /* 5.9:1  — terracotta schiarito */

	/* Accento unico: prima erano #d33c25, #e65545, #fc9562 e #c3512f. */
	--enfold-main-color-primary:       var(--sc-accent);
	--enfold-main-color-heading:       var(--sc-accent);
	--enfold-main-color-button-border: var(--sc-accent-deep);
	--enfold-main-color-primary2:      var(--sc-accent-darker);
	--enfold-main-color-stripe:        var(--sc-accent-light);
	--enfold-main-color-stripe2:       var(--sc-accent-light2);

	--enfold-header-color-primary:       var(--sc-accent);
	--enfold-header-color-button-border: var(--sc-accent-deep);
	--enfold-header-color-primary2:      var(--sc-accent-darker);
	--enfold-header-color-stripe:        var(--sc-accent-light);
	--enfold-header-color-stripe2:       var(--sc-accent-light2);
	--enfold-header_burger_color:        var(--sc-accent);

	--enfold-alternate-color-primary:       var(--sc-accent);
	--enfold-alternate-color-button-border: var(--sc-accent-deep);
	--enfold-alternate-color-primary2:      var(--sc-accent-darker);
	--enfold-alternate-color-stripe:        var(--sc-accent-light);
	--enfold-alternate-color-stripe2:       var(--sc-accent-light2);

	/* Footer: fondo espresso caldo al posto del grigio #222. */
	--enfold-footer-color-bg:            var(--sc-dark);
	--enfold-footer-color-bg2:           var(--sc-dark-2);
	--enfold-footer-color-dark-bg2:      var(--sc-dark);
	--enfold-footer-color-masonry:       var(--sc-dark);
	--enfold-footer-color-border:        var(--sc-dark-line);
	--enfold-footer-color-color:         var(--sc-on-dark);
	/* Titoli e link NON possono più condividere l'accento: quando abbiamo
	 * unificato i quattro rossi in uno, titoli widget, grassetti e link sono
	 * finiti tutti sullo stesso colore, senza sottolineatura. Nel footer non si
	 * distingueva più cosa fosse cliccabile. */
	--enfold-footer-color-heading:       var(--sc-on-dark-title);
	--enfold-footer-color-primary:       var(--sc-on-dark-link);
	--enfold-footer-color-button-border: var(--sc-accent-deep);
	--enfold-footer-color-primary2:      var(--sc-accent-darker);
	--enfold-footer-color-stripe:        var(--sc-accent-light);
	--enfold-footer-color-stripe2:       var(--sc-accent-light2);

	--enfold-socket-color-bg:            var(--sc-accent);
	--enfold-socket-color-constant-font: var(--sc-accent);
	--enfold-socket-color-button-font:   var(--sc-accent);
}

/* ---------------------------------------------------------------- FOOTER ---
 * Le variabili qui sopra danno i colori; questi pochi ritocchi danno i ruoli.
 * Solo forma: nessun contenuto dei widget è toccato. */

/* Titolo widget: etichetta di struttura, non il pezzo più vistoso del footer.
 * Stessa forma del sopratitolo dei componenti (piccolo, spaziato, maiuscolo). */
#footer .widgettitle {
	font-size: 15px;
	font-weight: 700;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	margin-bottom: 14px;
}

/* Il grassetto nel testo non deve leggersi come un link: era anch'esso
 * terracotta, identico ai collegamenti veri. */
#footer .textwidget strong {
	color: var(--sc-on-dark-title);
	font-weight: 600;
}

/* Sottolineatura: senza, un link terracotta e un titolo terracotta erano la
 * stessa cosa. È l'unico segnale di clic che non dipende dal colore. */
#footer .textwidget a,
#footer .widget_custom_html a {
	text-decoration: underline;
	text-underline-offset: 3px;
	text-decoration-thickness: 1px;
	text-decoration-color: rgba(224,138,103,0.5);
}
#footer .textwidget a:hover,
#footer .widget_custom_html a:hover {
	color: var(--sc-on-dark-title);
	text-decoration-color: currentColor;
}

/* I due link delle policy sono un elenco, non due righe di prosa. */
#footer .widget_custom_html .textwidget a {
	display: inline-block;
	padding: 3px 0;
}

/* ------------------------------------------------------------ NEWSLETTER ---
 * Erano due pillole impilate (campo sopra, pulsante sotto) precedute
 * dall'etichetta "Indirizzo email:", che ripete parola per parola il
 * placeholder. Tre elementi per chiedere una mail sola.
 *
 * Diventano una capsula unica: bordo e sfondo stanno sul contenitore, campo e
 * pulsante ci vivono dentro sulla stessa riga. */

#footer .widget_mc4wp_form_widget .mc4wp-form-fields {
	display: flex;
	align-items: center;
	gap: 6px;
	max-width: 340px;
	padding: 4px 4px 4px 8px;
	border: 1px solid var(--sc-dark-line);
	border-radius: 999px;
	background: rgba(252, 249, 242, 0.05);
	transition: border-color .16s ease;
}

/* Il <p> del campo ha `margin-top: 30px` inline, scritto nel form salvato nel
 * plugin: senza !important non lo si supera dal foglio di stile. */
#footer .widget_mc4wp_form_widget .mc4wp-form-fields p {
	margin: 0 !important;
}
#footer .widget_mc4wp_form_widget .mc4wp-form-fields p:first-child {
	flex: 1 1 auto;
	min-width: 0;
}

/* L'etichetta resta negli screen reader ma sparisce alla vista. font-size: 0
 * e non display:none, perche' l'etichetta AVVOLGE il campo: nasconderla
 * nasconderebbe anche l'input. */
#footer .widget_mc4wp_form_widget label[for="email"] {
	display: block;
	font-size: 0;
}

#footer .widget_mc4wp_form_widget input[type="email"] {
	width: 100%;
	margin: 0;
	padding: 9px 10px;
	font-size: 14px;
	background: transparent;
	border: 0;
	border-radius: 999px;
	color: var(--sc-on-dark);
}
#footer .widget_mc4wp_form_widget input[type="email"]:focus {
	outline: none;
	box-shadow: none;
}

/* Il fuoco si vede sulla capsula: e' lei il campo, agli occhi di chi guarda. */
#footer .widget_mc4wp_form_widget .mc4wp-form-fields:focus-within {
	border-color: var(--sc-on-dark-link);
}

/* Pulsante: resta pillola come tutti i pulsanti del sito (promo.css), ma
 * dimensionato per stare dentro la capsula invece che occupare una riga.
 * Lo sfondo va rimesso a mano: Enfold usa `footer-color-primary` sia per i
 * link sia per gli sfondi dei pulsanti, e il terracotta schiarito che serve ai
 * link darebbe 2.6:1 col testo bianco sopra. Sul pieno siamo a 4.5:1. */
#footer input[type="submit"] {
	flex: 0 0 auto;
	padding: 10px 20px;
	font-size: 13px;
	font-weight: 600;
	letter-spacing: 0.04em;
	border-radius: 999px;
	background-color: var(--sc-accent);
	color: #fff;
	border-color: var(--sc-accent);
	transition: background .14s ease;
}
#footer input[type="submit"]:hover {
	background-color: var(--sc-accent-deep);
	border-color: var(--sc-accent-deep);
}

/* Messaggi del plugin (errore / iscrizione riuscita): stavano nel colore di
 * default del footer, illeggibili quando contano di piu'. */
#footer .mc4wp-response {
	margin-top: 10px;
	font-size: 13px;
	color: var(--sc-on-dark-title);
}

/* Socket: banda terracotta piena. Il testo va tenuto bianco pieno — su
 * #bb5a37 il bianco dà 4.54:1, la panna si ferma a 4.31 e non passa. */
#top .container_wrap.socket_color,
#top .container_wrap.socket_color .copyright {
	color: #fff;
}
#top .container_wrap.socket_color a {
	color: #fff;
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Plugin avia-mustache: ha un suo Bootstrap con i colori riscritti a mano,
 * fuori dalle variabili Enfold. `.card > .footer` (0,2,0) batte il `.footer`
 * del <style> in calendario.html senza bisogno di !important. */
.card > .footer {
	background-color: var(--sc-accent);
}

.btn-primary {
	--bs-btn-bg:                   var(--sc-accent);
	--bs-btn-border-color:         var(--sc-accent);
	--bs-btn-hover-bg:             var(--sc-accent-deep);
	--bs-btn-hover-border-color:   var(--sc-accent-deep);
	--bs-btn-active-bg:            var(--sc-accent-deep);
	--bs-btn-active-border-color:  var(--sc-accent-deep);
	--bs-btn-disabled-bg:          #bb5a3782;
	--bs-btn-disabled-border-color: #c98166;
}

/* 40 descrizioni corso e 6 pagine hanno style="color: #d33c25" scritto a mano
 * nel wysiwyg: le variabili non lo raggiungono. Sono tutti `color`, mai
 * background. I contenuti nel database restano intatti. */
[style*="#d33c25"],
[style*="#D33C25"],
[style*="#e65545"],
[style*="#E65545"] {
	color: var(--sc-accent) !important;
}

/* --------------------------------------------------------- SCROLL TOP ---
 * Enfold la disegna come un quadrato pieno da 50px nel colore principale: a
 * fondo pagina diventa un blocco terracotta appoggiato sulla banda del socket,
 * gia' terracotta. Due pieni dello stesso colore attaccati.
 *
 * Qui diventa un cerchio scuro con bordo sottile, che si accende di terracotta
 * al passaggio del mouse: presente ma non protagonista. */

#top #scroll-top-link {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	right: 24px;
	bottom: 84px;                 /* sopra la banda del socket */
	border-radius: 999px;
	background-color: var(--sc-dark);
	border: 1px solid var(--sc-dark-line);
	color: var(--sc-on-dark);
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.22);
	transition: background-color .16s ease, border-color .16s ease, color .16s ease;
}

/* Enfold la tiene al 70%: slavata sopra i contenuti chiari. */
#top #scroll-top-link.avia_pop_class {
	opacity: 1;
}

#top #scroll-top-link:hover,
#top #scroll-top-link:focus-visible {
	background-color: var(--sc-accent);
	border-color: var(--sc-accent);
	color: #fff;
}

/* Il path dell'SVG non ha un `fill` proprio: senza questo eredita il nero. Il
 * `margin-top: 18px` di Enfold centrava l'icona nel quadrato da 50px. */
#top #scroll-top-link.avia-svg-icon svg:first-child {
	height: 14px;
	width: auto;
	margin-top: 0;
	fill: currentColor;
}

/* --------------------------------------------------------- HEADER TABLET ---
 * Fra 768 e 989px Enfold infila logo centrato (assoluto), burger, icone social
 * e carrello nello stesso spazio, e non ci stanno: a 768px il burger finisce a
 * 2px dal logo e il carrello va a `right: 787` — 34px oltre il contenitore.
 *
 * Le social in #header_main sono un duplicato di quelle di #header_meta, che
 * a queste larghezze Enfold nasconde lasciando una banda vuota di 31px. Tolte
 * entrambe: la banda sparisce e il burger si stacca dal logo di ~115px.
 * Sopra i 990px non si tocca niente (lì le social nel meta si vedono).
 *
 * Provvisorio per scelta: l'header va rifatto togliendo le social. */
@media only screen and (max-width: 989px) {

	#top #header_meta {
		display: none !important;
	}

	#top #header_main .social_bookmarks {
		display: none !important;
	}
}