/* =========================================================================
   M&R Performance — layer di modernizzazione
   ------------------------------------------------------------------------
   Costruito sopra il tema Tofit + Elementor. Nessuna pagina Elementor viene
   modificata: disattivando il modulo "Design" il sito torna come prima.

   Palette esistente rilevata dal sito, non inventata:
     accento  #f60019   fondo  #111111   testo  #ffffff
     titoli   Plus Jakarta Sans 800     testo  Lexend 400
   ====================================================================== */

:root {
	/* --main è già definita dal tema; la rispecchiamo con un fallback. */
	--mrp-red: var(--main, #f60019);
	--mrp-red-hot: #ff2438;
	--mrp-ink: #111111;
	--mrp-ink-soft: #17181a;
	--mrp-ink-line: rgba(255, 255, 255, .12);
	--mrp-paper: #ffffff;
	--mrp-muted: rgba(255, 255, 255, .68);

	/* Ritmo verticale: una sola scala per tutte le sezioni. */
	--mrp-section-y: clamp(3.5rem, 8vw, 7.5rem);
	--mrp-gutter: clamp(1.25rem, 5vw, 2.5rem);

	/* Curve di movimento condivise */
	--mrp-ease: cubic-bezier(.22, .61, .36, 1);
	--mrp-fast: .18s var(--mrp-ease);
	--mrp-slow: .45s var(--mrp-ease);

	--mrp-radius: 14px;
}

/* =========================================================================
   1. TIPOGRAFIA FLUIDA

   Problema misurato: l'H2 dello slider era 64px con line-height 60px anche a
   375px di larghezza. line-height minore della font-size taglia i discendenti
   (la "strada" della terza slide risultava troncata) e 64px su un telefono
   manda il titolo a capo in modo scomposto.

   clamp() lega la dimensione alla larghezza del viewport: un solo valore che
   funziona da 320px a 4K, senza breakpoint.
   ====================================================================== */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* Titolo grande dello slider e degli header di sezione */
.lte-slider-zoom h1,
.lte-slider-zoom h2,
.lte-zs-slider-inner h1,
.lte-zs-slider-inner h2 {
	font-size: clamp(2.25rem, 9vw, 4.5rem) !important;
	line-height: 1.04 !important;
	letter-spacing: -.02em;
	text-wrap: balance;
	overflow-wrap: break-word;
	/* spazio per i discendenti, che prima venivano tagliati */
	padding-bottom: .08em;
}

/* Titoli di sezione Elementor */
.elementor-widget-heading .elementor-heading-title,
.lte-heading-wrapper h2,
.lte-heading-wrapper h3 {
	line-height: 1.1;
	letter-spacing: -.015em;
	text-wrap: balance;
}

/* Testo corrente mai sotto i 16px, testo di servizio mai sotto i 13px.
   Misurati sul sito: un nodo a 10px e uno a 13px, illeggibili su mobile. */
body,
p,
li,
.elementor-widget-text-editor,
.elementor-widget-text-editor p {
	font-size: clamp(1rem, .95rem + .2vw, 1.0625rem);
	line-height: 1.7;
}

.lte-copyrights,
.copyright-block,
.copyright-block *,
small {
	font-size: max(.8125rem, 13px) !important;
	line-height: 1.6;
}

/* Testo di paragrafo più leggibile: misura di riga controllata */
.elementor-widget-text-editor p,
.entry-content > p {
	max-width: 68ch;
}

/* =========================================================================
   2. HERO — LEGGIBILITÀ

   Il titolo bianco cadeva su una foto chiara e grigia: contrasto sotto
   soglia. Un velo a gradiente ancorato in basso alza il contrasto senza
   spegnere la foto e senza toccare le immagini.
   ====================================================================== */

.lte-slider-zoom {
	position: relative;
	isolation: isolate;
}

/* NOTA per chi legge in futuro: non mettere qui una regola che cambia il
   position delle .lte-zs-slider-inner per "riservare l'altezza" della hero.
   L'ho provato e rompe lo slider: le slide non-prime sono absolute con
   top:auto, quindi dipendono dalla posizione statica. Togliendo la prima dal
   flusso di posizionamento, le altre scivolano sotto (misurato: a 1096 e
   1198px, fuori schermo) e il titolo visibile sparisce.

   Fra l'altro non serve: zoom-slider.css riga 91 nasconde già le slide
   successive finché JS non aggiunge .zs-enabled, quindi prima di JS la prima
   slide è nel flusso e l'altezza è già riservata dal tema. */

.lte-slider-zoom::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
	pointer-events: none;
	background:
		linear-gradient(to top, rgba(10, 10, 11, .88) 0%, rgba(10, 10, 11, .45) 38%, rgba(10, 10, 11, .12) 68%, rgba(10, 10, 11, .3) 100%);
}

