/*
Theme Name:  OceanWP Child - Unità Pastorale Mocaiana
Theme URI:   https://www.vivilagioia.net/
Description: Tema child di OceanWP per vivilagioia.net. Qui vanno le personalizzazioni (CSS e PHP), mai nel tema genitore.
Author:      Unità Pastorale Mocaiana
Template:    oceanwp
Version:     1.12.5
Text Domain: oceanwp-child
*/

/* Le regole CSS personalizzate vanno sotto questa riga. */

/* Palette del sito (Fase 9, palette A "Continuità"). Per cambiare un colore basta modificarlo qui. */
:root {
	--upm-primario: #23818f;       /* pulsanti e link: il verde più chiaro ancora leggibile con il bianco */
	--upm-primario-scuro: #0a5361; /* titoli e passaggio del mouse */
	--upm-oro: #f2c14e;
	--upm-oro-scuro: #e0a526;
	--upm-sfondo-chiaro: #f8fbfb;
	--upm-fascia: #e3f1f2;         /* fasce colorate chiare */
	--upm-testo: #2b2b2b;
	--upm-bordo: #d6e2e4;
}

/* Testi leggibili su tutte le pagine (pubblico anche anziano): Karla 18 px, titoli Merriweather.
   Le regole valgono anche dove nei widget di Elementor era impostato un testo più piccolo. */
html body {
	color: var(--upm-testo);
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	line-height: 1.6;
}

.elementor-widget-text-editor,
.elementor-widget-text-editor p,
.elementor-widget-text-editor li,
.elementor-widget-text-editor span,
.elementor-widget-icon-list .elementor-icon-list-text,
.entry-content p,
.entry-content li {
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 400 !important;
	line-height: 1.6 !important;
}

h1,
h2,
h3,
h4,
h5,
h6,
.elementor-heading-title,
.upm-calendario-titolo {
	font-family: "Merriweather", Georgia, serif !important;
	line-height: 1.3;
}

.site-breadcrumbs,
.site-breadcrumbs a,
.page-header .page-subheading {
	font-size: 16px !important;
}

.elementor-widget-text-editor a,
.entry-content a {
	color: var(--upm-primario);
	text-decoration: underline;
}

.elementor-widget-text-editor a:hover,
.entry-content a:hover {
	color: var(--upm-primario-scuro);
}

/* Pulsanti grandi e dello stesso colore in tutto il sito (minimo 48 px, facili da toccare). */
.elementor-button,
.eael-post-elements-readmore-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 48px;
	padding: 12px 24px !important;
	border-radius: 6px !important;
	background-color: var(--upm-primario) !important;
	color: #ffffff !important;
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif !important;
	font-size: 18px !important;
	font-weight: 600 !important;
	line-height: 1.2 !important;
}

.elementor-button:hover,
.elementor-button:focus,
.eael-post-elements-readmore-btn:hover,
.eael-post-elements-readmore-btn:focus {
	background-color: var(--upm-primario-scuro) !important;
	color: #ffffff !important;
}

/* Notizie in Home (Post Grid di Essential Addons): schede della stessa altezza,
   3 colonne su computer, 2 su tablet, 1 su telefono, "Leggi tutto" sempre in fondo. */
.eael-post-grid.eael-post-grid-style-one {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 20px;
	height: auto !important;
}

.eael-post-grid.eael-post-grid-style-one::before,
.eael-post-grid.eael-post-grid-style-one::after {
	display: none;
}

.eael-post-grid-style-one .eael-grid-post {
	float: none !important;
	width: auto !important;
	padding: 0 !important;
	position: static !important;
	transform: none !important;
}

.eael-post-grid-style-one .eael-grid-post-holder,
.eael-post-grid-style-one .eael-grid-post-holder-inner {
	display: flex;
	flex-direction: column;
	height: 100%;
}

.eael-post-grid-style-one .eael-grid-post-holder {
	border: 1px solid var(--upm-bordo);
	border-radius: 8px;
	overflow: hidden;
	background: #ffffff;
}

/* Immagine dell'anteprima: stessa altezza in tutte le schede, ritagliata al centro. */
.eael-post-grid-style-one .eael-entry-media,
.eael-post-grid-style-one .eael-entry-thumbnail {
	height: 200px;
	overflow: hidden;
}

.eael-post-grid-style-one .eael-entry-thumbnail img {
	width: 100% !important;
	height: 200px !important;
	object-fit: cover;
}

.eael-post-grid-style-one .eael-entry-wrapper {
	display: flex;
	flex: 1;
	flex-direction: column;
	padding: 16px;
}

