/*
 * Seminario di Pavia — font locali, variabili del design system, stili globali minimi.
 *
 * I colori e la tipografia "operativi" si gestiscono nelle Impostazioni del sito di Elementor
 * (Colori e Font globali): queste variabili ne sono lo specchio per il CSS scritto a mano.
 */

/* ------------------------------------------------------------------ *
 * Font: Creato Display (SIL Open Font License, vedi assets/fonts)
 * ------------------------------------------------------------------ */
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-light.woff2") format("woff2"); font-weight: 300; font-style: normal; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-lightitalic.woff2") format("woff2"); font-weight: 300; font-style: italic; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-regular.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-regularitalic.woff2") format("woff2"); font-weight: 400; font-style: italic; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-medium.woff2") format("woff2"); font-weight: 500; font-style: normal; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-bold.woff2") format("woff2"); font-weight: 600 700; font-style: normal; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-bolditalic.woff2") format("woff2"); font-weight: 600 700; font-style: italic; font-display: swap; }
@font-face { font-family: "Creato Display"; src: url("../fonts/creato-display-extrabold.woff2") format("woff2"); font-weight: 800 900; font-style: normal; font-display: swap; }

/*
 * Burgundia (font di accento del brand) non ha ancora una licenza web: finché non c'è,
 * l'accento usa Creato Display. Con la licenza basta aggiungere qui il suo @font-face
 * e cambiare --sem-font-accento.
 */

:root {
	/* Palette ufficiale */
	--sem-cotto: #C94B22;
	--sem-cotto-scuro: #8A2910;
	--sem-cotto-testo: #A83A19;
	/* Il verde del brand non si usa nel sito (decisione dell'utente): niente variabili. */
	--sem-cotto-medio: #E07A55;
	--sem-cotto-chiaro: #FCEEE8;
	--sem-cotto-profondo: #3D0F05;
	--sem-ocra: #9A6F00;
	--sem-oro: #E8B020;
	--sem-oro-chiaro: #FFF3B0;
	--sem-sfondo: #F9F4ED;
	--sem-testo: #2E2A27;
	--sem-testo-attenuato: #6B6560;
	--sem-bordo: #E4D9C9;
	--sem-bianco: #FFFFFF;
	--sem-fondo-attenuato: #F2EBE1;

	/* Tipografia */
	--sem-font-principale: "Creato Display", system-ui, -apple-system, "Segoe UI", sans-serif;
	--sem-font-accento: var(--sem-font-principale);

	/* Misure */
	--sem-contenuto: 1280px;
	--sem-raggio: 6px;
	--sem-raggio-pillola: 999px;
	--sem-transizione: 250ms cubic-bezier(0.4, 0, 0.2, 1);
	--sem-ombra-hover: 0 12px 26px -14px rgba(61, 15, 5, 0.55);

	/* Standard unico (decisione dell'utente): tutti i pulsanti nello stesso colore, con le versioni
	   complementari (contorno su fondo chiaro, bianco su fondo scuro); tutti i riquadri con lo stesso
	   margine interno e il titolo vicino al bordo. Valgono per tema, plugin, Elementor, header e footer. */
	/* Colore dominante (decisione dell'utente 10/10/2026): il cotto centrale per pulsanti, etichette ed elementi
	   in evidenza; al passaggio del mouse si scurisce. Per i testi piccoli in evidenza su fondo chiaro si usa
	   --sem-evidenza-testo (cotto testo, contrasto AA); anche il footer è nel cotto centrale (dal 23/10/2026). */
	--sem-pulsante: var(--sem-cotto);
	--sem-pulsante-hover: var(--sem-cotto-scuro);
	--sem-evidenza: var(--sem-cotto);
	--sem-evidenza-testo: var(--sem-cotto-testo);
	/* Occhielli ed etichette in maiuscolo (livello "Occhiello"): cotto centrale (decisione dell'utente 10/10/2026). */
	--sem-occhiello: var(--sem-cotto);
	/* Pulsanti sovrapposti alle foto (indietro, lingue, frecce della galleria, hero): vetro opaco,
	   scritta cotto centrale; selezionati o al passaggio del mouse pieni di cotto con scritta bianca.
	   Contrasto (verificato il 10/10/2026 su tutte le foto delle testate): il cotto centrale arriva al massimo a
	   4,65:1 sul bianco pieno, quindi con un vetro trasparente la scritta è "testo grande" (19 px in grassetto,
	   soglia AA 3:1) e la foto dietro viene sfocata e schiarita. Con vetro al 72% il caso peggiore è 3:1. */
	--sem-vetro: rgba(255, 255, 255, 0.72);
	--sem-vetro-bordo: rgba(255, 255, 255, 0.85);
	--sem-vetro-filtro: blur(14px) saturate(150%) brightness(1.6);
	--sem-vetro-testo: 1.1875rem;
	--sem-vetro-ombra: 0 8px 24px -14px rgba(0, 0, 0, 0.5);
	--sem-riquadro-spazio: 28px;
	--sem-riquadro-titolo: 16px;

	/* Gerarchia tipografica unica (decisione dell'utente, 9/10/2026): misura e peso per livello.
	   Le misure scalano fra telefono e computer; nel Kit di Elementor gli stessi valori in px. */
	--sem-t-display: clamp(2.75rem, 6.4vw, 5.75rem);   /* 44 → 92 px  Titolo Home */
	--sem-t-h1: clamp(2.5rem, 5.3vw, 4.75rem);         /* 40 → 76 px  Titolo di pagina */
	--sem-t-h2: clamp(2rem, 3.1vw, 2.75rem);           /* 32 → 44 px  Titolo di sezione */
	--sem-t-foto: clamp(1.75rem, 2.2vw, 2rem);         /* 28 → 32 px  Titolo su foto */
	--sem-t-h3: clamp(1.25rem, 1.7vw, 1.5rem);         /* 20 → 24 px  Titolo di card / sottosezione */
	--sem-t-sottotitolo: clamp(1.125rem, 1.4vw, 1.25rem); /* 18 → 20 px */
	--sem-t-corpo: clamp(1rem, 1.25vw, 1.125rem);      /* 16 → 18 px */
	--sem-t-piccolo: 0.875rem;                          /* 14 px  date, didascalie */
	--sem-t-occhiello: 0.8125rem;                       /* 13 px  etichette in maiuscolo */
	--sem-p-titolo: 700;
	--sem-p-sezione: 600;
	--sem-p-sottotitolo: 500;
	--sem-p-corpo: 400;
}

