body {
  font-family: 'Libre Baskerville', serif;
}
.font-custom-1 {
 font-family: 'Aboreto', sans-serif;
}
.font-custom-2 {
 font-family: 'Allison', sans-serif;
}

a:not(.btn):hover {
    color: var(--secondary) !important;
}

.btn.btn-outline.btn-light:hover {
    color: var(--secondary) !important;
    border-color: var(--secondary) !important;
}

.intro-container {
  position: relative;
  padding: 10px 0;
}

.main-text {
  position: relative;
  z-index: 2;
}

.filigrana-text {
  position: absolute;
  top: 80px; /* o regola in base al layout */
  left: 0;
  right: 0;
  text-align: center;
  opacity: 0.5 !important;
  z-index: 1;
  pointer-events: none; /* per evitare clic */
}


/* CATU Parallax */

.parallax-section {
  position: relative;
  height: 80vh;
  overflow: hidden;
  display: flex;
  justify-content: center;
  text-align: center;
  color: white;
  margin: 0;
  padding: 0;
}

.parallax-section.center {
  align-items: center;
}

.parallax-section.bottom {
  align-items: stretch; /* importante per corretto stacking */
}

.parallax-bg {
 position: absolute;
 top: 0;
 left: 0;
 width: 100%;
 height: 120%; /* Manteniamo l'altezza al 120% per dare spazio all'effetto */
 z-index: 0;
 overflow: hidden;
}

.parallax-media {
 width: 100%;
 height: 100%;
 object-fit: cover; /* Assicura che l'immagine copra sempre l'area */
 pointer-events: none;
 position: absolute;
 top: 50%;
 left: 50%;
 transform: translate(-50%, -50%); /* Centra l'immagine sia in orizzontale che in verticale */
}
.parallax-content {
  position: relative;
  z-index: 1;
  max-width: 800px;
  width: 100%;
  padding: 40px;
}

/* ✅ Distanza fissa dal fondo per le varianti bottom */
.parallax-section.bottom .parallax-content {
  position: absolute;
  bottom: 40px;
  left: 50%;
  transform: translateX(-50%);
}

/* CATU Immagine che da bianco e nero diventa a colori */

.image-fade-color {
  filter: grayscale(100%);
  transition: filter 1s ease;
}

.image-fade-color.scrolled {
  filter: grayscale(0%);
}


.title-line-text {
  display: flex;
  align-items: center;
  font-size: 14px;
  text-transform: uppercase;
  letter-spacing: 4px;
  color: #555;
  margin-bottom: 10px;
}

.title-line-text .text {
  white-space: nowrap;
  flex-shrink: 0;
}

.title-line-text .line {
  flex-grow: 1;
  height: 1px;
  background-color: #ccc;
  margin-left: 20px;
}

.elegant-link {
  position: relative;
  display: inline-block;
  font-size: 16px;
  color: #333;
  font-family: inherit;
  padding: 10px 0;
  text-decoration: none !important; /* forziamo la rimozione della sottolineatura */
}

.elegant-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px; /* linea iniziale corta */
  height: 1px;
  background-color: #aaa;
  transition: all 0.3s ease;
}

.elegant-link:hover {
  color: #333;
  text-decoration: none !important; /* ulteriore sicurezza */
}

.elegant-link:hover::after {
  width: 100%;        /* si espande verso destra */
  height: 2px;
  background-color: #333;
}




.hero-section {
  position: relative;
  height: 110vh;
  background-size: cover;
  background-position: center;
  display: flex;
  align-items: flex-end;
  padding-bottom: 120px;
  overflow: hidden;
}

.hero-section::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0);
  transition: background-color 0.5s ease;
  z-index: 1;
  pointer-events: none;
}

.hero-section.scrolled-darken::before {
  background-color: rgba(0, 0, 0, 0.3); /* Diventa scuro (nero con opacità 0.3) */
}

.hero-content {
  position: relative;
  z-index: 2;
  max-width: 700px;
}

.small-label {
  font-size: 0.75rem;
  letter-spacing: 2px;
  text-transform: uppercase;
  margin-bottom: 10px;
  opacity: 0.9;
}

/* Elegante link solo in hero: testo + barra bianca */
.hero-section .elegant-link {
  position: relative;
  display: inline-block;
  font-size: 1rem;
  color: #fff !important;
  text-decoration: none !important;
}

