/* --- Header Navigation --- */
.main-header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: transparent;
  padding: 8px 30px; /* Altezza compatta */
  transition: transform 0.3s ease-in-out;}

  .mobile-menu {
    display: none;
  }

  
/* Bottone chiusura menu mobile */
.menu-exit-btn {
  position: absolute;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 10001;
  background: none;
  border: none;
  font-size: 36px;
  cursor: pointer;
  display: none;
  transform: rotate(0deg);
  transition: transform 0.4s ease, color 0.3s ease;
}

/* Solo quando il menu è aperto */
body.mobile-open .menu-exit-btn {
  display: block;
  animation: rotateIn 0.4s ease forwards;
}

@keyframes rotateIn {
  from {
    transform: rotate(-90deg);
    opacity: 0;
  }
  to {
    transform: rotate(0deg);
    opacity: 1;
  }
}


/* Tema scuro */
body.theme-dark .menu-exit-btn i {
  color: #fff;
}

/* Tema chiaro */
body.theme-light .menu-exit-btn i {
  color: #111;
}

body.mobile-open {
    overflow: hidden;
    position: fixed;
    overflow-y: scroll;
    left: 0;
    width: 100%;
    height: 100%;
  }
  
/* RESET BASE - Mobile menu */
body.mobile-open .mobile-menu {
  display: flex;
  background: rgba(255, 255, 255, 0.95); /* base: chiaro */
  color: #111;
}



header {
  position: fixed;
  width: 100%;
  top: 0;
  left: 0;
  z-index: 999;
  background: transparent;
  padding: 20px;
}
.header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}


.navbar-brand {
  font-size: 32px;
  font-weight: bold;
  text-transform: uppercase;
}
nav ul {
  display: flex;
  gap: 30px;
}
nav a {
  position: relative;
  font-family: 'Montserrat', sans-serif;
  font-size: 16px;
  color: #000;
  text-transform: uppercase;
  font-weight: 600;
  text-decoration: none;
  padding-bottom: 5px;
  transition: color 0.3s ease;
  white-space: nowrap; /* Impedisce l'andare a capo */
}
nav a::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0%;
  height: 2px;
  background-color: #000;
  transition: width 0.3s ease;
  
}
nav a:hover::after {
  width: 100%;
  transform: scaleX(1);
}
.ham-btn {
  display: none;
  background: none;
  border: none;
  font-size: 24px;
}

/* animazione menu entrata e uscita */
.main-header.hide-on-scroll {
  transform: translateY(-100%);
  transition: transform 0.3s ease-in-out;
}


/* stili sfondo menu */
.main-header.light-bg {
  background: rgba(255, 255, 255, 0.5);
  backdrop-filter: blur(12px);
  color: #000;
}

.main-header.dark-bg {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(12px);
  color: #fff;
}

/* Forza il tema scuro iniziale per CRM EVO e pagine interne */
.main-header.dark-initial {
  background: rgba(0, 0, 0, 0.6);
  backdrop-filter: blur(10px);
}

.main-header.dark-initial nav a,
.main-header.dark-initial .logo-fill,
.main-header.dark-initial .ham-btn i,
.main-header.dark-initial .audio-btn,
.main-header.dark-initial .audio-label {
  color: #fff !important;
  fill: #fff !important;
}

/* Rimuovi dark-initial quando si scrolla */
.main-header.scrolled {
  background: rgba(255, 255, 255, 0.6);
  backdrop-filter: blur(12px);
}

/* alernanza colore testi menu*/
/* Tema light: testo nero */
body.theme-light .main-header,
body.theme-light .main-header nav a,
body.theme-light .logo-svg,
body.theme-light .ham-btn i,
body.theme-light .audio-btn,
body.theme-light .audio-label {
  color: #111;
  fill: #111;
}

/* Tema dark: testo bianco */
body.theme-dark .main-header,
body.theme-dark .main-header nav a,
body.theme-dark .logo-svg,
body.theme-dark .ham-btn i,
body.theme-dark .audio-btn,
body.theme-dark .audio-label {
  color: #fff;
  fill: #fff;
}

body.theme-dark .main-header {
  background-color: rgba(0, 0, 0, 0.6); /* nero sfocato */
  backdrop-filter: blur(10px);
}

