/* ---- VARIABILI & RESET ---- */
:root {
    --leather: #523226;
    --gold: #BB9E6C;
    --ivory: #FDFAF5;
    --t-slow: 0.6s;
    --ease: cubic-bezier(0.4, 0, 0.2, 1);
    
      --font-display: 'Cormorant Garamond', Georgia, serif;
  	--font-ui:      'Jost', system-ui, sans-serif;
  	
  	
  	  /* Derivati  */
  --leather-dk: #3A2019;   /* hover scuro, sezioni dark */
  --leather-md: #6B4535;   /* variante media */
  --gold-lt:    #CDB68A;   /* gold chiaro per testi su scuro */
  --gold-dk:    #96784A;   /* gold scuro per hover */
  --ivory-2:    #F5F0E6;   /* avorio leggermente più caldo */
  --ivory-3:    #EDE6D8;   /* avorio per card, bordi */
  --stone-lt:   #8A837C;   /* pietra chiara */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { font-family: 'Jost', sans-serif; background: var(--ivory); color: var(--leather); overflow-x: hidden; }
h2 { font-family: 'Cormorant Garamond', serif; font-size: 3rem; }

/* ---- HEADER DINAMICO ---- */
.site-header {
    position: fixed;
    top: 0; left: 0; right: 0;
    height: 180px; /* Spazio per logo grande */
    display: flex;
    align-items: center;
    padding: 0 5%;
    z-index: 1001;
    background: transparent;
    transition: all 0.4 var(--ease);
}

/* Stato quando si scende col mouse */
.site-header.is-scrolled {
    height: 60px;
    background-color: #434343;	/*var(--ivory);  rgba(82, 50, 38, 0.98);--leather opaco */
    /* backdrop-filter: blur(10px); */
    box-shadow: 0 4px 20px rgba(0,0,0,0.2);
}


/* ---- LOGO & ANIMAZIONE ---- */
.logo-wrapper {
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: all var(--t-slow) var(--ease);
}

.main-logo {
    height: 125px; /* Grandezza iniziale */
    width: auto;
    display: block;
    transition: all var(--t-slow) var(--ease);
    /* Un leggero shadow per distaccarlo dal video, sparisce su ivory */
    filter: drop-shadow(0 4px 10px rgba(0,0,0,0.3));
}


/* Morfismo Logo allo scroll 
.site-header.is-scrolled .logo-wrapper {
    left: 110px; 
    transform: translate(0, -50%); 
}*/

/* Quando si scende (is-scrolled) */
.site-header.is-scrolled .main-logo {
    height: 45px; /* Si rimpicciolisce ma resta centrato */
    filter: none; /* Rimuoviamo l'ombra sullo sfondo chiaro ivory */
}






/* ---- HERO VIDEO ---- */
.hero {
    position: relative;
    z-index: 11;
	background-color: #2c2c2c;
    height: 100vh; 
    width: 100%;
    display: flex; 
    align-items: center;      /* Centra verticalmente */
    justify-content: center;  /* Centra orizzontalmente */
    text-align: center;  
    overflow: hidden;
    margin-bottom: 25px;
}




.hero-video-wrap { position: absolute; inset: 0; z-index: -1; }
.hero-video { width: 100%; height: 100%; object-fit: cover; }

.hero-overlay {
    position: absolute;
    inset: 0;
    background: rgba(0,0,0,0.25); 
    z-index: 1;
}



/* Hero content */
.hero-content {
  position: relative; 
  top: 10%;
  z-index: 2;
  text-align: center; padding-inline: 1.5rem;
  max-width: 760px;
  animation: heroIn 1.2s var(--ease) both;
}
@keyframes heroIn {
  from { opacity: 0; transform: translateY(28px); }
  to   { opacity: 1; transform: translateY(0); }
}

.hero-eyebrow {
  Xfont-family: var(--font-ui); font-size: .78rem; Xfont-weight: 600;
  letter-spacing: .28em; Xtext-transform: uppercase;
  color: var(--gold-lt); display: block; margin-bottom: .75rem;
  max-width: none;
  animation: heroIn 1.2s .2s var(--ease) both;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
}
.hero-title {
  color: #fff;
  font-size: 2rem;
  text-shadow: 0 2px 24px rgba(0,0,0,.35);
  margin-bottom: .75rem;
  animation: heroIn 2.5s .35s var(--ease) both;
}
.hero-title em { font-style: italic;  }

.hero-sub {
  font-size: clamp(.9rem, 2vw, 1.15rem);
  color: var(--gold-lt);
  letter-spacing: .02em; max-width: 50ch; margin-inline: auto;
  margin-bottom: 2.25rem;
  text-shadow: 0 1px 8px rgba(0,0,0,.25);
  animation: heroIn 2.5s .5s var(--ease) both;
}
.btn-hero { animation: heroIn 1.2s .65s var(--ease) both; }







/* ---- ELEMENTI UI ---- */
.lang-btn {
    background: transparent;
    /* border: 1px solid rgba(255,255,255,0.4); */
    color: white;
    padding: 6px 12px;
    cursor: pointer;
    font-weight: 600;
}

.menu-btn {
position: absolute; right: 1.25rem;
  z-index: 10;
}

.nav-toggle {
    position: absolute;
    right: 5%;
    background: none; border: none;
    cursor: pointer;
}
.bar { display: block; width: 25px; height: 2px; background: white; margin: 3px 0; }


/* ---- AGGIUSTAMENTO COLORI UI SU SFONDO IVORY ---- */
/* Quando l'header è trasparente (sopra il video) i tasti sono bianchi */
.lang-btn, .bar {
    color: white;
    background-color: white; /* per le barre dell'hamburger */
    border-color: rgba(255,255,255,0.5);
    transition: all var(--t-slow) var(--ease);
}

/* Quando l'header diventa Ivory, i testi devono diventare scuri (Leather) per leggibilità */
.site-header.is-scrolled .lang-btn {
    /*
    color: var(--leather);
    border-color: var(--leather);
    */
}

.site-header.is-scrolled .bar {
    /*
    background-color: var(--leather);
    */
}
.site-header.is-scrolled .logo-wrapper {
	/* filter: brightness(0.5); */
}


/* Lang switcher — sinistra, sempre visibile */
.lang-switcher {
  position: absolute; left: 1.25rem;
  z-index: 10;
}
.lang-btn {
  display: flex; align-items: center; gap: .3rem;
  background: rgba(255,255,255,.1); /* border: 1px solid rgba(255,255,255,.3); */
  border-radius: 3px; padding: .35rem .65rem; cursor: pointer;
  font-family: var(--font-ui); font-size: .72rem; font-weight: 600;
  letter-spacing: .1em; color: rgba(255,255,255,.9);
  min-height: 36px; min-width: 48px;
  transition: background var(--t), border-color var(--t);
}
.lang-btn:hover { background: rgba(255,255,255,.22); border-color: rgba(255,255,255,.5); }
.lang-current { display: block; }
.lang-chevron { transition: transform var(--t); flex-shrink: 0; }
.lang-btn[aria-expanded="true"] .lang-chevron { transform: rotate(180deg); }

.lang-dropdown {
  position: absolute; top: calc(100% + .4rem); left: 0;
  min-width: 140px; list-style: none;
  background: var(--leather); border-radius: 4px;
  box-shadow: var(--sh-lg); overflow: hidden;
  opacity: 0; transform: translateY(-6px);
  pointer-events: none;
  transition: opacity var(--t) var(--ease), transform var(--t) var(--ease);
  z-index: 20;
}
.lang-dropdown.is-open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.lang-dropdown li {
  font-family: var(--font-ui); font-size: .82rem; font-weight: 500;
  padding: .65rem 1rem; color: rgba(255,255,255,.85); cursor: pointer;
  transition: background var(--t), color var(--t);
}
.lang-dropdown li:hover,
.lang-dropdown li[aria-selected="true"] { background: rgba(255,255,255,.1); color: var(--gold-lt); }



/*
.scroll-indicator {
    position: absolute; bottom: 30px; color: white; text-align: center;
    animation: bounce 2s infinite;
}
@keyframes bounce { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-10px); } }
*/


/* freccia scorrimento */
.scroll-indicator {
  position: absolute; bottom: 25%; left: 50%; transform: translateX(-50%);
  z-index: 2; display: flex; flex-direction: column; align-items: center; gap: .4rem;
  animation: scrollBob 2.5s ease-in-out infinite;
}
@keyframes scrollBob {
  0%, 100% { transform: translateX(-50%) translateY(0); }
  50%       { transform: translateX(-50%) translateY(10px); }
}




/* ---- REVEAL EFFECT ---- */
.reveal {
    opacity: 0;
    transform: translateY(170px);
    transition: all 0.8s ease-out;
}
.reveal.active { opacity: 1; transform: translateY(0); }
.container { max-width: 1100px; margin: auto; padding: 13px 11px; text-align: center; }
.containerL { width:100vw; margin: auto; padding: 13px 11px; text-align: center; }

/* ---- PULSANTI FISSI BASSO ---- */
.fixed-actions {
	position: fixed;
    bottom: 20px;
    left: 0;
    right: 0; /* Copre tutta la larghezza per poter centrare */
    display: flex;
    justify-content: center; /* Centra i figli orizzontalmente */
    align-items: center;     /* Centra i figli verticalmente */
    gap: 17px;
    z-index: 999;
    padding-inline: 20px;    /* Sicurezza per schermi molto piccoli */
    transition: all var(--t-slow) var(--ease);
}


/* Classe che aggiungeremo via JS per nasconderla */
.is-hidden {
    /* transform: translateY(100%); /* Scivola fuori verso il basso */
    Xopacity: 0;
    bottom: -60px !important;
    pointer-events: none; /* Impedisce click accidentali mentre è nascosta */
}


.fab {
    flex: 1; padding: 15px; text-align: center; text-decoration: none;
    border-radius: 50px; font-weight: 600; letter-spacing: 1px;
    max-width: 200px;
}
.contact { background: white; color: var(--leather); }
.book { background: var(--gold); color: #362019 ; }	

.fixed-actions.is-scrolled {
	bottom: 0px;
	background-color: #434343;
	padding: 7px 0px;
}
.fab.is-scrolled {
    padding: 10px 0px;
}


h1, h2, h3 { font-family: var(--font-display); font-weight: 400; line-height: 1.15; }
h1 { font-size: clamp(2rem, 7vw + 0.1rem, 2.5rem); }
h2 { font-size: clamp(1.8rem, 4.5vw + 0.1rem, 2rem); margin-bottom:1rem; }
h3 { font-size: clamp(1.4rem, 2.5vw + 0.1rem, 1.5rem); margin-bottom:0.6rem;}




/* Stato dell'icona (nascosta di base) */
.video-play-indicator {
    position: absolute;
    top: 33%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0.8);
    width: 80px;
    height: 80px;
    color: white;
    opacity: 0; /* Invisibile */
    pointer-events: none; /* Non intralcia il click */
    transition: all 0.4s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 3;
}

.video-play-indicator svg {
    width: 100%;
    height: 100%;
    filter: drop-shadow(0 0 10px rgba(0,0,0,0.3));
}

/* Quando il contenitore ha la classe .is-paused */
.hero.is-paused .video-play-indicator {
    opacity: 1; /* Appare */
    transform: translate(-50%, -50%) scale(1); /* Si ingrandisce leggermente */
}

/* Effetto fade sull'overlay */
.hero.is-paused .hero-overlay {
    background: rgba(0, 0, 0, 0.5); /* Si scurisce per far risaltare l'icona e il testo */
}






/* per foto */

.slider-container {
  width: 100%;
  overflow-x: auto;
  scroll-snap-type: x mandatory; /* Forza l'aggancio della foto */
  scroll-behavior: smooth;
  -webkit-overflow-scrolling: touch; /* Fluidità su iOS */
}

.slider-track {
  display: flex;
}

.slide {
  flex: 0 0 85%; /* Mostra l'85% della foto (così si capisce che ce n'è un'altra dopo) */
  scroll-snap-align: center;
  margin-right: 15px;
}

.slide img {
  width: 100%;
  border-radius: 8px;
  object-fit: cover;
  height: 300px;
}






.camere-swiper {
    padding-bottom: 50px; /* Spazio per i pallini */
    overflow: visible;    /* Permette di vedere le slide adiacenti se vuoi */
}

.camera-card {
    background: white;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0,0,0,0.05);
    height: auto; /* Si adatta al contenuto */
}