/* Il contenuto testuale resta sopra il velo */
.lte-slider-zoom .lte-zs-slider-wrapper,
.lte-slider-zoom .lte-zoom-pb,
.lte-slider-zoom .lte-overlay-lines {
	position: relative;
	z-index: 2;
}

.lte-zs-slider-inner h1,
.lte-zs-slider-inner h2 {
	/* ombra corta: sostiene il testo anche dove la foto è più chiara */
	text-shadow: 0 2px 24px rgba(0, 0, 0, .55), 0 1px 3px rgba(0, 0, 0, .4);
}

/* Su mobile il titolo rotante parte troppo in alto e tocca il logo:
   40px di respiro. Su desktop non serve, lì lo spazio c'è.

   Perché il selettore è così specifico:
   la classe .lte-header è generica, la usano 15 elementi in home — anche
   "I nostri servizi", "Indirizzo:", "Telefono:" nel footer. Un padding su
   .lte-header spingerebbe in basso mezzo sito. E dentro la hero ce ne sono
   due per slide: l'h2 col titolone e un h6 col sottotitolo. Serve solo l'h2.

   !important necessario: Elementor genera per ogni widget un CSS dedicato
   (post-40653.css) con selettori tipo
       .elementor-40653 .elementor-element-b85295b .lte-header
   cioè specificità 0,3,1 e caricato DOPO questo foglio. Rincorrere quella
   specificità con una catena di classi sarebbe più fragile, perché quegli
   ID cambiano se la sezione viene ricostruita in Elementor. */
@media (max-width: 767px) {
	.lte-zs-slider-inner h1.lte-header,
	.lte-zs-slider-inner h2.lte-header {
		padding-top: 40px !important;
	}
}

/* -------------------------------------------------------------------------
   H1 della homepage (iniettato dal modulo SEO)

   Ancorato in BASSO A SINISTRA della hero, non al centro: il titolo dello
   slider ruota su tre slide e occupa la fascia centrale, quindi qualsiasi
   posizionamento centrale finisce per sovrapporsi. In basso a sinistra
   l'area è libera su tutte e tre le slide, e la riga si legge come un
   sovratitolo editoriale.
   ---------------------------------------------------------------------- */

/* Serve un antenato posizionato: il filtro inserisce .mrp-hero-heading
   dentro .elementor-widget-container, che di base non è posizionato. */
.elementor-widget-lte-zoomslider > .elementor-widget-container {
	position: relative;
}

.mrp-hero-heading {
	position: absolute;
	z-index: 4;
	left: 0;
	right: 0;
	bottom: clamp(1.25rem, 4vh, 2.75rem);
	padding-inline: var(--mrp-gutter);
	pointer-events: none;
}

.mrp-hero-h1 {
	display: flex;
	align-items: center;
	flex-wrap: wrap;
	gap: .4em .7em;
	margin: 0;
	max-width: 34ch;
	font-family: var(--font-main, 'Lexend'), system-ui, sans-serif;
	/* Pavimento a 12px: è micro-testo tutto maiuscolo con tracking ampio,
	   quindi resta leggibile, ma sotto i 12px no. */
	font-size: clamp(.75rem, .7rem + .35vw, .875rem) !important;
	font-weight: 500;
	line-height: 1.35;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .9);
	text-shadow: 0 1px 14px rgba(0, 0, 0, .7);
}