body.theme-light .main-header {
  background-color: rgba(255, 255, 255, 0.6); /* bianco sfocato */
  backdrop-filter: blur(10px);
}

body.theme-dark .main-header nav a::after {
  background: #fff;
}

body.theme-light .main-header nav a::after {
  background: #111;
}


/* alternanza colori menu mobile */
body.theme-dark .mobile-menu {
  background-color: rgba(0, 0, 0, 0.9);
  color: #fff;
}

body.theme-light .mobile-menu {
  background-color: rgba(255, 255, 255, 0.95);
  color: #111;
}

body.theme-dark .mobile-menu a,
body.theme-dark .mobile-menu ul li a,
body.theme-dark .mobile-menu .submenu a {
  color: #fff !important;
}

body.theme-light .mobile-menu a,
body.theme-light .mobile-menu ul li a,
body.theme-light .mobile-menu .submenu a {
  color: #111 !important;
}

 
/* Responsive */
@media (max-width: 1024px) { /* Aumentato da 768px a 1024px */
  nav ul {
    display: none;
  }
  
  .ham-btn {
    display: block;
  }
  
  .logo-mask {
    width: 180px;
  }
  
  /* Nascondi i pulsanti nel menu principale */
  .audio-control,
  nav .client-area-btn {
    display: none;
  }
  
  /* Mostra i pulsanti nel menu mobile */
  .mobile-menu .audio-control,
  .mobile-menu .client-area-btn {
    display: inline-flex;
    color: #fff !important;
  }
}

@media (max-width: 768px) {
  nav ul {
    display: none;
  }
  .ham-btn {
    display: block;
  }
  .mobile-menu a {
    white-space: normal; /* Permette l'andare a capo nel menu mobile */
  }
}

/* Regole colore menu mobile - FUORI dai media query per funzionare su tutti gli schermi */
body.theme-dark .mobile-menu a,
body.theme-dark .mobile-menu ul li a,
body.theme-dark .mobile-menu li a,
body.theme-dark .mobile-menu .submenu a {
  color: #fff !important;
}

body.theme-light .mobile-menu a,
body.theme-light .mobile-menu ul li a,
body.theme-light .mobile-menu li a,
body.theme-light .mobile-menu .submenu a {
  color: #111 !important;
}

.logo-svg {
  width: 100%;
  height: auto;
  display: block; /* Rimuove spazi indesiderati */
}
.logo-mask {
  width: 200px; /* Dimensione fissa base */
  min-width: 180px; /* Dimensione minima che non verrà mai superata */
  height: auto;
  display: flex;
  align-items: center;
  justify-content: flex-start;
}

/* Modifica media query per mobile */
@media (max-width: 768px) {
  .logo-mask {
    width: 160px;
    min-width: 160px;
    margin-left: 0; /* Rimuovi il margine negativo che potrebbe causare problemi */
  }

  .header-inner {
      padding: 0 20px; /* Riduciamo il padding laterale dell'header */
  }

  /* Aggiustiamo il testo "hooho" */
  #hooho-text {
      transform: translateX(-10px); /* Sposta il testo leggermente a sinistra */
  }
}

@media (max-width: 768px) {
  .main-header .logo-mask {
    transform: translateX(-20px) !important; /* Sposta solo il logo */
    width: 160px !important;
    min-width: 160px !important;
    position: relative !important; /* Permette il posizionamento indipendente */
    z-index: 2 !important; /* Assicura che stia sopra altri elementi */
  }

  /* Mantieni il padding dell'header per il menu hamburger */
  .header-inner {
    padding: 0 0px;
  }

  /* Aggiusta la posizione del menu hamburger indipendentemente */
  .ham-btn {
    position: relative;
    z-index: 2;
  }
}

/* Per schermi ancora più piccoli */
@media (max-width: 375px) {
  .main-header .logo-mask {
    transform: translateX(-25px) !important; /* Sposta ancora di più il logo */
  }
}

@keyframes moveBackground {
  0% { background-position: 0% 50%; }
  50% { background-position: 100% 50%; }
  100% { background-position: 0% 50%; }
}

.logo-wrapper {
  width: 220px;
  height: auto;
  position: relative;
  display: flex;
  align-items: center;
  justify-content: flex-start;
  width: 100%; /* Assicura che il wrapper occupi tutto lo spazio disponibile */
}


header .header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 40px;
}

