/* ============================================================
   Selettore lingua (bandiere IT / EN) e barra di navigazione responsive
   Caricato per ultimo da tutte le pagine con il mega menu (IT ed EN).
   Soglia del menu: >= 1500px barra orizzontale, < 1500px hamburger.
   La barra completa (voci + bandiere + preventivo + telefono) richiede
   circa 1410px: sotto i 1500px di schermo non ci sta più senza tagli.
   ============================================================ */

/* ---- Bandiere ---- */
.lang-switch {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 6px;
}
/* Riquadro con bordo blu (box-shadow): la bandiera è centrata con flex.
   Proporzione 3:2 come le bandiere SVG, così riempiono il riquadro senza bande. */
.header .lang-switch .lang-flag,
.lang-flag {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  width: 27px;
  height: 18px;
  padding: 0;
  margin: 0;
  line-height: 0;
  border-radius: 3px;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(0, 51, 102, 0.22);
  opacity: 0.55;
  transition: opacity 0.15s, transform 0.15s, box-shadow 0.15s;
}
/* .header nav a>svg { margin-right: 8px } di uno.css spostava la bandiera a sinistra */
.header .lang-switch .lang-flag > svg,
.lang-flag > svg {
  display: block;
  flex: 0 0 auto;
  width: 100%;
  height: 100%;
  margin: 0 !important;
}
.header .lang-switch .lang-flag:hover,
.header .lang-switch .lang-flag:focus-visible,
.lang-flag:hover,
.lang-flag:focus-visible { opacity: 1; transform: translateY(-1px); }
.header .lang-switch .lang-flag:focus-visible,
.lang-flag:focus-visible { outline: 2px solid #0066cc; outline-offset: 2px; }
.header .lang-switch .lang-flag.is-active,
.lang-flag.is-active { opacity: 1; box-shadow: 0 0 0 2px #0066cc; }

/* ---- Modalità hamburger (portatili, tablet, smartphone) ---- */
@media (max-width: 1499px) {
  /* Barra: logo a sinistra, poi bandiere + preventivo, hamburger a destra */
  .header .nav-actions {
    display: flex !important;
    order: 1;
    margin-left: auto !important;
    gap: 12px;
    flex: 0 0 auto;
  }
  .header .menu-toggle {
    order: 2;
    margin-left: 14px !important;
    flex: 0 0 auto;
  }
  .header .nav-actions .btn-phone { display: none !important; } /* nel pannello */
  .header .nav-actions .btn-quote { margin-right: 0; }

  /* Bandiere più grandi e area di tocco estesa (circa 44x44px) */
  .lang-switch { gap: 14px; margin-right: 0; }
  .header .lang-switch .lang-flag,
  .lang-flag { width: 30px; height: 20px; }
  .lang-flag::after { content: ''; position: absolute; inset: -12px -7px; }

  /* In fondo al pannello: lingua, preventivo e telefono */
  .nav-menu-extra {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 14px 18px;
    padding: 20px 24px 28px;
    border-top: 1px solid rgba(0, 51, 102, 0.12);
  }
  .nav-menu-extra .lang-switch { flex-basis: 100%; }
  .nav-menu-extra .btn-quote { margin: 0; }
  .header .nav-menu-extra .btn-phone {
    display: inline-flex !important;
    align-items: center;
    gap: 6px;
    padding: 9px 20px;
    border-radius: 24px;
    background: linear-gradient(90deg, #003d8c, #0066cc);
    color: #fff !important;
    font-size: 15px;
    font-weight: 700;
    text-decoration: none;
    white-space: nowrap;
  }
}
/* Smartphone: in barra restano logo, bandiere e hamburger */
@media (max-width: 639px) {
  .header .nav-actions .btn-quote { display: none !important; }
  .header .menu-toggle { margin-left: 10px !important; }
}
@media (min-width: 1500px) {
  .nav-menu-extra { display: none !important; }
}