/* ============================================================
   Header e footer globali — moduli Divi nativi
   Il menu è un menu WordPress vero: si modifica da Aspetto → Menu
   ============================================================ */

/* --- topbar --- */
.vs-topbar .et_pb_row{padding:0!important;display:flex;align-items:center}
.vs-topbar .et_pb_column{display:flex;align-items:center}
.vs-topbar .et_pb_column{margin-bottom:0!important}
.vs-topbar .et_pb_text{margin-bottom:0!important}
.vs-tb p,.vs-tb-left,.vs-tb-right{margin:0;padding:0;font-size:13px;line-height:1.5;color:#cfe3f2}
.vs-tb .vs-tb-left{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.vs-tb-left a{color:#fff;font-weight:600;white-space:nowrap}
.vs-tb-left a:hover{color:#7fc86f}
.vs-tb .vs-tb-right{display:flex;align-items:center;justify-content:flex-end;gap:14px;
text-align:right;margin:0;width:100%}
.vs-tb-txt{color:#9fd0f5;font-weight:600;letter-spacing:.02em;font-size:13px;
line-height:1.4;white-space:nowrap}
.vs-tb-lang{display:inline-flex;align-items:center;flex:0 0 auto}
.vs-tb-lang .vs-lang{margin:0!important}
.vs-topbar .et_pb_column:last-child{justify-content:flex-end}

/* --- navbar --- */
.vs-navbar{border-bottom:1px solid #e3e9ee}
.vs-navbar .et_pb_row{padding:0!important;display:flex;align-items:center}
.vs-navbar .et_pb_column{margin-bottom:0!important;display:flex;align-items:center}
.vs-logo{margin-bottom:0!important}
.vs-logo img{height:52px;width:auto;max-height:52px}
.vs-menu{width:100%;margin-bottom:0!important}
.vs-menu .et_pb_menu__wrap{justify-content:flex-end}
.vs-menu .et_pb_menu__wrap,.vs-menu .et_pb_menu__menu,
.vs-menu .et_pb_menu__menu>nav,.vs-menu .et_pb_menu__menu>nav>ul{
display:flex;align-items:center}
/* le voci hanno altezze diverse per via del pulsante: si centrano tutte */
.vs-menu .et_pb_menu__menu>nav>ul>li{padding:0 0 0 26px;display:flex;align-items:center}
.vs-menu .et_pb_menu__menu>nav>ul>li>a{font-size:14.5px;padding-bottom:0;
display:flex;align-items:center;transition:color .15s}
.vs-menu .et_pb_menu__menu>nav>ul>li>a:hover{color:#1a6fb4!important;opacity:1}
.vs-menu .et_pb_menu__menu>nav>ul>li.current-menu-item>a{color:#1a6fb4!important}
/* Ultima voce resa a pulsante. Divi emette
   `.et-db #et-boc .et-l .et_pb_menu_0_tb_header.et_pb_menu ul li a {color:...!important}`:
   contiene un ID, quindi per vincere serve la stessa impalcatura di selettore. */
.et-db #et-boc .et-l .et_pb_menu.vs-menu ul li:last-child a,
.et-db #et-boc .et-l .et_pb_menu.vs-menu ul li:last-child a:hover,
.et-db #et-boc .et-l .et_pb_menu.vs-menu ul li:last-child.current-menu-item a,
.vs-menu ul.et-menu>li:last-child>a{background:#1a6fb4;color:#ffffff!important;
padding:11px 22px;border-radius:999px;line-height:1.2;opacity:1!important}
.et-db #et-boc .et-l .et_pb_menu.vs-menu ul li:last-child a:hover{background:#14507e}

/* GRIGLIA UNICA: header, footer e contenuto devono partire e finire sullo
   stesso asse. Le righe del contenuto usavano il default di Divi (1080px),
   quelle dell'header 1240px: i bordi non coincidevano di ~190px. */
.vs-sec>.et_pb_row{width:90%!important;max-width:1240px!important}

/* header sticky sul wrapper del Theme Builder */
.et-l--header{position:sticky;top:0;z-index:200}

/* --- il menu delle lingue deve stare SOPRA la barra del logo ---
   Il dropdown aveva già z-index 99999, ma non serviva a niente: Divi dà a
   sezioni e righe un proprio z-index, quindi quel valore valeva solo DENTRO
   il contesto di impilamento della topbar. La sezione della navbar, disegnata
   dopo e con z-index pari, gli finiva sopra. Si risolve alzando la sezione
   intera, non il dropdown: da qui in giù l'ordine è quello che ci aspettiamo.
   Vale identico su desktop e mobile, la causa è la stessa. */
.vs-topbar{position:relative;z-index:30}
.vs-navbar{position:relative;z-index:20}
/* Un solo `overflow:hidden` su un antenato ritaglierebbe comunque il menu,
   e Divi lo mette in più punti a seconda delle impostazioni della sezione. */
.vs-topbar,.vs-topbar .et_pb_row,.vs-topbar .et_pb_column,
.vs-topbar .et_pb_text,.vs-topbar .et_pb_text_inner,
.vs-tb-right,.vs-tb-lang{overflow:visible!important}
.vs-tb-lang .vs-lang{position:relative;z-index:1}

@media (max-width:980px){
  .vs-topbar .et_pb_column,.vs-navbar .et_pb_column{width:100%!important;margin-right:0!important}
  .vs-tb .vs-tb-left{gap:16px}
  .vs-tb-right{text-align:left;margin-top:4px!important}
  /* logo e hamburger sulla stessa riga, non incolonnati */
  .vs-navbar .et_pb_row{flex-wrap:nowrap;justify-content:space-between}
  .vs-navbar .et_pb_column:first-child{width:auto!important;flex:1}
  .vs-navbar .et_pb_column:last-child{width:auto!important;flex:0 0 auto}
  .vs-menu{width:auto}
  .vs-navbar .et_pb_row{flex-wrap:wrap}
  .vs-menu .et_pb_menu__wrap{justify-content:flex-start}
  .vs-menu .et_mobile_nav_menu{margin:0}
  .vs-menu .et_pb_menu__menu{display:none}

  /* --- tendina mobile a tutta larghezza ---
     La colonna del menu è larga quanto l'hamburger (serve per tenerlo sulla
     stessa riga del logo). Divi però dà al menu mobile `width:100%` rispetto
     a quella colonna: veniva fuori una striscia di ~60px appiccicata a destra,
     mezza fuori schermo, con le voci spezzate su due righe.
     La tendina va quindi ancorata alla RIGA, non alla colonna: si azzera il
     posizionamento degli intermedi così `position:absolute` risale fino a
     `.vs-navbar .et_pb_row`. */
  .vs-navbar .et_pb_row{position:relative}
  .vs-navbar,.vs-navbar .et_pb_row,.vs-navbar .et_pb_column,
  .vs-menu,.vs-menu .et_pb_menu__wrap{overflow:visible!important}
  /* Vanno azzerati TUTTI gli intermedi: fra la tendina e la riga Divi mette
     sei livelli e ben quattro sono `position:relative` (colonna, modulo,
     inner_container, wrap). Basta che ne resti uno e l'absolute si ancora a
     quello, largo quanto l'hamburger — il primo tentativo falliva così. */
  .vs-navbar .et_pb_column:last-child,
  .vs-menu.et_pb_menu,.vs-menu .et_pb_menu_inner_container,
  .vs-menu .et_pb_menu__wrap,.vs-menu .et_mobile_nav_menu,
  .vs-menu .mobile_nav{position:static!important}
  .vs-menu .et_mobile_menu{position:absolute!important;top:100%;left:0;right:0;
  width:auto!important;margin:0;padding:8px 0;background:#fff;
  border-top:3px solid #1a6fb4;box-shadow:0 26px 50px -24px rgba(13,35,53,.5);
  max-height:calc(100vh - 150px);overflow-y:auto}
  .vs-menu .et_mobile_menu li{border:0}
  .vs-menu .et_mobile_menu li a{padding:14px 22px!important;font-size:15.5px!important;
  line-height:1.35!important;white-space:normal;border-bottom:1px solid #e3e9ee}
  .vs-menu .et_mobile_menu li:last-child a{border-bottom:0}
  /* "Contatti" resta il pulsante, ma qui a tutta larghezza: la pillola stretta
     finiva tagliata dal bordo della tendina. */
  .et-db #et-boc .et-l .et_pb_menu.vs-menu .et_mobile_menu li:last-child a,
  .vs-menu .et_mobile_menu li:last-child>a{display:block;margin:8px 16px 4px;
  padding:14px 18px!important;text-align:center;border-radius:999px;
  background:#1a6fb4;color:#fff!important}
}

@media (max-width:640px){
  /* Topbar compatta: a 320px occupava 174px di altezza su 279px di header.
     Restano il telefono e il selettore lingua; email e dicitura, che sul
     telefono sono ridondanti, si nascondono (l'email è nel footer e in
     pagina contatti, il telefono è cliccabile). */
  .vs-topbar{padding:6px 0!important}
  .vs-topbar .et_pb_row{display:flex;align-items:center}
  .vs-topbar .et_pb_column{width:auto!important;margin-bottom:0!important}
  .vs-tb-left a[href^="mailto"]{display:none}
  .vs-tb-left a{margin:0;font-size:12.5px}
  /* La dicitura è ridondante sul telefono (c'è nel footer e in Contatti):
     restano il numero a sinistra e il selettore lingua a destra, su una riga. */
  .vs-tb .vs-tb-txt{display:none}
  .vs-topbar .et_pb_column:first-child{flex:1}
  .vs-topbar .et_pb_column:last-child{flex:0 0 auto}
  .vs-tb .vs-tb-right{justify-content:flex-end;gap:0}
  .vs-lang{margin:0!important}
  .vs-lang-trg{padding:5px 11px;font-size:11.5px;min-height:30px}
  /* logo più contenuto */
  .vs-logo img{height:42px;max-height:42px}
  .vs-navbar{padding:6px 0!important}
}

/* --- footer --- */
.vs-footer-top .et_pb_column{margin-bottom:24px!important}
/* !important necessario: la regola generica `.vs-sec h3{color:var(--vs-ink)}`
   colorerebbe di scuro anche i titoli su fondo scuro (misurato: 1.02:1). */
.vs-footer-top .vs-f-brand,.vs-f-brand{font-family:'Bricolage Grotesque',sans-serif;
font-weight:600;font-size:21px;color:#ffffff!important;margin:0;padding:0}
.vs-f-payoff{font-size:14.5px;line-height:1.6;color:#cddeeb;margin:10px 0 0}
.vs-f-tit{font-size:11.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
color:#9fdb90;margin:0 0 12px}
.vs-f-txt{font-size:14px;line-height:1.9;color:#b9cddc;margin:0}
.vs-f-txt a{color:#b9cddc}
.vs-f-txt a:hover{color:#fff}
.vs-menu-footer{margin-bottom:0!important}
.vs-menu-footer .et_pb_menu__wrap{justify-content:flex-start}
.vs-menu-footer .et_pb_menu__menu>nav>ul{display:block}
.vs-menu-footer .et_pb_menu__menu>nav>ul>li{display:block;padding:0;margin:0 0 8px}
.vs-menu-footer .et_pb_menu__menu>nav>ul>li>a{font-size:14px}
.vs-menu-footer .et_mobile_nav_menu{display:none}
.vs-menu-footer .et_pb_menu__menu{display:block!important}
.vs-footer-bottom{border-top:1px solid #1d4260}
.vs-footer-bottom .et_pb_row{padding-top:20px!important}
.vs-f-legal{font-size:12.5px;color:#a8bccd;margin:0}
.vs-f-legal a{color:#a8bccd;text-decoration:underline}
.vs-f-legal a:hover{color:#ffffff}