/*
 * custom.css
 * File di appoggio per override rapidi via WPCode/Theme Editor senza toccare style.css principale.
 * Lasciare vuoto o usare per piccoli aggiustamenti one-off.
 */

/*
 * GTranslate (shortcode [gtranslate] in header.php, ultima voce menu desktop/mobile):
 * il widget del plugin non posiziona il dropdown lingue in absolute, ma lo fa crescere
 * in altezza nel flusso normale (position:relative, height animata 0 -> ~200px). Dentro
 * il nostro <nav class="... items-center">, un item che cresce resta centrato sulla riga
 * flex e quindi si espande sia in alto che in basso: la metà che sale finisce sopra
 * l'header fixed e sparisce oltre il bordo della pagina. Il plugin imposta inoltre
 * overflow:hidden su .gt_switcher, che clipperebbe un dropdown assoluto. Qui: tiriamo
 * fuori il dropdown dal flusso (absolute, ancorato in basso al widget) e disattiviamo
 * l'overflow:hidden del plugin così non viene tagliato.
 */
.gtranslate_wrapper .gt_switcher {
	position: relative;
	overflow: visible !important;
}

.gtranslate_wrapper .gt_switcher .gt_option {
	position: absolute !important;
	top: 100% !important;
	bottom: auto !important;
	left: 0 !important;
	margin-top: 0.5rem;
}

/*
 * Su mobile il selettore lingua e' l'ultima voce del pannello menu a schermo
 * intero (#gd-mobile-menu, contenuto centrato verticalmente), quindi spesso
 * gia' nella meta' bassa dello schermo di suo; in piu' quando il menu e'
 * aperto lo scroll della PAGINA e' bloccato (body.gd-mobile-menu-open{
 * overflow:hidden}, vedi style.css) e il pannello stesso non ha uno scroll
 * proprio. Invece di inseguire l'altezza disponibile sotto il selettore,
 * piu' semplice ed robusto: sotto i 1024px il dropdown si apre verso l'ALTO
 * (bottom:100% invece di top:100%), dove c'e' sempre spazio libero sopra
 * (le voci di menu gia' visibili), anziche' verso il fondo dello schermo
 * dove puo' non essercene. height:auto bypassa comunque l'animazione JS del
 * plugin (base height:0, si affida a un'animazione che puo' restare bloccata
 * a meta'), max-height/overflow-y restano come rete di sicurezza.
 */
@media (max-width: 1023px) {
	.gtranslate_wrapper .gt_switcher .gt_option {
		top: auto !important;
		bottom: 100% !important;
		margin-top: 0;
		margin-bottom: 0.5rem;
		height: auto !important;
		max-height: 45vh !important;
		overflow-y: auto !important;
		-webkit-overflow-scrolling: touch;
	}
}

/*
 * GTranslate — bottone selettore reso visivamente identico a quello del sito
 * originale (bandiera + codice lingua a 2 lettere + chevron), stesso stile
 * bordo/hover/font della nav e del toggle tema (.gd-theme-toggle-btn). Le
 * proprietà che il plugin NON marca !important nel suo <style> iniettato a
 * runtime (dwf.js) vengono sovrascritte qui con !important e vincono comunque
 * la cascata. L'unica proprietà che il plugin marca !important è `content`
 * sulla freccia predefinita: invece di combatterla, la freccia viene nascosta
 * con `display:none` (proprietà NON marcata !important dal plugin) e sostituita
 * da un'icona nostra via JS (vedi custom.js, sezione GTranslate).
 */
.gtranslate_wrapper .gt_switcher,
.gtranslate_wrapper .gt_switcher .gt_selected {
	display: inline-block !important;
	width: auto !important;
	background: transparent !important;
}

.gtranslate_wrapper .gt_switcher .gt_selected a {
	display: flex !important;
	align-items: center !important;
	gap: 0.375rem !important;
	width: auto !important;
	padding: 0.375rem 0.75rem !important;
	border: 1px solid rgba(51, 51, 51, 0.2) !important; /* border-silver/20 */
	background: transparent !important;
	color: rgba(255, 255, 255, 0.6) !important; /* text-white/60 */
	font-family: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace !important;
	font-size: 0.75rem !important;
	line-height: 1rem !important;
	transition: color 0.3s, border-color 0.3s !important;
}

.gtranslate_wrapper .gt_switcher .gt_selected a:hover {
	background: transparent !important;
	color: #008542 !important; /* emerald-brand */
	border-color: rgba(0, 133, 66, 0.4) !important; /* emerald-brand/40 */
}

.gtranslate_wrapper .gt_switcher .gt_selected a img {
	width: 16px !important;
	height: 16px !important;
	opacity: 1 !important;
}

.gtranslate_wrapper .gt_switcher .gt_selected a:after {
	display: none !important; /* nasconde la freccia default del plugin */
}

.gtranslate_wrapper .gt_switcher .gt_selected a .gd-gt-code {
	text-transform: uppercase;
	letter-spacing: 0.1em; /* tracking-widest */
}

.gtranslate_wrapper .gt_switcher .gt_selected a .gd-gt-chevron {
	width: 12px;
	height: 12px;
	flex-shrink: 0;
	transition: transform 0.3s;
}

.gtranslate_wrapper .gt_switcher .gt_selected a.open .gd-gt-chevron {
	transform: rotate(180deg);
}

/* Sotto i 640px (breakpoint "sm" dell'originale) resta visibile solo la bandiera */
@media (max-width: 639px) {
	.gtranslate_wrapper .gt_switcher .gt_selected a .gd-gt-code {
		display: none;
	}
}

/*
 * Menu mobile a schermo intero (#gd-mobile-menu): le voci di navigazione (non
 * la CTA "Preventivo") portano anche la classe Tailwind "transition-colors"
 * (per la dissolvenza del colore testo al passaggio del mouse). Quella classe
 * dichiara anch'essa transition-property/duration, ed essendo compilata in
 * tailwind-build.css (caricato DOPO style.css, dove vive la regola con lo
 * stagger .gd-mobile-menu__link{transition:opacity...,transform...}), vince
 * la cascata e sovrascrive silenziosamente le longhand opacity/transform:
 * il risultato e' che le 5 voci di menu compaiono tutte insieme in un solo
 * frame invece di scaglionarsi, mentre la CTA (priva di transition-colors)
 * e' l'unico elemento che anima correttamente. Qui, in custom.css (ultimo
 * foglio caricato), si ridichiarano SOLO le longhand property/duration/timing
 * (non la shorthand "transition", che azzererebbe anche transition-delay,
 * cancellando lo scaglionamento impostato dalle regole :nth-child qui sotto
 * in style.css) cosi' vincono sempre la cascata senza toccare il delay.
 */
.gd-mobile-menu__link {
	transition-property: opacity, transform, color !important;
	transition-duration: 0.3s, 0.3s, 0.3s !important;
	transition-timing-function: ease, ease, ease !important;
}