/* =========================================================
   MENU / HEADER – versione pulita a 2 righe
   Palette: bianco / grigi / #019DDF
   ========================================================= */

:root{
  --header-bg: #ffffff;

}

/* =========================================================
   HEADER WRAPPER
   ========================================================= */
.site-header{
  background: var(--header-bg);
  border-bottom: 1px solid var(--line);
  position: relative;
  z-index: 100;
}
.header-inner{
  display:flex;
  align-items:center;
  justify-content:space-between;
  min-height:64px;
}

.header-right{
  display:flex;
  gap:8px;
  align-items:center;
}
/* =========================================================
   RIGA 1 – TOPBAR (logo + payoff + CTA compatte)
   ========================================================= */
.topbar{
  background:#fff;
  border-bottom: 1px solid var(--line);
}

.topbar-wrap{
  height:50px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* BRAND */

/* ===============================
   LOGO SIZE CONTROL
   Modifica qui altezza/larghezza
================================*/
.logo-block{
  display: flex;
  flex-direction: column;
  align-items: flex-start; /* coerente con layout B2B */
  line-height: 1.2;
}

.logo-tagline{
  font-size: 0.78rem;
  color: #6b7280; /* grigio elegante */
  margin-top: 2px;
  letter-spacing: 0.04em;
  white-space: nowrap;
}
.logo-block img{
  max-height: 30px;   /* prova 32–40px */
  width: auto;
}

/* CTA COMPATTE NELLA TOPBAR */
.topbar-cta{
  display:flex;
  align-items:center;
  gap:8px;
}

/* Bottone "Servizi" */
.cta-mini{
  text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  background:#f1f5f9;
  border:1px solid #d1d5db;
  color:#111;
  transition:.18s;
}
.cta-mini:hover{
  border-color: var(--accent);
  background:#fff;
  box-shadow:0 0 0 3px var(--accent-soft);
}

/* WhatsApp button */
.btn-wa-hd{
text-decoration:none;
  font-size:14px;
  font-weight:700;
  padding:6px 10px;
  border-radius:10px;
  background:#126334;
  color:#ffffff !important;
  border:1px solid #126334;   /* STESSO colore del background */
  transition:.18s
}

.btn-wa-hd:hover{
  background: #0E4F29;
  transform: translateY(-1px);
}
/* Bottone "Prenota" */
.cta-mini-primary{
  text-decoration:none;
  font-size:14px;
  font-weight:800;
  padding:6px 12px;
  border-radius:10px;
  background: var(--accent);
  color:#fff;
  transition:.18s;
  box-shadow: 0 4px 12px rgba(1,157,223,0.30);
}
.cta-mini-primary:hover{
  background: var(--accent-dark);
  transform: translateY(-1px);
}

/* =========================================================
   RIGA 2 – MENUBAR (solo voci menu)
   ========================================================= */
.menubar{
  background: var(--bg-alt);
  overflow: hidden;   /* 🔑 BLOCCA LO SFIORAMENTO */
}

.menubar-wrap{
  display:flex;
  align-items:center;
  justify-content:center;
  padding:8px 0;
  gap:12px;
}

/* NAV */
.main-nav{
  display:flex;
  justify-content:center;
  align-items:center;
  gap:8px;
  flex-wrap:wrap;
}

/* BOTTONI MENU */
.nav-btn{
  font-family: 'Rajdhani', sans-serif;
  font-weight:700;
  font-size:17px;          /* leggermente più grande */
  letter-spacing:0.5px;    /* più tecnico */
  text-transform:uppercase; /* opzionale, più tech */
  padding:8px 16px;
  border-radius: var(--radius-pill);
  background: transparent;
  border:1px solid transparent;
  transition: all .18s ease;
}

.nav-btn:hover{
  background:#f8fafc;
  border-color:#e2e8f0;
  box-shadow:0 0 0 3px var(--accent-soft);
  transform: translateY(-1px);
  color:#000;
  text-shadow: 0 0 1px #019ddf;
}

.nav-btn.active{
  background: var(--accent-soft);
  border-color: rgba(1,157,223,0.55);
  color:#000;
  box-shadow: inset 0 0 0 1px rgba(1,157,223,0.18);
}

.desktop-only{ display:flex; }
.mobile-only{ display:none; }

@media (max-width: 768px){
  .brand-sub{ display:none; }

  .desktop-only{ display:none; }
  .mobile-only{
    display:flex;
    align-items:center;
    gap:12px;
  }
}

/* ===============================
   MOBILE DROPDOWN MENU
================================*/
.menu-toggle{
  display:none;
  background:#fff;
  border:1px solid var(--line);
  padding:8px 14px;
  border-radius:10px;
  font-weight:800;
}

.menu-cta{
  margin:14px;
  text-align:center;
  background: var(--accent);
  color:#fff;
  border-radius:12px;
  padding:14px;
  font-weight:900;
}

/* =========================================================
   VISIBILITY HELPERS
   ========================================================= */
.desktop-only{
  display:flex;
}

.mobile-only{
  display:none;
}

/* =========================================================
   MENU MOBILE – ISATECH
   ========================================================= */
.menu-toggle{
  background:#fff;
  border:1px solid var(--line);
  border-radius:10px;
  padding:8px 14px;
  font-weight:800;
  font-size:14px;
  cursor:pointer;
}

/* menu a tendina */
.mobile-menu{
  display:none;
  flex-direction:column;
  background:#ffffff;
  border-bottom:1px solid var(--line);
  box-shadow:0 12px 28px rgba(0,0,0,.12);
}

/* voci menu */
.mobile-menu a{
  display:flex;
  align-items:center;
  gap:12px;
  padding:14px 18px;
  font-size:16px;
  font-weight:700;
  text-decoration:none;
  color: var(--text);
  border-bottom:1px solid #eef1f4;
}

.mobile-menu a:hover{
  background: var(--accent-soft);
}

/* CTA finale */
.mobile-menu .menu-cta{
  margin:14px;
  background: var(--accent);
  color:#fff;
  border-radius:12px;
  padding:14px;
  font-weight:900;
  text-align:center;
}

/* =========================================================
   RESPONSIVE BEHAVIOUR
   ========================================================= */
@media (max-width: 900px){

  /* NASCONDE MENU DESKTOP */
  .menubar{
    display:none;
  }

  /* mostra bottone menu */
  .mobile-only{
    display:block;
  }

  /* mostra menu quando aperto */
  .mobile-menu.open{
    display:flex;
  }

  /* compatta topbar */
  .topbar-wrap{
    height:auto;
    padding:8px 0;
  }

  /* nasconde payoff */
  .brand-sub{
    display:none;
  }

  /* più aria sopra e sotto l’intera topbar */
  .topbar{
    padding: 12px 12px;
  }

  /* spazio verticale interno ai pulsanti */
  .topbar-cta a,
  .menu-toggle{
    padding-top: 10px;
	    margin-top: 10px;

    padding-bottom: 10px;
  }

  /* separazione visiva dai contenuti sotto */
  .site-header{
    margin-bottom: 6px;
  }
  .topbar-wrap{
    height:auto;
    padding:8px 0;
    flex-wrap:wrap;
  }
  .menubar-wrap{
    flex-wrap:wrap;
    gap:10px;
  }

  .main-nav{
    width:100%;
    justify-content:flex-start !important;
  }

}