/* ═══════════════════════════════════════════════════════════════
   MOBILE NAVIGATION — hamburger + overlay
   Visibile solo sotto 720px. Su desktop tutto resta come prima.
   ═══════════════════════════════════════════════════════════════ */

/* Hamburger button: nascosto su desktop, visibile su mobile */
.mx-hamburger{
  display:none;
  position:relative;z-index:60;
  width:44px;height:44px;
  background:transparent;border:0;cursor:pointer;
  padding:0;margin:0;
}
.mx-hamburger .bar{
  display:block;position:absolute;left:9px;right:9px;
  height:2px;background:#fff;border-radius:2px;
  transition:transform .28s ease, top .28s ease, opacity .2s ease;
}
.mx-hamburger .bar:nth-child(1){top:14px}
.mx-hamburger .bar:nth-child(2){top:21px}
.mx-hamburger .bar:nth-child(3){top:28px}
.mx-hamburger.is-open .bar{background:#fff}
.mx-hamburger.is-open .bar:nth-child(1){top:21px;transform:rotate(45deg)}
.mx-hamburger.is-open .bar:nth-child(2){opacity:0}
.mx-hamburger.is-open .bar:nth-child(3){top:21px;transform:rotate(-45deg)}

/* Mobile nav overlay full-screen */
.mx-mobile-nav{
  position:fixed;inset:0;z-index:55;
  background:rgba(10,10,10,.97);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  display:flex;flex-direction:column;
  padding:96px 28px 40px;
  opacity:0;visibility:hidden;
  transform:translateY(-12px);
  transition:opacity .3s ease, transform .3s ease, visibility .3s;
  overflow-y:auto;
}
.mx-mobile-nav.is-open{
  opacity:1;visibility:visible;
  transform:translateY(0);
}

.mx-mobile-nav nav{
  display:flex;flex-direction:column;gap:6px;
  margin-bottom:32px;
}
.mx-mobile-nav nav a{
  display:block;padding:18px 4px;
  color:#fff;text-decoration:none;
  font-family:var(--font-display, 'Cormorant Garamond', serif);
  font-weight:300;font-size:1.85rem;line-height:1.2;
  border-bottom:1px solid rgba(255,255,255,.10);
  transition:color .2s, padding-left .25s ease;
}
.mx-mobile-nav nav a:hover,
.mx-mobile-nav nav a:active{color:var(--gold, #FFB830);padding-left:12px}
.mx-mobile-nav nav a.is-current{color:var(--gold, #FFB830)}

/* Language picker mobile (grid 2 colonne) */
.mx-mobile-lang{
  margin-top:auto;padding-top:24px;
  border-top:1px solid rgba(255,255,255,.10);
}
.mx-mobile-lang .label{
  font-size:11px;letter-spacing:.24em;text-transform:uppercase;
  color:rgba(255,255,255,.5);font-weight:700;
  display:block;margin-bottom:14px;
}
.mx-mobile-lang .grid{
  display:grid;grid-template-columns:1fr 1fr;gap:10px;
}
.mx-mobile-lang button{
  display:flex;align-items:center;gap:10px;
  padding:14px 14px;
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.12);
  border-radius:3px;
  color:#fff;font-size:14px;font-weight:500;
  cursor:pointer;
  transition:background .2s, border-color .2s;
}
.mx-mobile-lang button:hover,
.mx-mobile-lang button:active{
  background:rgba(255,184,48,.10);
  border-color:rgba(255,184,48,.45);
}
.mx-mobile-lang button.is-current{
  background:rgba(255,184,48,.18);
  border-color:var(--gold, #FFB830);
  color:var(--gold, #FFB830);
}
.mx-mobile-lang button .flag{font-size:18px;line-height:1}
.mx-mobile-lang button .code{
  margin-left:auto;font-size:10px;letter-spacing:.16em;
  color:rgba(255,255,255,.5);font-weight:700;
}
.mx-mobile-lang button.is-current .code{color:var(--gold, #FFB830)}

/* Body lock quando il menu è aperto */
body.mx-nav-open{overflow:hidden;touch-action:none}

/* ═══ Breakpoint ═══ */
@media (max-width:720px){
  .mx-hamburger{display:block !important}
  /* Nasconde la nav desktop e il selettore lingua desktop */
  .topbar > nav{display:none !important}
  .topbar .lang-wrap{display:none !important}
  /* Compattare la topbar */
  .topbar{padding:14px 18px !important}
  .topbar .right{gap:8px !important}
  /* Logo leggermente più piccolo */
  .topbar .logo,.topbar .logo img{height:46px !important}
}

/* Su desktop, nascondi sempre il mobile nav (anche se per errore restasse "open") */
@media (min-width:721px){
  .mx-mobile-nav{display:none !important}
}