/* mobile.css — rifiniture per schermi stretti.
   Il prototipo gestisce gia' il layout mobile (stato `mob`, sotto i 900px);
   qui si scala solo la testata, che a meno di 560px non ha spazio per
   i due loghi + la CTA + l'hamburger. Gli stili del template sono inline,
   quindi servono le !important. */

/* --- testata ------------------------------------------------------------- */
@media (max-width: 560px) {
  header nav { gap: 8px !important; padding: 0 14px !important; }
  header nav a[href="#top"] { gap: 7px !important; }
  header nav a[href="#top"] img:first-of-type { height: 24px !important; }   /* Geminiani */
  header nav a[href="#top"] img:last-of-type  { height: 18px !important; }   /* Power Pack */
  header nav a[href="#top"] span { height: 18px !important; }
  header nav a[data-magnetic] {
    padding: 10px 12px !important; font-size: 12.5px !important; gap: 6px !important;
    animation: none !important;            /* niente pulsazione: su mobile distrae */
  }
  header nav button { width: 40px !important; height: 40px !important; }
}

@media (max-width: 420px) {
  header nav { gap: 5px !important; padding: 0 10px !important; }
  header nav a[href="#top"] { gap: 6px !important; }
  header nav a[href="#top"] img:first-of-type { height: 18px !important; }
  header nav a[href="#top"] img:last-of-type  { height: 14px !important; }
  header nav a[href="#top"] span { height: 14px !important; }
  header nav a[data-magnetic] { padding: 8px 9px !important; font-size: 11.5px !important; gap: 5px !important; }
  header nav a[data-magnetic] span[data-icon] { width: 14px !important; height: 14px !important; }
  header nav button { width: 38px !important; height: 38px !important; }
}

/* sotto i 340px resta il marchio del prodotto, il piu' identificativo */
@media (max-width: 340px) {
  header nav a[href="#top"] img:first-of-type,
  header nav a[href="#top"] span { display: none !important; }
}

/* --- menu a tendina: niente 100vh (le barre del browser lo tagliano) ------ */
@media (max-width: 1199px) {
  header > div:last-child > div[style*="flex-direction:column"] {
    height: auto !important; max-height: calc(100dvh - 68px) !important;
    overflow-y: auto !important; padding-bottom: calc(28px + env(safe-area-inset-bottom)) !important;
  }
}

/* --- aree toccabili ------------------------------------------------------- */
@media (hover: none) {
  a[data-magnetic] { transform: none !important; }   /* l'effetto magnetico non serve al dito */
  button, a[role="tab"] { min-height: 44px; }
}

/* --- banner cookie: sopra la tacca inferiore ------------------------------ */
@media (max-width: 560px) {
  [role="dialog"][aria-label="Preferenze cookie"] {
    bottom: calc(12px + env(safe-area-inset-bottom)) !important;
    left: 12px !important; right: 12px !important; padding: 16px !important;
  }
}