.mrp-hero-h1__rule {
	width: clamp(1.25rem, 5vw, 2.75rem);
	height: 2px;
	flex: none;
	background: var(--mrp-red);
	border-radius: 2px;
}

.mrp-hero-h1__sep {
	color: var(--mrp-red);
	font-weight: 700;
}

.mrp-hero-h1__brand {
	color: #fff;
	font-weight: 700;
	letter-spacing: .1em;
}

@media (max-width: 767px) {
	.mrp-hero-h1 {
		gap: .3em .5em;
		letter-spacing: .1em;
	}
	/* Su schermi stretti il filo ruberebbe spazio al testo */
	.mrp-hero-h1__rule {
		display: none;
	}
}

/* La barra di avanzamento dello slider sta in basso: lasciamole spazio */
@media (min-width: 768px) {
	.mrp-hero-h1 {
		max-width: 60%;
	}
}

/* =========================================================================
   3. TAP TARGET E CONTROLLI

   Misurato: 13 elementi cliccabili su 35 stavano sotto i 40px. Le linee guida
   di accessibilità chiedono almeno 44x44 CSS px.
   ====================================================================== */

@media (pointer: coarse) {

	.lte-ul-nav > li > a,
	.lte-navbar-items a,
	.lte-social a,
	.copyright-block a,
	.lte-footer-wrapper a,
	.elementor-widget-lte-button a,
	.lte-zoom-pb span,
	.swiper-pagination-bullet {
		min-height: 44px;
		display: inline-flex;
		align-items: center;
	}

	/* Icone social e bullet: area cliccabile allargata senza cambiare la grafica */
	.lte-social a,
	.swiper-pagination-bullet,
	.lte-zoom-pb span {
		position: relative;
	}

	.lte-social a::after,
	.swiper-pagination-bullet::after,
	.lte-zoom-pb span::after {
		content: "";
		position: absolute;
		top: 50%;
		left: 50%;
		width: 44px;
		height: 44px;
		transform: translate(-50%, -50%);
	}

	/* L'hamburger deve essere generoso */
	.lte-navbar-toggle,
	.lte-navbar-burger,
	.lte-navbar-close {
		min-width: 48px;
		min-height: 48px;
	}
}