@media (max-width: 767px) {
	:root {
		--sem-riquadro-spazio: 20px;
	}
}

/* ------------------------------------------------------------------ *
 * Base
 * ------------------------------------------------------------------ */
html {
	-webkit-text-size-adjust: 100%;
}

/* Le fasce a tutta larghezza non devono mai far scorrere la pagina di lato (clip non crea un'area di scorrimento,
   quindi gli elementi fissi in alto continuano a funzionare). */
html {
	overflow-x: clip;
}

body {
	background-color: var(--sem-sfondo);
	color: var(--sem-testo);
	font-family: var(--sem-font-principale);
	font-weight: 400;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

h1, h2, h3, h4, h5, h6 {
	font-family: var(--sem-font-principale);
	color: var(--sem-testo);
	letter-spacing: -0.015em;
	line-height: 1.15;
	text-wrap: balance;
}

p {
	text-wrap: pretty;
}

a {
	color: var(--sem-cotto-testo);
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
	transition: color var(--sem-transizione), background-color var(--sem-transizione);
}

a:hover {
	color: var(--sem-cotto);
}

/* Link dentro il testo: sottolineati, perché il solo colore non basta a distinguerli (WCAG 1.4.1, contrasto con il testo 2,2:1) */
:where(p, li, dd, td, blockquote, figcaption) a:not([class]):not(:has(img)) {
	text-decoration: underline;
}

/* …ma non quando il link è già un pulsante o un'etichetta a pillola («← Home», i temi degli eventi):
   lì la forma basta a riconoscerlo. */
:is(.semcore-indietro, .semcore-evento__tag) a:not([class]):not(:has(img)),
a:is(.elementor-button, .semcore-btn, [class*="sem-btn"], [class*="__pulsante"]) {
	text-decoration: none;
}

::selection {
	background: var(--sem-cotto-chiaro);
	color: var(--sem-testo);
}

img {
	height: auto;
	max-width: 100%;
}

/* Focus sempre visibile, solo da tastiera */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
	outline: 2px solid var(--sem-cotto);
	outline-offset: 2px;
	border-radius: 2px;
}

