/* =========================================================================
   PSQ - correzioni responsive (mobile)
   Questo file viene caricato per ultimo (vedi PublicShellHeadAssets.razor),
   quindi può sovrascrivere tema Porto e demo senza modificarli.
   ========================================================================= */

/* -------------------------------------------------------------------------
   Homepage / sezione finale "Competenza e professionalità."
   La scritta-watermark di ".custom-el-9" è in "white-space: nowrap" e, con il
   font-size in clamp(), esce dal viewport: allargava il documento a 441px su
   uno schermo da 360px (413px di testo a 28px). Il taglio è già previsto dal
   tema ("text-overflow: ellipsis"), ma senza "overflow" il testo non veniva
   contenuto. Chiudendolo qui l'elemento decorativo non genera più overflow.
   ------------------------------------------------------------------------- */
.custom-el-9 {
	overflow: hidden;
}

/* -------------------------------------------------------------------------
   Utility responsive mancante: come ".border-radius-2" (16px = var(--border-radius2x))
   ma applicata solo da lg in su. Serve ai box colorati a piena larghezza su mobile.
   ------------------------------------------------------------------------- */
@media (min-width: 992px) {
	.border-radius-lg-2 {
		border-radius: var(--border-radius2x) !important;
	}
}

/* -------------------------------------------------------------------------
   Barra cookie su mobile.
   I tre pulsanti in fila occupano 523 px su ~320 disponibili: il tema li mette
   in flex senza wrap e "Preferenze Privacy" è nowrap, quindi uscivano dal bordo
   destro. Sotto i 1200px (dove il tema passa alla disposizione in colonna)
   "Preferenze Privacy" prende una riga intera e i due pulsanti decisivi stanno
   sotto, affiancati.
   Inoltre il testo era a line-height 26px su 13px (2,0): la barra arrivava a
   275 px di altezza, un terzo dello schermo.
   ------------------------------------------------------------------------- */
