/*
	Theme Name: Hotel Gardenia al Lago
	Template: generatepress
	Version: 2.3-gemini-zigzag
	Author: lucadeluigi.com
	Author URI: https://lucadeluigi.com
*/

/* ==========================================================================
   Caricamento Font Personalizzati
   ========================================================================== */
@font-face {
  font-family: 'L';
  src: url('fonts/L.woff2') format('woff2'), url('fonts/L.woff') format('woff');
  font-weight: 300;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'M';
  src: url('fonts/M.woff2') format('woff2'), url('fonts/M.woff') format('woff');
  font-weight: normal; /* 400 */
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: 'MM';
  src: url('fonts/MM.woff2') format('woff2'), url('fonts/MM.woff') format('woff');
  font-weight: 500;
  font-style: normal;
  font-display: swap;
}

/* ==========================================================================
   Variabili Globali
   ========================================================================== */

html, body {
    /* Blocca l'effetto elastico nativo di Mac/iOS */
    overscroll-behavior: none; 
    /* Assicura che l'altezza sia gestita correttamente */
    width: 100%;
    min-height: 100%;
}

:root {
	/* Variabili di Layout */
	--hdr-h: 80px;
	--gap: 24px;
	--line: 2px;
	
	/* Variabili Font */
	--font-light: 'L', sans-serif;
	--font-regular: 'M', sans-serif;
	--font-medium: 'MM', sans-serif;
	
	/* Palette Colori */
	--colore-primario: var(--contrast);
	--colore-secondario: var(--base-2);
	--colore-accento: var(--accent);
	--colore-testo: var(--base-3);
	--colore-bianco: var(--base);
	--colore-ocra: var(--base-2);
    --colore-overlay: var(--contrast-3);
	--colore-titoli: var(--contrast-2);

	/* Ruoli Semantici per i Font */
	--font-base: var(--font-regular);
	--font-heading: var(--font-light);
	--font-menu: var(--font-light);
}



.link:before {
  position: absolute;
  content: "";
  height: 1px;
  background: #A5917C;
  bottom: -3px;
  transition: all 400ms ease-out;
  width: 100%;
  left: 0;
  right: auto;
}
.link:hover:before {
  width: 0;
  right: 0;
  left: auto;
}

body {
	font-family: var(--font-base);
	font-weight: normal; /* Corrisponde al font 'M' */
	color: var(--colore-testo);
	background-color: var(--base-2);
}

h1, h2, h3, h4, h5, h6, .hero-headline {
	font-family: var(--font-heading);
	color: var(--colore-titoli);
	font-weight: 300; 
}

h2 { text-transform: uppercase; font-size: 42px; letter-spacing: 0.03em; }
h4 { text-transform: uppercase; font-size: 13px; letter-spacing: 0.2em; }

.gb-text a {
	color: var(--contrast-2);
}

.gb-text a:hover {
	color: var(--contrast);
}

/* ==========================================================================
   HOVER LINE EFFECT (Appare al passaggio del mouse)
   ========================================================================== */

.hover-line {
    position: relative;
    display: inline-block;
    text-decoration: none;
    padding-bottom: 4px; /* Spazio tra testo e linea */
}

/* La linea di base (Invisibile) */
.hover-line::after {
    content: "";
    position: absolute;
    width: 100%;
    height: 1px; /* Spessore linea */
    bottom: 0;
    left: 0;
    background-color: currentColor; /* Prende il colore del testo */
    
    /* STATO INIZIALE: Invisibile (larghezza 0) */
    transform: scaleX(0);
    
    /* QUANDO IL MOUSE ESCE: La linea sparisce verso Destra */
    transform-origin: right;
    
    /* Animazione fluida (la stessa di learn-more) */
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* STATO HOVER: La linea appare */
.hover-line:hover::after {
    /* Diventa visibile (larghezza 100%) */
    transform: scaleX(1);
    
    /* QUANDO IL MOUSE ENTRA: La linea cresce da Sinistra */
    transform-origin: left;
}


/* ==========================================================================
   Header Topbar
   ========================================================================== */

/* Quando si scorre, riduci il padding verticale dell'header */
body.header-solid .site-topbar {
	padding-top: 0rem;
	padding-bottom: 0rem;
}

/* E rimpicciolisci il logo */
body.logo-shrunk .site-logo img {
	transform: scale(0.9);
}

header {
  background: transparent;
  transition: background-color 100ms ease;
}
header.backgrounded {
  background: #F3F2F0;
}
header.backgrounded .inside .logo svg path {
  fill: #A5917C; 
}
header.backgrounded .inside .lefthand a {
  color: #A5917C; 
}

.site-topbar {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 120; /* Sopra l'overlay del menu */
	background: transparent;
	border-bottom: 0;
	transition: background-color .3s ease, box-shadow .3s ease, padding .3s ease;	
}

.site-topbar .gb-grid-wrapper {
	align-items: center;
	justify-content: space-between;
	gap: var(--gap);
}

/* Sinistra: BOOK / INQUIRY */
.top-left {
	display: flex;
	gap: 16px;
	justify-content: flex-start !important;
}

/* Centro: logo */
.site-topbar .gb-grid-wrapper > .gb-grid-column:nth-child(2) {
	display: flex;
	justify-content: center;
}
.site-topbar .site-logo img {
	height: auto;
    display: block; 
    margin: 0 auto; 
    transition: transform 0.3s ease;
}

/* Destra: burger */
.burger-menu {
	cursor: pointer;
	display: flex;
	align-items: center;
	gap: 10px;
	user-select: none;
}

.burger-menu .container {
	position: relative;
	margin-top: auto;
	margin-bottom: auto;
	width: 30px;
	height: 20px;
	vertical-align: middle;
}
.burger-menu .container span {
	display: block;
	position: absolute;
	left: 0;
	right: 0;
	height: var(--line);
	background: var(--colore-bianco);
	width: 30px;
	transform-origin: center;
}
.burger-menu .container span:nth-child(1) { top: 0; }
.burger-menu .container span:nth-child(2) { top: 9px; }
.burger-menu .container span:nth-child(3) { top: 18px; }

/* Header "Solid" on Scroll */
body.header-solid .site-topbar {
	background: var(--colore-ocra);
}

body.header-solid .burger-menu em, body.header-solid .top-left a {
	color:  var(--colore-testo);
}

body.header-solid .burger-menu .container span {
	background-color:  var(--colore-testo);
}


/* Logo Swap */
.site-logo .logo-dark { display: none; }
body.header-solid .site-logo .logo-light { display: none; }
body.header-solid .site-logo .logo-dark { display: block; }

.m-inquiry, .m-book {
	margin-bottom: 0;
}


/* Override Colori Menu Aperto (Standard) */
body.oc-open .top-left a,
body.oc-open .burger-menu em {
	color: var(--base) !important;
}

body.oc-open .burger-menu .container span {
	background-color: var(--base) !important;
}


/* ==========================================================================
   Off-canvas Panel & Menu
   ========================================================================== */
.oc-panel {
	position: fixed;
	inset: 0;
	z-index: 60;
	display: grid;
	grid-template-rows: 1fr min(70vh, 100%);
}
.oc-panel::before {
	content: "";
	display: block;
}

@media (max-width: 768px) {
    .oc-panel {
        overflow-y: auto !important; 
    }
	
    .menu-sotto .gb-menu {
        flex-direction: column !important;
        align-items: flex-start !important; 
    }

    .menu-sotto .gb-menu-item {
        margin-right: 0 !important;
        margin-bottom: 15px; 
        display: block;
    }
    
    .menu-sotto .gb-menu-link {
        padding: 0 !important; 
        display: inline-block;
    }
	
	.tre-ico-mobile a, .tre-ico-mobile p a {
        text-decoration: none !important;
        color: var(--base);
	}

	.tre-ico-mobile p {
		margin-bottom: 0 !important;
	}
	
}

/* Layout interno pannello */
#oc-menu .gb-grid-wrapper {
	gap: 0;
}
#oc-menu .gb-grid-column:first-child {
	padding: 40px;
}
#oc-menu .gb-grid-column:last-child {
	padding: 0;
}

/* Menu Principale */
.menu-gallery ul, .menu-gallery .wp-block-navigation__container {
    list-style: none;
    margin: 0;
    padding: 0;
}

.menu-gallery a {
    color: var(--accent) !important;
    display: block;
    font-size: clamp(18px, 2.2vw, 40px);
    font-weight: 300;
    font-family: var(--font-menu);
    text-transform: none;
    letter-spacing: .02em;
    /* Transizione fluida per opacità e movimento */
    transition: opacity .3s ease, transform .3s ease;
    will-change: opacity, transform;
}

/* Stato Hover base (senza JS) */
.menu-gallery a:hover,
.menu-gallery a:focus {
    opacity: 1 !important;
    transform: translateX(10px); /* Si sposta a destra */
}

