/* ==========================================
   MOBILE FIXES v19 - Enhanced Fonts & Full Vertical Layout
   ========================================== */

@media (max-width: 768px) {
    /* 1. RESET GLOBALE E OVERFLOW */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 2. HEADER E NAVBAR COMPATTA */
    header.header, .header, nav.main-nav {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 18px 12px !important;
        background-color: #0d2140 !important;
    }

    .header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* LOGO (.logo, .logo-mark, .logo-text) */
    a.logo, .logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 12px auto !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    .logo-mark {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        background-color: #ff4d4d !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
        font-size: 1.4rem !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .logo-text span {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .logo-text span:first-child {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        letter-spacing: 0.5px !important;
    }

    .logo-text span:last-child {
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        margin-top: 3px !important;
    }

    /* MENU DI NAVIGAZIONE */
    nav.main-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    a.nav-link {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        text-align: center !important;
        display: block !important;
        padding: 4px 0 !important;
        margin: 0 !important;
    }

    .header-cta {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    a.btn-emergenza {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #e52e2e !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        font-size: 1.15rem !important;
        margin: 0 auto !important;
    }

    /* 3. HERO SECTION */
    .hero {
        padding: 35px 15px !important;
    }

    .hero-content h1 {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        word-break: normal !important;
    }

    .hero-content .subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 auto 22px auto !important;
    }

    a.btn-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        padding: 14px 18px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        border-radius: 30px !important;
        margin: 0 auto !important;
        line-height: 1.3 !important;
    }

    /* 4. SERVIZI E VANTAGGI INCOLONNATI */
    .servizi h2, .perche-tempestivo h2, .zone-coperte h2, .processo h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .servizi-grid, .vantaggi-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 22px !important;
        padding: 0 8px !important;
    }

    .card-servizio, .vantaggio {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 22px 18px !important;
        box-sizing: border-box !important;
    }

    .card-servizio h3, .vantaggio h3 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    .card-servizio p, .vantaggio p {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    .card-servizio ul {
        padding-left: 20px !important;
        margin-top: 12px !important;
        text-align: left !important;
    }

    .card-servizio li {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* 5. ZONE SERVITE INCOLONNATE PERFETTAMENTE */
    .zone-coperte {
        padding: 30px 15px !important;
    }

    .zone-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 20px auto 0 auto !important;
    }

    a.zone-pill, .zone-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 6. TIMELINE / PROCESSO (.step-number) */
    .timeline {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }

    .step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    .step h3 {
        font-size: 1.25rem !important;
        margin-bottom: 6px !important;
    }

    .step p {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
    }

    .step-number {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        border-radius: 50% !important;
        background-color: #ff4d4d !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 12px auto !important;
        font-weight: bold !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    /* 7. FOOTER CENTRATO E ACCESSIBILE */
    footer {
        padding: 35px 15px 25px 15px !important;
        text-align: center !important;
    }

    footer > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        text-align: center !important;
    }

    footer div {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    footer h4 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    footer p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    footer ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    footer a {
        display: inline-block !important;
        text-align: center !important;
        font-size: 1.05rem !important;
    }
	/* ==========================================================================
   MOBILE FIXES v20 - Integrato Fix Sub-Nav, Fonts & Vertical Layout
   ========================================================================== */

/* --------------------------------------------------------------------------
   0. FIX GLOBALE SUB-NAV (Desktop & Mobile)
   Risolve la sovrapposizione della sotto-navbar durante lo scroll del body
   -------------------------------------------------------------------------- */
nav.sub-nav, 
.sub-nav {
    position: relative !important;
    top: auto !important;
    left: auto !important;
    z-index: 99 !important;
    width: 100% !important;
    background-color: #0b1b3b !important;
    box-shadow: none !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* Rimuove o adatta lo spazio compensativo non più necessario */
.page-offset {
    height: 70px !important;
}


/* --------------------------------------------------------------------------
   STILI PER DISPOSITIVI MOBILE (Schermi <= 768px)
   -------------------------------------------------------------------------- */
@media (max-width: 768px) {
    
    /* 1. RESET GLOBALE E OVERFLOW */
    html, body {
        max-width: 100% !important;
        overflow-x: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    *, *::before, *::after {
        box-sizing: border-box !important;
        word-wrap: break-word !important;
        overflow-wrap: break-word !important;
    }

    /* 2. HEADER E NAVBAR COMPATTA */
    header.header, .header, nav.main-nav {
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        height: auto !important;
        padding: 18px 12px !important;
        background-color: #0d2140 !important;
    }

    .header-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    /* LOGO (.logo, .logo-mark, .logo-text) */
    a.logo, .logo {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 12px auto !important;
        padding: 0 !important;
        text-decoration: none !important;
    }

    .logo-mark {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        background-color: #ff4d4d !important;
        border-radius: 50% !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 8px auto !important;
        font-size: 1.4rem !important;
        color: #ffffff !important;
        flex-shrink: 0 !important;
    }

    .logo-text {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
    }

    .logo-text span {
        display: block !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto !important;
        padding: 0 !important;
        line-height: 1.25 !important;
    }

    .logo-text span:first-child {
        font-size: 1.4rem !important;
        font-weight: 800 !important;
        color: #ffffff !important;
        letter-spacing: 0.5px !important;
    }

    .logo-text span:last-child {
        font-size: 0.85rem !important;
        color: rgba(255, 255, 255, 0.8) !important;
        text-transform: uppercase !important;
        margin-top: 3px !important;
    }

    /* MENU DI NAVIGAZIONE PRINCIPALE */
    nav.main-nav {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 8px !important;
        margin: 10px 0 !important;
        padding: 0 !important;
        width: 100% !important;
    }

    a.nav-link {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-transform: uppercase !important;
        text-align: center !important;
        display: block !important;
        padding: 4px 0 !important;
        margin: 0 !important;
    }

    /* BARRA DI NAVIGAZIONE SECONDARIA (SUB-NAV) - INTEGRATA SU MOBILE */
    .sub-nav-inner {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 10px !important;
        width: 100% !important;
        padding: 12px 10px !important;
    }

    a.sub-nav-link, 
    .sub-nav-link {
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        color: #ffffff !important;
        text-decoration: none !important;
        text-align: center !important;
        display: block !important;
        padding: 5px 0 !important;
    }

    .header-cta {
        width: 100% !important;
        display: flex !important;
        justify-content: center !important;
        margin-top: 8px !important;
    }

    a.btn-emergenza {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        background-color: #e52e2e !important;
        color: #ffffff !important;
        padding: 10px 24px !important;
        border-radius: 6px !important;
        text-decoration: none !important;
        font-weight: bold !important;
        font-size: 1.15rem !important;
        margin: 0 auto !important;
    }

    /* 3. HERO SECTION */
    .hero {
        padding: 35px 15px !important;
    }

    .hero-content h1 {
        font-size: 1.85rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        width: 100% !important;
        margin: 0 auto 15px auto !important;
        padding: 0 !important;
        word-break: normal !important;
    }

    .hero-content .subtitle {
        font-size: 1.1rem !important;
        line-height: 1.5 !important;
        text-align: center !important;
        margin: 0 auto 22px auto !important;
    }

    a.btn-cta {
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 340px !important;
        padding: 14px 18px !important;
        font-size: 0.95rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        border-radius: 30px !important;
        margin: 0 auto !important;
        line-height: 1.3 !important;
    }

    /* 4. SERVIZI E VANTAGGI INCOLONNATI */
    .servizi h2, .perche-tempestivo h2, .zone-coperte h2, .processo h2 {
        font-size: 1.75rem !important;
        line-height: 1.3 !important;
        text-align: center !important;
        margin-bottom: 20px !important;
    }

    .servizi-grid, .vantaggi-grid {
        display: flex !important;
        flex-direction: column !important;
        grid-template-columns: 1fr !important;
        width: 100% !important;
        gap: 22px !important;
        padding: 0 8px !important;
    }

    .card-servizio, .vantaggio {
        width: 100% !important;
        max-width: 100% !important;
        margin: 0 0 15px 0 !important;
        padding: 22px 18px !important;
        box-sizing: border-box !important;
    }

    .card-servizio h3, .vantaggio h3 {
        font-size: 1.35rem !important;
        line-height: 1.35 !important;
        margin-bottom: 12px !important;
        hyphens: none !important;
        word-break: normal !important;
    }

    .card-servizio p, .vantaggio p {
        font-size: 1.05rem !important;
        line-height: 1.5 !important;
    }

    .card-servizio ul {
        padding-left: 20px !important;
        margin-top: 12px !important;
        text-align: left !important;
    }

    .card-servizio li {
        font-size: 1rem !important;
        line-height: 1.4 !important;
        margin-bottom: 8px !important;
    }

    /* 5. ZONE SERVITE INCOLONNATE PERFETTAMENTE */
    .zone-coperte {
        padding: 30px 15px !important;
    }

    .zone-grid {
        display: flex !important;
        flex-direction: column !important;
        width: 100% !important;
        gap: 12px !important;
        padding: 0 !important;
        margin: 20px auto 0 auto !important;
    }

    a.zone-pill, .zone-pill {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        padding: 14px 20px !important;
        font-size: 1.1rem !important;
        font-weight: 700 !important;
        text-align: center !important;
        box-sizing: border-box !important;
        margin: 0 !important;
    }

    /* 6. TIMELINE / PROCESSO (.step-number) */
    .timeline {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 24px !important;
    }

    .step {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        text-align: center !important;
        width: 100% !important;
        padding: 0 10px !important;
    }

    .step h3 {
        font-size: 1.25rem !important;
        margin-bottom: 6px !important;
    }

    .step p {
        font-size: 1.05rem !important;
        line-height: 1.4 !important;
    }

    .step-number {
        width: 48px !important;
        height: 48px !important;
        min-width: 48px !important;
        min-height: 48px !important;
        max-width: 48px !important;
        max-height: 48px !important;
        border-radius: 50% !important;
        background-color: #ff4d4d !important;
        color: #ffffff !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        margin: 0 auto 12px auto !important;
        font-weight: bold !important;
        font-size: 1.25rem !important;
        flex-shrink: 0 !important;
    }

    /* 7. FOOTER CENTRATO E ACCESSIBILE */
    footer {
        padding: 35px 15px 25px 15px !important;
        text-align: center !important;
    }

    footer > div:first-child {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 28px !important;
        text-align: center !important;
    }

    footer div {
        width: 100% !important;
        text-align: center !important;
        margin: 0 auto !important;
    }

    footer h4 {
        font-size: 1.25rem !important;
        margin-bottom: 12px !important;
    }

    footer p {
        font-size: 1rem !important;
        line-height: 1.5 !important;
    }

    footer ul {
        padding: 0 !important;
        margin: 0 !important;
        list-style: none !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 8px !important;
    }

    footer a {
        display: inline-block !important;
        text-align: center !important;
        font-size: 1.05rem !important;
    }

}