.hero-section .elegant-link::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: 0;
  width: 40px;
  height: 1px;
  background-color: #fff;
  transition: all 0.3s ease;
}

.hero-section .elegant-link:hover::after {
  width: 100%;
  height: 2px;
  background-color: #fff;
}


.object-fit-cover {
  object-fit: cover;
  height: 100%;
}

@media (max-width: 768px) {
  .img-square-mobile {
    width: 100% !important;
    height: 100vw !important; /* rende l'altezza uguale alla larghezza dello schermo */
    object-fit: cover !important;
  }
}

.py-6 {
  padding-top: 6rem;
  padding-bottom: 6rem;
}

.py-7 {
  padding-top: 7rem;
  padding-bottom: 7rem;
}

.mt-extra-7 {
	margin-top: 7rem !important;
}

.btn.btn-secondary.btn-modern {
  background-color: var(--secondary) !important;
}




.btn-group {
    display: flex;
    flex-direction: column; /* Impila gli elementi verticalmente */
    gap: 0.5rem;
    margin-bottom: 1rem;
}

.btn-group-links {
    display: flex;
    gap: 0.5rem;
    flex: 1; /* Permette al contenitore di espandersi */
}

/* Applica queste regole a tutti i bottoni e ai testi-bottone */
.menu-col.col-cta .btn-cta,
.menu-col.col-cta .btn-text-only {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem; /* Aumenta l'altezza di tutti i bottoni */
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 24px;
    line-height: 1.2;
    flex: 1; /* Distribuisce lo spazio in modo uniforme tra gli elementi */
}

/* Stile specifico per il testo non cliccabile */
.btn-text-only {
    border: 1px solid var(--secondary);
    background: var(--secondary);
    color: var(--secondary-inverse);
    cursor: default;
    pointer-events: none;
    text-transform: uppercase;
}

/* Regole per allineare tutto alla stessa larghezza su mobile */
@media screen and (max-width: 768px) {
    .menu-col.col-cta > .btn-group,
    .menu-col.col-cta > .btn-cta {
        width: 90%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }

    .btn-group-links {
        width: 100%;
    }
}



/* Stile per il bottone RICHIEDI PREVENTIVO */
.btn-ternary {
    background: var(--tertiary) !important;
    color: var(--tertiary-inverse) !important;
    border: 1px solid var(--tertiary) !important;
}

/* Aggiunge spazio tra l'icona e il testo */
.btn-cta i {
    margin-right: 0.5rem;
}

/* Mantiene gli stili dei bottoni già impostati, ma con le icone */
.btn-cta {
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    padding: 0.75rem 1rem;
    font-weight: 500;
    font-size: 0.85rem;
    border-radius: 24px;
    line-height: 1.2;
    flex: 1; /* Distribuisce lo spazio in modo uniforme tra gli elementi */
}

/* Regole responsive per mantenere la stessa larghezza su mobile */
@media screen and (max-width: 768px) {
    .menu-col.col-cta > .btn-group,
    .menu-col.col-cta > .btn-cta {
        width: 90%;
        max-width: 300px;
        margin-left: auto;
        margin-right: auto;
    }
}

/** 🎨 STILI CSS COMPLETI PER SWITCH STAGIONE **/

/* 1. BARRA LATERALE FISSA (Contenitore) */
.season-bar {
    position: fixed;
    top: 50%; /* Centra verticalmente */
    right: 20px; /* 20px dal bordo destro */
    transform: translateY(-50%); /* Allineamento preciso al centro */
    z-index: 1000; /* Assicura che sia sempre sopra */
}

/* 2. BOTTONE DELLO SWITCH (Elemento <a>) */
.season-button {
    /* Layout */
    display: flex;
    align-items: center;
    justify-content: center;
    
    /* Forma e Dimensione */
    width: 50px;
    height: 50px;
    border-radius: 50%; /* Rende circolare */
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
    
    /* Transizioni e Interattività */
    transition: background-color 0.3s ease, transform 0.2s ease;
    cursor: pointer;
    
    /* Rimozione Sottolineatura e Colori Link */
    text-decoration: none !important; /* Rimuove la sottolineatura di default */
    color: inherit; /* Assicura che il colore dell'icona sia ereditato, non quello di un link */
}