.eael-post-grid-style-one .eael-entry-title {
	font-size: 20px !important;
	line-height: 1.35 !important;
}

.eael-post-grid-style-one .eael-entry-content {
	margin-top: auto;
	padding-top: 12px;
}

.eael-post-grid-style-one .eael-post-elements-readmore-btn {
	width: 100%;
}

@media (max-width: 1024px) {
	.eael-post-grid.eael-post-grid-style-one {
		grid-template-columns: repeat(2, minmax(0, 1fr));
	}
}

@media (max-width: 767px) {
	.eael-post-grid.eael-post-grid-style-one {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Stile "editoriale" della Home (Fase 9). In Elementor basta scrivere la classe
   in Avanzate → Classi CSS del widget o della sezione. I font Cormorant Garamond
   e Allura si scelgono nella Tipografia dei widget: Elementor li carica in locale. */

/* Foto con classe "upm-strappo": dal 24/10/2026 hanno bordi netti, senza effetti (la classe resta sui widget ma non fa nulla). */

/* Caroselli di immagini: riquadro di altezza fissa (4:3, al massimo 620 px) e ogni foto intera,
   centrata in orizzontale e in verticale, qualunque sia il suo formato. */
.elementor-widget-image-carousel .swiper-slide {
	display: flex;
	align-items: center;
	justify-content: center;
	aspect-ratio: 4 / 3;
	max-height: 620px;
}

.elementor-widget-image-carousel .swiper-slide > a,
.elementor-widget-image-carousel .swiper-slide-inner {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	height: 100%;
	margin: 0;
}

.elementor-widget-image-carousel .swiper-slide-image {
	width: auto !important;
	height: auto;
	max-width: 100%;
	max-height: 100%;
	object-fit: contain;
}

/* Sezione con il bordo inferiore che sfuma leggermente nel bianco: classe "upm-bordo-strappato" (testate in alto). */
.upm-bordo-strappato {
	position: relative;
}

.upm-bordo-strappato::after {
	content: "";
	position: absolute;
	right: 0;
	bottom: -1px;
	left: 0;
	z-index: 2;
	height: 48px;
	background: linear-gradient(to bottom, rgba(255, 255, 255, 0), #ffffff);
	pointer-events: none;
}

/* Titolo grande in maiuscolo: classe "upm-titolo-maiuscolo" sul widget Titolo. */
.upm-titolo-maiuscolo .elementor-heading-title {
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-style: normal !important;
	font-weight: 600 !important;
	letter-spacing: 1px !important;
	text-transform: uppercase !important;
	line-height: 1.05 !important;
}

/* Frase in corsivo calligrafico, solo per poche parole: classe "upm-corsivo". */
.upm-corsivo .elementor-heading-title {
	font-family: "Allura", cursive !important;
	font-weight: 400;
	line-height: 1;
	color: var(--upm-primario);
	text-transform: none;
}

/* "Vivi la Gioia" molto grande nella foto in alto: classe "upm-titolo-hero". */
.upm-titolo-hero .elementor-heading-title {
	font-family: "Allura", cursive !important;
	font-size: clamp(64px, 12vw, 150px) !important;
	font-style: normal !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
	letter-spacing: 0 !important;
	text-transform: none !important;
	color: #ffffff;
	text-shadow: 0 2px 12px rgba(0, 0, 0, 0.35);
}

/* Testate con foto: la velatura è leggera (nero 30%), quindi i testi bianchi hanno un'ombra più marcata per restare leggibili. */
.elementor-top-section.upm-bordo-strappato:first-child .elementor-heading-title {
	text-shadow: 0 2px 16px rgba(0, 0, 0, 0.55), 0 1px 3px rgba(0, 0, 0, 0.45) !important;
}

/* Spazio fisso sotto il titolo grande: annulla eventuali margini negativi dei vecchi widget. */
.elementor-widget.upm-titolo-hero {
	margin-bottom: 12px !important;
}

/* Pulsante dorato (uno solo per pagina, per l'azione principale): classe "upm-pulsante-oro". */
.upm-pulsante-oro .elementor-button {
	background-color: var(--upm-oro) !important;
	color: var(--upm-testo) !important;
}

.upm-pulsante-oro .elementor-button:hover,
.upm-pulsante-oro .elementor-button:focus {
	background-color: var(--upm-oro-scuro) !important;
	color: var(--upm-testo) !important;
}

/* Immagini delle chiese della stessa altezza: classe "upm-foto-chiesa". */
.upm-foto-chiesa a {
	display: block !important;
}

.upm-foto-chiesa img {
	width: 100% !important;
	max-width: 100% !important;
	height: 200px !important;
	object-fit: cover;
}

/* Logo e menu sopra la foto in alto (intestazione "Trasparente" di OceanWP,
   da attivare pagina per pagina: Impostazioni OceanWP → Header → Style).
   Sezione in alto con foto: classi "upm-bordo-strappato upm-testata". */
#site-header.transparent-header {
	z-index: 100;
	background: transparent !important;
	border-bottom: 0 !important;
}

#site-header.transparent-header #site-navigation-wrap .dropdown-menu > li > a,
#site-header.transparent-header .oceanwp-mobile-menu-icon a {
	color: #ffffff !important;
	text-shadow: 0 1px 6px rgba(0, 0, 0, 0.45);
}

#site-header.transparent-header #site-navigation-wrap .dropdown-menu > li > a:hover,
#site-header.transparent-header #site-navigation-wrap .dropdown-menu > li > a:focus {
	color: var(--upm-oro) !important;
}

