/* ============================================
   METODO ROMEO — MOBILE NAV v3.0
   STRATEGIA DEFINITIVA:
   - Hamburger button nascosto su desktop
   - Menu mobile usa position:absolute rispetto a .navbar
   - Nessun backdrop-filter su mobile (bug iOS Safari)
   - Tutto controllato da questa unica fonte
   ============================================ */

/* ══════════════════════════════════════════
   NAVBAR — z-index globale (tutte le pagine)
   Garantisce che la navbar stia sempre sopra
   qualsiasi elemento grafico (canvas, body::before, hero).
   ══════════════════════════════════════════ */
.navbar {
  z-index: 9999 !important;
  position: sticky !important;
  top: 0 !important;
  overflow: visible !important;
}
.navbar-inner {
  position: relative !important;
  overflow: visible !important;
}

/* ── HAMBURGER BUTTON (desktop: nascosto) ── */
.navbar-toggle {
  display: none;
  width: 44px;
  height: 44px;
  border: 1px solid rgba(255,255,255,0.20);
  background: rgba(255,255,255,0.06);
  border-radius: 12px;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 5px;
  padding: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
  flex-shrink: 0;
  position: relative;
  z-index: 10001;
}

.navbar-toggle span {
  display: block;
  width: 20px;
  height: 2px;
  border-radius: 999px;
  background: #ffffff;
  transition: transform 0.25s ease, opacity 0.25s ease;
  transform-origin: center;
  pointer-events: none;
}

/* Hamburger → X */
.navbar-toggle.is-active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.navbar-toggle.is-active span:nth-child(2) { opacity: 0; transform: scaleX(0); }
.navbar-toggle.is-active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* ══════════════════════════════════════════
   MOBILE — breakpoint 920px
   ══════════════════════════════════════════ */
@media (max-width: 920px) {

  /* Mostra hamburger */
  .navbar-toggle {
    display: inline-flex !important;
  }

  /* NAVBAR: sfondo solido su mobile
     backdrop-filter + position:sticky blocca i figli absolute su iOS Safari */
  .navbar {
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    background: rgba(5,14,11,0.98) !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 9999 !important;
    overflow: visible !important;
  }

  /* navbar-inner: position:relative per agganciare il menu absolute */
  .navbar-inner {
    position: relative !important;
    overflow: visible !important;
  }

  /* MENU DROPDOWN — position:fixed rispetto al viewport
     Questo bypassa qualsiasi overflow:hidden su elementi padre
     (article-hero, hero section, ecc.) che taglierebbe il menu */
  .navbar-menu {
    /* Resetta tutto dal desktop */
    display: block !important;
    list-style: none !important;
    margin: 0 !important;

    /* FIXED rispetto al viewport — immune a overflow:hidden dei parent */
    /* top viene impostato da JS (navbar.getBoundingClientRect().height)
       in modo da funzionare su TUTTE le pagine indipendentemente dal CSS */
    position: fixed !important;
    top: 84px !important;   /* fallback iniziale, JS lo sovrascrive subito */
    left: 8px !important;
    right: 8px !important;
    z-index: 99999 !important;

    /* Layout interno a colonna */
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 2px !important;
    padding: 10px !important;

    /* Aspetto */
    background: #040e0b !important;
    border: 1px solid rgba(247,198,95,0.30) !important;
    border-radius: 18px !important;
    box-shadow:
      0 24px 80px rgba(0,0,0,0.90),
      0 8px 30px rgba(0,0,0,0.70),
      0 0 0 1px rgba(0,212,170,0.06) !important;

    /* Stato CHIUSO */
    opacity: 0 !important;
    visibility: hidden !important;
    transform: translateY(-8px) !important;
    pointer-events: none !important;
    transition:
      opacity 0.22s ease,
      transform 0.22s ease,
      visibility 0.22s ease !important;

    /* Scroll se troppo alto */
    max-height: calc(100svh - 100px) !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
  }

  /* MENU APERTO */
  .navbar-menu.is-open {
    opacity: 1 !important;
    visibility: visible !important;
    transform: translateY(0) !important;
    pointer-events: auto !important;
  }

  /* Voci lista */
  .navbar-menu li {
    display: flex !important;
    width: 100% !important;
    list-style: none !important;
  }

  /* Link */
  .navbar-menu a {
    display: flex !important;
    align-items: center !important;
    width: 100% !important;
    padding: 14px 16px !important;
    border-radius: 12px !important;
    font-size: 1rem !important;
    font-weight: 700 !important;
    color: #c8dfd7 !important;
    text-decoration: none !important;
    background: transparent !important;
    border: none !important;
    letter-spacing: 0 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
    -webkit-tap-highlight-color: transparent !important;
    touch-action: manipulation !important;
    /* Assicura che i link siano cliccabili */
    cursor: pointer !important;
    position: relative !important;
    z-index: 1 !important;
  }

  .navbar-menu a:hover,
  .navbar-menu a:active {
    background: rgba(0,212,170,0.10) !important;
    color: #ffffff !important;
  }

  .navbar-menu a.active {
    color: #f7c65f !important;
    background: rgba(247,198,95,0.10) !important;
  }

  /* Rimuovi underline animato desktop */
  .navbar-menu a::after {
    display: none !important;
  }

  /* Bottone CTA */
  .navbar-menu li:last-child {
    border-top: 1px solid rgba(255,255,255,0.08) !important;
    margin-top: 4px !important;
    padding-top: 4px !important;
  }

  .navbar-menu a.navbar-cta {
    background: linear-gradient(135deg, #f7c65f, #e1ac38) !important;
    color: #0a0a00 !important;
    font-weight: 800 !important;
    justify-content: center !important;
    border-radius: 12px !important;
    box-shadow: 0 4px 16px rgba(247,198,95,0.30) !important;
  }

  .navbar-menu a.navbar-cta:hover {
    filter: brightness(1.08) !important;
    color: #050500 !important;
  }
}

/* Breakpoint 480px: adatta margini laterali */
@media (max-width: 480px) {
  .navbar-menu {
    left: -10px !important;
    right: -10px !important;
  }
  .navbar-menu a {
    font-size: 0.95rem !important;
    padding: 13px 14px !important;
  }
}