/* Effetto al passaggio del mouse (Hover) */
.season-button:hover {
    transform: scale(1.05); /* Zoom leggero */
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.3);
    /* Assicuriamoci che non compaia la sottolineatura in nessun caso di interazione */
    text-decoration: none !important;
}

/* Assicura che la sottolineatura sia assente per tutti gli stati dei link */
.season-button:focus,
.season-button:active,
.season-button:visited {
    text-decoration: none !important;
}


/* 3. STILE INVERNO (Fiocco di neve ❄️) */
.season-button.winter {
    background-color: #7ebcff; /* Fondo Azzurro */
    color: white; /* Simbolo Bianco */
    font-size: 20px;
}

/* 4. STILE ESTATE (Sole ☀️) */
.season-button.summer {
    background-color: var(--secondary); /* Fondo Verde */
    color: #ffc107; /* Simbolo Giallo/Oro */
    font-size: 22px;
}

/* TRASLA i background dei parallax e sfondi vari */
@media (max-width: 991px) {
    .chisiamo-parallax-2,
    .chisiamo-parallax-2 > * {
        background-image: url('../img/chisiamo-parallax-2.webp') !important;
        background-position: 30% 50% !important;
        background-attachment: scroll !important;
        background-size: cover !important;
    }
    .faq-parallax-1,
    .faq-parallax-1 > * {
        background-position: 30% 50% !important;
        background-attachment: scroll !important;
        background-size: cover !important;
    }
	
	
	.hero-ristorante-1 {
		background-position-x: -640px;
	}
	.hero-wellness-1 {
		background-position-x: 992px;
	}	
}







/* Inverte l'ordine dei blocchi da MD in su (Desktop) */
@media (min-width: 768px) {
    .colazione-blocco-1 {
        flex-direction: row-reverse !important;
    }
}










/* Rendiamo l'elemento invisibile di default (o visibile, a seconda della necessità) */
.show-on-mobile {
    display: none !important; /* Nasconde su desktop (default) */
}

.hide-on-mobile {
    display: block !important; /* Mostra su desktop (default) */
}

/* Regole valide per smartphone (fino a 991px) */
@media (max-width: 991px) {
    /* Mostra l'elemento solo su mobile */
    .show-on-mobile {
        display: block !important;
    }
    
    /* Nasconde l'elemento solo su mobile */
    .hide-on-mobile {
        display: none !important;
    }
}




@media (max-width: 991px) {
    /* 1. Rimuove qualsiasi potenziale overflow orizzontale sul body o sul container esterno */
    body {
        overflow-x: hidden; /* Assicura che non ci sia scorrimento orizzontale */
    }

    /* 2. Resetta e adatta l'immagine su schermi piccoli */
    .img-wrapper img {
        /* Sovrascrive il max-width fisso e assicura che l'immagine non sia più larga del suo contenitore */
        max-width: 100% !important; 
        /* Rende l'altezza automatica per mantenere le proporzioni */
        height: auto !important; 
    }

    /* 3. Resetta il margine negativo specifico per schermi grandi (me-lg-n5) */
    .img-wrapper {
        margin-right: 0 !important;
        /* Assicura che il wrapper non occupi spazio extra a destra */
        width: 100%; 
    }
}


/* Regola per forzare il testo ad andare a capo sugli schermi piccoli (smartphone) */
@media (max-width: 991px) {
    /* Applica la rottura automatica del testo al contenitore del titolo */
    .title-line-text {
        white-space: normal !important; /* Permette al testo di andare a capo */
        display: block !important;     /* Assicura che l'elemento si comporti come un blocco */
        width: 100%;                   /* Assicura che occupi tutto lo spazio disponibile */
        text-align: center;            /* Centra il testo, se necessario */
    }

    /* Se la regola white-space: nowrap; è applicata allo span interno, sovrascrivi anche lì */
    .title-line-text .text {
        white-space: normal !important; /* Permette al testo di andare a capo */
        display: block;
    }
    
    /* Regola per la linea separatrice, affinché non interferisca più */
    .title-line-text .line {
        display: none !important; /* Nasconde o gestisce la linea separatrice se causa problemi di larghezza */
    }
}