/*
 * Regole del tema figlio (twenty-twenty-child/style.css) che puntavano al markup Elementor,
 * riscritte per il markup SG. Le regole originali restano nel tema ma non trovano più
 * elementi: quando Elementor sarà rimosso si potranno eliminare da lì.
 */

/* Spazio sopra la pagina. Il tema figlio mette body { padding-top: 153px }, ma nel sito con
   Elementor gli stili globali di WordPress (body { padding: 0 }) arrivavano dopo e lo annullavano.
   Senza Elementor arrivano prima e i 153px resterebbero: sotto l'header fisso comparirebbe una
   fascia bianca. Da mobile resta il padding del tema (html body { padding-top: 90px !important }). */
html body {
	padding-top: 0;
}

/* Pulsanti */
@media only screen and (max-width: 768px) {
	.sg-btn,
	.sg-btn .sg-button,
	.ekeria-btn-test .sg-button,
	.ekeria-btn-test-1 .sg-button,
	.eke-btn-ico,
	.eke-btn-ico .sg-button {
		width: 100%;
	}
}

.sg-button-wrap.ekeria-btn-test .sg-button,
.sg-button-wrap.ekeria-btn-test-2 .sg-button {
	transition: all 0.3s ease;
	/* Orari / Contatti nell'header: su una riga anche tra 1025 e 1280px. */
	white-space: nowrap;
}

.sg-button-wrap.ekeria-btn-test .sg-button:hover {
	border: 2px solid #4472c4;
	background-color: transparent;
}

.sg-button-wrap.ekeria-btn-test-2 .sg-button:hover {
	background-color: #4472c4;
}

/* La colonna dei pulsanti dell'header (30%) si allarga quanto serve sugli schermi stretti. */
@media (min-width: 1025px) and (max-width: 1279px) {
	.sg-c:has(> .ekeria-btn-test) {
		flex-shrink: 0;
		width: auto;
	}
}

.eke-btn-ico .sg-button-icon svg {
	width: 35px;
}

/* Card della homepage e dei contatti */
.sg-c.eke-card {
	transition: all 0.3s ease;
	box-shadow: 0 0 10px 0 rgba(0, 0, 0, 0.15);
}

.sg-c.eke-card:hover {
	transform: scale(1.03);
	box-shadow: 0 0 30px 0 rgba(0, 0, 0, 0.15);
}

.sg-heading.eke-card-title,
.sg-c.eke-card .eke-text-area {
	transition: all 0.3s ease;
}

/* Card articoli e date */
.sg-c.eke-event-container {
	height: 100% !important;
}

.sg-heading.eke-data-hr {
	padding: 5px;
	border-radius: 3px;
	background-color: white;
	text-align: center;
}

.sg-c.sacro-cuore { border-color: #4472c4 !important; }
.sacro-cuore .sg-c.eke-date-content { background-color: #96b4ea !important; }
.sacro-cuore .sg-c.eke-date { background-color: #4472c4 !important; }

.sg-c.santa-cecilia { border-color: #a9c656 !important; }
.santa-cecilia .sg-c.eke-date-content { background-color: #c9de8e !important; }
.santa-cecilia .sg-c.eke-date { background-color: #a9c656 !important; }

.sg-c.santa-marcellina { border-color: #df2129 !important; }
.santa-marcellina .sg-c.eke-date { background-color: #df2129 !important; }
.santa-marcellina .sg-c.eke-date-content { background-color: #e36469 !important; }

.sg-c.santa-maria { border-color: #fbb112 !important; }
.santa-maria .sg-c.eke-date { background-color: #fbb112 !important; }
.santa-maria .sg-c.eke-date-content { background-color: #f5c968 !important; }

.santa-cecilia h1.sg-heading,
.santa-marcellina h1.sg-heading,
.santa-maria h1.sg-heading {
	color: black !important;
}

/* Shortcode del tema dentro [sg_html] */
.orari-messe-cp .sg-html {
	height: 100%;
}

.sg-html .my-table thead tr {
	background-color: var(--sg-c-sg-cadeblue) !important;
	color: white;
}

.sg-html .btn-editing-cu {
	padding: 12px 24px;
	border-radius: 4px;
	background-color: var(--sg-c-primary);
	font-size: 11px;
	text-decoration: none;
	text-transform: capitalize;
}

.sg-html .btn-editing-cu:hover {
	text-decoration: none;
}

.sg-html .post-list {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 40px 0;
	list-style: none;
}

.sg-html .post-list li {
	display: flex;
	flex-direction: column;
	gap: 20px;
	width: 23.6%;
	margin: 0;
	overflow: hidden;
	border-radius: 6px;
	box-shadow: rgba(149, 157, 165, 0.2) 0 8px 24px;
}

@media only screen and (max-width: 479px) {
	.orari-sante .sg-html {
		overflow: auto;
	}
}

/* Menu */
.sg-menu .sub-menu a:focus,
.sg-menu.is-open .sg-menu-panel a:focus {
	background-color: var(--sg-c-sg-cadeblue) !important;
	color: white !important;
}

.eke-menu .sub-menu {
	border-radius: 0 0 3px 3px;
}

@media screen and (min-width: 1080px) and (max-width: 1280px) {
	.sg-menu:not(.eke-menu) .sg-menu-list > li > a {
		padding: 13px 16px !important;
	}
}

/*
 * Header Elementor (template 34), finché i layout SG non sono attivi: stesse correzioni
 * dell'header SG qui sotto. Con "Dashboard" e le frecce dei sottomenu le voci occupano
 * 1390px su 1300 disponibili. Si può togliere quando Elementor non c'è più.
 */
@media (min-width: 1025px) {
	.elementor-element.elementor-element-2dcf635 .elementor-nav-menu--main > .elementor-nav-menu {
		flex-wrap: nowrap;
	}

	.elementor-element.elementor-element-2dcf635 .elementor-nav-menu--main > .elementor-nav-menu > li > a,
	.elementor-element-857b4e3 .elementor-button,
	.elementor-element-50bb552 .elementor-button {
		white-space: nowrap;
	}
}

@media (min-width: 1315px) {
	body.logged-in .elementor-element.elementor-element-2dcf635 .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-right: 14px !important;
		padding-left: 14px !important;
	}
}

@media (min-width: 1025px) and (max-width: 1314px) {
	body .elementor-element.elementor-element-2dcf635 .elementor-nav-menu--main > .elementor-nav-menu > li > a.elementor-item {
		padding-right: calc(7px + (100vw - 1025px) * 0.0241) !important;
		padding-left: calc(7px + (100vw - 1025px) * 0.0241) !important;
		font-size: calc(13px + (100vw - 1025px) * 0.0103) !important;
	}
}

@media (min-width: 1025px) and (max-width: 1279px) {
	body .elementor-element.elementor-element-d2f35e0.e-con {
		--width: auto;
		flex-shrink: 0;
	}
}

/*
 * Sotto-header: sempre su una riga (con "Dashboard", da loggati, sono 9 voci).
 * Sotto i 1315px carattere e padding si riducono in proporzione alla finestra:
 * 13px / 12px a 1025px, 16px / 20px a 1315px (i valori normali del menu).
 */
@media screen and (min-width: 1025px) and (max-width: 1314px) {
	.eke-menu .sg-menu-list {
		flex-wrap: nowrap;
	}

	.eke-menu .sg-menu-list > li > a {
		padding-right: calc(12px + (100vw - 1025px) * 0.0276) !important;
		padding-left: calc(12px + (100vw - 1025px) * 0.0276) !important;
		font-size: calc(13px + (100vw - 1025px) * 0.0103) !important;
		white-space: nowrap;
	}
}