#w-custom {
  cursor: pointer;
  transition: transform 0.3s ease;
}


@media (max-width: 768px) {
  .hero h1 {
    font-size: 48px;
    text-align: center;
    padding: 0 20px;
  }

  .hero h2 {
    font-size: 32px;
    text-align: center;
  }

  .mobile-menu ul {
    list-style: none;
    padding: 0;
    text-align: center;
  }

  .mobile-menu li {
    margin: 20px 0;
    font-size: 28px;
    font-weight: bold;
  }

  .mobile-menu a {
    text-decoration: none;
    position: relative;
  }

  .mobile-menu .client-area-btn {
    display: inline-block;
    margin: 15px 0;
  }
}

.mobile-menu {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  z-index: 9999;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  display: none;
  justify-content: center;
  align-items: center;
  flex-direction: column;
}

/* Rimuovi gli stili hover del submenu mobile */
.mobile-menu .submenu {
    position: static;
    display: block;
    background: none;
    box-shadow: none;
    padding: 0;
    margin: 10px 0;
    transform: none;
    opacity: 1;
}

/* Stile voci submenu mobile */
.mobile-menu .submenu li {
    margin: 10px 0;
}

.mobile-menu .submenu a {
    font-size: 20px; /* Più piccolo del menu principale */
    opacity: 0.8;
    padding: 5px 0;
    /* Colore gestito da body.theme-dark e body.theme-light */
}

/* Rimuovi effetti hover nel mobile */
.mobile-menu .has-submenu:hover > a::after {
    display: none;
}

/* Mostra il menu mobile solo su mobile */
@media (min-width: 800px) {
  .mobile-menu {
    display: none !important;
  }
}

/* Theme styles */
.main-header.theme-light,
.main-header[data-theme="light"] {
    background: rgba(255, 255, 255, 0.8);
}

.main-header.theme-light nav a,
.main-header[data-theme="light"] nav a,
.main-header.theme-light .logo-fill,
.main-header[data-theme="light"] .logo-fill,
.main-header.theme-light .ham-btn i,
.main-header[data-theme="light"] .ham-btn i {
    color: #111 !important;
    fill: #111 !important;
}

.main-header.theme-dark,
.main-header[data-theme="dark"] {
    background: rgba(0, 0, 0, 0.8);
}

.main-header.theme-dark nav a,
.main-header[data-theme="dark"] nav a,
.main-header.theme-dark .logo-fill,
.main-header[data-theme="dark"] .logo-fill,
.main-header.theme-dark .ham-btn i,
.main-header[data-theme="dark"] .ham-btn i {
    color: #fff !important;
    fill: #fff !important;
}

/* Assicurati che queste regole abbiano priorità */
.main-header.scrolled[data-theme="light"] {
    background: rgba(255, 255, 255, 0.8) !important;
}

.main-header.scrolled[data-theme="dark"] {
    background: rgba(0, 0, 0, 0.8) !important;
}

/* Stili base per il pulsante Area Clienti */
.client-area-btn {
    background: #FFD700; /* Giallo */
    color: #111 !important; /* Sempre nero */
    padding: 8px 16px;
    border-radius: 4px;
    transition: all 0.3s ease;
}

/* Override per i temi */
[data-theme="light"] .client-area-btn,
[data-theme="dark"] .client-area-btn,
.main-header.theme-light .client-area-btn,
.main-header.theme-dark .client-area-btn {
    color: #111 !important;
}

/* Hover state */
.client-area-btn:hover {
    background: #FFE44D;
    transform: translateY(-2px);
}

/* Stili per il dropdown menu */
.has-submenu {
    position: relative;
}

.submenu {
    position: absolute;
    top: calc(100% + 6px); /* Staccato di 3px dal menu principale */
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    display: none;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    transition: all 0.3s ease;
}

