/* ════════════════════════════════════════════════════════════════════════════
   SITO PUBBLICO — LIVELLO TELEFONO E TAVOLETTA (06/11/2026)
   ────────────────────────────────────────────────────────────────────────────
   Un foglio solo per le pagine pubbliche (home, prezzi, funzioni, domande,
   privacy, blog, conferma e disiscrizione newsletter). Si carica **per ultimo**
   nella testata, dopo lo stile della pagina: cosi' quello che c'e' scritto qui
   vince, senza `!important` e senza alzare la precisazione dei selettori.

   Tre gradini: 768 (tavoletta in verticale), 640 (telefono grande o sdraiato),
   480 (telefono in piedi), 380 (telefono stretto). Non sostituiscono quelli già
   presenti nelle pagine (900 e 600 sulla home, 768 e 600 altrove, 700 su
   «Prezzi»): li completano.

   Il paragone: prima ogni pagina aveva la sua toppa cucita addosso — una si
   stringeva a 900px, una a 768, una a 700 — e restavano buchi larghi 40px in
   cui la grafica si rompeva. Qui i buchi si chiudono una volta per tutte, e le
   regole stanno in un posto solo.

   **Il desktop non cambia**: ogni regola di questo foglio sta dentro un
   `@media`. Non c'e' nessuna dichiarazione "per tutte le larghezze" — una
   regola del genere avrebbe ridimensionato immagini e `pre` anche sullo schermo
   grande, e la promessa sarebbe stata falsa (era il rilievo della revisione del
   06/11/2026, chiuso spostando la rete di sicurezza dentro il gradino dei 768).
   La prova `tools/prova_responsive.php` lo pretende, e diventa rossa se qualcuno
   rimette una regola fuori da un `@media`.

   Restano due `!important`, ed e' l'unico modo: servono dove lo stile e' scritto
   dentro l'attributo `style` di un elemento (le immagini agganciate a lato negli
   articoli del blog). Nessun `:has()`: serviva per distinguere la pagina
   «Prezzi», e li' la correzione sta nella pagina stessa (la sua media query a
   700px ora mostra il menu invece di nasconderlo).
   ════════════════════════════════════════════════════════════════════════════ */

/* ── Da 601 a 768px: la fascia che nessuno copriva ─────────────────────────
   «Funzioni», «Domande frequenti» e «Privacy» hanno l'hamburger solo sotto i
   600px: in mezzo (telefono sdraiato, tavoletta piccola) la riga del menu non
   poteva andare a capo e finiva fuori dallo schermo. Idem la CTA da 126px. */
@media (min-width: 601px) and (max-width: 768px) {
  .nav { flex-wrap: wrap; row-gap: 10px; }
  .nav-links { width: 100%; justify-content: flex-start; flex-wrap: wrap; gap: 10px 18px; }
  .nav-cta { min-width: 0; padding: 10px 20px; }
}

/* ── Tavoletta in verticale (≤ 768) ────────────────────────────────────────*/
@media (max-width: 768px) {
  /* Rete di sicurezza, **solo qui**: un'immagine, un video o un riquadro piu' largo del suo
     contenitore e' il modo piu' comune per far comparire la barra di scorrimento orizzontale.
     Sta dentro il gradino e non fuori: una regola "per tutte le larghezze" avrebbe cambiato anche
     il desktop, e la promessa di questo foglio e' che il desktop resti com'era. */
  img,
  video,
  iframe { max-width: 100%; }

  pre { max-width: 100%; overflow-x: auto; }

  /* Al telefono il testo non deve essere ingrandito dal browser (iOS lo fa da solo girando il
     dispositivo); sul desktop non si tocca niente. */
  html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }

  /* La griglia delle specifiche su «Funzioni» era a due colonne fisse e nessuna
     media query la toccava: su un telefono ogni cella finiva con 130px, e le
     etichette si spezzavano a meta' parola. */
  .spec-grid { grid-template-columns: minmax(0, 1fr); }

  /* I due tasti del banner dei cookie hanno il testo che non va a capo: su una
     riga stretta il banner si allargava oltre lo schermo.
     `!important` perche' quattro pagine (`index.php`, «Funzioni», «Domande»,
     «Privacy») scrivono `white-space:nowrap` nello `style` del tasto: senza,
     la regola era inerte proprio dove il banner sta, e il tasto restava su una
     riga sola (revisione del 06/11/2026). Le due pagine che non lo scrivono
     non cambiano. */
  #cookie-accept,
  #cookie-reject { white-space: normal !important; }

  /* Le immagini "agganciate" a lato in un articolo del blog lasciano al testo
     una colonna da 100px: sotto i 768 si mettono in colonna come le altre. */
  .article-body img[style*="float"],
  .article-body figure.align-left,
  .article-body figure.align-right {
    float: none !important;
    margin: 0 0 16px !important;
    max-width: 100%;
  }

  /* ── Piè di pagina (11/11/2026) ──────────────────────────────────────────
     Le sei pagine pubbliche ora scrivono il piè di pagina **a una colonna già
     nel loro stile** (era il punto della tornata: prima la home usava una
     griglia di colonne e le altre `1fr auto`). Qui quindi non c'è più niente
     da raddrizzare: si stringe soltanto il respiro fra le voci. La riga a una
     colonna resta come rete per una pagina che un giorno tornasse a due. */
  .footer-top { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .footer-links { flex-wrap: wrap; gap: 20px 28px; }
}