.gb-sub-menu a {
    vertical-align: top;
    line-height: 0;
    margin-bottom: 1em !important;
}

/* --- EFFETTO DIMMING (Gestito da JS) --- */

/* 1. Quando il mouse è dentro il menu, spegni TUTTI quelli che NON hanno il mouse sopra */
.menu-gallery.dim-others a:not(.is-hover) {
    opacity: 0.3 !important; /* Diventano semitrasparenti */
    transform: translateX(0) !important; /* Non si muovono */
}

/* 2. Riaccendi SOLO quello che ha il mouse sopra (.is-hover) */
.menu-gallery.dim-others a.is-hover {
    opacity: 1 !important; /* Pienamente visibile */
    transform: translateX(10px) !important; /* Si sposta a destra */
}

/* ==========================================================================
   5. PREVIEW IMMAGINI (Box Fisso 410x585 + Sovrapposizione)
   ========================================================================== */

/* 1. CENTRATURA DELLA COLONNA GENERATEBLOCKS */
/* Questo serve a garantire che la "scatola" sia al centro della colonna destra */
#oc-menu .gb-grid-column:last-child,
#oc-menu .gb-grid-column:last-child > .gb-container,
#oc-menu .gb-grid-column:last-child > .gb-container > .gb-inside-container {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    height: 100vh !important; /* Forza altezza piena per centrare verticalmente */
}

/* 2. LA "SCATOLA" RIGIDA (.oc-preview) */
/* Questa è l'area che hai aggiunto nell'editor. Le diamo dimensioni fisse. */
.oc-preview {
    /* DIMENSIONI FISSE RICHIESTE */
    width: 350px !important;
    height: 500px !important;
    
    /* Reset per evitare che i padding dell'editor rompano le dimensioni */
    padding: 0 !important;
    margin: 0 !important;
    
    position: relative !important; /* Diventa il riferimento per i figli */
    overflow: hidden !important;
    border-radius: 4px;
    
    /* Impedisce che venga schiacciata su schermi strani */
    flex-shrink: 0 !important;
}

/* 3. I LIVELLI INTERNI (Devono riempire la scatola) */
/* .preview-layer = JS | .gb-block-image = La tua foto statica */
.oc-preview .preview-layer,
.oc-preview .gb-block-image,
.oc-preview figure {
    position: absolute !important;
    inset: 0 !important; /* Si spalma su tutto lo spazio della scatola */
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    pointer-events: none;
}

/* 4. ORDINE DI VISUALIZZAZIONE (Z-INDEX) */

/* Foto Statica (Base) -> Sotto */
.oc-preview .gb-block-image,
.oc-preview figure {
    z-index: 1 !important;
    opacity: 1 !important; /* Sempre visibile */
}

/* Foto Dinamiche (Hover) -> Sopra */
.oc-preview .preview-layer {
    z-index: 10 !important;
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    /* L'opacità è gestita dal JS (0 -> 1) */
}

/* 5. FORZATURA IMMAGINE WP */
/* Costringe l'immagine <img> dentro il blocco WP a riempire lo spazio */
.oc-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

/* 6. RESPONSIVE (Mobile) */
/* Su schermi piccoli, 410px potrebbe sbordare. Rimpiccioliamo mantenendo la proporzione. */
@media (max-width: 768px) {
    .oc-preview {
        width: 80vw !important; /* 80% della larghezza schermo */
        height: auto !important;
        aspect-ratio: 410/585; /* Mantiene la forma rettangolare originale */
    }
}

/* ==========================================================================
   Accordion Sottomenu (CSS-driven)
   ========================================================================== */
#oc-menu .gb-submenu-toggle-icon { display: none !important; }

#oc-menu .gb-menu li,
#oc-menu .sub-menu {
	position: static !important;
}
#oc-menu .sub-menu {
	transform: none !important;
	width: auto !important;
	display: flex !important;
	flex-wrap: wrap;
	gap: 10px 2px;
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition: max-height .35s ease, opacity .3s ease;
}
#oc-menu li.menu-item-has-children.is-open > .sub-menu {
	max-height: 600px;
	opacity: 1;
}
#oc-menu .sub-menu a {
	text-decoration: none;
	display: inline-block;
	font-size: 0.9rem;
	font-family: var(--font-medium);
	letter-spacing: 1.6px;
	opacity: 1 !important;
	transition: opacity .2s ease;
	color: var(--base) !important;
	margin-right: 1.6rem;
	margin-top: 1em;
}
.menu-gallery.dim-others .sub-menu a {
	opacity: 1 !important;
}
#oc-menu .sub-menu a:hover,
#oc-menu .sub-menu a:focus {
	opacity: .75 !important;
}

#oc-menu .menu-sotto {
	margin-bottom: 2rem;
}

.sub-menu > .gb-menu-item + .gb-menu-item::before {
  content: "/";
	color: var(--base) !important;
}

.sub-menu > .gb-menu-item {
  display: inline-flex;
  align-items: center;
}



/* ==========================================================================
   Hero Section
   ========================================================================== */

.hero-section {
	min-height: 100vh; /* Fallback per browser vecchi */
	min-height: 100svh; /* Small Viewport Height: ignora la barra degli indirizzi che scompare */
	position: relative;
	display: flex;
	align-items: center;
	justify-content: center;
	align-items: flex-end;
	justify-content: flex-start;
	overflow: hidden;
	color: var(--colore-bianco);
}

.hero-video-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	z-index: -2;
	overflow: hidden; 
}

/* Applica l'overlay scuro SIA al video CHE all'immagine */
.hero-video-wrapper::after,
.hero-image-wrapper::after {
	content: '';
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom, 
		rgba(0, 0, 0, 0.65) 0%, 
		rgba(0, 0, 0, 0.01) 25%, 
		rgba(0, 0, 0, 0.2) 100% 
	);
	z-index: 1;
}

.hero-video {
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	min-height: 100%;
	width: 100%;	
	height: 100%;
	object-fit: cover;
	max-width: none;
}

.hero-headline {
	font-family: 'L', serif;
	font-size: 74px;
	color:  var(--colore-bianco);
	line-height: 1.2;
	font-weight: 300;
	margin-left: 7.7%;
	margin-bottom: 8rem;
	text-align: left;
	width: 40rem;
}

#scroll-down-icon {
	position: absolute;
	bottom: 2rem; 
	left: 50%; 
	animation: bounce 2s infinite;
}

@keyframes bounce {
	0%, 20%, 50%, 80%, 100% {
		transform: translate(-50%, 0);
	}
	40% {
		transform: translate(-50%, -15px);
	}
	60% {
		transform: translate(-50%, -5px);
	}
}

.hero-image-wrapper {
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	height: 100%;
	background-size: cover;
	background-position: center;
	z-index: -2;
    background-image: var(--hero-background-image);
	transform-origin: center center;
    will-change: transform; 
}

.burger-menu .container span {
	color: #ECE9E4FF;
}

/* ==========================================================================
   SCELTA FONT (Corretti i pesi 800 -> 500)
   ========================================================================== */
.burger-menu em {
	transition: all 300ms ease;
	font-family: var(--font-medium);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 2.2px;
	color: var(--colore-bianco);
	font-style: normal;
}

.top-left a, #oc-menu .menu-sotto .gb-menu-link {
	font-family: var(--font-medium);
	font-size: 0.9rem;
	text-transform: uppercase;
	letter-spacing: 1.6px;
	text-decoration: none;
	margin-right: 2rem;
	color: var(--base);
}

/* ==========================================================================
   COLORI
   ========================================================================== */
.top-left a:hover, .burger-menu em:hover, .burger-menu .container:hover, #oc-menu .menu-sotto .gb-menu-link:hover {
	opacity: 0.7;
	transition: all 300ms ease;
}

.testo-intro {
	color: var(--colore-testo);
}

/* ==========================================================================
   Stati Globali e Responsive
   ========================================================================== */

.gb-navigation--mobile {
    display: none !important;
}

body.oc-open .site-topbar {
	background: transparent !important;
}

@media (max-width: 768px) {
	.top-left { gap: 12px; }
	.site-topbar { padding: 10px 16px; }
	#oc-menu .gb-grid-wrapper { display: block; }
	#oc-menu .gb-grid-column { width: 100% !important; }
	.oc-preview { display: none; }
	.hero-headline { font-size: 2em; width: auto; margin-left: auto; margin-right: auto; text-align: center; padding: 0 50px; }
	.burger-menu em { display: none;}
}

@media (max-width: 650px) {
    .menu-gallery a {
        font-size: 1.8rem;
    }
}

/* ==========================================================================
   PARALLAX VIEWPORT (Setup per GSAP)
   ========================================================================== */

.parallax-viewport {
    position: relative;
    overflow: hidden; /* Nasconde l'immagine che esce dai bordi */
    z-index: 1;
    /* Altezza minima di sicurezza se il container è vuoto */
    min-height: 400px; 
}