#site-header.transparent-header .hamburger-inner,
#site-header.transparent-header .hamburger-inner::before,
#site-header.transparent-header .hamburger-inner::after {
	background-color: #ffffff !important;
}

/* Pulsante del menu su telefono più facile da toccare (tutte le pagine). */
.oceanwp-mobile-menu-icon .mobile-menu {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 48px;
	min-height: 48px;
}

/* Il pulsante del menu su telefono è solo l'icona con le tre linee: niente sfondo né scritta
   (altrimenti prende il colore generale dei pulsanti del sito). */
.oceanwp-mobile-menu-icon > button.mobile-menu,
.oceanwp-mobile-menu-icon > button.mobile-menu:hover,
.oceanwp-mobile-menu-icon > button.mobile-menu:focus,
.oceanwp-mobile-menu-icon > button.mobile-menu:active {
	padding: 0 4px;
	border: 0;
	background: transparent !important;
	box-shadow: none;
}

.oceanwp-mobile-menu-icon .oceanwp-text,
.oceanwp-mobile-menu-icon .oceanwp-close-text {
	display: none;
}

/* Spazio in alto nella foto, così il titolo non finisce sotto logo e menu. */
.upm-testata > .elementor-container,
body.home .upm-bordo-strappato > .elementor-container {
	padding-top: 120px;
}

/* Da 960 px logo e menu sono uno sopra l'altro e l'intestazione è alta circa 224 px: i testi partono più in basso. */
@media (min-width: 960px) {
	.upm-testata > .elementor-container,
	body.home .upm-bordo-strappato > .elementor-container {
		padding-top: 240px;
	}
}

/* La testata con la foto occupa tutto lo schermo all'apertura, su telefono, tablet e computer (tutte le pagine).
   100svh = altezza visibile con la barra del browser aperta; 100vh resta per i browser più vecchi. */
.elementor-top-section.upm-bordo-strappato:first-child > .elementor-container {
	min-height: 100vh !important;
	min-height: 100svh !important;
}

/* Scritta decorativa grande in trasparenza: classe "upm-filigrana". */
.upm-filigrana .elementor-heading-title {
	font-family: "Allura", cursive !important;
	font-size: clamp(64px, 14vw, 180px) !important;
	line-height: 1;
	color: var(--upm-bordo);
}

/* Contorno ben visibile per chi naviga con la tastiera. */
a:focus-visible,
button:focus-visible,
.elementor-button:focus-visible {
	outline: 3px solid var(--upm-primario-scuro);
	outline-offset: 2px;
}

/* Menu principale in corsivo, come con OceanWP 3.1.3: OceanWP 4 non applica più
   lo stile corsivo salvato nelle vecchie impostazioni di Personalizza. */
#site-navigation-wrap .dropdown-menu > li > a,
#site-header.full_screen-header .fs-dropdown-menu > li > a,
#site-header.top-header #site-navigation-wrap .dropdown-menu > li > a,
#site-header.center-header #site-navigation-wrap .dropdown-menu > li > a,
#site-header.medium-header #site-navigation-wrap .dropdown-menu > li > a,
.oceanwp-mobile-menu-icon a {
	font-style: italic;
}

/* Voci del menu più scure (contrasto) con il colore del sito al passaggio del mouse. */
#site-navigation-wrap .dropdown-menu > li > a {
	color: #333333;
}

#site-navigation-wrap .dropdown-menu > li > a:hover,
#site-navigation-wrap .dropdown-menu > li.current-menu-item > a {
	color: var(--upm-primario);
}