/* ── Telefono grande o sdraiato (≤ 640) ────────────────────────────────────*/
@media (max-width: 640px) {
  /* Il logo e la tagline stavano uno sopra l'altro: su un telefono la tagline
     (una decorazione, non un'informazione) ruba la riga alle voci del menu. */
  .brand { flex-direction: row; align-items: center; gap: 8px; }
  .brand-logo { height: 36px; }
  .brand-tagline { display: none; }
  .nav { padding: 10px 0; gap: 10px; }

  /* Le fasce di apertura erano alte 72px sopra e 48 sotto: su 640px di schermo
     mangiano un quinto della pagina prima del contenuto. */
  .page-hero { padding: 40px 0 32px; }
  .hero { padding: 40px 0 32px; }
  .section { padding: 40px 0; }
  .cta-band { padding: 28px 20px; }

  /* L'immagine grande con il min-height di 340px si tagliava su un telefono
     sdraiato (schermo alto 360px): il minimo scende a zero, decide l'immagine. */
  .media-frame img { min-height: 0; }

  /* Testata dell'articolo del blog: 56px sopra e l'immagine di copertina fino a
     440px sono troppo su un telefono. */
  .article-wrap { padding: 28px 0 48px; }
  .article-featured-image { max-height: 260px; }

  /* Il rimando in fondo all'articolo ha il tasto che non va a capo: qui va a
     tutta larghezza, sotto il testo. */
  .inline-cta { flex-direction: column; align-items: stretch; }
  .inline-cta-btn { white-space: normal; text-align: center; }

  /* La briciola di pane aveva `max-width: 340px` e il testo su una riga sola:
     su 320px di schermo sfondava il contenitore. */
  .breadcrumb-current { max-width: 100%; white-space: normal; }

  /* Sotto i 16px il telefono ingrandisce la pagina da solo appena si tocca un
     campo, e il modulo sembra saltare: a 16px non succede. */
  input,
  select,
  textarea { font-size: 16px; }

  /* Piè di pagina: sotto i 640 le colonne dei collegamenti si stringono e il
     blocco non ha più bisogno dei 40px di respiro del desktop. */
  footer { padding: 32px 0 24px; margin-top: 40px; }
  .footer-top { margin-bottom: 22px; }
  .footer-links { gap: 18px 24px; }
  .footer-disclaimer { margin-top: 12px; }
}

/* ── Il menu a tre lineette (≤ 600) ────────────────────────────────────────
   Le sei pagine pubbliche con l'hamburger (`index`, «Funzioni», «Domande»,
   «Privacy», `blog`, `blog-post`) scrivono `.nav { flex-wrap: nowrap }` nel
   loro livello mobile: marchio, tasto e pannello restavano **su una riga
   sola**. Il pannello chiede `width: 100%` ma su una riga che non può
   chiudersi viene schiacciato nella striscia che avanza — misurato a 390px:
   188px di pannello a destra, meta' schermo vuoto a sinistra, il tasto X a
   meta' altezza e le voci schiacciate in colonna. Qui la riga si chiude dopo
   marchio e tasto e il pannello prende una riga sua, a tutta larghezza.

   Solo dove l'hamburger c'è: `.nav-toggle + .nav-links` (tasto e menu sono
   fratelli adiacenti in tutte e sei le pagine). «Prezzi» non ha l'hamburger,
   e infatti mostra il menu su una riga sola che va a capo: resta com'era.

   In più la testata non può essere più alta dello schermo: è `position:
   sticky`, e una testata più alta della finestra lascia le ultime voci fuori
   senza modo di raggiungerle (telefono piccolo, o tastiera aperta). Con il
   tetto è la testata a scorrere, e il menu resta tutto raggiungibile. */