.parallax-scrolling-image {
    display: block;
    width: 100%;
    
    /* Manteniamo il tuo 120% e il posizionamento */
    height: 120% !important; 
    object-fit: cover;
    position: absolute; 
    top: -10%; 
    left: 0;
    
    /* === MODIFICHE PER FLUIDITÀ === */
    will-change: transform;
    transition: none; 
    
    /* 1. Forza l'uso della GPU (Graphics Processing Unit) */
    transform: translate3d(0, 0, 0); 
    
    /* 2. Nasconde il retro per evitare glitch grafici su Safari */
    -webkit-backface-visibility: hidden;
    backface-visibility: hidden;
    
    /* 3. Migliora la nitidezza durante la trasformazione */
    -webkit-perspective: 1000;
    perspective: 1000;
}

.wp-block-video, .wp-block-video video {
	width: 100%;
	height: 100%;
	object-fit: cover; 
	object-position: center center;
	margin: 0;
}

.figure-video {
	position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 1; 
  margin: 0;
}

@media (max-width: 768px) { /* Mobile */
.parallax-viewport {
    position: relative;
    overflow: hidden; /* Nasconde l'immagine che esce dai bordi */
    z-index: 1;
    min-height: 600px; 
	}
}

/* ==========================================================================
   Home
   ========================================================================== */

.video-text-overlay {
  transform: translate(-50%, -50%);
  z-index: 10; 
}


/* Container for the zoom effect */
.image-zoom-container {
  overflow: hidden; 
  width: 305px; 
  height: 350px; 
  position: relative; 
}

.image-zoom-container img { 
  display: block; 
  width: 100%; 
  height: 100%; 
  object-fit: cover;
  object-position: center center; 
  transition: transform 0.6s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  will-change: transform; 
}

.image-zoom-container:hover img { 
  transform: scale(1.10); 
}

/* === Responsive (Esempio) === */
@media (max-width: 1024px) { /* Tablet */
  .image-zoom-container {
   /* Regole Tablet */
  }
}

@media (max-width: 768px) { /* Mobile */
  .image-zoom-container {
     width: 100%; 
     height: 280px; 
  }
	
	.m-inquiry {
		display: none;
	}
}



.learn-more {
  position: relative; 
  display: inline-block;
  text-decoration: none; 
  padding-bottom: 8px; 
}

/* Stile base della linea sotto il pulsante */
.learn-more::after {
  content: "";            
  position: absolute;     
  bottom: 0;              
  left: 0;                
  width: 100%;            
  height: 1px;            
  background: currentColor; 
  
  transform: scaleX(1);   
  transform-origin: right; 
  
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}

/* Stato hover: la linea scompare da destra */
.learn-more:hover::after {
  transform: scaleX(0);    
  transform-origin: left;  
  transition: transform 0.4s cubic-bezier(0.165, 0.84, 0.44, 1);
}
a.learn-more:hover{
	color: var(--contrast-2);
}


/* ==========================================================================
   PAGINE ROOMS
   ========================================================================== */

.lista-puntini {
	margin: 0 0 1.5em 1em;
}

.n2-bullet.n2-active {
	background: white !important;
}

h3 a {
	text-decoration: none !important;
	color: var(--contrast-2) !important;
}

/* ==========================================================================
   Componente Immagine con Zoom (Flessibile)
   ========================================================================== */

.zoom-container-flessibile {
  overflow: hidden; 
  position: relative;
  width: 100%; 
  aspect-ratio: 4 / 3; 
}

.zoom-container-flessibile img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover; 
  object-position: center center;
  transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); 
  will-change: transform; 
}

.zoom-container-flessibile:hover img {
  transform: scale(1.05);
}



/* ==========================================================================
   MARQUEE
   ========================================================================== */

.marquee-container {
  overflow: hidden; 
  width: 100%;
}

.marquee-wrapper {
  display: flex; 
  flex-wrap: nowrap; 
  width: fit-content; 
}

.marquee-logo {
  flex-shrink: 0; 
  margin: 0 40px; 
  max-height: 70px; 
  width: auto;
}

.marquee-logo img {
  display: block;
  max-height: 70px; 
  width: auto;
  object-fit: contain;
}

/* ==========================================================================
   OVERRIDE HEADER PER PAGINE SENZA HERO (Automatico)
   Si attiva quando il body ha la classe .header-dark-mode
   ========================================================================== */

/* 1. Forza l'header a rimanere FISSO e visibile */
body.header-dark-mode .site-topbar {
    position: fixed !important; /* Fondamentale: segue lo scroll */
    top: 0;
    background-color: var(--base-2); /* Colore di sfondo della pagina (ocra/beige) */
}

/* 2. Spinge giù il contenuto della pagina per non finire sotto l'header */
body.header-dark-mode {
    padding-top: 120px; 
}

/* 3. Forza testi e icone scuri (come prima) */
body.header-dark-mode .site-topbar .top-left a,
body.header-dark-mode .burger-menu em {
    color: var(--colore-testo) !important;
}

/* 4. Forza le linee del burger menu scure (come prima) */
body.header-dark-mode .burger-menu .container span {
    background-color: var(--colore-testo) !important;
}

/* 5. Scambia il Logo (Mostra quello scuro) (come prima) */
body.header-dark-mode .site-logo .logo-light { display: none !important; }
body.header-dark-mode .site-logo .logo-dark { display: block !important; }

/* ==========================================================================
   FOOTER
   ========================================================================== */

.link-footer-mini a {
	text-decoration: none;
	color: #9baba7;
}

.link-footer-mini a:hover {
	text-decoration: none;
	color: #FFF;
}

.has-text-align-left a {
	text-decoration: none;
}

.logo-footer {
	opacity: 100%;
}

.sister-hotel a {
	color: var(--base) !important;
}



/* ==========================================================================
   STORY-LINE (Versione Aggiornata: Pallino Dinamico + Fade 10%)
   ========================================================================== */

/* 1. STRUTTURA GENERALE */
.timeline-row .gb-grid-wrapper {
    align-items: stretch;
}

.active .timeline-circle {
	right: -36px;
}


/* 2. LE LINEE TRATTEGGIATE (I Binari Fissi su entrambi i lati) */

.timeline-col-left {
    position: relative;
    border-right: 1px solid rgba(84, 94, 90, 0.10);
}



/* 3. L'ANNO (Sticky & Responsive) */
.sticky-year {
    position: -webkit-sticky; 
    position: sticky;
    top: 50vh; 
    transform: translateY(-50%); 
    
    /* Stile Inattivo Base */
    opacity: 0.3; 
    filter: grayscale(100%); 
    transition: all 0.5s ease;
    
    /* Importante: Definisce il colore base del testo (e quindi del pallino) */
    color: var(--colore-titoli); 
    
    /* Default: Anno a Sinistra (quindi margine a destra verso la linea) */
    margin-right: 40px; 
    margin-left: 0;
    text-align: right; 
}

/* --- LOGICA ZIG-ZAG: SE L'ANNO È A DESTRA --- */
.timeline-col-right .sticky-year {
    margin-right: 0;
    margin-left: 40px; 
    text-align: left;  
}

.sticky-year.active {
    opacity: 1; 
    filter: grayscale(0%); 
    transform: translateY(-50%) scale(1.1); 
    /* Quando attivo, usa il colore d'accento (opzionale, se vuoi che cambi colore) */
    /* color: var(--contrast); */ 
}


/* 4. IL CERCHIO (Colore Dinamico) */
.timeline-circle {
    width: 14px;
    height: 14px;
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    
    /* === MODIFICA RICHIESTA: COLORE UGUALE AL FONT === */
    /* currentColor prende il colore del testo del genitore (.sticky-year) */
    background-color: var(--contrast) !important; 
    border: 2px solid var(--contrast) !important;
    
    border-radius: 50%;
    z-index: 5;
    transition: all 0.5s ease;

    /* Default: Cerchio per Anno a Sinistra */
    right: -47px; 
    left: auto;
}

@media (max-width: 768px) {
    .timeline-circle {
		display: none;
	}
	.timeline-col-left {
		border: none;
	}
}

/* --- LOGICA ZIG-ZAG: CERCHIO SE L'ANNO È A DESTRA --- */
.timeline-col-right .sticky-year .timeline-circle {
    right: auto;
    left: -47px; 
}

.sticky-year.active .timeline-circle {
    /* Aggiungiamo solo l'ombra quando è attivo */
    box-shadow: 0 0 0 4px var(--base-2);
}


/* 5. IL CONTENUTO (Testo/Foto) */

/* Classe generica per il contenuto animato */
.timeline-content {
    /* === MODIFICA RICHIESTA: PARTENZA DAL 10% === */
    opacity: 0.1; /* Invece di 0 */
    
    transform: translateY(20px); 
    transition: all 0.6s ease-out; 
}

/* Quando si attiva, diventa visibile al 100% */
.timeline-content.active {
    opacity: 1;
    transform: translateY(0);
}


