/* =====================================================================
   MOBILE FIXES — studiolegalecuomogiuseppe.it
   Data: 2026-04-23
   Strategia: override CSS puro, zero modifiche ai file sorgenti React.
   Reversibile: rimuovere il <link> in index.html per annullare tutto.
   ===================================================================== */


/* ── FIX [A1] già applicato in src/index.css ── */


/* ── FIX [F] — Form iOS auto-zoom prevention ──────────────────────────
   Causa: iOS Safari zooma la pagina quando un <input>, <textarea> o
   <select> riceve il focus con font-size < 16px. Il minimo assoluto
   per evitare lo zoom automatico è 16px.
   File coinvolti: src/sections/Contatti.tsx (form contatto + preventivo)
   Impatto desktop: NESSUNO — il fix è solo per ≤ 768px.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  input[type="text"],
  input[type="email"],
  input[type="tel"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="password"],
  textarea,
  select {
    font-size: 16px !important; /* FIX MOBILE [F1/F2] — previene auto-zoom iOS Safari */
  }
}


/* ── FIX [D] — Touch target minimo WCAG 2.5.5 (44×44px) ───────────────
   Causa: link di contatto (Telefono, WhatsApp) nella ContactBar hanno
   padding ridotto nella variante size='sm', dando un'area tap di ~30px.
   Solo link-bottoni di contatto — non altera altri elementi della UI.
   ─────────────────────────────────────────────────────────────────── */
@media (max-width: 768px) {
  /* FIX MOBILE [D2] — ContactBar: link Telefono e WhatsApp */
  a[href^="tel:"],
  a[href^="https://wa.me"] {
    min-height: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
  }
}


/* ── FIX [NAV-UNIVERSAL] — Navigazione mobile ──────────────────────────
   Garantisce che NESSUN pulsante di navigazione esca dal viewport su
   schermi stretti. Copertura: intera piattaforma presente e futura
   tramite classi semantiche dedicate.
   ─────────────────────────────────────────────────────────────────── */

@media (max-width: 480px) {

  /* ── ConsolleNavBack: due bottoni affiancati → stack verticale ─────
     Su ≤480px i due bottoni collassano in colonna, full-width,
     sempre raggiungibili. Il container occupa tutta la larghezza
     con 16px di margine su entrambi i lati.                          */
  .clp-nav-back {
    flex-direction: column !important;
    left: 16px !important;
    right: 16px !important;
    transform: none !important;
    width: auto !important;
    bottom: 16px !important;
    align-items: stretch !important;
    gap: 8px !important;
  }
  .clp-nav-back button {
    width: 100% !important;
    min-height: 44px !important;
    justify-content: center !important;
  }

  /* ── Lexicon back button: coordinate fisse → adattive su mobile ────
     top:210 e right:74 fissi su desktop potrebbero sovrapporsi con
     altri elementi UI su mobile (chatbot, consolle). Sposta in alto.  */
  .lexicon-back-btn {
    top: 70px !important;
    right: 8px !important;
  }
}

/* ── FIX [D3] — ContattiPro toggle IT/EN (touch target) ───────────────
   Causa: bottoni IT/EN hanno minHeight:32px inline, sotto WCAG 44px.
   Classe lang-toggle-btn aggiunta al JSX per targetizzare.             */
@media (max-width: 768px) {
  .lang-toggle-btn {
    min-height: 44px !important;
    min-width: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
}


/* ── App.tsx close buttons — pagine policy (touch target) ─────────────
   Sei bottoni "Chiudi" nelle pagine legali: padding:'6px 14px' dà
   un'altezza ~28px, sotto il minimo WCAG 2.5.5 di 44px.             */
@media (max-width: 768px) {
  button[style*="top: 14"][style*="right: 16"] {
    min-height: 44px !important;
    padding: 8px 16px !important;
  }
}