/* Focus visibile da tastiera: prima non esisteva alcun indicatore */
a:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible,
[tabindex]:focus-visible {
	outline: 2px solid var(--mrp-red-hot);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Il focus col mouse resta invisibile, come si aspetta l'utente */
a:focus:not(:focus-visible),
button:focus:not(:focus-visible) {
	outline: none;
}

/* =========================================================================
   4. PULSANTI

   Stessa palette, ma con stati definiti: prima non c'era feedback al passaggio
   e la pressione su touch non dava riscontro.
   ====================================================================== */

.elementor-widget-lte-button a,
.lte-sc-button a,
.lte-button,
input[type="submit"],
button[type="submit"],
.wpcf7-submit {
	position: relative;
	min-height: 48px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: .6em;
	transition: transform var(--mrp-fast), box-shadow var(--mrp-fast), background-color var(--mrp-fast), color var(--mrp-fast);
	will-change: transform;
}

.elementor-widget-lte-button a:hover,
.lte-sc-button a:hover,
.lte-button:hover,
input[type="submit"]:hover,
button[type="submit"]:hover,
.wpcf7-submit:hover {
	transform: translateY(-2px);
	box-shadow: 0 10px 28px -8px rgba(246, 0, 25, .55);
}

/* Riscontro alla pressione, importante su touch */
.elementor-widget-lte-button a:active,
.lte-sc-button a:active,
.lte-button:active,
input[type="submit"]:active,
button[type="submit"]:active,
.wpcf7-submit:active {
	transform: translateY(0) scale(.985);
	box-shadow: none;
}

/* =========================================================================
   5. SCHEDE SERVIZI E IMMAGINI

   Micro-interazioni che rendono il blocco "I nostri servizi" percepibile come
   navigabile: prima era statico e non comunicava di essere cliccabile.
   ====================================================================== */

.elementor-widget-lte-services-list .lte-services-item,
.lte-services-list .lte-services-item,
.lte-team-item,
.lte-gallery-item {
	transition: transform var(--mrp-slow), box-shadow var(--mrp-slow);
}

.elementor-widget-lte-services-list .lte-services-item:hover,
.lte-services-list .lte-services-item:hover,
.lte-team-item:hover {
	transform: translateY(-6px);
	box-shadow: 0 24px 48px -20px rgba(0, 0, 0, .75);
}

/* Zoom lento sull'immagine, ritagliata dal contenitore */
.lte-services-item .lte-services-image,
.lte-team-item .lte-team-image,
.lte-gallery-item figure {
	overflow: hidden;
}

.lte-services-item img,
.lte-team-item img,
.lte-gallery-item img {
	transition: transform 1.1s var(--mrp-ease);
	will-change: transform;
}

.lte-services-item:hover img,
.lte-team-item:hover img,
.lte-gallery-item:hover img {
	transform: scale(1.055);
}

/* Filo rosso che compare sotto la scheda: segnala l'elemento attivo */
.lte-services-item {
	position: relative;
}

.lte-services-item::after {
	content: "";
	position: absolute;
	left: 0;
	bottom: 0;
	height: 3px;
	width: 100%;
	background: var(--mrp-red);
	transform: scaleX(0);
	transform-origin: left;
	transition: transform var(--mrp-slow);
}

.lte-services-item:hover::after {
	transform: scaleX(1);
}

/* Nessuna immagine deve sfondare il proprio contenitore */
img,
video,
iframe,
canvas,
svg {
	max-width: 100%;
}

img {
	height: auto;
}

/* =========================================================================
   6. RITMO VERTICALE

   Le sezioni Elementor avevano padding disomogenei: su mobile alcune si
   attaccavano, altre lasciavano buchi. Una sola scala fluida li allinea.
   ====================================================================== */

/* Il gutter va SOLO ai contenitori "boxed".
   I contenitori .e-con-full sono a tutta larghezza per scelta di chi ha
   costruito la pagina: dargli padding laterale lascia due bande vuote ai
   lati della hero, che è esattamente il difetto da evitare. */
@media (max-width: 1024px) {
	.elementor-element.e-con-boxed.e-parent > .e-con-inner {
		padding-inline: var(--mrp-gutter);
	}
}

/* Rete di sicurezza: nessun padding laterale sulle sezioni full-width,
   qualunque cosa lo imposti. */
@media (max-width: 1024px) {
	.elementor-element.e-con-full.e-parent {
		padding-left: 0;
		padding-right: 0;
	}
}

@media (max-width: 767px) {
	/* Comprime le spaziature verticali eccessive ereditate dal desktop */
	.elementor-widget-spacer .elementor-spacer-inner {
		height: min(var(--elementor-spacer-inner, 40px), 40px) !important;
	}
}

/* =========================================================================
   7. BANNER COOKIE — USABILITÀ MOBILE

   Misurato: il banner iubenda occupava 812px su 812 di viewport, cioè lo
   schermo intero, coprendo la hero e l'hamburger. Il contenuto legale resta
   integralmente presente e leggibile, ma dentro un'area che scorre.
   ====================================================================== */

@media (max-width: 767px) {

	#iubenda-cs-banner .iubenda-cs-container,
	.iubenda-cs-container {
		max-height: 76vh !important;
	}

	#iubenda-cs-banner .iubenda-cs-content {
		max-height: 76vh !important;
		display: flex !important;
		flex-direction: column !important;
	}

	#iubenda-cs-banner .iubenda-cs-rationale {
		max-height: 76vh;
		display: flex;
		flex-direction: column;
	}

	/* Il testo scorre, i pulsanti restano sempre raggiungibili */
	#iubenda-cs-banner .iubenda-banner-content {
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
		overscroll-behavior: contain;
		min-height: 0;
	}

	#iubenda-cs-banner .iubenda-cs-opt-group {
		flex: none;
		position: sticky;
		bottom: 0;
	}

	/* I pulsanti del banner devono rispettare la soglia di 44px */
	#iubenda-cs-banner button,
	#iubenda-cs-banner .iubenda-cs-accept-btn,
	#iubenda-cs-banner .iubenda-cs-reject-btn,
	#iubenda-cs-banner .iubenda-cs-customize-btn {
		min-height: 44px !important;
	}
}