/* Intestazione centrata da computer: logo al centro in alto, menu centrato sotto
   (come nel sito di riferimento). Su telefono resta logo + icona del menu. */
@media (min-width: 960px) {
	#site-header #site-header-inner {
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	#site-header #site-logo {
		float: none !important;
		display: flex;
		justify-content: center;
	}

	#site-header #site-navigation-wrap {
		float: none !important;
		position: static !important;
		right: auto !important;
		display: flex;
		justify-content: center;
		width: 100%;
	}

	#site-header #site-navigation-wrap .dropdown-menu {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
	}
}

/* Voci del menu più grandi: 19 px da computer (il menu è centrato su una riga sua), 20 px nel menu del telefono. */
@media (min-width: 960px) {
	#site-navigation-wrap .dropdown-menu > li > a {
		padding: 0 14px !important;
		font-size: 19px !important;
	}

	#site-navigation-wrap .dropdown-menu ul li a.menu-link {
		font-size: 16px !important;
	}
}

@media (min-width: 960px) and (max-width: 1199px) {
	#site-navigation-wrap .dropdown-menu > li > a {
		padding: 0 7px !important;
	}

	#site-header #site-header-inner {
		padding-right: 10px;
		padding-left: 10px;
	}
}

/* Portatili piccoli e tablet in orizzontale: un po' più piccolo per restare su una riga. */
@media (min-width: 960px) and (max-width: 1099px) {
	#site-navigation-wrap .dropdown-menu > li > a {
		font-size: 17px !important;
	}
}

#mobile-fullscreen .fs-dropdown-menu a,
#mobile-fullscreen nav a {
	font-size: 20px !important;
}

/* "Le nostre Chiese" e "La Parrocchia" aprono un sottomenu: il tema le mostra come pulsanti
   con un altro stile (15 px, grassetto). Qui diventano uguali alle altre voci. */
#mobile-fullscreen nav button.menu-link {
	font-size: 20px !important;
	font-weight: 400 !important;
	letter-spacing: 1px !important;
	line-height: 36px;
}

/* Barra in fondo alle pagine con i link a Privacy e Cookie (functions.php). */
.upm-barra-legale {
	padding: 18px 16px;
	background: var(--upm-fascia);
	border-top: 3px solid var(--upm-primario);
	color: var(--upm-testo);
	font-size: 16px;
	line-height: 1.6;
	text-align: center;
}

.upm-barra-legale span {
	margin-right: 8px;
}

/* Sul telefono: "© … Unità Pastorale Mocaiana" su una riga, Privacy · Cookie sulla riga sotto. */
@media (max-width: 767px) {
	.upm-barra-legale__copy {
		display: block;
		margin-right: 0;
	}
}

.upm-barra-legale a {
	display: inline-block;
	padding: 8px 6px;
	color: var(--upm-primario-scuro) !important;
	font-weight: 600;
	text-decoration: underline;
}

/* Icone social (Facebook, YouTube, Instagram) e didascalie delle immagini ben leggibili. */
.elementor-social-icon {
	background-color: var(--upm-fascia) !important;
}

.elementor-social-icon i {
	color: var(--upm-primario-scuro) !important;
}

.elementor-social-icon svg {
	fill: var(--upm-primario-scuro) !important;
}

.widget-image-caption,
.wp-caption-text {
	color: #555555 !important;
	font-size: 16px !important;
}

.upm-barra-legale a:hover,
.upm-barra-legale a:focus {
	color: var(--upm-primario-scuro);
}

/* Calendario del mese (shortcode [calendario_mese] in functions.php). */
.upm-calendario {
	max-width: 900px;
	margin: 0 auto;
	text-align: center;
}

.upm-calendario-titolo {
	margin-bottom: 16px;
	color: var(--upm-primario-scuro);
	font-size: 28px;
}

.upm-calendario-immagine {
	display: block;
	width: 100%;
	height: auto;
	margin: 0 auto;
	border: 1px solid var(--upm-bordo);
}

.upm-calendario-pulsanti {
	display: flex;
	flex-wrap: wrap;
	justify-content: center;
	gap: 12px;
	margin: 20px 0 8px;
}

.upm-pulsante {
	display: inline-block;
	min-height: 48px;
	padding: 14px 24px;
	border: 2px solid var(--upm-primario);
	border-radius: 6px;
	background: var(--upm-primario);
	color: #ffffff;
	font-size: 18px;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none;
}

.upm-pulsante:hover,
.upm-pulsante:focus {
	background: var(--upm-primario-scuro);
	border-color: var(--upm-primario-scuro);
	color: #ffffff;
}

