/*BARRA SUPERIORE*/

.top-bar {
  top: 0;
  left: 0;
  width: 100%;
  /* Altezza adattiva: leggermente più bassa su mobile per non rubare spazio */
  height: clamp(60px, 8vh, 75px); 
  
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  
  /* Estetica: Nero profondo ma con una leggera trasparenza e sfocatura */
  backdrop-filter: blur(10px); /* Effetto vetro smerigliato premium */
  -webkit-backdrop-filter: blur(10px); /* Supporto Safari */
  
  border-bottom: 1px solid rgba(165, 128, 25, 0.15); /* Linea dorata impercettibile */
  
  pointer-events: none; 
  padding: 0 15px;
  box-sizing: border-box;
}


.top-bar, .navbar { 
    position: fixed; /* o relative/absolute, purché sia definito */
    z-index: 1000 !important; 
    background-color: rgba(0, 0, 0, 0.85);  /* Deve essere coprente per nascondere il menu che sta "sotto" */
}



.navbar {
  top: 0;
  width: 100%;
  height: 80px;
  display: flex;
  justify-content: center; /* Cambiato per allineare tutto rispetto al centro */
  align-items: center;

  padding: 0 20px;
  box-sizing: border-box;
}

.nav-section {
  display: flex;
  /* Corretto: gap di 30px su desktop che scende a 15px su schermi piccoli */
  gap: clamp(15px, 2vw, 30px); 
  pointer-events: auto;
  transition: transform 0.8s ease, opacity 0.8s ease;
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
}

.nav-left {
  /* Si ancora a sinistra del centro (50%) più lo spazio per il logo */
  right: calc(50% + clamp(50px, 8vw, 80px)); 
}

.nav-right {
  /* Si ancora a destra del centro (50%) più lo spazio per il logo */
  left: calc(50% + clamp(50px, 8vw, 80px));
}

.nav-section a {
  color: #a58019;
  text-decoration: none;
  font-family: 'Cormorant SC', sans-serif;
  /* Font leggermente più grande su mobile per leggibilità (min 12px) */
  font-size: clamp(12px, 1.2vw, 14px);
  letter-spacing: 2px;
  transition: opacity 0.3s, letter-spacing 0.3s;
  white-space: nowrap; /* Impedisce al testo di andare a capo */
}





/* Logo centrato assolutamente */
.logo-container {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -47%);
  height: clamp(100px, 20vw, 120px);
  width: clamp(100px, 20vw, 120px);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 101;
  transition: transform 0.6s ease-in-out;
  overflow: hidden;
  pointer-events: none;
}

.logo-wrapper {
  position: absolute;
  left: 50%;
  top: 52%;
  transform: translate(-50%, -50%);
  width: 93px;
  height: 93px;
  overflow: hidden;
  border-radius: 50%;
  pointer-events: auto;
  z-index: 10;
  cursor: pointer;
}


.logo-glow {
  position: relative;
  width: 100%;
  height: 100%;
}

.logo-container svg {
  overflow: hidden;
  display: block;
  max-width: 100%;
  pointer-events: none;
  
}

.logo {
  width: 100%;
  height: 100%;
  z-index: 2;
  position: relative;
  
}

.shine {
  position: absolute;
  top: 0;
  left: -150%;
  width: 300%;
  height: 100%;
  background: linear-gradient(
    120deg, 
    transparent, 
    rgba(255, 255, 255, 0.15), /* Ridotto leggermente per eleganza */
    transparent
  );
  /* Utilizziamo will-change per attivare l'accelerazione hardware */
  will-change: transform;
  animation: shine 4s infinite linear;
  z-index: 3;
  pointer-events: none;
  mix-blend-mode: screen;
}

.top-bar {
  position: fixed; /* O absolute, a seconda del tuo design */
  top: 0;
  width: 100%;
  z-index: 1000;
  transition: background 0.6s ease, padding 0.3s ease;
  /* Importante per il lusso: impedisce che il testo vada sotto il notch degli iPhone */
  padding-top: env(safe-area-inset-top); 
}


/* Icona menu */
.menu-btn {
  position: fixed;
  top: 28px;
  left: clamp(8px, 2vw, 15px);
  transform: translateY(-50%);
  z-index: 2000;
  
  /* Dimensione identica alla lingua */
  width: clamp(40px, 8vw, 50px);
  height: clamp(40px, 8vw, 50px);
  
  border: none;
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease, background 0.3s ease;
}

/* Hover bilanciato con il tuo translateY */
.menu-btn:hover {
  transform: translateY(-50%) scale(1.1);
  background: rgba(255, 255, 255, 0.05);
}

/* Stato quando il menu è aperto (Icona ruotata) */
.menu-btn.is-open {
  transform: translateY(-50%) rotate(90deg);
}