/* =========================================================================
   8. HEADER

   Fondo leggibile quando si scorre sopra contenuto chiaro, invece di restare
   completamente trasparente.
   ====================================================================== */

.lte-header-wrapper.lte-header-overlay .lte-navbar-custom {
	transition: background-color var(--mrp-slow), backdrop-filter var(--mrp-slow), box-shadow var(--mrp-slow);
}

body.mrp-scrolled .lte-header-wrapper.lte-header-overlay .lte-navbar-custom,
body.mrp-scrolled .lte-navwrapper-desktop {
	background-color: rgba(12, 12, 13, .82);
	backdrop-filter: saturate(140%) blur(14px);
	-webkit-backdrop-filter: saturate(140%) blur(14px);
	box-shadow: 0 1px 0 var(--mrp-ink-line);
}

/* Menu mobile a tutto schermo: gerarchia più chiara */
@media (max-width: 991px) {
	.navbar-mobile .lte-ul-nav > li > a {
		font-size: clamp(1.125rem, 5vw, 1.5rem);
		letter-spacing: -.01em;
	}
	.navbar-mobile .lte-ul-nav > li + li {
		border-top: 1px solid var(--mrp-ink-line);
	}
}

/* Voci di menu con sottomenu: il link occupa tutta la riga, così il "+"
   si stacca dal testo e va a fine riga. */
.lte-navbar-custom .lte-navbar-items-custom.navbar-mobile .lte-ul-nav li.menu-item-has-children > a {
	width: 100%;
}

/* =========================================================================
   9. FORM CONTATTI

   Su iOS un input con font-size < 16px provoca lo zoom automatico della
   pagina al focus: fastidioso e spesso confuso con un bug.
   ====================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="number"],
input[type="search"],
input[type="url"],
input[type="password"],
textarea,
select {
	font-size: max(1rem, 16px);
	min-height: 48px;
	border-radius: 10px;
	transition: border-color var(--mrp-fast), box-shadow var(--mrp-fast);
}

textarea {
	min-height: 120px;
	line-height: 1.6;
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--mrp-red);
	box-shadow: 0 0 0 3px rgba(246, 0, 25, .18);
}

/* Errori di validazione CF7 percepibili anche senza distinguere i colori */
.wpcf7-not-valid {
	border-color: var(--mrp-red-hot) !important;
}

.wpcf7-not-valid-tip {
	font-size: .875rem;
	margin-top: .35rem;
}

/* La checkbox privacy va allineata al testo e cliccabile con il dito */
.wpcf7-acceptance .wpcf7-list-item-label {
	display: inline-block;
	line-height: 1.5;
}

.wpcf7-acceptance input[type="checkbox"] {
	width: 20px;
	height: 20px;
	min-height: 20px;
	accent-color: var(--mrp-red);
	margin-inline-end: .6rem;
	vertical-align: middle;
}

/* =========================================================================
   10. ORARI — TABELLA SU MOBILE

   La griglia settimanale dei corsi ha 7 colonne: su 375px diventa illeggibile
   se compressa. Meglio farla scorrere in orizzontale, dentro il suo box,
   senza che scorra tutta la pagina.
   ====================================================================== */

.lte-schedule-wrapper,
.lte-schedule-table-wrapper,
.elementor-widget-lte-schedule .elementor-widget-container {
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
	overscroll-behavior-x: contain;
	scrollbar-width: thin;
}