/* ==========================================================================
   COUPON FRAME
   ========================================================================== */

.couponframe {
    --r: 50px;
    --b: 1px;
    --bg-color: transparent;
    --c-tb: #104420;
    --c-lr: #104420;
    --c-corner: #104420;
    --d-r: 4px;
    --d-c: #104420;

    position: relative;
    box-sizing: border-box;

    background:
        /* 1. I 4 Punti */
        radial-gradient(circle at top left,     var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) top left,
        radial-gradient(circle at top right,    var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) top right,
        radial-gradient(circle at bottom left,  var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) bottom left,
        radial-gradient(circle at bottom right, var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) bottom right,

        /* 2. I 4 Angoli scavati gialli */
        radial-gradient(circle at top left,     transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) top left,
        radial-gradient(circle at top right,    transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) top right,
        radial-gradient(circle at bottom left,  transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) bottom left,
        radial-gradient(circle at bottom right, transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) bottom right,

        /* 3. Le Linee Rosse (Sopra e Sotto) */
        linear-gradient(to right, var(--c-tb), var(--c-tb)) top center,
        linear-gradient(to right, var(--c-tb), var(--c-tb)) bottom center,

        /* 4. Le Linee Blu (Sinistra e Destra) */
        linear-gradient(to bottom, var(--c-lr), var(--c-lr)) center left,
        linear-gradient(to bottom, var(--c-lr), var(--c-lr)) center right,

        /* 5. Riempimento centrale (Sfondo base) */
        linear-gradient(var(--bg-color), var(--bg-color)) center center;

    background-size:
        var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), /* Sizing per i PUNTI */
        var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), /* Sizing per gli ANGOLI */
        calc(100% - 2 * var(--r)) var(--b),  /* Linea rossa sopra */
        calc(100% - 2 * var(--r)) var(--b),  /* Linea rossa sotto */
        var(--b) calc(100% - 2 * var(--r)),  /* Linea blu sinistra */
        var(--b) calc(100% - 2 * var(--r)),  /* Linea blu destra */
        100% 100%; /* Sfondo centrale */

    background-repeat: no-repeat;
}

.couponframe-mini {
    --r: 20px;
    --b: 1px;
    --bg-color: transparent;
    --c-tb: #104420;
    --c-lr: #104420;
    --c-corner: #104420;
    --d-r: 4px;
    --d-c: #104420;

    position: relative;
    box-sizing: border-box;

    background:
        radial-gradient(circle at top left,     var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) top left,
        radial-gradient(circle at top right,    var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) top right,
        radial-gradient(circle at bottom left,  var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) bottom left,
        radial-gradient(circle at bottom right, var(--d-c) var(--d-r), transparent calc(var(--d-r) + 0.5px)) bottom right,
        radial-gradient(circle at top left,     transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) top left,
        radial-gradient(circle at top right,    transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) top right,
        radial-gradient(circle at bottom left,  transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) bottom left,
        radial-gradient(circle at bottom right, transparent calc(var(--r) - var(--b)), var(--c-corner) calc(var(--r) - var(--b)), var(--c-corner) var(--r), var(--bg-color) var(--r)) bottom right,
        linear-gradient(to right, var(--c-tb), var(--c-tb)) top center,
        linear-gradient(to right, var(--c-tb), var(--c-tb)) bottom center,
        linear-gradient(to bottom, var(--c-lr), var(--c-lr)) center left,
        linear-gradient(to bottom, var(--c-lr), var(--c-lr)) center right,
        linear-gradient(var(--bg-color), var(--bg-color)) center center;

    background-size:
        var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), var(--r) var(--r),
        var(--r) var(--r), var(--r) var(--r), var(--r) var(--r), var(--r) var(--r),
        calc(100% - 2 * var(--r)) var(--b), 
        calc(100% - 2 * var(--r)) var(--b), 
        var(--b) calc(100% - 2 * var(--r)), 
        var(--b) calc(100% - 2 * var(--r)), 
        100% 100%;

    background-repeat: no-repeat;
}


/* === LAYOUT MASONRY (Pinterest Style) per JOURNAL === */

/* 1. Il Contenitore: Definisce colonne e linee */
.journal-masonry {
    display: block !important; /* Disabilita la griglia standard di GB */
    
    /* Configurazione Desktop (4 Colonne) */
    column-count: 4;
    column-gap: 40px; /* Spazio tra le colonne */
    
    /* LA RIGA VERTICALE AUTOMATICA */
    column-rule: 1px solid var(--colore-testo); 
}

/* 2. I Post Singoli: BLINDATI per non spezzarsi */
.journal-masonry > .gb-query-loop-item,
.journal-masonry .gb-loop-item { 
    
    /* === LE REGOLE MAGICHE ANTI-ROTTURA === */
    -webkit-column-break-inside: avoid; /* Per Chrome/Safari */
    page-break-inside: avoid;           /* Per Firefox */
    break-inside: avoid;                /* Standard moderno */
    
    display: inline-block; /* Tratta l'elemento come un blocco unico inscindibile */
    width: 100%;           /* Occupa tutta la larghezza della colonna */
    
    /* === STILE === */
    margin-bottom: 40px; /* Spazio verticale tra un post e l'altro */
    
    /* Pulisce eventuali bordi o padding vecchi */
    border-right: none !important; 
    padding-right: 0 !important;
    
    overflow: hidden; 
}

/* === RESPONSIVE MASONRY === */

/* Tablet: Passa a 2 Colonne */
@media (max-width: 1024px) {
    .journal-masonry {
        column-count: 2;
        column-gap: 30px;
    }
}

/* Mobile: Passa a 1 Colonna (e rimuove la linea) */
@media (max-width: 768px) {
    .journal-masonry {
        column-count: 1;
        column-rule: none; /* Nessuna linea su mobile */
    }
    .journal-masonry > .gb-query-loop-item {
        margin-bottom: 30px;
    }
}

/* Quando la pagina è in Dark Mode (senza hero) E si sta scrollando (solid) */
body.header-dark-mode.header-solid .site-topbar {
    padding-top: 0 !important;    /* Rimpicciolisci padding */
    padding-bottom: 0 !important; /* Rimpicciolisci padding */
    background-color: var(--base-2); /* Mantieni il colore ocra */
    transition: all 0.3s ease;
}


/* ==========================================================================
   CODICE VECCHIO COMMENTATO (Divisori Verticali)
   (Rimuovilo quando sei sicuro che il Masonry funziona come vuoi)
   ========================================================================== */

/* @media (max-width: 768px) {
    .post-divider {
        border-right: none !important;
        padding-right: 0 !important;
    }
}
@media (min-width: 769px) and (max-width: 1024px) {
    .post-divider:nth-child(2n) {
        border-right: none !important;
    }
}
@media (min-width: 1025px) {
    .post-divider:nth-child(4n) {
        border-right: none !important;
    }
}
*/


/* === LOGO CAMBIA COLORE === */

/* 1. Stile Base del Logo (Versione Scuro/Originale) */
.site-logo img {
    transition: all 1s ease; 
}

/* 2. Quando l'header NON è Solid (quindi è trasparente in cima) */
body:not(.header-solid) .site-logo img {
    /* Questo filtro rende qualsiasi colore BIANCO PURO */
    filter: brightness(0) invert(1); 
}

/* 3. Correzione per la modalità Dark Mode (Pagine senza Hero) */
body.header-dark-mode .site-logo img {
    filter: none !important;
}


/* ==========================================================================
   FIX MOBILE: HEADER DARK MODE + MENU APERTO
   Aumentiamo la specificità per vincere contro la regola .header-dark-mode
   ========================================================================== */

/* 1. Burger Menu (Linee): Forza il bianco anche se la pagina è "dark" */
body.oc-open.header-dark-mode .burger-menu .container span {
    background-color: #ffffff !important;
}

/* 2. Logo: Forza il filtro bianco */
body.oc-open.header-dark-mode .site-logo img {
    filter: brightness(0) invert(1) !important;
    opacity: 1 !important; /* Sicurezza extra */
}

/* 3. Link (se visibili): Forza il bianco */
body.oc-open.header-dark-mode .site-topbar .top-left a {
    color: #ffffff !important;
}


/* ==========================================================================
   FIX MENU OVERLAY: CENTRATO VERTICALE / ALLINEATO SINISTRA
   ========================================================================== */

/* 1. POSIZIONAMENTO VERTICALE (Resta al centro dello schermo) */
#oc-menu .gb-grid-column:first-child {
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important; /* Centro Verticale */
    min-height: 100vh !important;
}

/* Assicuriamo che i contenitori interni non blocchino l'espansione */
#oc-menu .gb-grid-column:first-child > .gb-container,
#oc-menu .gb-grid-column:first-child > .gb-container > .gb-inside-container {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centro Verticale */
}

/* 2. ALLINEAMENTO ORIZZONTALE A SINISTRA */