/* Hover quando è aperto (mantiene rotazione e scala) */
.menu-btn.is-open:hover {
  transform: translateY(-50%) rotate(90deg) scale(1.1);
}

.menu-btn svg {
  /* Dimensione icona proporzionale al contenitore */
  width: 60%;
  height: 60%;
  fill: white;
  pointer-events: none;
}

/* --- LA TENDINA (Verifica i nomi) --- */
#fullScreenMenu {
    position: fixed;
    top: 60px; /* Altezza della tua barra */
    left: 0;
    width: 100vw;
    height: auto;
    background-color: rgba(10, 10, 10, 0.85) !important;
    backdrop-filter: blur(10px); /* Effetto vetro satinato modernissimo */
    -webkit-backdrop-filter: blur(10px);
    border-bottom: 2px solid #d4af37;
    padding: 20px 0;
    
    /* LIVELLO INFERIORE ALLA TOP-BAR */
    z-index: 999 !important; 

    /* EFFETTO TRANSIZIONE (SCIVOLAMENTO) */
    opacity: 0;
    visibility: hidden;
    transform: translateY(-100%); /* Lo sposta tutto verso l'alto, dietro la barra */
    transition: transform 0.5s ease, opacity 0.4s ease;
}

/* Quando il menu è attivo */
#fullScreenMenu.active {
    display: flex !important; /* Deve essere sempre flex o block se lo avevi così */
    opacity: 1;
    visibility: visible;
    transform: translateY(0); /* Torna nella sua posizione naturale scivolando giù */
}

#fullScreenMenu.active {
    display: block !important; /* Lo mostra al click */
}


/* Sistemiamo i link che ora sono giganti e a sinistra */
#fullScreenMenu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    text-align: center;
    width: 100%;
}

#fullScreenMenu ul li {
    margin: 15px 0; /* Spazio tra le voci */
}

#fullScreenMenu ul li a {
    color: #d4af37 !important; /* Oro */
    text-decoration: none;
    font-size: 1.5rem; /* Dimensione umana, non gigante */
    text-transform: uppercase;
    letter-spacing: 3px;
    font-family: serif;
}

#fullScreenMenu ul li a:hover {
    color: #ff0000; /* Colore al passaggio del mouse */
}

/* Gestione dei link: da Verticali a Orizzontali */
.menu-content {
    display: flex;
    flex-direction: row; /* Orizzontale su Desktop */
    justify-content: center;
    align-items: center;
    gap: 40px;
    width: 90%; /* Evita che i link tocchino i bordi */
    margin: 0 auto;
}

.menu-content a {
    color: #d4af37 !important;
    text-decoration: none;
    font-size: 0.9rem !important; /* Più piccolo è più sofisticato */
    text-transform: uppercase;
    letter-spacing: 5px; /* Molto spazio tra le lettere */
    font-family: 'Cormorant SC', serif;
    font-weight: 300; /* Tratto sottile */
    white-space: nowrap;
    transition: all 0.3s ease;
}

.menu-content a:hover {
    color: #ffffff !important;
    transform: translateY(-2px); /* Piccolo movimento verso l'alto al passaggio */
}

.menu-btn:hover svg {
    transform: scale(1.2); /* L'icona cresce... */
    transition: transform 0.3s ease;
}

.menu-btn {
    /* Lascia qui i tuoi stili che posizionano l'icona */
    border: none;
    background: transparent;
    cursor: pointer;
}




/* Contenitore principale della lingua */

.language-switcher {
  position: fixed;
  top: 28px; /* Allineato al tema */
  right: clamp(8px, 2vw, 15px); /* Speculare al tema */
  
  /* Usiamo lo stesso clamp del tema */
  width: clamp(40px, 8vw, 50px);
  height: clamp(40px, 8vw, 50px);
  
  z-index: 2000;
  cursor: pointer;
  background-color: transparent;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: transform 0.3s ease;
  transform: translateY(-50%);
  pointer-events: auto;
}


.language-switcher:hover {
  /* Manteniamo il centramento verticale E aggiungiamo l'ingrandimento */
  transform: translateY(-50%) scale(1.1);
}

.language-switcher svg {
  width: 70%;
  height: 70%;
  fill: white;
  display: block;
}

/* MODIFICA: Il menu a tendina */
.language-menu {
  display: none; /* Nasconde di base */
  position: absolute;
  /* Lo spostiamo sotto l'icona */
  top: 110%; 
  right: 0;
  
  background: rgba(20, 20, 20, 0.95);
  border: 1px solid #a58019;
  border-radius: 10px;
  z-index: 9999;
  box-shadow: 0 4px 15px rgba(0,0,0,0.8);
  min-width: 140px; /* Un po' più largo per l'eleganza */
  overflow: hidden; /* Taglia i bordi dei div interni per rispettare il border-radius */
}

.language-menu.show {
  display: block !important;
}