/* ------------------------------------------------------------------ *
 * Classi di utilità (da usare nel campo "Classi CSS" di Elementor)
 * ------------------------------------------------------------------ */

/* Testo di accento: titoli in rilievo, frasi enfatizzate, citazioni brevi */
.sem-accento,
.sem-accento :where(h1, h2, h3, h4, h5, h6, p) {
	font-family: var(--sem-font-accento);
	font-weight: 300;
	letter-spacing: -0.02em;
}

/* ------------------------------------------------------------------ *
 * Template del Theme Builder (classi impostate da `wp semcore template`)
 * ------------------------------------------------------------------ */

/* Footer sul cotto centrale (colore dominante, decisione dell'utente 23/10/2026): link bianchi sottolineati */
.sem-footer .elementor-widget-text-editor a {
	color: inherit;
	text-decoration: underline;
	text-decoration-color: rgba(255, 255, 255, 0.45);
}

.sem-footer .elementor-widget-text-editor a:hover {
	color: var(--sem-bianco);
	text-decoration-color: currentColor;
}

/* Footer: sul cotto il cotto chiaro non basta (4,1:1), quindi le voci del menu restano bianche e si sottolineano */
.sem-footer .elementor-nav-menu a:is(:hover, :focus-visible),
.sem-footer .elementor-nav-menu a.elementor-item-active {
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* Footer: una sola misura per tutti i testi (descrizione, menu, recapiti, newsletter): 16 px, interlinea 1,6,
   come il testo delle card; a parte solo gli occhielli (13 px) e la riga in fondo (14 px, livello "Piccolo").
   Selettori rinforzati: le misure dei widget di Elementor hanno più specificità. */
.sem-footer .elementor-widget-text-editor.elementor-widget-text-editor :is(p, a) {
	font-size: 1rem;
	line-height: 1.6;
}

.sem-footer .elementor-widget-text-editor p {
	margin-bottom: 0.75em;
}

.sem-footer .elementor-widget-nav-menu .elementor-nav-menu--main .elementor-item.elementor-item {
	padding-top: 2px;
	padding-bottom: 2px;
	font-size: 1rem;
	font-weight: 400;
	line-height: 1.6;
}

/* Riga in fondo (copyright e documenti) */
.sem-footer .sem-footer-legale.sem-footer-legale :is(p, a) {
	font-size: var(--sem-t-piccolo);
	line-height: 1.6;
}

/* Header: "Sostienici" (cotto pieno) al passaggio del mouse diventa bianco, l'inverso di "Contatti" (a bordo cotto, che si riempie) */
.sem-header .elementor-widget-button:not(.sem-btn-outline) .elementor-button:is(:hover, :focus-visible) {
	color: var(--sem-pulsante);
	background-color: var(--sem-bianco);
	box-shadow: inset 0 0 0 1.5px var(--sem-pulsante), var(--sem-ombra-hover);
}

/* Footer: i pulsanti bianchi hanno la scritta nel cotto, come il fondo */
.sem-footer .elementor-widget-button.sem-btn-bianco .elementor-button,
.sem-footer .elementor-widget-button.sem-btn-chiaro .elementor-button:hover {
	color: var(--sem-pulsante);
}

/* Footer: icone social che al passaggio del mouse si sollevano e cambiano colore, come i pulsanti */
.sem-social .elementor-social-icon {
	transition: background-color var(--sem-transizione), transform var(--sem-transizione), box-shadow var(--sem-transizione);
}

.sem-social .elementor-social-icon:is(:hover, :focus-visible) {
	background-color: var(--sem-bianco) !important;
	transform: translateY(-2px);
	box-shadow: 0 12px 26px -14px rgba(0, 0, 0, 0.6);
	opacity: 1;
}

.sem-social .elementor-social-icon:is(:hover, :focus-visible) svg {
	fill: var(--sem-pulsante) !important;
}

/* Footer: "Iscriviti" e "Sostienici" affiancati (pulsanti un po' più stretti per stare sulla stessa riga) */
.sem-footer .elementor-widget-button .elementor-button {
	padding-right: 18px;
	padding-left: 18px;
}

/* Riquadri finali della Home («Newsletter InChiostro» e «Sostienici») come le card delle proposte (decisione dell'utente
   5/11/2026): foto della testata della pagina di destinazione a tutta card (sem-sfondo-<pagina>, l'indirizzo arriva da
   seminario-core), velo scuro caldo che sale dal basso, titolo, testo e pulsante in fondo. Senza foto resta il cotto. */
.sem-fascia-scura[class*="sem-sfondo-"] {
	position: relative;
	isolation: isolate;
	overflow: hidden;
	justify-content: flex-end;
	min-height: 420px;
}

.sem-fascia-scura[class*="sem-sfondo-"]::before,
.sem-fascia-scura[class*="sem-sfondo-"]::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;
}