.upm-pulsante-secondario {
	background: #ffffff;
	color: var(--upm-primario);
}

.upm-pulsante-secondario:hover,
.upm-pulsante-secondario:focus {
	background: var(--upm-sfondo-chiaro);
	color: var(--upm-primario-scuro);
}

.upm-calendario-nota,
.upm-calendario-vuoto {
	font-size: 16px;
	color: var(--upm-testo);
}

@media (max-width: 480px) {
	.upm-pulsante {
		width: 100%;
	}
}

/* ---------------------------------------------------------------------------
   Articoli (Novità ed eventi) nello stile della Home (functions.php).
   --------------------------------------------------------------------------- */

/* Testata: fascia verde chiarissimo senza foto, bordo strappato, testi centrati in verde scuro. */
.upm-testata-articolo {
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 70px 20px 80px;
	background-color: var(--upm-fascia);
	box-sizing: border-box;
	text-align: center;
}

.upm-testata-articolo__testi {
	position: relative;
	z-index: 1;
	max-width: 1000px;
}

.upm-testata-articolo__occhiello {
	margin-bottom: 20px;
	color: var(--upm-primario-scuro);
	font-family: "Merriweather", Georgia, serif;
	font-size: 16px;
	letter-spacing: 3px;
}

h1.upm-titolo-articolo {
	margin: 0 0 16px;
	color: var(--upm-primario-scuro) !important;
	font-family: "Allura", cursive !important;
	font-size: clamp(56px, 9vw, 120px) !important;
	font-weight: 400 !important;
	line-height: 1.1 !important;
}

/* Titoli lunghi: più piccoli, per restare leggibili. */
h1.upm-titolo-articolo.upm-titolo-articolo--lungo {
	font-size: clamp(42px, 6vw, 80px) !important;
}

.upm-testata-articolo__data {
	margin: 0;
	color: var(--upm-testo);
	font-family: "Merriweather", Georgia, serif;
	font-size: 22px;
}

@media (max-width: 767px) {
	.upm-testata-articolo {
		padding: 50px 16px 60px;
	}

	.upm-testata-articolo__data {
		font-size: 18px;
	}
}

/* Corpo dell'articolo (e delle pagine Privacy e Cookie): colonna centrale comoda da leggere, locandina intera. */
.single-post #content-wrap.container,
.upm-pagina-testo #content-wrap.container {
	max-width: 900px;
	padding-top: 40px;
	/* Margini laterali: senza, sul telefono il testo tocca i bordi dello schermo. */
	padding-right: 24px;
	padding-left: 24px;
	box-sizing: border-box;
}

@media (max-width: 767px) {
	.single-post #content-wrap.container,
	.upm-pagina-testo #content-wrap.container {
		padding-right: 20px;
		padding-left: 20px;
	}
}

.single-post .thumbnail {
	margin-bottom: 30px;
	text-align: center;
}

.single-post .thumbnail img {
	width: auto;
	max-width: 100%;
	height: auto;
	border: 1px solid var(--upm-bordo);
	border-radius: 6px;
	box-shadow: 0 2px 14px rgba(10, 83, 97, 0.12);
}

.single-post .entry-content h2,
.single-post .entry-content h3,
.upm-pagina-testo .entry h2,
.upm-pagina-testo .entry h3 {
	color: var(--upm-primario-scuro);
	font-family: "Cormorant Garamond", Georgia, serif !important;
	font-weight: 600;
	letter-spacing: 1px;
	text-transform: uppercase;
}

/* Articolo precedente / successivo come pulsanti della palette. */
.single-post .post-navigation {
	margin-top: 40px;
	padding: 24px 0;
	border-top: 3px solid var(--upm-fascia);
}

.single-post .post-navigation .nav-links a {
	color: var(--upm-primario-scuro) !important;
	font-family: "Karla", "Helvetica Neue", Arial, sans-serif;
	font-size: 18px;
	font-weight: 600;
}

.single-post .post-navigation .nav-links a:hover {
	color: var(--upm-primario) !important;
}

.single-post .post-navigation .nav-links {
	display: flex;
	flex-wrap: wrap;
	justify-content: space-between;
	gap: 16px;
}

.single-post .post-navigation .nav-links > div {
	flex: 1 1 260px;
}

.single-post .post-navigation .nav-next {
	text-align: right;
}

.single-post .post-navigation .title {
	display: block;
	margin-bottom: 4px;
	color: var(--upm-primario);
	font-size: 16px;
}