/* Resetta la lista per usare Flexbox Verticale */
#menu-primary {
    display: flex !important;
    flex-direction: column !important;
    align-items: center!important;
    width: 100% !important;
}

/* Gestione voci di menu */
#menu-primary > li.gb-menu-item {
    width: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
}

/* Stile del Link (Testo + Icona) */
#menu-primary > li > a.gb-menu-link {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;     /* Allineamento verticale icona/testo */
    text-align: center !important;
    width: 100% !important;
}

/* Icona SVG (Freccetta) */
#menu-primary .gb-submenu-toggle-icon {
    margin-left: 15px; /* Più spazio tra testo e freccia */
    margin-right: 0;
    position: relative;
    /* Opzionale: Se vuoi la freccia sempre a destra estrema, de-commenta sotto: */
    /* margin-left: auto; */ 
}

/* Sottomenu a Sinistra */
#oc-menu .sub-menu {
    justify-content: center !important;
    padding-left: 0 !important;
    margin-left: 0 !important;
}

#oc-menu .sub-menu a {
    margin-left: 0 !important;
    margin-right: 1.5rem !important; /* Spazio a destra tra le voci */
}


/* ==========================================================================
   BURGER MENU ANIMATO (Linee Sfalsate + Rolling Text)
   ========================================================================== */

/* --- 1. LE LINEE (Sfalsate -> Allineate) --- */

.burger-menu .container {
    /* Assicurati che il container permetta il posizionamento assoluto interno */
    position: relative; 
    width: 30px;
    height: 20px;
}

.burger-menu .container span {
    display: block;
    position: absolute;
    height: 1px; /* Spessore linea */
    background: var(--colore-bianco); /* Colore di default */
    right: 0; /* Allinea tutte le linee a DESTRA per l'effetto sfalsato elegante */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94); /* Movimento smooth */
}

/* Linea 1 (In alto): Lunga */
.burger-menu .container span:nth-child(1) {
    top: 0;
	left: 50%;
    width: 50%;
}

/* Linea 2 (Centro): Media */
.burger-menu .container span:nth-child(2) {
    top: 9px;
    width: 100%; /* Più corta */
}

/* Linea 3 (Basso): Corta */
.burger-menu .container span:nth-child(3) {
    top: 18px;
    width: 50%; /* Cortissima */
}

/* --- STATO HOVER: Le linee si allungano --- */
.burger-menu:hover .container span {
    width: 100% !important; /* Tutte lunghe uguali */
}

.burger-menu:hover .container span:nth-child(1) {
	left: 0%;
}

/* --- STATO APERTO (X): Formazione Croce Perfetta --- */

/* 1. Regole base per tutte le linee quando aperto */
body.oc-open .burger-menu .container span {
    width: 100% !important;
    left: 0 !important; /* Resetta il left: 50% della prima linea */
    background-color: var(--colore-bianco) !important;
    /* Assicura che la transizione gestisca anche la rotazione */
    transition: all 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

/* 2. La Linea Superiore: Scende al centro e ruota di 45° */
body.oc-open .burger-menu .container span:nth-child(1) {
    top: 9px !important; /* Si sposta esattamente al centro (dove c'è la linea 2) */
    transform: rotate(45deg);
}

/* 3. La Linea Centrale: Sparisce */
body.oc-open .burger-menu .container span:nth-child(2) {
    opacity: 0; /* Diventa invisibile */
    transform: translateX(-20px); /* Effetto uscita verso sinistra (opzionale) */
}

/* 4. La Linea Inferiore: Sale al centro e ruota di -45° */
body.oc-open .burger-menu .container span:nth-child(3) {
    top: 9px !important; /* Si sposta esattamente al centro */
    transform: rotate(-45deg);
}


/* --- 2. IL TESTO "MENU" (Rolling Effect) --- */

.burger-menu em {
    font-family: var(--font-medium);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--colore-bianco);
    font-style: normal;
    
    /* Setup per l'animazione */
    position: relative;
    display: inline-block;
    overflow: hidden; /* Nasconde il testo che esce */
    height: 1.2em;    /* Altezza fissa per contenere il "roll" */
    line-height: 1.2em;
    vertical-align: middle;
}

/* Il testo originale (quello che vedi subito) */
.burger-menu em::before {
    content: attr(data-text); /* Prende "Menu" dall'HTML */
    display: block;
    transition: transform 0.4s cubic-bezier(0.5, 0, 0.1, 1);
    transform: translateY(0); /* Posizione normale */
}

/* Il testo "fantasma" (quello che arriva dal basso) */
.burger-menu em::after {
    content: attr(data-text); /* Prende "Menu" dall'HTML */
    display: block;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    transform: translateY(100%); /* Nascosto sotto */
    transition: transform 0.4s cubic-bezier(0.5, 0, 0.1, 1);
    color: var(--colore-bianco); /* Assicurati che abbia il colore giusto */
}

/* --- STATO HOVER TESTO --- */
.burger-menu:hover em::before {
    transform: translateY(-100%); /* Il testo originale scappa in alto */
}

.burger-menu:hover em::after {
    transform: translateY(0); /* Il testo fantasma sale al centro */
}

/* --- FIX COLORI SU SFONDO CHIARO (Header Solid / Dark Mode) --- */
/* Quando l'header è solid o dark, i colori devono essere scuri */

body.header-solid .burger-menu .container span,
body.header-dark-mode .burger-menu .container span {
    background-color: var(--colore-testo);
}

body.header-solid ul.my-lang-switcher li a,
body.header-dark-mode ul.my-lang-switcher li a, body.header-solid ul.my-lang-switcher,
body.header-dark-mode ul.my-lang-switcher {
    color: var(--colore-testo);
	border-color: var(--colore-testo);
}

body.header-solid .burger-menu em,
body.header-dark-mode .burger-menu em {
    color: var(--colore-testo);
}
body.header-solid .burger-menu em::after,
body.header-dark-mode .burger-menu em::after {
    color: var(--colore-testo); /* Anche il testo che sale deve cambiare colore */
}

/* Ma quando il menu è APERTO, torna tutto bianco */
body.oc-open .burger-menu em,
body.oc-open .burger-menu em::after {
	width: 100%;
    color: #ffffff !important;
}


/* ==========================================================================
   OFF-CANVAS PANEL & MENU (Layout Fisso e Centrato)
   ========================================================================== */

/* 1. PANNELLO PRINCIPALE (Sfondo) */
.oc-panel {
    position: fixed;
    inset: 0;
    z-index: 60;
    width: 100vw;
    height: 100vh;
    display: block; 
    /* Colore di sfondo */
    background-color: var(--contrast-3) !important; 
}

/* 2. LA SCATOLA MADRE (.oc-grid) */
/* Questa è la griglia che tiene tutto al centro */
.oc-grid {
    width: 100%;
    height: 100vh; /* Occupa tutta l'altezza */
    display: flex !important;
    align-items: center !important; /* CENTRO VERTICALE */
    justify-content: center !important; /* CENTRO ORIZZONTALE */
    max-width: 1400px; /* Limite massimo per schermi giganti */
    margin: 0 auto;
    padding: 0 40px; /* Margine di sicurezza laterale */
    box-sizing: border-box;
}

/* 3. WRAPPER GENERATEBLOCKS (La riga orizzontale) */
#oc-menu .gb-grid-wrapper {
    display: flex !important;
    flex-direction: row !important; /* Forza la riga orizzontale */
    flex-wrap: nowrap !important;   /* VIETA di andare a capo */
    align-items: center !important; 
    justify-content: center !important;
    
    /* DISTANZA TRA MENU E FOTO */
    gap: 80px !important; 
    
    width: 100% !important;
    height: auto !important;
}

/* 4. COLONNA MENU (Sinistra) - FLESSIBILE */
#oc-menu .gb-grid-column:first-child {
    flex: 1 !important; /* Prendi tutto lo spazio disponibile */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
    width: auto !important; /* Resetta larghezze fisse */
}

/* 5. COLONNA FOTO (Destra) - FISSA */
#oc-menu .gb-grid-column:last-child {
    /* Blocca la larghezza della colonna esattamente alla dimensione della foto */
    flex: 0 0 410px !important; 
    width: 410px !important;
    
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* ==========================================================================
   MENU STYLES (Centrato, Piccolo, Fermo)
   ========================================================================== */

/* Invece di width: 50% */
.sx-menu {
    width: auto !important; /* Resetta la larghezza fissa */
    flex: 0.7 !important;     /* Occupa tutto lo spazio rimanente */
    display: flex !important;
    flex-direction: column !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Reset contenitori */
.menu-gallery,
.menu-gallery ul, 
#menu-primary {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100%;
}

/* Singola voce di menu */
#menu-primary > li.gb-menu-item {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
    width: 100%;
    margin-bottom: 0 !important;
}