.sem-fascia-scura[class*="sem-sfondo-"]::before {
	z-index: -2;
	background: var(--sem-sfondo-foto, none) center / cover no-repeat;
}

.sem-fascia-scura[class*="sem-sfondo-"]::after {
	z-index: -1;
	background: linear-gradient(180deg, rgba(31, 12, 6, 0.1) 0%, rgba(31, 12, 6, 0.55) 40%, rgba(31, 12, 6, 0.9) 100%);
}

.sem-fascia-scura[class*="sem-sfondo-"] :is(h2, h3, p) {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.sem-fascia-scura[class*="sem-sfondo-"].e-con > .elementor-widget-button:last-child {
	margin-top: 8px;
}

@media (max-width: 767px) {
	.sem-fascia-scura[class*="sem-sfondo-"] {
		min-height: 380px;
	}
}

/* Riquadri scuri affiancati (Home): il pulsante sta in fondo, così i pulsanti dei due riquadri sono allineati */
.sem-fascia-scura.e-con > .elementor-widget-button:last-child {
	margin-top: auto;
}

/* Fasce su fondo scuro (cotto, cotto scuro, cotto profondo): testi, titoli e link chiari */
/* (.e-con raddoppia la specificità: deve prevalere sul colore dei link impostato dal Kit) */
.sem-fascia-scura.e-con,
.sem-fascia-scura.e-con :is(h2, h3, li, a):not(.elementor-button) {
	color: var(--sem-bianco);
}

.sem-fascia-scura.e-con a:not(.elementor-button, .semcore-btn, [class*="__pulsante"]):hover {
	color: var(--sem-cotto-chiaro);
	text-decoration: underline;
}

/* Card delle proposte in Home: la foto riempie la card, velo scuro in basso sotto titolo e testo; tutta cliccabile */
.sem-card-area.e-con {
	position: relative;
	overflow: hidden;
	isolation: isolate;
	text-decoration: none;
	transition: transform var(--sem-transizione), box-shadow var(--sem-transizione);
}

.sem-card-area.e-con > .sem-card-area__foto {
	position: absolute;
	inset: 0;
	z-index: -2;
	width: 100%;
	max-width: none;
	margin: 0;
}

.sem-card-area__foto :is(.elementor-widget-container, img) {
	width: 100%;
	height: 100%;
}

.sem-card-area__foto img {
	object-fit: cover;
	transition: transform 700ms ease;
}

.sem-card-area.e-con::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	background: linear-gradient(180deg, rgba(31, 12, 6, 0) 30%, rgba(31, 12, 6, 0.55) 60%, rgba(31, 12, 6, 0.88) 100%);
	transition: opacity var(--sem-transizione);
}

