/*!
 * Full Power® Start — Mobile overrides (V1, audit 2026-04-20)
 *
 * File additivo: TUTTE le regole qui sono dentro @media (max-width:767px).
 * Zero impatto desktop. Ogni intervento e' racchiuso in un blocco delimitato
 * da commenti "INTERVENTO N" per rollback chirurgico (revert / commentare).
 *
 * Caricato come ultimo stylesheet da includes/header.php (dopo $pageExtraCss).
 */

@media (max-width: 767px) {

    /* ====== INTERVENTO 1 — Overflow orizzontale (+118px baseline) ====== */
    html, body {
        overflow-x: hidden;
        max-width: 100%;
    }

    /* .btn-lg mobile: larghezza colonna, testo wrappato; nessun cambio colore/bordo/ombra/radius */
    .btn.btn-lg {
        width: 100%;
        max-width: 100%;
        box-sizing: border-box;
        white-space: normal;
    }

    /* Break morbido sul contenuto testuale dentro <section> (no <main> nel sito).
       Esclude di proposito headings h1/h2/h3 per non spezzare parole italiane. */
    section p,
    section li,
    section span,
    section a {
        overflow-wrap: break-word;
    }
    /* ====== /INTERVENTO 1 ====== */


    /* ====== INTERVENTO 2 — Hero compatta (form within-fold) ====== */
    /* Solo spaziatura interna, nessun cambio tipografia/colore/allineamento.
       Opzione A (order su flex) NON applicata: il form e' dentro
       .hero-scanner-box, fratello di .hero-text (che contiene h1 + p).
       L'ordine sorgente nel DOM e' gia' hero-text -> hero-scanner-box,
       quindi il form sta subito dopo h1 su mobile (flex-wrap: wrap). */
    .hero {
        padding-top: 1.5rem;
        padding-bottom: 1.25rem;
    }
    .hero h1 {
        margin-bottom: 0.75rem;
    }
    .hero > p,
    .hero .lead,
    .hero ul {
        margin-top: 0.5rem;
        margin-bottom: 0.5rem;
    }
    .hero .scanner-form {
        margin-top: 1rem;
    }
    /* ====== /INTERVENTO 2 ====== */


    /* ====== INTERVENTO 3 — Tap target >= 44x44 (senza cambio estetico) ====== */
    /* Solo min-width/min-height/padding. Nessun background/border/shadow/colore. */
    .navbar-hamburger {
        min-width: 44px;
        min-height: 44px;
        padding: 10px;
    }
    .navbar-logo {
        min-width: 44px;
        min-height: 44px;
    }

    /* Dot carousel: hit area estesa a 44x44 via ::before trasparente, pallino visivo invariato */
    .dot {
        position: relative;
    }
    .dot::before {
        content: "";
        position: absolute;
        top: 50%;
        left: 50%;
        width: 44px;
        height: 44px;
        transform: translate(-50%, -50%);
    }

    /* Link nav (ul.navbar-links) + footer: solo padding verticale */
    .navbar-links a,
    .footer a,
    .footer-nav a {
        display: inline-block;
        min-height: 44px;
        padding-block: 13px;
        line-height: 1.4;
    }

    /* tel: / mailto: — solo padding, nessun cambio visivo */
    a[href^="tel:"],
    a[href^="mailto:"] {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        padding-block: 13px;
    }
    /* ====== /INTERVENTO 3 ====== */


    /* ====== INTERVENTO 4 — font-size min 13px (eccetto microcopy legale) ====== */
    /* Applico solo ai nodi sotto 13px rilevati live in DevTools.
       Eccezione esplicita: .footer-vat-disclaimer resta a 12px (microcopy legale). */
    .analisi-hero-eyebrow {
        font-size: 13px;
    }
    .micro-chip {
        font-size: 13px;
    }
    .footer-newsletter-msg {
        font-size: 13px;
    }
    /* ====== /INTERVENTO 4 ====== */


    /* ====== INTERVENTO 5 — Allineamento paragrafi lunghi (text-align: left mobile) ====== */
    /* Override mirato di responsive.css:104/108 (.hero .container + .hero-text
       forzano 'center' su mobile). Solo paragrafi discorsivi, non titoli/CTA.
       .section-intro e .lead non esistono nel markup attuale ma li includo
       preventivamente per coerenza con il prompt. */
    .hero p,
    .hero .lead,
    .section-intro p,
    .lead {
        text-align: left;
    }
    /* ====== /INTERVENTO 5 ====== */


    /* ====== INTERVENTO 8 — Nascondi scanner mid (.offerta-scanner) ====== */
    /* Dei 4 form presenti su /, su mobile ne nascondiamo 1 (quello dentro
       .offerta-scanner, sezione offerta): e' ridondante rispetto alla sticky
       sempre visibile. Restano visibili: hero, cta-final, sticky.
       Il nodo NON viene rimosso dal DOM (SEO/validazione invariate). */
    .offerta-scanner .scanner-form {
        display: none !important;
    }
    /* ====== /INTERVENTO 8 ====== */


    /* ====== INTERVENTO 16 — padding-bottom sticky + safe-area iOS ====== */
    /* La .sticky-scanner e' fixed a 61 px dal bottom; il body ha bisogno di
       padding-bottom sufficiente per non far coprire gli ultimi contenuti,
       piu' l'home-indicator di iPhone (safe-area-inset-bottom). */
    body {
        padding-bottom: calc(80px + env(safe-area-inset-bottom, 0px));
    }
    .sticky-scanner {
        padding-bottom: env(safe-area-inset-bottom, 0px);
    }
    /* ====== /INTERVENTO 16 ====== */

}