/* === 2P_Drone • Mobile Fixes (responsive tidy) === */

/* Prevent horizontal scroll */
html, body { overflow-x: hidden; }

/* Media: images & embeds scale */
img, video, iframe { max-width: 100%; height: auto; }

/* Generic grid helpers */
.grid { display: grid; gap: 24px; }
.grid.grid-2 { grid-template-columns: 1fr 1fr; }
@media (max-width: 900px){
  .grid.grid-2 { grid-template-columns: 1fr; }
}

/* Navbar mobile */
.nav-toggle { display: none; }
@media (max-width: 860px){
  nav.navbar { position: sticky; top: 0; background: rgba(10,15,28,0.8); backdrop-filter: blur(10px); z-index: 99; }
  .nav-toggle {
    display: inline-flex; align-items: center; justify-content: center;
    width: 40px; height: 40px; border-radius: 10px; border: 1px solid rgba(255,255,255,.15);
    background: rgba(255,255,255,.05); color: #fff; cursor: pointer;
    margin-left: auto; margin-right: 0;
  }
  .nav-toggle svg { width: 22px; height: 22px; }
  .nav-links {
    position: fixed; left: 0; right: 0; top: 64px;
    background: rgba(10,15,28,0.95);
    backdrop-filter: blur(12px);
    display: none; flex-direction: column; gap: 12px;
    padding: 16px 5vw 24px; border-top: 1px solid rgba(255,255,255,.08);
  }
  .navbar.nav-open .nav-links { display: flex; }
  body.has-mobile-nav { overflow: hidden; }
  .brand img { height: 28px; }
  nav { padding: 14px 5vw; }
}

/* Sections spacing on small screens */
@media (max-width: 520px){
  section { padding: 32px 5vw; }
  .hero { min-height: 46vh; }
}

/* Forms full width on mobile */
@media (max-width: 640px){
  input[type="text"], input[type="email"], input[type="tel"], textarea, select, button, .btn {
    width: 100%;
  }
}

/* Footer: stack nicely */
@media (max-width: 640px){
  .foot, footer .footer-top { flex-direction: column; gap: 12px; }
}



/* === Mobile Fixes v3 (safe) === */

/* Scroll always available; lock only when nav is REALLY open */
body { overflow-y: auto; }
@media (max-width: 860px){
  body.has-mobile-nav { overflow: hidden; }
}

/* Header: keep original positioning, just create room below on small screens */
@media (max-width: 860px){
  header { position: relative !important; z-index: 9; }
  /* add top padding to first section to avoid overlap from tall header/logo */
  header + section, header + main, header + div { padding-top: 80px; }
}

/* Avoid scroll traps only on hero, not globally */
@media (max-width: 860px){
  .hero { height: auto !important; min-height: 56vh; overflow: visible !important; }
}

/* Nav panel layering */
@media (max-width: 860px){
  .nav-links { z-index: 98; }
  .navbar:not(.nav-open) .nav-links { display: none !important; }
}

/* Cookie banner: only inner catches taps */
#cookie-consent-banner { pointer-events: none; }
#cookie-consent-banner .cc-inner, #cc-popover { pointer-events: auto; }


/* === Mobile Fixes v4 (robust) === */
@media (max-width: 860px){
  /* Navbar & brand logo sane defaults on phones */
  header nav.navbar { padding: 12px 5vw !important; }
  header nav.navbar .brand img { height: 36px !important; width: auto !important; margin: 0 !important; transform: none !important; }
  /* Keep menu layers consistent */
  .nav-links { position: fixed !important; top: 60px !important; left: 0; right: 0; }
  .navbar.nav-open .nav-links { display: flex !important; }
  .navbar:not(.nav-open) .nav-links { display: none !important; }
  /* Ensure content isn't covered by header */
  header + section, header + main, header + div { padding-top: 72px !important; }
}
/* Prevent any full-screen elements from blocking scroll on small screens */
@media (max-width: 520px){
  .hero, .fullscreen { height: auto !important; min-height: 60vh !important; overflow: visible !important; }
}


/* Hero video: fill viewport on mobile */
@media (max-width: 900px){
  .hero-video{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}


/* Reinforce hero video full-bleed on mobile */
@media (max-width: 900px){
  .hero{
    min-height: 100vh;
  }
  .hero-video{
    height: 100% !important;
    width: 100% !important;
    object-fit: cover !important;
  }
}


/* === FIX: pulsante "Contatti" (btn + active) non deve deformarsi ===
   In assets/styles.css esistono regole generiche `.active { ... }` pensate per altre componenti
   che, sul link "Contatti" (class="btn active"), cambiano display e layout.
   Qui forziamo lo stile corretto del bottone in header.
*/
.nav-links a.btn.active,
a.btn.active{
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  white-space: nowrap;

  /* neutralizza proprietà "layout" ereditate da `.active` */
  grid-column: auto !important;
  min-height: auto !important;
  transform: none !important;

  /* mantiene la shadow del bottone */
  box-shadow: 0 8px 20px rgba(0,0,0,.25) !important;
}


/* === FIX v2: "Contatti" (btn) non deve ereditare underline/padding-bottom dalla pagina Contatti === */
nav .nav-links a.btn,
nav .mobile-links a.btn{
  padding: 10px 18px !important;      /* ripristina la forma del bottone */
  line-height: 1.1 !important;
  text-decoration: none !important;
}

nav .nav-links a.btn::after,
nav .mobile-links a.btn::after{
  content: none !important;           /* elimina la riga underline animata */
  display: none !important;
}

nav .nav-links a.btn.active,
nav .mobile-links a.btn.active{
  text-decoration: none !important;
}