.sem-card-area.e-con :is(h3, p) {
	text-shadow: 0 1px 12px rgba(0, 0, 0, 0.35);
}

.sem-card-area.e-con p {
	margin: 0;
}

.sem-card-area:hover {
	transform: translateY(-3px);
	box-shadow: 0 18px 38px -20px rgba(46, 42, 39, 0.6);
}

.sem-card-area:hover .sem-card-area__foto img {
	transform: scale(1.05);
}

.sem-card-area:focus-visible {
	outline: 2px solid var(--sem-cotto);
	outline-offset: 3px;
}

/* Titoli di sezione cliccabili (es. "InChiostro" in Home): freccia che scorre, colore più scuro */
.sem-titolo-link .elementor-heading-title a {
	color: inherit;
	text-decoration: none;
	transition: color var(--sem-transizione);
}

.sem-titolo-link .elementor-heading-title a:hover {
	color: var(--sem-cotto-scuro);
}

.sem-titolo-link .sem-freccia {
	display: inline-block;
	font-size: 0.7em;
	vertical-align: 0.1em;
	transition: transform var(--sem-transizione);
}

.sem-titolo-link .elementor-heading-title a:hover .sem-freccia {
	transform: translateX(6px);
}

/* Hero: il velo scuro sta sopra le foto in dissolvenza, i testi sopra il velo */
.sem-hero.e-con::before {
	z-index: 1;
}

.sem-hero.e-con > .e-con-inner {
	position: relative;
	z-index: 2;
}

/* Hero: la foto non si ripete mai, nemmeno mentre la finestra cambia misura (le slide si adattano un attimo dopo) */
.sem-hero .elementor-background-slideshow__slide__image {
	background-repeat: no-repeat;
}

/* Hero: leggibilità del testo sopra la foto */
.sem-hero :where(h1, p) {
	text-shadow: 0 2px 4px rgba(0, 0, 0, 0.35), 0 4px 28px rgba(0, 0, 0, 0.55);
}

/* ------------------------------------------------------------------ *
 * Pulsanti: un solo sistema per tutto il sito
 * Base = cotto pieno (dal Kit, var. --sem-pulsante; cotto scuro al passaggio del mouse). Varianti con la classe CSS del widget:
 *   sem-btn-outline  bordo cotto su fondo chiaro (testo in cotto testo, per il contrasto)
 *   sem-btn-chiaro   bordo bianco su fondo scuro
 *   sem-btn-bianco   bianco pieno con testo cotto scuro (su fondi scuri: l'inverso di sem-btn-chiaro)
 *   sem-btn-vetro    vetro opaco con scritta cotto, sopra le foto (pieno di cotto al passaggio del mouse)
 *   sem-btn-freccia  l'icona (freccia) scorre a destra al passaggio del mouse
 * ------------------------------------------------------------------ */
.elementor-widget-button .elementor-button {
	transition: background-color var(--sem-transizione), color var(--sem-transizione), box-shadow var(--sem-transizione), transform var(--sem-transizione);
}

.elementor-widget-button .elementor-button:hover,
.elementor-widget-button .elementor-button:focus-visible {
	transform: translateY(-2px);
	box-shadow: var(--sem-ombra-hover);
}

.elementor-widget-button .elementor-button:active {
	transform: translateY(0);
	box-shadow: none;
}

.elementor-widget-button .elementor-button-icon {
	transition: transform var(--sem-transizione);
}

/* Le icone seguono sempre il colore del testo del pulsante (anche nelle varianti) */
.elementor-widget-button.elementor-widget .elementor-button .elementor-button-icon svg {
	fill: currentColor;
}

.elementor-widget-button.sem-btn-freccia .elementor-button:hover .elementor-button-icon {
	transform: translateX(4px);
}

.elementor-widget-button:not(.sem-btn-freccia) .elementor-button:hover .elementor-button-icon {
	transform: scale(1.15);
}

.elementor-widget-button.sem-btn-outline .elementor-button {
	color: var(--sem-evidenza-testo);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px var(--sem-evidenza);
}