/* STILE DEL LINK */
#oc-menu .menu-gallery a {
    color: var(--accent) !important;
    font-family: var(--font-menu);
    
    /* Font più piccolo ed elegante */
	font-size: 40px !important; 
    /*font-size: clamp(22px, 2vw, 32px) !important;*/ 
    line-height: 1.2 !important;
    padding: 0.1em 0 !important;
    text-align: center !important;
    
    display: flex !important;
    align-items: center;
    justify-content: center;
    position: relative;
    text-decoration: none;
    
    /* NIENTE MOVIMENTO, SOLO OPACITÀ */
    transition: opacity 0.3s ease !important;
    transform: none !important;
    opacity: 1;
}

/* Freccia Sottomenu (Posizionata a destra assoluta) */
#menu-primary .gb-submenu-toggle-icon {
    position: absolute;
    right: -30px; /* Spostata a destra del testo */
    top: 50%;
    transform: translateY(-50%);
    margin: 0 !important;
    font-size: 0.5em !important;
    opacity: 0.5;
}

/* LOGICA DIMMING (Solo Opacità) */
#oc-menu .menu-gallery.dim-others a {
    opacity: 0.3 !important; /* Più scuro per contrasto */
    transform: none !important;
}

#oc-menu .menu-gallery.dim-others a.is-hover {
    opacity: 1 !important;
    transform: none !important;
}

/* ==========================================================================
   SOTTOMENU (In Linea + Fix Spaziatura)
   ========================================================================== */

#oc-menu .sub-menu {
    display: flex !important;
    flex-direction: row !important; /* <--- Mette le voci UNA ACCANTO ALL'ALTRA */
    flex-wrap: wrap !important;     /* Va a capo se non c'è spazio */
    justify-content: center !important; /* Centra il blocco orizzontalmente */
    align-items: center !important;
    
    width: 100% !important;
    padding: 0 !important;
    
    /* FIX SPAZIO: Margini a 0 quando è chiuso per evitare il buco vuoto */
    margin: 0 !important; 
    
    /* Animazione */
    max-height: 0;
    opacity: 0;
    overflow: hidden;
    /* Aggiungiamo margin alla transizione per fluidità */
    transition: max-height .4s ease, opacity .4s ease, margin .4s ease;
}

/* Quando il menu si APRE */
#oc-menu li.menu-item-has-children.is-open > .sub-menu {
    max-height: 200px; /* Abbastanza per contenerli */
    opacity: 1;
    /* I margini appaiono solo ora che è aperto */
    margin-top: 15px !important;
    margin-bottom: 20px !important;
}

/* Stile Voci Sottomenu */
#oc-menu .sub-menu a {
    /* Font leggermente più piccolo per stare bene in riga */
    font-size: 24px !important; 
    letter-spacing: 0.05em;
    
    /* Spaziatura orizzontale tra le voci (invece che verticale) */
    margin: 0 15px !important; 
    padding: 0 !important;
    
    color: var(--base) !important;
    white-space: nowrap; /* Evita che una singola voce vada a capo a metà */
}

/* ==========================================================================
   PREVIEW IMMAGINI (Fissa 350x500)
   ========================================================================== */

.oc-preview {
    width: 350px !important;
    height: 500px !important;
    position: relative !important;
    overflow: hidden !important;
    border-radius: 4px;
    
    /* Impedisce che collassi o si restringa */
    flex-shrink: 0 !important;
    flex-grow: 0 !important;
    
    display: block !important;
    padding: 0 !important;
    margin: 3.2em 0 0 0 !important;
}

/* Posizionamento Immagini */
.oc-preview .preview-layer,
.oc-preview .gb-block-image,
.oc-preview figure {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    pointer-events: none;
}

.oc-preview .gb-block-image, .oc-preview figure { z-index: 1 !important; opacity: 1 !important; }
.oc-preview .preview-layer { z-index: 10 !important; background-size: cover; background-position: center; }

.oc-preview img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block !important;
}

.oc-preview::after {
    content: ""; position: absolute; inset: 0;
    pointer-events: none; z-index: 20;
}

/* ==========================================================================
   RESPONSIVE (Tablet e Mobile) - Versione Full Width
   ========================================================================== */
@media (max-width: 1024px) {
	
	.sub-menu > .gb-menu-item + .gb-menu-item::before {
		padding-right: 8px;
	}
	
	
	.sx-menu {
		flex: auto !important;
	}
    
    /* 1. CONTENITORE CENTRALE (Full Width, No Padding Laterale) */
    .oc-grid {
        min-height: 100vh;
        height: auto !important;
        
        display: flex !important;
        align-items: center !important; 
        justify-content: center !important;
        
        /* LARGHEZZA PIENA + NESSUN MARGINE/PADDING LATERALE */
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 !important;
        
        /* 20px sopra e sotto per sicurezza, 0 a destra e sinistra */
        padding: 20px 0 !important; 
    }

    /* 2. STRUTTURA A COLONNA (Foto sopra, Menu sotto) */
    #oc-menu .gb-grid-wrapper {
        flex-direction: column-reverse !important; 
        gap: 30px !important;
        padding: 0 !important;
        width: 100% !important;
        margin: 0 !important; /* Sicurezza extra */
    }
    
    #oc-menu .gb-grid-column:first-child,
    #oc-menu .gb-grid-column:last-child {
        width: 100% !important;
        flex: 0 0 auto !important;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 0 !important; /* Rimuove padding interni delle colonne */
    }

    /* 3. MENU PRINCIPALE MOBILE */
    #oc-menu .menu-gallery a {
        font-size: 2em !important; 
        line-height: 1.4 !important;
        padding: 4px 0 !important;
        opacity: 1 !important; 
    }

    /* 4. SOTTOMENU VERTICALE */
    #oc-menu .sub-menu {
        flex-direction: row !important;
        gap: 8px !important;
        margin-bottom: 0 !important; 
        margin-top: 0 !important;
        width: 100% !important; /* Occupa tutta la larghezza */
    }

    /* Quando il sottomenu si APRE */
    #oc-menu li.menu-item-has-children.is-open > .sub-menu {
        margin-bottom: 20px !important;
        margin-top: 10px !important;
    }

    #oc-menu .sub-menu a {
        font-size: 1.6em !important;
        margin: 0 !important;
        line-height: 1.5 !important;
        display: block !important;
        opacity: 1 !important;
    }
    
    /* Icona freccia */
    #menu-primary .gb-submenu-toggle-icon {
        right: -20px;
        font-size: 0.4em !important;
    }

    /* 5. DISABILITA EFFETTO DIMMER */
    #oc-menu .menu-gallery.dim-others a,
    #oc-menu .menu-gallery.dim-others a:not(.is-hover),
    #oc-menu .menu-gallery.dim-others .sub-menu a {
        opacity: 1 !important;
        transform: none !important;
    }

    /* 6. IMMAGINE MOBILE */
    .oc-preview {
        margin: 0 0 30px 0 !important;
        width: 60vw !important; 
        max-width: 250px !important;
        height: auto !important;
        aspect-ratio: 410/585;
    }
    
}

/* ==========================================================================
   MOBILE ACTIONS (Lingua, Telefono, Email)
   ========================================================================== */

/* 1. NASCONDI SU DESKTOP (Default) */
.mobile-actions {
    display: none !important;
}

/* 2. MOSTRA E STILIZZA SU MOBILE */
@media (max-width: 1024px) {
    
    .mobile-actions {
        display: block !important;
        width: 100% !important;
    }

    /* Contenitore dei bottoni GenerateBlocks */
    .mobile-actions .gb-button-wrapper {
        display: flex !important;
        justify-content: center !important; /* Centrati orizzontalmente */
        gap: 30px !important; /* Distanza tra le icone */
        flex-wrap: nowrap !important;
    }

    /* Stile del singolo bottone */
    .mobile-actions .gb-button {
        background: transparent !important;
        color: var(--base) !important; /* Colore chiaro */
        padding: 0 !important;
        margin: 0 !important;
        font-family: var(--font-medium);
        font-size: 14px !important;
        text-transform: uppercase;
        letter-spacing: 1px;
        
        display: flex !important;
        flex-direction: column !important; /* Icona sopra, testo sotto */
        align-items: center !important;
        gap: 8px !important;
    }

    /* Stile dell'icona */
    .mobile-actions .gb-button .gb-icon {
        font-size: 20px !important; /* Grandezza icona */
        padding: 0 !important;
        margin: 0 !important;
        opacity: 0.8;
    }
    
    /* Hover/Focus */
    .mobile-actions .gb-button:hover {
        opacity: 0.7;
    }
}


/* =========================================
   SECTION: POLYLANG DROPDOWN SWITCHER (Desktop)
   ========================================= */

@media (max-width: 768px) { /* Mobile */
.lang-item {
    color: var(--base) !important; /* Colore chiaro */
	}
}


