/* Tipografia, footer, menu, loghi dei partner, link e pulsanti: regole di base del sito pubblico.
   Caricato in ordine dopo gli altri file override (site, forms, content, customer, order-request, extras):
   la cascata è quella di un unico foglio. */

:root {
	/* percentuale da sottrarre */
	--logo-reduction: 10;
	/* distanza del logo dal top dell'header (negativa = sopra l'header) */
	--logo-top-offset: -0px;
	--main-color: #554880;
	--error-color: #d0021b;
	--success-color: #2a8a3e;
	--border-color: #dbdbdb;
	--muted-color: #828282;
	--input-text-color: #1f1f1f;
	--white: #fff;
	--gray-200: #dedede;
	--gray-400: #aaa;
	--gray-500: #888;
	--gray-700: #555;
	--gray-800: #424242;
	--main-color-dark: #5f5196;
	--danger-hover-color: #e53537;
}

body {
	color: #4c4a4a !important;
	/* Il tema fissa 24px in pixel: a 12-14px risultava troppo ampio (1,7-2,0 volte). In rapporto
	   l'interlinea segue la dimensione del testo (14px → 21px, 16px → 24px come prima). */
	line-height: 1.5;
}

li {
	line-height: 1.5;
}

/* Titoli: il tema li fissa a 29px qualunque sia la dimensione (un h2 a 14px risultava a 2,07 volte,
   un h1 a 34px a 0,85 e andando a capo si sovrapponeva). Il menu principale (#mainmenu ul li, 22px)
   resta com'è: dipende dall'altezza della barra. */
h1,
h2,
h3,
h4,
h5,
h6 {
	line-height: 1.25;
}

.text-center {
	text-align: center !important;
}

/* Footer: 3 colonne uguali (il tema di base usa .footer-logo 34% +
   .footer-column 21.4%, pensate per un layout a 4 colonne mai completato).
   La prima colonna riprende lo sfondo decorativo del tema (footer_logo_bg.jpg),
   tolto dal <footer> stesso per non ripetersi dietro le altre colonne. */
footer {
	display: flex;
	background: var(--white);
	overflow: hidden;
	line-height: 16px;
}

.footer-column {
	flex: 0 0 37.5%;
	box-sizing: border-box;
	padding: 24px;
}

.footer-column+.footer-column {
	border-left: 1px solid #dfdfdf;
}

.footer-column-brand {
	flex: 0 0 25%;
	background: var(--white) url(/assets/template/images/footer_logo_bg.jpg) repeat -100px 0px;
}

.footer-column img.retina {
	width: 130px;
	height: auto;
}

.footer-menu {
	list-style: none;
	margin: 0;
	padding: 0;
}

.footer-menu li {
	margin-bottom: 0;
}

/* Le sottovoci di "Azienda" stanno in un <ul> annidato: base.css (ul ul li) le fissa a 14px/16px, mentre
   le voci di primo livello ereditano 12px/18px. Nel footer tutte le voci hanno la stessa dimensione. */
.footer-menu ul {
	font-size: inherit;
}

.footer-menu ul li {
	font-size: inherit;
	line-height: inherit;
	margin-bottom: 0;
}

@media only screen and (max-width: 767px) {
	footer {
		flex-direction: column;
	}

	.footer-column,
	.footer-column-brand {
		flex-basis: auto;
	}

	.footer-column+.footer-column {
		border-left: none;
		border-top: 1px solid #dfdfdf;
	}

	.footer-column-brand {
		text-align: center;
	}

	.footer-column-brand img.retina {
		margin: 0 auto;
	}
}

#menu li {
	padding: 13px 8px !important;
}

/* Solo le voci di primo livello: il tema imposta già un colore leggibile
   per i link del sottomenu a tendina (#menu li ul a in style.css), pensato
   per il suo sfondo chiaro — non va sovrascritto qui. */
#menu>li>a {
	color: White !important;
	letter-spacing: 0 !important;
}

/* #mainmenu ul li.selected (style.css) mette una barra grigia di 5px sotto
   la voce corrente, pensata per le voci di primo livello — su una sottovoce
   del dropdown "Azienda" (es. "Chi siamo" quando si è su /azienda) spunta
   come riga sporca dentro il riquadro chiaro del menu a tendina. */
#menu ul li.selected {
	margin-bottom: 0;
	border-bottom: none;
}

/* #menu li li a:hover (style.css) scurisce lo sfondo della sottovoce, ma il
   colore del testo in quello stato dipende da quale delle tante varianti di
   style.css matcha (normale, .dropdown, .selected, .selected + hover...),
   ognuna con specificità diversa — risultato: a seconda del caso il testo
   resta grigio scuro (#787878/#a5a5a5) o quasi bianco (#ebebeb) invece di
   bianco pieno. Invece di inseguire ogni combinazione, !important taglia la
   testa al toro: bianco garantito su ogni sottovoce in hover/focus. */
#menu ul li a:hover,
#menu ul li a:focus {
	color: var(--white) !important;
}

.partner-logos {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-wrap: wrap;
}

.partner-logos img {
	margin: 10px;
}

aside h1,
aside h2,
aside h3,
aside h4,
aside h5,
aside h6 {
	border-left: 3px solid var(--main-color);
}

a:link,
a:visited,
a:active {
	color: var(--main-color) !important;
	text-decoration: none;
	outline: 0;
}

a.btn-primary,
button.btn-primary {
	display: inline-block;
	background-color: var(--main-color);
	color: var(--white) !important;
	padding: 6px 16px;
	border: 0;
	border-radius: 4px;
	cursor: pointer;
}

a.btn-primary:hover,
a.btn-primary:focus,
button.btn-primary:hover,
button.btn-primary:focus {
	opacity: 0.9;
}