.elementor-widget-button.sem-btn-outline .elementor-button:hover {
	color: var(--sem-bianco);
	background-color: var(--sem-pulsante);
	box-shadow: inset 0 0 0 1.5px var(--sem-pulsante), var(--sem-ombra-hover);
}

.elementor-widget-button.sem-btn-chiaro .elementor-button {
	color: var(--sem-bianco);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75);
}

.elementor-widget-button.sem-btn-chiaro .elementor-button:hover {
	color: var(--sem-pulsante);
	background-color: var(--sem-bianco);
	box-shadow: inset 0 0 0 1.5px var(--sem-bianco), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}

.elementor-widget-button.sem-btn-bianco .elementor-button {
	color: var(--sem-pulsante);
	background-color: var(--sem-bianco);
	box-shadow: inset 0 0 0 1.5px var(--sem-bianco);
}

.elementor-widget-button.sem-btn-bianco .elementor-button:hover {
	color: var(--sem-bianco);
	background-color: transparent;
	box-shadow: inset 0 0 0 1.5px rgba(255, 255, 255, 0.75), 0 12px 26px -14px rgba(0, 0, 0, 0.6);
}

.elementor-widget-button.sem-btn-vetro .elementor-button {
	color: var(--sem-cotto);
	font-size: var(--sem-vetro-testo);
	font-weight: 700;
	background-color: var(--sem-vetro);
	box-shadow: inset 0 0 0 1.5px var(--sem-vetro-bordo), var(--sem-vetro-ombra);
	-webkit-backdrop-filter: var(--sem-vetro-filtro);
	backdrop-filter: var(--sem-vetro-filtro);
}

.elementor-widget-button.sem-btn-vetro .elementor-button:is(:hover, :focus-visible) {
	color: var(--sem-bianco);
	background-color: var(--sem-pulsante);
	box-shadow: inset 0 0 0 1.5px var(--sem-pulsante), var(--sem-ombra-hover);
}

/* Pulsante pieno su fondo scuro: un filo chiaro lo stacca dal fondo */
.sem-fascia-scura .elementor-widget-button:not(.sem-btn-outline, .sem-btn-chiaro, .sem-btn-bianco) .elementor-button {
	box-shadow: inset 0 0 0 1px rgba(252, 238, 232, 0.35);
}

/* Header: il logo ha una misura fissa e non si restringe quando la finestra si stringe */
.sem-header .sem-header-logo {
	flex-shrink: 0;
}

.sem-header .sem-header-logo img {
	width: 180px;
	max-width: none;
}

/* Menu esteso: le voci di più parole vanno a capo ("Monastero / Invisibile"), così il menu
   occupa meno spazio e resta esteso anche nelle finestre più strette */
.sem-header .elementor-nav-menu--main > .elementor-nav-menu > li > .elementor-item {
	max-width: 7.2em;
	line-height: 1.15;
	text-align: center;
	white-space: normal;
}

/* Menu esteso: le voci si distribuiscono su tutto lo spazio fra il logo e le lingue, con distanze uguali
   (con le sole voci centrate, quelle con la freccia delle sottovoci sembravano più distanti) */
@media (min-width: 1025px) {
	.sem-header .elementor-nav-menu--main > .elementor-nav-menu {
		width: 100%;
		justify-content: space-between;
	}
}

/* Testi e pulsanti dell'header hanno sempre la stessa misura: stringendo la finestra cambia solo la distanza
   fra le voci. Quando non c'è più spazio (sotto i 1280 px, il menu esteso ne chiede circa 1255) si passa al
   menu a tendina, come sotto i 1024 px (regole di Elementor Pro per "dropdown-tablet"). */
@media (min-width: 1025px) and (max-width: 1279px) {
	/* Come sotto i 1024 px: il logo occupa lo spazio libero e l'icona del menu va in fondo, dopo "Sostienici" */
	.sem-header .sem-header-logo {
		flex-grow: 1;
	}

	.sem-header .elementor-widget-nav-menu.elementor-nav-menu--dropdown-tablet {
		flex-grow: 0;
		order: 99999;
		width: auto;
	}

	.sem-header .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--main {
		display: none;
	}

	.sem-header .elementor-nav-menu--dropdown-tablet .elementor-menu-toggle {
		display: flex;
	}

	.sem-header .elementor-nav-menu--dropdown-tablet .elementor-nav-menu--dropdown {
		display: block;
	}
}

