/* nav-override.css — R25h CLEAN (solo NAV, niente debug, niente doppioni) */
/* R25i — FIX definitivo hamburger: mobile fino a 919px, vince contro qualsiasi CSS di pagina */
@media (max-width: 992px){
  html body nav[data-nav="1"],
  html body nav[data-nav="1"] .container{
    overflow: visible !important;
    position: relative !important;
  }

  /* default chiuso */
  html body nav[data-nav="1"] ul#nav-menu,
  html body nav[data-nav="1"] ul.menu{
    display: none !important;
  }

  /* aperto */
  html body nav[data-nav="1"] ul#nav-menu.open,
  html body nav[data-nav="1"] ul.menu.open{
    display: flex !important;
    flex-direction: column !important;
    width: min(520px, 92%) !important;
    max-width: 520px !important;
    margin: .35rem auto 0 !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: none !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
  }
}

/* R25k2 — mobile: centra davvero la search + input full width */
@media (max-width: 640px){
  /* evita spazi strani verticali */
  html body header.site-header nav[data-nav="1"] .container{
    justify-content: flex-start !important;
  }

  /* centra il blocco search come flex-item */
  html body header.site-header nav[data-nav="1"] .nav-link.search{
    display: block !important;
    width: min(520px, 92%) !important;
    max-width: 520px !important;

    margin-left: auto !important;
    margin-right: auto !important;

    align-self: center !important;   /* vince contro stretch */
    flex: 0 0 auto !important;
  }

  /* forza layout “a blocchi” così l’input non resta microscopico */
  html body header.site-header nav[data-nav="1"] .nav-link.search form{
    display: block !important;
    width: 100% !important;
  }

  html body header.site-header nav[data-nav="1"] .nav-link.search input{
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    box-sizing: border-box !important;
  }

  /* la container era “stretta”: la portiamo alla colonna che vuoi davvero */
  html body nav[data-nav="1"] > .container,
  html body nav[data-nav="1"] .container{
    width: min(520px, 92%) !important;
    max-width: 520px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important; /* vince su space-between */
  }

  /* search occupa tutta la container (che ora è centrata e larga) */
  html body nav[data-nav="1"] .nav-link.search{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important; /* vince su stretch */
    flex: 0 0 auto !important;
  }

  html body nav[data-nav="1"] .nav-link.search form{
    width: 100% !important;
    display: block !important;
  }

  html body nav[data-nav="1"] .nav-link.search input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }

  html body nav[data-nav="1"] #nav-toggle,
  html body nav[data-nav="1"] .nav-toggle,
  html body nav[data-nav="1"] [data-nav-toggle="1"]{
    width: clamp(160px, 40%, 240px) !important;
    max-width: 240px !important;

    display: inline-flex !important;
    justify-content: center !important;
    align-self: center !important;

    margin: .25rem auto .55rem !important; /* stacco dal blocco cerca */
    padding: .55rem .95rem !important;
  }
}

/* R25k3 — mobile: container più larga + search centrata + input full width */
/* R25k4 — mobile: bottone Menu più “presente” (≈40%) e centrato */
/* R25k5 — mobile+tablet: layout nav coerente fino a 919px (NO “zona morta”) */
@media (min-width: 641px) and (max-width: 992px){

  /* container nav centrata e “larga” (ottimo anche a 700–900px) */
  html body nav[data-nav="1"] > .container,
  html body nav[data-nav="1"] .container{
    width: min(680px, 92%) !important;
    max-width: 680px !important;
    margin-left: auto !important;
    margin-right: auto !important;

    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: flex-start !important;
  }

  /* bottone Menu più presente */
  html body nav[data-nav="1"] #nav-toggle,
  html body nav[data-nav="1"] .nav-toggle,
  html body nav[data-nav="1"] [data-nav-toggle="1"]{
    width: clamp(160px, 40%, 280px) !important;
    max-width: 280px !important;

    display: inline-flex !important;
    justify-content: center !important;
    align-self: center !important;

    margin: .25rem auto .55rem !important;
    padding: .55rem .95rem !important;
  }

  /* search full width */
  html body nav[data-nav="1"] .nav-link.search{
    width: 100% !important;
    max-width: 100% !important;
    margin-left: auto !important;
    margin-right: auto !important;
    align-self: center !important;
    flex: 0 0 auto !important;
  }

  html body nav[data-nav="1"] .nav-link.search form{
    width: 100% !important;
    display: block !important;
  }

  html body nav[data-nav="1"] .nav-link.search input{
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    display: block !important;
    box-sizing: border-box !important;
  }
}