@media (max-width: 600px) {
  .nav {
    flex-wrap: wrap;
    /* `dvh` segue la barra del browser che si ritrae (iOS 15.4+); `vh` resta per i browser piu'
       vecchi, dove la dichiarazione successiva viene scartata e vale questa. */
    max-height: 100vh;
    max-height: 100dvh;
    overflow-y: auto;
    overscroll-behavior: contain;
  }

  .nav-toggle + .nav-links {
    flex: 1 0 100%;
    margin-top: 0;
  }

  /* La riga delle lingue non è un link e non deve sembrare appesa al bordo
     sinistro sotto un pulsante largo quanto lo schermo: prende la riga intera
     e si centra, come già faceva la home. */
  .nav-toggle + .nav-links .lang-switcher {
    width: 100%;
    justify-content: center;
    margin-top: 0;
  }
}

/* ── Telefono in piedi (≤ 480) ─────────────────────────────────────────────*/
@media (max-width: 480px) {
  /* Le griglie che si reggevano su un minimo di 230-340px: sotto i 480px il
     minimo e' piu' largo del contenitore, e la pagina si allargava. Con
     `minmax(0, 1fr)` la colonna e' esattamente larga quanto c'e'. */
  .hero-grid,
  .video-grid,
  .card-grid,
  .feature-grid,
  .workflow,
  .roadmap,
  .hero-stats,
  .sim-grid,
  .pricing-grid,
  .blog-grid,
  .related-grid,
  .waitlist,
  .footer-top,
  .footer-links,
  .features-body,
  .faq-body,
  .doc-body { grid-template-columns: minmax(0, 1fr); }

  /* Le schede della home hanno un'altezza minima di 240px: su un telefono sono
     tre schermate di riquadri quasi vuoti. */
  .card { min-height: 0; }

  /* Prezzi: 32px di riquadro per lato su 320px di schermo lasciano 190px utili,
     e il prezzo a 2.8rem non ci sta. */
  .pricing-card { padding: 24px 18px; }
  .pricing-price { font-size: 2.2rem; }

  /* Le pagine di conferma e disiscrizione newsletter: il riquadro non aveva
     `width: 100%` e il corpo della pagina centrava in verticale con
     `min-height: 100vh`. Su un telefono, se il testo e' piu' alto dello
     schermo, la parte in alto finisce fuori e non si raggiunge piu'.
     `margin: auto` al posto della centratura: i margini automatici **non**
     spingono fuori il contenuto quando lo spazio non basta (si azzerano e la
     pagina scorre), mentre `align-items: center` lo faceva. Nessun `:has()`:
     `.box` esiste solo in queste due pagine. */
  .box { width: 100%; margin: auto; padding: 32px 18px; }

  /* Piè di pagina a **una colonna**: su 320-480px tre colonne di collegamenti
     affiancate lasciano righe da tre parole («Riepilogo / Privacy»), e le voci
     sembrano spezzate. Da qui i tre blocchi stanno uno sotto l'altro, larghi
     quanto lo schermo. Vale per le due forme (griglia e fila). */
  .footer-links { flex-direction: column; gap: 18px; width: 100%; }
  .footer-col { width: 100%; }
}

/* ── Telefono stretto (≤ 380) ──────────────────────────────────────────────*/
@media (max-width: 380px) {
  /* Un po' piu' di larghezza utile: 92vw su 360px lascia 14px per lato, a 94vw
     sono 11, e le righe di testo guadagnano sei caratteri. */
  .container { width: 94vw; }

  .brand-logo { height: 32px; }
  .nav-cta { padding: 10px 16px; font-size: 12px; }
  .hero { padding: 32px 0 28px; }
  .pricing-note { padding: 14px 16px; }
  .pricing-price { font-size: 2rem; }
  .article-excerpt { padding-left: 14px; }
}

/* ── Schermi a dito, di qualunque larghezza ────────────────────────────────
   Un telefono sdraiato e' largo 800px: le regole dei 640px non lo prendono, ma
   il dito resta un dito. Qui si alzano solo le aree di tocco — sotto i 40px si
   preme il comando accanto — senza toccare il disegno. */
@media (hover: none) and (pointer: coarse) {
  .lang-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    min-height: 36px;
  }

  .nav-links a { display: inline-flex; align-items: center; min-height: 40px; }
  .nav-toggle { min-width: 44px; min-height: 44px; }

  .feat-nav a,
  .faq-nav a,
  .doc-nav a { display: inline-flex; align-items: center; min-height: 40px; }

  .blog-filter-btn,
  .blog-cat-btn,
  .blog-cat-toggle,
  #cookie-accept,
  #cookie-reject { min-height: 40px; display: inline-flex; align-items: center; }

  a.btn { min-height: 44px; }
}