@media (max-width: 1199.98px) {
	.gdpr-bar {
		padding: 12px 16px;
		/* su schermi bassi (telefono in orizzontale, zoom) la barra non deve
		   mai superare l'altezza visibile: meglio uno scroll interno che
		   contenuto fuori schermo */
		max-height: 100dvh;
		overflow-y: auto;
	}

	.gdpr-bar .gdpr-bar-description p {
		font-size: .78rem;
		line-height: 1.45;
	}

	.gdpr-bar .gdpr-bar-actions {
		flex-wrap: wrap;
		gap: 8px;
		margin-top: 12px;
	}

	.gdpr-bar .gdpr-bar-actions > a.btn {
		flex: 1 1 0;
		/* il tema aggiunge 2rem e il markup ms-3: sul telefono azzerano lo spazio */
		margin-left: 0 !important;
		padding: .7rem 1rem;
		font-size: .8125rem;
		text-align: center;
	}

	/* "Preferenze Privacy" non è una decisione come le altre due: resta un
	   pulsante ma compatto e centrato sotto, senza il fondo grigio pieno che
	   lo faceva sembrare l'azione principale. */
	.gdpr-bar .gdpr-bar-actions > a.psq-gdpr-prefs {
		flex: 0 0 auto;
		order: 2;
		margin: 2px auto 0 !important;
		padding: .45rem .9rem;
		font-size: .75rem;
		background-color: transparent !important;
		border: 1px solid rgba(255, 255, 255, .4) !important;
		color: rgba(255, 255, 255, .9) !important;
		box-shadow: none !important;
		white-space: nowrap;
	}

	.gdpr-bar .gdpr-bar-actions > a.psq-gdpr-prefs:hover,
	.gdpr-bar .gdpr-bar-actions > a.psq-gdpr-prefs:focus {
		background-color: rgba(255, 255, 255, .14) !important;
		border-color: rgba(255, 255, 255, .75) !important;
		color: #fff !important;
	}

	/* --- finestra "Preferenze Privacy" ---
	   Il tema le dà max-width 1000px senza un width: il riquadro si allargava
	   fino a 521 px su un telefono da 329 e usciva da entrambi i lati, con la X
	   di chiusura fuori schermo. */
	.gdpr-preferences-popup {
		padding: 0;
		align-items: stretch;
	}

	/* a schermo intero il corpo guadagna altezza e tutta la larghezza utile */
	.gdpr-preferences-popup .gdpr-preferences-popup-content {
		display: flex;
		flex-direction: column;
		width: 100%;
		max-width: 100%;
		height: 100%;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-form {
		display: flex;
		flex: 1 1 auto;
		flex-direction: column;
		min-height: 0;
	}

	/* area di tocco della X: era 16x26 px */
	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-close-popup {
		top: 6px;
		right: 6px;
		display: flex;
		align-items: center;
		justify-content: center;
		width: 40px;
		height: 40px;
		z-index: 2;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body {
		flex: 1 1 auto;
		min-height: 0;
		padding: 18px 14px;
		/* testo più piccolo: con il corpo del tema l'introduzione occupava da
		   sola quasi tutto lo schermo e gli interruttori restavano sotto */
		font-size: .66rem;
		line-height: 1.4;
		max-height: none;
		overflow-y: auto;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body h4 {
		font-size: 1rem;
		margin-bottom: .4rem;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body hr {
		margin: .75rem 0;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body p {
		/* il tema dà ai paragrafi font-size 1rem: senza "inherit" il corpo
		   rimpicciolito non li toccava e l'introduzione restava alta 246 px */
		font-size: inherit;
		line-height: 1.4;
		margin-bottom: 0;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item {
		font-size: .66rem;
		align-items: center;
	}

	/* interruttore più compatto: 50x26 -> 38x20 */
	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .custom-checkbox-switch {
		width: 38px;
		height: 20px;
		flex: 0 0 38px;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .custom-checkbox-switch:after {
		width: 12px;
		height: 12px;
		left: 4px;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .custom-checkbox-switch:checked:after {
		left: 21px;
	}

	/* titolo e interruttore sulla stessa riga, descrizione sotto: con tutto
	   impilato ogni voce occupava ~145 px e la finestra scorreva per 1300 px */
	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .gdpr-cookie-item-title {
		flex: 1 1 auto;
		width: auto;
		order: 1;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .gdpr-cookie-item-action {
		flex: 0 0 auto;
		width: auto;
		order: 2;
		margin-top: 0;
		text-align: right;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item .gdpr-cookie-item-description {
		flex: 1 0 100%;
		width: 100%;
		order: 3;
		margin-top: 2px;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-body .gdpr-cookie-item + .gdpr-cookie-item {
		margin-top: 6px;
	}

	/* tre pulsanti in fila non ci stanno: i due decisivi affiancati e
	   "Salva impostazioni" a piena riga sotto */
	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-footer {
		flex: 0 0 auto;
		flex-wrap: wrap;
		gap: 8px;
		padding: 16px;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-footer .btn {
		flex: 1 1 0;
		margin-left: 0 !important;
		margin-right: 0 !important;
		padding: .55rem .5rem;
		font-size: .7rem;
		white-space: nowrap;
	}

	.gdpr-preferences-popup .gdpr-preferences-popup-content .gdpr-preferences-popup-content-footer .btn.btn-outline {
		flex: 1 0 100%;
		order: 2;
	}
}

/* -------------------------------------------------------------------------
   Home - decorazione della hero (div.custom-pos-1, la "curves" grigia).
   Il plugin data-icon sostituisce a runtime l'<img> con un <svg> inline dentro
   un div.animated-icon che non eredita "img-fluid": prima della sostituzione
   l'immagine era larga ~326 px, dopo diventava 1016x1017 e il contenitore
   assoluto (ancorato a "bottom") cresceva di ~690 px trascinando con sé tutto
   ciò che sta sotto. Era il 0,38 di CLS della home.
   Fissando la stessa misura su <img> e <svg> il passaggio non muove più niente.
   ------------------------------------------------------------------------- */
.custom-pos-1 img,
.custom-pos-1 svg {
	width: 1016px;
	height: 1017px;
	max-width: none;
}

/* -------------------------------------------------------------------------
   Titoli delle card e delle colonne del footer.
   Per la gerarchia dei titoli (e per l'audit "heading-order" di Lighthouse)
   questi titoli sono h2/h3, ma il tema scala la dimensione sul tag
   (h2 30,8 px, h3 25,2 px, h4 19,6 px): senza questa classe diventerebbero più
   grandi e cambierebbe il disegno delle card. Ripete la resa dell'h4, con lo
   stesso "em" così si adatta al contesto (card, colonne del footer).
   ------------------------------------------------------------------------- */
.psq-h4 {
	font-size: 1.4em;
	font-weight: 600;
}

@media (max-width: 991.98px) {

	/* ---------------------------------------------------------------------
	   Galleria "Chi siamo" (4 foto)
	   Il tema la realizza come 4 colonne flex ("flex: 1") alte 415px: su un
	   telefono ogni foto finisce larga 45-53px, quindi diventano 4 strisce
	   verticali in cui non si riconosce nulla. Sotto lg la si trasforma in
	   una normale griglia 2x2 con le immagini in "object-fit: cover".
	   --------------------------------------------------------------------- */
	.custom-gallery-1 {
		flex-wrap: wrap;
		gap: 12px;
	}

	.custom-gallery-1 > div,
	.custom-gallery-1 > div:hover {
		flex: 0 0 calc(50% - 6px);
		height: 150px;
	}

	.custom-gallery-1 > div img {
		position: static;
		transform: none;
		width: 100%;
		height: 100%;
		object-fit: cover;
	}

	/* ---------------------------------------------------------------------
	   Sezione "Cosa dicono i nostri clienti"
	   Le 3 stelle decorative sono in posizione assoluta (right 8% / top 15%)
	   e su desktop stanno nello spazio vuoto a destra del titolo. Su mobile
	   quello spazio non esiste: finivano sopra l'h2 e il paragrafo
	   introduttivo. Sotto lg si nascondono.
	   --------------------------------------------------------------------- */
	.custom-el-8 {
		display: none;
	}

	/* Sotto lg le frecce del carosello sono nascoste dal tema e i dots erano
	   disattivati ("dots: false"): si vedeva solo la 1a testimonianza e nulla
	   indicava che ce ne fossero altre 2. I dots sono ora attivati nel markup
	   e stilizzati qui per essere ben visibili. */
	.custom-owl-carousel-1 .owl-dots {
		margin-top: 24px !important;
	}

	.custom-owl-carousel-1 .owl-dots .owl-dot span {
		width: 10px;
		height: 10px;
		margin: 5px 5px;
		background-color: var(--grey-600);
	}

	.custom-owl-carousel-1 .owl-dots .owl-dot.active span,
	.custom-owl-carousel-1 .owl-dots .owl-dot:hover span {
		background-color: var(--primary);
	}

	/* ---------------------------------------------------------------------
	   Card dei 4 tab della home (Formazione / Analisi / Servizi / Consulenza).
	   Lo scope .custom-el-1 serve a non toccare gli altri .tabs del sito.
	   --------------------------------------------------------------------- */

	/* Il tema mette la barra dei tab SOTTO il pannello, e il pannello è alto
	   ~630px: toccando una tab la parte che cambia restava fuori dallo
	   schermo. Sotto lg la barra va sopra il pannello ("order"), come nella
	   convenzione mobile; su desktop non cambia nulla. */
	.custom-el-1 .tabs {
		display: flex;
		flex-direction: column;
	}

	.custom-el-1 .tabs > .nav-tabs {
		order: 0;
		border-top: 0 !important;
		border-bottom: 1px solid var(--grey-400);
		padding-top: 0 !important;
		padding-bottom: 1rem;
		margin-bottom: 1.5rem;
	}

	.custom-el-1 .tabs > .tab-content {
		order: 1;
		border-radius: 4px;
	}

	/* Etichette della barra tab più compatte (erano text-5 = 1.5em, ~19.5px). */
	.custom-el-1 .tabs > .nav-tabs .nav-link {
		font-size: 1.2em !important;
		padding-top: .55rem;
		padding-bottom: .55rem;
	}

	/* Le icone avevano text-5, cioè 1.5em *rispetto al link*: con il font del
	   link ridotto andavano ricalcolate sullo stesso corpo del testo. */
	.custom-el-1 .tabs > .nav-tabs .nav-link i {
		font-size: 1em !important;
		top: 4px !important; /* il markup ha "top-8", tarato sul font grande */
	}

	/* Cerchi decorativi: 150+180px con -40px di sovrapposizione occupavano
	   290px su ~270px disponibili, sforando il pannello da entrambi i lati.
	   Ridotti e riportati dentro il pannello. */
	.custom-el-1 .custom-el-2 {
		width: 120px;
		height: 120px;
		min-width: 120px;
		min-height: 120px;
	}

	.custom-el-1 .custom-el-3 {
		width: 150px;
		height: 150px;
		min-width: 150px;
		min-height: 150px;
		margin-left: -34px;
		margin-top: -12px;
		/* L'icona decorativa interna è 110x110: nel cerchio ridotto sbordava
		   sotto il bordo. Il clip la riporta dentro il cerchio. */
		overflow: hidden;
	}

	/* ...ma il "check" decorativo (un segno di spunta al 30% di opacità) a
	   110px in un cerchio da 150px risulta tagliato a metà e sembra un difetto:
	   su mobile lo si toglie, resta la didascalia. */
	.custom-el-1 .custom-el-3 > .p-absolute > span.p-absolute {
		display: none;
	}

	/* La didascalia dentro il cerchio grande era larga solo 90px (metà
	   cerchio: "left: 50%" + larghezza shrink-to-fit) e andava a capo su 5
	   righe strettissime, sbordando dal cerchio. */
	.custom-el-1 .custom-el-3 > .p-absolute {
		width: 86%;
		font-size: 13px;
		line-height: 1.35;
	}

	/* In 3 pannelli su 4 la didascalia ha ".line-height-1" (troppo stretta
	   su più righe). */
	.custom-el-1 .custom-el-3 > .p-absolute .line-height-1 {
		line-height: 1.35 !important;
	}
}

/* -------------------------------------------------------------------------
   Card delle news: il riquadro della data è decorativo e sta sopra al
   "::after" di .stretched-link, creando una zona non cliccabile. Lo si fa
   attraversare dai click, così tutta la card è cliccabile.
   ------------------------------------------------------------------------- */
#news .post-date {
	pointer-events: none;
}

/* -------------------------------------------------------------------------
   Card delle news (home e pagina /news): foto a proporzione fissa con
   ritaglio centrato. Le immagini caricate dal CMS hanno formati diversi:
   senza vincolo la card con la foto piu' alta allunga la riga e le card
   accanto partono a quote diverse. Non serve "overflow: hidden": il
   ritaglio lo fa "object-fit: cover" e l'altezza resta fluida (scala con
   la larghezza della colonna, 3 per riga in home e 2 su /news).
   Il rapporto 16/9 ritaglia un po' le foto caricate a 736x400: per non
   ritagliarle usare "aspect-ratio: 736 / 400".
   ------------------------------------------------------------------------- */
.psq-news-cover {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 9;
	object-fit: cover;
	object-position: center;
}

@media (min-width: 992px) {
	.custom-owl-carousel-1 .owl-dots {
		display: none;
	}
}

/* -------------------------------------------------------------------------
   Galleria "Chi siamo" - altezza foto nella fascia tablet. Va DOPO il blocco
   max-width:991.98px qui sopra: stessa specificità, vince l'ultima regola.
   Con 2 colonne da ~350px le foto a 150px diventano strisce orizzontali.
   ------------------------------------------------------------------------- */
@media (min-width: 576px) and (max-width: 991.98px) {
	.custom-gallery-1 > div,
	.custom-gallery-1 > div:hover {
		height: 220px;
	}
}

/* -------------------------------------------------------------------------
   Home - titolo della hero con effetto macchina da scrivere (js/custom.js).
   Il testo alternato è vero markup (SEO e utenti senza JavaScript): qui solo
   il cursore lampeggiante. "inline-block" serve perché l'altezza minima,
   calcolata in JS sulla frase più lunga, non ha effetto sugli elementi inline.
   ------------------------------------------------------------------------- */
.psq-typewriter {
	display: inline-block;
	/* Dentro un contenitore flex l'elemento non si restringerebbe sotto la
	   propria larghezza massima e il testo usciva dal container: così invece
	   va a capo come prima. */
	min-width: 0;
	max-width: 100%;
}

/* Il titolo non viene battuto carattere per carattere: ogni parte della frase è
   già scritta e si svela aprendosi da sinistra, come una finestra che si
   allarga sul testo (clip-path: nessun riflusso, nessun tremolio).
   La frase con una pausa ("||") ha due parti: ognuna ha la sua finestra, così
   la prima resta ferma e visibile mentre la seconda si apre (anche quando il
   testo va a capo). "is-collapsed" chiude la finestra SENZA transizione; la
   classe base la fa riaprire con l'animazione, quindi l'ordine conta.
   Il contenitore è flex (e non inline-block) perché l'inline-block aggiunge
   sotto il testo il leading della riga: restavano ~65 px di vuoto in fondo e
   il titolo sembrava troppo in alto. Con flex il testo è centrato nell'altezza
   minima riservata e il blocco è alto esattamente quanto il testo. */
.psq-typewriter-box {
	position: relative;
	display: flex;
	justify-content: center;
	align-items: center;
	width: 100%;
	transition: opacity 170ms ease-out;
}

/* Il tema dà al titolo 32px di margine sotto, mentre sopra la riga ha 24px di
   padding: il testo risultava otticamente più in alto che in basso. Si sposta
   di 16px verso il basso riequilibrando i due margini (16 + 16), senza
   allungare il blocco. */
.psq-hero-title {
	margin-top: 16px;
	margin-bottom: 16px;
}

.psq-typewriter-box.is-fading {
	opacity: 0;
}

.psq-parte {
	display: inline-block;
}

/* Stato iniziale: finestra chiusa. Durante l'apertura il clip-path viene
   impostato inline dal ciclo di animazione (poligono riga per riga). */
.psq-parte.is-collapsed {
	clip-path: inset(0 100% 0 0);
}

/* Il cursore è assoluto e viene spostato dal ciclo di animazione JS (riga per
   riga, insieme al clip del testo): niente transition, altrimenti lotterebbe
   con i fotogrammi. */
.psq-typewriter-caret {
	position: absolute;
	top: 0;
	left: 0;
	width: 0.06em;
	height: 0.9em;
	background-color: currentColor;
	pointer-events: none;
	transform: translate(0, 0);
	animation: psq-caret-blink 1100ms infinite;
}

@keyframes psq-caret-blink {
	0%,
	49% {
		opacity: 1;
	}

	50%,
	100% {
		opacity: 0;
	}
}

/* Con "prefers-reduced-motion" lo script non anima il testo: il cursore
   lampeggiante sarebbe fuori posto, quindi non si mostra. */
@media (prefers-reduced-motion: reduce) {
	.psq-typewriter-caret {
		display: none;
	}
}

/* =========================================================================
   HEADER - navigazione principale (vale per tutto il sito).
   Le 7 voci non stanno su una riga fra 992px e ~1459px: al menu servono
   793px (725px sotto i 1200px) mentre il container ne mette a disposizione
   736px (616px sotto i 1200px). Il risultato era che "Notizie" andava a capo
   e usciva di ~105px sotto l'header, finendo sopra la hero.
   Si riducono le spaziature SOLO in quella fascia; da 1460px il container
   passa a 1420px e le spaziature tornano quelle del tema.
   ========================================================================= */

/* Fascia 992-1199px: container 960px, servono ~110px in meno. */
@media (min-width: 992px) and (max-width: 1199.98px) {
	/* "theme.css" mette margin-left: 2px su ogni voce */
	#header .header-nav-main nav > ul > li {
		margin-left: 0;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a {
		padding: 0 .1rem;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a span {
		padding: 10px 10px;
	}

	/* Il caret del dropdown sta dentro il padding destro dello span:
	   padding-right - gap di 5px. Va riallineato insieme al padding. */
	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a span {
		padding-right: 28px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a.dropdown-toggle:after {
		margin-left: -23px;
	}
}

/* Fascia 1200-1459px: container 1140px, servono ~57px in meno. */
@media (min-width: 1200px) and (max-width: 1459.98px) {
	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a {
		padding: 0 .25rem;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li > a span {
		padding: 10px 16px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a span {
		padding-right: 31px;
	}

	#header .header-nav.header-nav-links:not(.header-nav-light-text) nav > ul > li.dropdown:not(.dropdown-mega) a.dropdown-toggle:after {
		margin-left: -26px;
	}
}