/* R25k6 — desktop: nav SEMPRE su una riga (fix “zona morta” 920px+) */
@media (min-width: 993px){

  /* container in ROW, niente column/space-between */
  html body nav[data-nav="1"] .nav-link.container,
  html body nav[data-nav="1"] > .container,
  html body nav[data-nav="1"] .container{
    display:flex !important;
    flex-direction:row !important;
    flex-wrap:nowrap !important;
    align-items:center !important;
    justify-content:space-between !important;
    height:auto !important;
  }

  /* hamburger OFF in desktop (anche se qualche CSS lo riaccende) */
  html body nav[data-nav="1"] #nav-toggle,
  html body nav[data-nav="1"] .nav-toggle,
  html body nav[data-nav="1"] [data-nav-toggle="1"]{
    display:none !important;
  }

  /* menu sempre visibile e centrato */
  html body nav[data-nav="1"] ul#nav-menu,
  html body nav[data-nav="1"] ul.menu{
    display:flex !important;
    flex:1 1 auto !important;
    justify-content:center !important;
    align-items:center !important;
    margin:0 !important;
    padding:0 !important;
    gap:clamp(12px, 1vw, 20px) !important;
  }

  /* search a destra */
  html body nav[data-nav="1"] .nav-link.search{
    order:3 !important;
    margin-left:auto !important;
    align-self:center !important;
    flex:0 0 auto !important;
  }
}