@media (max-width: 767px) {
	.lte-schedule-table,
	.lte-schedule-wrapper table {
		min-width: 640px;
	}

	/* Suggerisce che c'è altro contenuto a destra */
	.elementor-widget-lte-schedule .elementor-widget-container {
		mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
		-webkit-mask-image: linear-gradient(to right, #000 0, #000 calc(100% - 24px), transparent 100%);
	}
}

/* -------------------------------------------------------------------------
   SCROLL ORIZZONTALE — correzione della causa, non del sintomo

   Bug preesistente del tema, presente su ogni pagina: .row.centered porta i
   margini negativi di Bootstrap (margin: 0 -15px), che per contratto vanno
   assorbiti dal padding di 15px del .container. Ma .container.main-wrapper
   ha padding 0 (serve ai layout Elementor a piena larghezza), quindi i -15px
   restano scoperti e la pagina scorre di 15px in orizzontale.

   Misurato prima: scrollWidth 1925 su clientWidth 1910, e window.scrollX
   arrivava a 15 anche senza questo layer CSS.

   Azzeriamo i margini negativi della riga e, insieme, il padding delle sue
   colonne dirette: il contenuto resta esattamente a filo com'è adesso, ma
   senza sbordare. Non tocchiamo le altre .row del tema, che il padding del
   loro container lo hanno.
   ---------------------------------------------------------------------- */
.container.main-wrapper > .row,
.container.main-wrapper > .lte-text-page > .row {
	margin-left: 0;
	margin-right: 0;
}

.container.main-wrapper > .row > [class*="col-"],
.container.main-wrapper > .lte-text-page > .row > [class*="col-"] {
	padding-left: 0;
	padding-right: 0;
}

/* Rete di sicurezza per contenuti futuri.
   `clip` e non `hidden`: overflow hidden su html/body crea un contenitore di
   scorrimento che romperebbe position:sticky dell'header. */
body {
	overflow-x: clip;
	max-width: 100%;
}

/* =========================================================================
   11. DETTAGLI
   ====================================================================== */

::selection {
	background: var(--mrp-red);
	color: #fff;
}

html {
	scroll-behavior: smooth;
	/* header fisso: gli anchor non finiscono sotto la barra */
	scroll-padding-top: 6rem;
}

/* Barra di scorrimento coerente col tema scuro */
@supports selector(::-webkit-scrollbar) {
	::-webkit-scrollbar {
		width: 10px;
		height: 10px;
	}
	::-webkit-scrollbar-track {
		background: var(--mrp-ink);
	}
	::-webkit-scrollbar-thumb {
		background: #35373b;
		border-radius: 10px;
	}
	::-webkit-scrollbar-thumb:hover {
		background: var(--mrp-red);
	}
}

/* Link testuali: sottolineatura che non taglia i discendenti */
.entry-content a:not([class]),
.elementor-widget-text-editor a:not([class]) {
	text-decoration-thickness: 1px;
	text-underline-offset: .18em;
	text-decoration-color: rgba(246, 0, 25, .55);
	transition: text-decoration-color var(--mrp-fast), color var(--mrp-fast);
}

.entry-content a:not([class]):hover,
.elementor-widget-text-editor a:not([class]):hover {
	text-decoration-color: var(--mrp-red);
}

/* =========================================================================
   12. MOVIMENTO RIDOTTO

   Il sito usa parallax, scrollreveal, zoom continuo dello slider e due canvas
   animati nel footer. Per chi ha attivato "riduci movimento" a livello di
   sistema tutto questo va disinnescato: non è una preferenza estetica ma
   un'impostazione di accessibilità, e per alcune persone provoca nausea.
   ====================================================================== */

@media (prefers-reduced-motion: reduce) {

	*,
	*::before,
	*::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}

	html {
		scroll-behavior: auto;
	}

	/* Lo zoom continuo dello slider è il movimento più invasivo */
	.lte-zs-slider-inner,
	.lte-slider-zoom .lte-zs-slider-inner {
		transform: none !important;
		animation: none !important;
	}

	/* I canvas decorativi del footer */
	.lte-sparkle-fire-wrapper {
		display: none !important;
	}

	.lte-services-item:hover img,
	.lte-team-item:hover img {
		transform: none;
	}
}

/* =========================================================================
   13. STAMPA
   ====================================================================== */

@media print {
	.lte-header-wrapper,
	.lte-footer-wrapper .lte-sparkle-fire-wrapper,
	#iubenda-cs-banner,
	.lte-zoom-pb {
		display: none !important;
	}

	body {
		background: #fff !important;
		color: #000 !important;
	}
}