ul.my-lang-switcher {
    list-style: none;
    margin: 0 1.2em 0 0;
    padding: 0 1.2em 0 0;
    
    /* STRUTTURA */
    display: flex;
    flex-direction: column;
    
    /* RIMUOVI row-gap: crea il "salto" nel vuoto */
    /* row-gap: 15px; */  
    
    position: relative;
    z-index: 100;
    
    height: 21px;   
    overflow: visible;
	border-right: 1px solid var(--colore-bianco);
}

/* Applichiamo lo spazio usando il padding sul contenitore della voce (li).
   In questo modo lo spazio è "parte" del menu e il mouse non perde il contatto. */
ul.my-lang-switcher li {
    text-align: left;
    background: transparent;
    transition: all 0.3s ease;
    
    /* AGGIUNGI QUESTO: Crea lo spazio "sicuro" sotto ogni voce */
    padding-bottom: 15px; 
}

/* Rimuovi il padding dall'ultimo elemento per pulizia (opzionale) */
ul.my-lang-switcher li:last-child {
    padding-bottom: 0;
}

/* STILE GENERALE VOCI */
ul.my-lang-switcher li {
    text-align: left;       /* O 'center' o 'right' a seconda del gusto */
    background: transparent; /* Sfondo trasparente di default */
    transition: all 0.3s ease;
}

/* STILE LINK */
ul.my-lang-switcher li a {
    text-decoration: none;
    font-family: var(--font-medium);
    font-weight: 800;
    font-size: 0.9rem;
    text-transform: uppercase;
    letter-spacing: 2.2px;
    color: var(--colore-bianco);
    font-style: normal;
    display: block;
}

/* --- LOGICA "CURRENT LANG" (Sempre visibile) --- */
ul.my-lang-switcher li.current-lang {
    order: -1;              /* TRUCCO: Forza la lingua attiva sempre in cima alla lista */
    opacity: 1;
    pointer-events: auto;
}

/* --- LOGICA "ALTRE LINGUE" (Nascoste di default) --- */
ul.my-lang-switcher li:not(.current-lang) {
    opacity: 0;
    visibility: hidden;
    /* Prima era -10px, portalo a -20px o -15px per compensare il gap */
    transform: translateY(-20px); 
    transition: all 0.3s ease;
    position: relative;
}

/* --- EFFETTO HOVER (Apertura) --- */
ul.my-lang-switcher:hover {
    /* Opzionale: aggiungi sfondo bianco se vuoi che il dropdown sia leggibile sopra foto scure */
    /* background: rgba(255, 255, 255, 0.9); */ 
}

ul.my-lang-switcher:hover li:not(.current-lang) {
    opacity: 0.7;           /* Appaiono leggermente trasparenti */
    visibility: visible;
    transform: translateY(0); /* Scendono alla posizione naturale */
}

/* Hover sulla singola voce non attiva */
ul.my-lang-switcher li:not(.current-lang):hover {
    opacity: 1;             /* Piena opacità quando ci passi sopra */
}

/* =========================================
   SECTION: MOBILE LANGUAGE SWITCHER (Reset)
   ========================================= */

.mobile-lang-container ul.my-lang-switcher {
    height: auto;
    flex-direction: row; 
    
    /* Su mobile usiamo il gap perché è statico (niente hover), è più comodo */
    gap: 20px; 
    
    justify-content: flex-start;
}

/* Resetta il padding che abbiamo messo per il desktop */
.mobile-lang-container ul.my-lang-switcher li {
    padding-bottom: 0 !important; /* Importante per sovrascrivere il desktop */
    
    opacity: 1;
    visibility: visible;
    transform: none;
    order: 0;
}

ul.my-lang-switcher li.current-lang {
    padding-bottom: 15px;
}

@media (max-width: 1024px) {
	.mobile-lang-container ul.my-lang-switcher {
		justify-content: center;
	}
	ul.my-lang-switcher {
		border: none;
		padding: 0;
	}
}

/* ==========================================================================
   CUSTOM LIGHTBOX (Floor Plan)
   ========================================================================== */

.fp-modal {
    position: fixed;
    inset: 0; /* Occupa tutto lo schermo */
    z-index: 9999; /* Sopra a tutto (anche al menu che è 60) */
    background-color: #EAF2EE; /* Il tuo verde scuro con trasparenza */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Stato Iniziale: Nascosto */
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.4s ease, visibility 0.4s ease;
    backdrop-filter: blur(5px); /* Effetto sfocato elegante */
}

/* Stato Visibile (aggiunto da JS) */
.fp-modal.is-visible {
    opacity: 1;
    visibility: visible;
}

/* Contenitore Immagine */
.fp-modal-content {
    position: relative;
    max-width: 90vw;
    max-height: 90vh;
    box-shadow: 0 20px 50px rgba(0,0,0,0.5);
    transform: scale(0.95);
    transition: transform 0.4s cubic-bezier(0.25, 0.46, 0.45, 0.94);
}

.fp-modal.is-visible .fp-modal-content {
    transform: scale(1);
}

/* L'immagine stessa */
.fp-modal-content img {
    display: block;
    max-width: 100%;
    max-height: 90vh; /* Non esce mai dallo schermo in altezza */
    object-fit: contain;
    border-radius: 4px;
}

/* Tasto Chiudi (X) */
.fp-close {
    position: absolute;
    top: -40px;
    right: 0;
    color: var(--contrast); /* Il tuo bianco/beige */
    font-size: 40px;
    font-weight: 300;
    cursor: pointer;
    line-height: 1;
    transition: transform 0.3s ease;
}

.fp-close:hover {
    transform: rotate(90deg); /* Piccola animazione hover */
    opacity: 0.8;
}

/* Responsive per mobile */
@media (max-width: 768px) {
    .fp-close {
        top: -40px;
        right: 10px; /* Un po' più interno su mobile */
    }
}


/* ==========================================================================
   FIX CONTAINER LINK PER LIGHTBOX
   Serve quando usi un Container GenerateBlocks come <a> per avvolgere l'immagine
   ========================================================================== */
a.gb-container.open-lightbox {
    text-decoration: none !important; /* Toglie sottolineature */
    display: block !important;        /* Assicura che si comporti come un blocco */
    cursor: pointer;
    line-height: 0; /* Rimuove spazi vuoti sotto l'immagine interna */
}

a.gb-container.open-lightbox:hover {
    opacity: 0.9; /* Opzionale: piccolo effetto hover */
}


/* ==========================================================================
   Frame speciale attorno alla foto
   ========================================================================== */

.art-deco-frame {
	--c-color: #b7bab7;      /* Colore della cornice */
	--s: 35px;          /* Dimensione del box dell'angolo SVG */
	--b: 1px;            /* Spessore della linea (uguale allo stroke SVG) */
            
	position: relative;
	display: inline-block;
	padding: 20px;
}