/* Menu a tendina (fino a 1024 px): "Contatti" e "Sostienici" tornano con il testo finché c'è spazio */
@media (max-width: 767px) {
	.sem-header .sem-header-logo img {
		width: 128px;
	}
}

/* Finestre strette (fino a 579 px): solo l'icona (il testo resta per i lettori di schermo) */
@media (max-width: 579px) {
	.sem-header .elementor-widget-button .elementor-button {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		padding: 0;
	}

	.sem-header .elementor-widget-button .elementor-button-text {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0, 0, 0, 0);
		white-space: nowrap;
	}

	.sem-header .elementor-widget-button .elementor-button-icon {
		margin: 0;
	}
}

.elementor-widget-theme-post-content :where(h2, h3):not(.elementor-heading-title) {
	margin-top: 1.6em;
	margin-bottom: var(--sem-riquadro-titolo, 16px);
}

/* Titolo subito seguito da un sottotitolo: 16 px fra i due, come fra titolo e testo. */
.elementor-widget-theme-post-content :where(h2, h3):not(.elementor-heading-title) + :where(h2, h3) {
	margin-top: 0;
}

/* L'ultimo paragrafo non aggiunge spazio sotto: la distanza dal footer è sempre quella del template
   (80 px, 56 sul telefono). */
.elementor-widget-theme-post-content > :where(p, ul, ol):last-child,
.elementor-widget-theme-post-content > .elementor-widget-container > :where(p, ul, ol):last-child,
.elementor-widget-theme-post-content .elementor-widget-text-editor :where(p, ul, ol):last-child,
.elementor-widget-theme-post-content .cmplz-document > :where(p, ul, ol, div):last-child {
	margin-bottom: 0;
}

.elementor-widget-theme-post-content blockquote {
	margin: 1.5em 0;
	padding: 0.25em 0 0.25em 1.25em;
	border-left: 3px solid var(--sem-cotto);
	color: var(--sem-testo-attenuato);
}

/* ------------------------------------------------------------------ *
 * Accessibilità: chi ha chiesto meno movimento non vede animazioni
 * ------------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: 0.01ms !important;
		scroll-behavior: auto !important;
	}
}

/* Indirizzi web lunghi nei testi: vanno a capo invece di allargare la pagina sul telefono. */
.elementor-widget-theme-post-content,
.entry-content {
	overflow-wrap: anywhere;
}

/* Home, InChiostro: "Tutte le notizie" e "Tutti gli appuntamenti" in fondo ai due riquadri, sulla stessa riga */
.sem-riquadro-pulsante-fondo.e-con > .elementor-widget-button:last-child {
	margin-top: auto;
}

/* ------------------------------------------------------------------ *
 * Uniformità (verifica globale del 5/11/2026)
 * ------------------------------------------------------------------ */
/* Hello Elementor dà a tutti i pulsanti <button> un bordo rosa (#CC3366) che il Kit non sovrascrive:
   lo si toglie (specificità di un solo attributo, così vince solo sullo stile di serie). */
:where(body) :is(button, [type="button"], [type="submit"]) {
	border-color: transparent;
}

/* Pulsante del menu sul telefono: senza il fondo grigio di serie di Elementor. */
.sem-header .elementor-menu-toggle {
	background-color: transparent;
}

/* Riquadri bianchi della Home e di InChiostro: stesso bordo sottile di tutti i riquadri. */
.sem-riquadro-pulsante-fondo.e-con {
	border: 1px solid var(--sem-bordo);
}

/* A capo fisso nei testi (<br class="sem-acapo">): sul telefono si toglie e la frase continua di seguito. */
@media (max-width: 767px) {
	br.sem-acapo {
		display: none;
	}
}