/* Ottimizzazione voci menu */
.language-menu div {
  padding: 12px 20px;
  color: white;
  font-family: 'Cormorant SC', sans-serif;
  font-size: 0.9rem;
  letter-spacing: 1px;
  transition: all 0.2s ease;
  cursor: pointer;
  text-align: center; /* Più ordinato */
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

.language-menu div:hover {
  background-color: rgba(255, 255, 255, 0.05);
  border-left: 3px solid #a58019; /* Una sottile lama d'oro a sinistra */
  padding-left: 17px; /* Compensa lo spessore del bordo per non muovere il testo */
  color: #a58019;
}

.language-menu div:first-child {
  border-top-left-radius: 10px;
  border-top-right-radius: 10px;
}

.language-menu div:last-child {
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 10px;
}

/* --- MEDIA QUERY: TABLET E MOBILE --- */
@media (max-width: 992px) {
    .menu-content {
        gap: 20px; /* Stringiamo lo spazio tra i link su schermi medi */
    }
}

@media (max-width: 768px) {
    #fullScreenMenu {
        top: 50px; /* Spesso le navbar mobile sono più basse */
        padding: 40px 0;
    }

    .menu-content {
        flex-direction: column !important; /* Torna verticale su mobile */
        gap: 25px; /* Spazio verticale tra le voci */
    }

    .menu-content a {
        font-size: 1.3rem !important; /* Leggermente più grande per il touch dei pollici */
        white-space: normal; /* Permette di andare a capo se il titolo è lungo */
        text-align: center;
    }
}

@media (max-width: 768px) {
  .language-switcher, 
  .menu-btn {
    /* Entrambe alla stessa altezza e dimensione */
    top: max(3.2%, 29px); 
    width: 40px; 
    height: 40px;
    background: rgba(0, 0, 0, 0.2); /* Uniformiamo anche lo sfondo di sicurezza */
    backdrop-filter: blur(4px);
    border-radius: 50%;
  }

  .language-switcher {
    right: 10px;
    transform: translateY(-50%); /* Reset del transform precedente */
  }

  .menu-btn {
    left: 10px;
  }

  /* Ridimensionamento icone interne (SVG) */
  .language-switcher svg,
  .menu-btn svg {
    width: 20px;
    height: 20px;
  }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .top-bar {
    /* Su mobile rendiamo il nero più opaco per nascondere meglio i link che si avvicinano */
    background-color: rgba(0, 0, 0, 0.95);
    height: 60px;
  }
}


/* --- ADATTAMENTO SMARTPHONE PICCOLI (Sotto i 480px) --- */
@media (max-width: 480px) {
  /* Opzione A: Nascondere i link se troppo affollati (scelta comune nel lusso mobile) */
  /* .nav-section { display: none; } */

  /* Opzione B: Disporli molto vicini al logo */
  .nav-left { right: calc(50% + 45px); }
  .nav-right { left: calc(50% + 45px); }
  
  .nav-section a {
    font-size: 10px;
    letter-spacing: 0.5px;
  }
}



@keyframes shine {
  0% { transform: translateX(0); }
  100% { transform: translateX(100%); }
}

/* --- MOBILE --- */
@media (max-width: 768px) {
  .shine {
    /* Su mobile un riflesso troppo veloce può infastidire */
    animation-duration: 6s; 
    opacity: 0.6; /* Più discreto */
  }
}

/* Versione compatta al caricamento o scroll */
@media (max-width: 768px) {
  .top-bar {
    padding: 10px 15px; /* Padding più stretto per lasciare spazio all'arte */
  }
}

/* --- ADATTAMENTO MOBILE (Sotto i 768px) --- */
@media (max-width: 768px) {
  .nav-section {
    /* Riduciamo lo spazio tra i due link (es. Contatti e News) */
    gap: 15px; 
  }
  
  /* Portiamo i blocchi molto vicini al logo centrale */
  /* 45px è la distanza ideale per un logo circolare standard su mobile */
  .nav-left {
    right: calc(50% + 45px); 
    left: auto; /* Reset per sicurezza */
  }
  
  .nav-right {
    left: calc(50% + 45px);
    right: auto; /* Reset per sicurezza */
  }

  .nav-section a {
    font-size: 11px;
    letter-spacing: 1px;
    /* Evita che il testo vada a capo forzatamente */
    white-space: nowrap; 
  }
}

/* --- EXTRA: Ottimizzazione per Samsung S20 / Schermi molto stretti --- */
@media (max-width: 380px) {
  .nav-left {
    /* Specifichiamo la proprietà 'right' per spingere da destra verso il centro */
    right: calc(50% + 40px);
    left: auto;
  }
  
  .nav-right {
    /* Specifichiamo la proprietà 'left' per spingere da sinistra verso il centro */
    left: calc(50% + 40px);
    right: auto;
  }

  .nav-section {
    gap: 8px; /* Stringiamo il gap tra i link interni */
  }
}