/* Versione dark del submenu */
[data-theme="dark"] .submenu {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.has-submenu:hover .submenu {
    display: block;
    opacity: 1;
}

.submenu li {
    list-style: none;
    margin: 8px 0;
    text-align: center;
}

.submenu a {
    display: block;
    padding: 8px 16px;
    color: #111;
    font-size: 14px;
    transition: all 0.3s ease;
    border-radius: 6px;
}

[data-theme="dark"] .submenu a,
body.theme-dark .submenu a {
    color: #fff !important;
}

.submenu a:hover {
    background: none;
  
}

[data-theme="dark"] .submenu a:hover,
body.theme-dark .submenu a:hover {
    background: none;
}

/* Rimuovi la sottolineatura dal menu Servizi quando è hover */
.has-submenu:hover > a::after {
    width: 0;
}

/* Stilizza la freccetta del dropdown */
.submenu-arrow {
    font-size: 12px;
    margin-left: 4px;
    transition: transform 0.3s ease;
}

.has-submenu:hover .submenu-arrow {
    transform: rotate(180deg);
}

/* Linea hover e pallini divisori nel menu */
[data-theme="dark"] nav a::after {
    background-color: #fff !important;
}

[data-theme="light"] nav a::after {
    background-color: #111 !important;
}

/* Rimuovi le vecchie regole dei pallini */
nav ul li:not(:last-child):after,
nav > ul > li:not(:last-child):after {
    display: none; /* Disabilitiamo tutte le vecchie regole */
}

/* Nuova regola unica per i pallini */
.main-header nav > ul > li:not(:last-child):after {
    content: '•';
    margin: 0 15px;
    opacity: 0.7;
    color: inherit; /* Eredita il colore dal parent */
}

/* Sottomenu - regole semplificate */
.main-header .submenu {
    position: absolute;
    top: calc(100% + 6px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 100px;
    background: rgba(255, 255, 255, 0.95);
    backdrop-filter: blur(12px);
    border-radius: 12px;
    padding: 12px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.1);
    opacity: 0;
    display: none;
    transition: all 0.3s ease;
    z-index: 1000; /* Aggiunto z-index */
}

/* Tema dark per il sottomenu */
.main-header[data-theme="dark"] .submenu,
[data-theme="dark"] .main-header .submenu {
    background: rgba(0, 0, 0, 0.95);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.main-header[data-theme="dark"] .submenu a,
[data-theme="dark"] .main-header .submenu a {
    color: #fff !important;
}

/* Tema light per il sottomenu */
.main-header[data-theme="light"] .submenu,
[data-theme="light"] .main-header .submenu {
    background: rgba(255, 255, 255, 0.95);
}

.main-header[data-theme="light"] .submenu a,
[data-theme="light"] .main-header .submenu a {
    color: #111 !important;
}

/* Colori dei pallini per i temi */
[data-theme="dark"] nav > ul > li:not(:last-child):after {
    color: #fff;
}

[data-theme="light"] nav > ul > li:not(:last-child):after {
    color: #111;
}

/* Sottomenu nella index - versione corretta */
.main-header[data-theme="dark"] .submenu {
    background: rgba(0, 0, 0, 0.95);
}

.main-header[data-theme="dark"] .submenu a {
    color: #fff !important;
}

/* Display del submenu con maggiore specificità */
.main-header .has-submenu:hover .submenu {
    display: block;
    opacity: 1;
}

/* Stili specifici per il submenu mobile */
.mobile-menu .submenu {
    position: static !important;
    transform: none !important;
    background: none !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 5px 0 !important;
    min-width: auto !important;
    backdrop-filter: none !important;
    display: block !important;
    opacity: 1 !important;
}

.mobile-menu .submenu li {
    margin: 5px 0 !important;
}

.mobile-menu .submenu a {
    font-size: 20px !important;
    padding: 5px 0 !important;
    opacity: 0.7 !important;
}

/* Rimuovi effetti hover nel mobile */
.mobile-menu .has-submenu:hover .submenu {
    transform: none !important;
    opacity: 1 !important;
}

.mobile-menu .has-submenu > a {
    margin-bottom: 5px;
}

/* Forza il colore bianco per il logo nel footer dark */
.main-footer[data-theme="dark"] .logo-fill {
    fill: #fff !important;
}

/* OVERRIDE FINALE - Assicura colori corretti menu mobile */
body.theme-dark .mobile-menu a,
body.theme-dark .mobile-menu ul li a,
body.theme-dark .mobile-menu li a,
body.theme-dark .mobile-menu .submenu a {
    color: #fff !important;
}

body.theme-light .mobile-menu a,
body.theme-light .mobile-menu ul li a,
body.theme-light .mobile-menu li a,
body.theme-light .mobile-menu .submenu a {
    color: #111 !important;
}