.cc-img {
    height: 250px;
    background-size: cover;
    background-position: center;
}

.cc-body {
    padding: 25px;
    text-align: center;
}







/* STILE GENERALE DEL FOOTER */
.main-footer {
    background-color: #2e2a24; 
    color: #e5dcd3; 
    font-family: 'Jost', sans-serif;
    padding: 60px 0 60px 0;
    margin-top: 70px;
}

.footer-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonne su desktop */
    gap: 40px;
}

/* Titoli delle colonne */
.footer-title {
    font-family: 'Cormorant Garamond', serif;
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--gold, #BB9E6C); /* Colore oro del tuo hotel */
    margin-bottom: 20px;
    letter-spacing: 1px;
}

/* Colonna Info/Contatti */
.footer-address {
    font-style: normal;
    line-height: 1.6;
    font-size: 0.95rem;
    margin-bottom: 15px;
}

.footer-contact-links a {
    display: block;
    color: #e5dcd3;
    text-decoration: none;
    margin-bottom: 8px;
    font-size: 0.95rem;
    transition: color 0.2s ease;
}

/* Colonna Link e Navigazione */
.footer-links {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-links li {
    margin-bottom: 12px;
}

.footer-links a {
    color: #e5dcd3;
    text-decoration: none;
    font-size: 0.95rem;
    transition: padding-left 0.2s ease, color 0.2s ease;
}

/* Effetti Hover & Focus (WCAG Compliant) */
.footer-contact-links a:hover,
.footer-links a:hover,
.social-icons a:hover {
    color: var(--gold, #BB9E6C);
}

.footer-links a:hover {
    padding-left: 5px; /* Leggero effetto scorrimento al passaggio */
}

/* Icone Social */
.social-icons {
    display: flex;
    gap: 15px;
}

.social-icons a {
    color: #e5dcd3;
    transition: color 0.2s ease, transform 0.2s ease;
}

.social-icons a:hover {
    transform: translateY(-3px);
}

/* PARTE INFERIORE (NOTE LEGALI) */
.footer-bottom {
    margin-top: 50px;
    border-top: 1px solid rgba(229, 220, 211, 0.1);
    padding: 25px 0;
    font-size: 0.85rem;
    color: #bfaea0;
}

.footer-bottom-container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 20px;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 15px;
}

.footer-bottom p {
    margin: 0;
}

.footer-legal a {
    color: #bfaea0;
    text-decoration: underline;
    transition: color 0.2s ease;
}

.footer-legal a:hover {
    color: var(--gold, #BB9E6C);
}

/* RESPONSIVE PER SITI MOBILE E TABLET */
@media (max-width: 768px) {
    .footer-container {
        grid-template-columns: 1fr; /* Una colonna per riga su smartphone */
        gap: 35px;
        text-align: center;
    }
    
    .social-icons {
        justify-content: center;
    }
    
    .footer-bottom-container {
        flex-direction: column;
        text-align: center;
    }
}






@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto !important;
  }
}

/* Rimuove l'outline brutto dal blocco di destinazione quando riceve il focus da JS */
[tabindex="-1"]:focus {
  outline: none;
}








/* ══════════════════════════════════════
   PRINT
   ══════════════════════════════════════ */
@media print {
  .site-header, .main-nav, .fixed-actions, .scroll-indicator,
  .hero-video-wrap { display: none !important; }
  body { padding-bottom: 0 !important; font-size: 12pt; }
  a[href]::after { content: " (" attr(href) ")"; font-size: .8em; }
  .reveal-item { opacity: 1 !important; transform: none !important; }
}