.art-deco-frame::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* 1. DEFINIZIONE DELLE IMMAGINI */
	background-image: 
	/* A. ANGOLI */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(180 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* TL */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(-90 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* TR */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* BR */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(90 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* BL */

	/* B. LINEE (Gradienti) */
	linear-gradient(var(--c-color), var(--c-color)), /* Top Line */
	linear-gradient(var(--c-color), var(--c-color)), /* Right Line */
	linear-gradient(var(--c-color), var(--c-color)), /* Bottom Line */
	linear-gradient(var(--c-color), var(--c-color)); /* Left Line */

	/* 2. DIMENSIONI (Size) */
	background-size: 
	/* Angoli: fissi a 120px */
	var(--s) var(--s), var(--s) var(--s), var(--s) var(--s), var(--s) var(--s),
                
	/* Linee Orizzontali (Top/Bottom): Lunghezza = 100% - 2 angoli */
	calc(100% - (2 * var(--s))) var(--b),  
	calc(100% - (2 * var(--s))) var(--b), 
                
	/* Linee Verticali (Right/Left): Altezza = 100% - 2 angoli */
	var(--b) calc(100% - (2 * var(--s))), 
	var(--b) calc(100% - (2 * var(--s)));

	/* 3. POSIZIONAMENTO (Position) */
	background-position: 
	/* Angoli */
	top left, top right, bottom right, bottom left,
                
	/* Linee: Centrate sull'asse, posizionate al bordo */
	top 0 center,    /* Top Line */
	bottom 0 center, /* Bottom Line */
	right 0 center,  /* Right Line */
	left 0 center;   /* Left Line */
            
	background-repeat: no-repeat;
}

/* ==========================================================================
   Frame speciale attorno alla foto
   ========================================================================== */

.art-deco-frame-menu {
	--c-color: #b7bab7;      /* Colore della cornice */
	--s: 35px;          /* Dimensione del box dell'angolo SVG */
	--b: 1px;            /* Spessore della linea (uguale allo stroke SVG) */
            
	position: relative;
	padding: 20px;
}



.art-deco-frame-menu::after {
	content: "";
	position: absolute;
	inset: 0;
	pointer-events: none;

	/* 1. DEFINIZIONE DELLE IMMAGINI */
	background-image: 
	/* A. ANGOLI */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(180 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* TL */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(-90 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* TR */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* BR */
	url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='305 280 232 232'%3E%3Cpath transform='rotate(90 421 396)' d='M495.8 470.9h40.4v40.4h-40.4zM306.6 510.9h148.2v-40h41v-41.3h40.1V281.7' fill='none' stroke='black' stroke-miterlimit='10' stroke-width='2'/%3E%3C/svg%3E"), /* BL */

	/* B. LINEE (Gradienti) */
	linear-gradient(var(--c-color), var(--c-color)), /* Top Line */
	linear-gradient(var(--c-color), var(--c-color)), /* Right Line */
	linear-gradient(var(--c-color), var(--c-color)), /* Bottom Line */
	linear-gradient(var(--c-color), var(--c-color)); /* Left Line */

	/* 2. DIMENSIONI (Size) */
	background-size: 
	/* Angoli: fissi a 120px */
	var(--s) var(--s), var(--s) var(--s), var(--s) var(--s), var(--s) var(--s),
                
	/* Linee Orizzontali (Top/Bottom): Lunghezza = 100% - 2 angoli */
	calc(100% - (2 * var(--s))) var(--b),  
	calc(100% - (2 * var(--s))) var(--b), 
                
	/* Linee Verticali (Right/Left): Altezza = 100% - 2 angoli */
	var(--b) calc(100% - (2 * var(--s))), 
	var(--b) calc(100% - (2 * var(--s)));

	/* 3. POSIZIONAMENTO (Position) */
	background-position: 
	/* Angoli */
	top left, top right, bottom right, bottom left,
                
	/* Linee: Centrate sull'asse, posizionate al bordo */
	top 0 center,    /* Top Line */
	bottom 0 center, /* Bottom Line */
	right 0 center,  /* Right Line */
	left 0 center;   /* Left Line */
            
	background-repeat: no-repeat;
}



/* ==========================================================================
   BLOG
   ========================================================================== */

.titolo-journal a {
	text-decoration: none;
	color: var(--colore-titoli);
}

.titolo-journal a:hover {
	text-decoration: none;
	color: var(--contrast);
}

.dynamic-entry-content p a, .cat-links a, h4 a {
	text-decoration: none;
	color: var(--colore-titoli);
}

.dynamic-entry-content p a:hover, .cat-links a:hover {
	text-decoration: none;
	color: var(--contrast);
}

.back-to-journal, .back-to-journal a {
	color: var(--contrast-2) !important;
	font-family: var(--gp-font--larken-light);
	text-decoration: none;
}

.back-to-journal:hover, .back-to-journal a:hover {
	color: var(--contrast) !important;
	font-family: var(--gp-font--larken-light);
	text-decoration: none;
}



/* Aggiunge 'pag.' a tutti i numeri, ma NON ai tasti Next/Prev/Puntini */
.page-numbers:not(.next):not(.prev):not(.dots)::before {
    content: "pag. ";
    margin-right: 2px;
}

/* Opzionale: se i bottoni sono cerchi fissi, 
   potresti dover togliere la larghezza fissa o trasformarli in rettangoli 
   per farci stare il testo */
.page-numbers {
    width: auto !important; /* Si adatta alla larghezza del testo */
    padding-left: 10px;
    padding-right: 10px;
    border-radius: 4px; /* Meglio rettangolare se c'è del testo */
}

a.page-numbers {
    color: var(--contrast2) !important;
	text-decoration: none;
}

a.page-numbers:hover {
    color: var(--contrast) !important;
}

.page-numbers.current {
	color: #9baba7 !important;
}


/* ==========================================================================
   ADDITIVE Newsletter FORM - personalizzazione
   ========================================================================== */

.aa-voucher-widget h3 {
    background-color: #103931;
    padding: 0.5em !important;
    font-family: 'Larken Light' !important;
    font-size: 29px !important;
	color: white !important;
}

.aa-nl-widget button {
	align-items: center;
    color: var(--contrast-2) !important;
    display: inline-flex;
    font-size: 1rem;
    letter-spacing: .06rem !important;
    margin-bottom: 1em;
    margin-top: 1em;
    text-decoration: none;
    text-transform: uppercase;
    border: 1px solid var(--contrast-2) !important;
    border-radius: 8px !important;
    padding: 7px 17px !important;
	background-color: transparent  !important;
	font-family: var(--font-base);
}

.aa-nl-widget button:hover {
	background-color: var(--contrast-2) !important;
	color: var(--base) !important;	
}

.aa-nl-widget input, .aa-nl-widget select {
    background-color: var(--base) !important;
	border: 1px solid #9baba6 !important;
    border-radius: 7px !important;
}

/* ==========================================================================
   FIX CHROME MOBILE: Solo per schermi sotto i 1024px
   ========================================================================== */
@media (max-width: 1024px) {

    /* 1. Sblocchiamo il contenitore padre che il CSS sopra bloccava al centro */
    #oc-menu .gb-grid-column:first-child, 
    .sx-menu {
        display: flex !important;
        flex-direction: column !important;
        /* Cambiamo il 'center' del CSS riga 585 in 'flex-end' */
        justify-content: flex-end !important; 
        /* Usiamo l'altezza dinamica per Chrome Mobile */
        height: 100dvh !important;
        min-height: 100dvh !important;
    }

    /* 2. Sblocchiamo la navigazione e la spingiamo giù */
    /* Il margin-top: auto agisce come una molla che spinge tutto verso il basso */
    .menu-gallery {
        margin-top: auto !important;
        margin-bottom: 12vh !important;
        /* Reset degli allineamenti centrati del CSS riga 615 */
        align-items: flex-start !important; 
    }

    /* 3. Assicuriamoci che gli elementi in basso siano visibili */
    .mobile-actions, 
    .tre-ico-mobile {
        margin-top: 10px !important;
        width: 100% !important;
		margin-bottom: 20px;
    }
	
	ul.my-lang-switcher {
		margin: 0;
	}
}

/* ==========================================================================
   FIX COLORI OVERLAY (Forza Bianco su Scroll)
   ========================================================================== */


/* 2. LANGUAGE SWITCHER: Forza testo bianco */
body.oc-open ul.my-lang-switcher li a {
    color: #ffffff !important;
}

/* 3. BORDO SWITCHER: Forza bordo bianco */
body.oc-open ul.my-lang-switcher {
    border-color: #ffffff !important;
}

/* 4. BURGER MENU: Forza le linee e il testo bianchi */
body.oc-open .burger-menu em {
    color: #ffffff !important;
}
body.oc-open .burger-menu .container span {
    background-color: #ffffff !important;
}


/* ==========================================================================
   COOOKIE COMPLIANZ
   ========================================================================== */

#cmplz-document a, .editor-styles-wrapper .cmplz-unlinked-mode a {
	color: var(--contrast-2);
}

/* ==========================================================================
   FIX HEADER SCURO SU PAGINA 404 E CATEGORIE BLOG
   ========================================================================== */

/* Colora di scuro i link Book, Inquiry, Language Switcher e la scritta Menu */
.error404 .m-book a, .category .m-book a,
.error404 .m-inquiry a, .category .m-inquiry a,
.error404 ul.my-lang-switcher li a, .category ul.my-lang-switcher li a,
.error404 .burger-menu em, .category .burger-menu em {
    color: var(--contrast-3) !important;
}

/* Colora di scuro il bordo del Language Switcher */
.error404 ul.my-lang-switcher, .category ul.my-lang-switcher {
    border-color: var(--contrast-3) !important;
}

/* Colora di scuro le 3 righine del Burger Menu */
.error404 .burger-menu .container span, .category .burger-menu .container span {
    background-color: var(--contrast-3) !important;
}

/* Rende il logo scuro (nero/verde molto scuro) */
.error404 .site-logo img, .category .site-logo img {
    filter: brightness(0) !important; 
}

/* ==========================================================================
   FIX COLORE NUMERI DI TELEFONO SU MOBILE (FOOTER)
   ========================================================================== */

/* 1. Forza il bianco per i link telefonici standard (Android/Browser generici) */
.site-footer a[href^="tel:"] {
    color: #ffffff !important;
}

/* 2. Fix specifico per i rilevatori automatici di Apple (iPhone/iPad) */
.site-footer a[x-apple-data-detectors] {
    color: #ffffff !important;
    text-decoration: none !important;
}



.tre-ico-mobile p a {
	text-decoration: none;
}

.video-crop video  {
        height: 610px !important;
        object-fit: cover !important;
        object-position: center center;
    }

/* Crop del video panoramico solo su mobile */
@media (max-width: 768px) {
	
    .video-crop-mobile video {
        height: 300px !important;
        object-fit: cover !important;
        object-position: center center;
    }
	
	.video-crop video  {
        height: 800px !important;
        object-fit: cover !important;
        object-position: center center;
    }
	
	.video-crop-700 video {
        height: 700px !important;
        object-fit: cover !important;
        object-position: center center;
	}
}