/* R25k8-topbar-white — override finale (nav-override è caricato dopo vi-extra/brand.override) */
.site-header .topbar{
  background:#fff !important;
  color:#0b2a35 !important;
}
.site-header .topbar a{ color:inherit !important; }
.site-header .topbar .brand-word{ color:#0b2a35 !important; }
.site-header .topbar .brand-word .inci{ color: var(--accent,#22c55e) !important; }
.site-header .topbar .top-social .sc img{ filter:none !important; }

/* R25k8b-social-white — cerchi social bianchi "candido" */
.site-header .topbar .top-social .sc{
  background:#fff !important;
  border: 1px solid rgba(11,42,53,.12) !important;
  box-shadow: 0 1px 2px rgba(0,0,0,.08) !important;
}
.site-header .topbar .top-social .sc:hover{
  background:#fff !important;
  border-color: rgba(11,42,53,.18) !important;
}

/* anche i bottoni tema, se li vuoi bianchi come i social */
.site-header .topbar .vi-theme-toggle .vi-theme-btn{
  background:#fff !important;
  border: 1px solid rgba(11,42,53,.12) !important;
}

/* R25k8c-topbar-fullwhite — banda bianca full width (layout invariato) */
.site-header .topbar{
  background:#fff !important;
  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax) !important;
}

/* separatore sotto la topbar: linea full width su bianco */
.site-header .top-sep{
  border:0 !important;
  height:1px !important;
  background: rgba(11,42,53,.18) !important;
  box-shadow: 0 0 0 100vmax #fff !important;
  clip-path: inset(0 -100vmax) !important;
}

/* R25k8d-menu-1row — desktop: mai menu su 2 righe (annulla wrap/width/order del breakpoint) */
@media (min-width: 993px){
  /* container: non deve wrappare */
  .nav-link.navbar .nav-link.container,
  html body nav[data-nav="1"] > .container,
  html body nav[data-nav="1"] .container{
    flex-wrap: nowrap !important;
  }

  /* menu: una riga fissa */
  .nav-link.navbar .nav-link.menu,
  html body nav[data-nav="1"] ul#nav-menu,
  html body nav[data-nav="1"] ul.menu{
    order: 0 !important;
    width: auto !important;
    flex-wrap: nowrap !important;
    justify-content: center !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    -webkit-overflow-scrolling: touch;
  }

  /* scrollbar invisibile (ma lo scroll resta) */
  .nav-link.navbar .nav-link.menu::-webkit-scrollbar,
  html body nav[data-nav="1"] ul#nav-menu::-webkit-scrollbar,
  html body nav[data-nav="1"] ul.menu::-webkit-scrollbar{
    display:none;
  }

  /* search: un filo più compatta per non “spingere giù” roba */
  .nav-link.navbar .nav-link.search,
  html body nav[data-nav="1"] .nav-link.search{
    margin-left: auto !important;
    justify-content: flex-end !important;
    flex: 0 0 auto !important;
    min-width: 0 !important;
  }
  .nav-link.navbar .nav-link.search input,
  html body nav[data-nav="1"] .nav-link.search input{
    min-width: 160px !important;
    width: clamp(160px, 20vw, 320px) !important;
    max-width: 360px !important;
  }
}

/* R25k8e-menu-1row-641-992 — evita menu su 2 righe nel range “laptop” */
@media (max-width: 992px) and (min-width: 641px){

  /* menu: NON andare a capo (se serve, scroll) */
  .nav-link.navbar .nav-link.menu,
  html body nav[data-nav="1"] ul#nav-menu,
  html body nav[data-nav="1"] ul.menu{
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    width: auto !important;
    order: 0 !important;
    justify-content: center !important;
    -webkit-overflow-scrolling: touch;
  }

  /* search: resta a destra, compatta */
  .nav-link.navbar .nav-link.search,
  html body nav[data-nav="1"] .nav-link.search{
    order: 0 !important;
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: auto !important;
    justify-content: flex-end !important;
  }
  .nav-link.navbar .nav-link.search input,
  html body nav[data-nav="1"] .nav-link.search input{
    min-width: 140px !important;
    width: clamp(140px, 18vw, 260px) !important;
    max-width: 280px !important;
  }

  /* toggle: nel range laptop non serve (se esiste) */
  .nav-link.navbar .nav-link.nav-toggle{
    display: none !important;
  }
}

/* R25k8f-navbar-single-bg — elimina doppio fondo + righe (usa il bg della .site-header .navbar) */
.site-header .navbar{
  border-top: 0 !important;
  border-bottom: 0 !important;
}

.nav-link.navbar{
  background: transparent !important;   /* lascia vedere il bg dietro */
  border-top: 0 !important;
  border-bottom: 0 !important;
}


/* R25k8g-navbar-single-surface — 1 solo fondo, zero righe, spegne outline */
html body header.site-header .navbar,
html body header.vx-header .navbar,
html body .site-header .navbar,
html body .vx-header .navbar{
  width: 100% !important;
  max-width: none !important;
  margin: 0 !important;

  /* fallback solido + gradient (se supportato) */
  background: var(--vi-bg-header, #0e2a38) !important;
  background: linear-gradient(
    180deg,
    var(--vi-bg-header, #0e2a38) 0%,
    color-mix(in srgb, var(--vi-bg-header, #0e2a38) 80%, #000) 100%
  ) !important;

  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;

  /* angoli “leggermente curvi” */
  border-radius: 0 0 16px 16px;
  overflow: hidden;
}

html body header.site-header nav.nav-link.navbar,
html body header.vx-header nav.nav-link.navbar,
html body .site-header nav.nav-link.navbar,
html body .vx-header nav.nav-link.navbar,
html body nav.nav-link.navbar{
  background: transparent !important; /* usa SOLO il bg del wrapper sopra */
  border-top: 0 !important;
  border-bottom: 0 !important;
  box-shadow: none !important;

}

/* Se la riga bianca viene dalla topbar */
html body header.site-header .topbar,
html body header.vx-header .topbar,
html body .site-header .topbar,
html body .vx-header .topbar{
  border-bottom: 0 !important;
}

/* R25k8h-hide-hr-seps — elimina le righe <hr> del header (top-sep e vi-sep) */
html body header.site-header hr.top-sep,
html body header.vx-header hr.top-sep,
html body header.site-header hr.vi-sep,
html body header.vx-header hr.vi-sep,
html body .site-header hr.top-sep,
html body .vx-header hr.top-sep,
html body .site-header hr.vi-sep,
html body .vx-header hr.vi-sep{
  display: none !important;
  height: 0 !important;
  border: 0 !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* R25k8i-topbar-1row-561-992 — topbar sempre su 1 riga (logo | social | lingue) */
@media (max-width: 992px) and (min-width: 561px){

  html body header.site-header .topbar .container,
  html body header.vx-header .topbar .container,
  html body .site-header .topbar .container,
  html body .vx-header .topbar .container{
    display: grid !important;
    grid-template-columns: auto 1fr auto !important;
    align-items: center !important;
    gap: .6rem !important;
    min-width: 0 !important;
  }

  /* centro: social (non va a capo) */
  html body header.site-header .topbar .top-social,
  html body header.vx-header .topbar .top-social,
  html body .site-header .topbar .top-social,
  html body .vx-header .topbar .top-social{
    justify-self: center !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .45rem !important;
    min-width: 0 !important;
  }

  /* destra: lingue (non va a capo) */
  html body header.site-header .topbar .top-lang,
  html body header.vx-header .topbar .top-lang,
  html body .site-header .topbar .top-lang,
  html body .vx-header .topbar .top-lang{
    justify-self: end !important;
    display: flex !important;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
    gap: .35rem !important;
  }

  /* compatta leggermente i pill lingua */
  html body .topbar .top-lang .lang-item{
    padding: .18rem .45rem !important;
  }
}

/* R25k8g-topbar-mobile-tune — aggancio breakpoint 640 già presente */
@media (max-width: 640px) and (hover: none) and (pointer: coarse){

  html body header.site-header .topbar,
  html body header.vx-header .topbar,
  html body .site-header .topbar,
  html body .vx-header .topbar{
    margin: 0 !important;
    padding: .30rem .55rem !important; /* normalizza altezza topbar */
  }

  html body header.site-header .topbar .container,
  html body header.vx-header .topbar .container,
  html body .site-header .topbar .container,
  html body .vx-header .topbar .container{
    gap: .35rem !important;
    align-items: center;
    flex-wrap: wrap; /* evita “sbordamenti” su device stretti */
  }

  html body .site-header .topbar a,
  html body .vx-header .topbar a,
  html body .site-header .topbar button,
  html body .vx-header .topbar button{
    line-height: 1.15;
  }
}

@media (max-width: 640px){

  /* Topbar: evita stack verticale e mantiene tutto in riga */
  html body header.site-header .topbar .container,
  html body header.vx-header   .topbar .container,
  html body .site-header .topbar .container,
  html body .vx-header   .topbar .container{
    align-items: center !important;
    flex-wrap: nowrap !important;
    gap: .35rem !important;
  }

  /* Lingue: forzate in riga (niente colonna di bandiere) */
  html body header.site-header .topbar .top-lang,
  html body header.vx-header   .topbar .top-lang,
  html body .site-header .topbar .top-lang,
  html body .vx-header   .topbar .top-lang{
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: center !important;
    gap: .25rem !important;
  }

  html body .topbar .top-lang a.lang-item{
    display: inline-flex !important;
    align-items: center !important;
    line-height: 1 !important;
  }
}

/* R25k8L-topbar-stack-641-992 — quando stringi su PC/tablet, topbar passa a layout “mobile” */
@media (max-width: 992px) and (min-width: 641px){
  html body header.site-header .topbar,
  html body .site-header .topbar,
  html body header.vx-header .topbar,
  html body .vx-header .topbar{
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    gap: .35rem !important;
    padding: .35rem .55rem !important;
  }

  html body .site-header .topbar a.brand,
  html body .vx-header   .topbar a.brand{
    justify-content: center !important;
  }

  html body .site-header .topbar .top-lang,
  html body .vx-header   .topbar .top-lang,
  html body .site-header .topbar .top-social,
  html body .vx-header   .topbar .top-social,
  html body .site-header .topbar .vi-theme-toggle,
  html body .vx-header   .topbar .vi-theme-toggle{
    justify-content: center !important;
    flex-wrap: wrap !important;
  }
}