/* ============================================
   LIEC Mobile UX overhaul - 2026-05-27
   Patch CSS finale per leggibilita mobile.
   ============================================ */

/* Base: line-length + scrolling + sizing */
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; scroll-padding-top: 80px; }
body { overflow-x: hidden; }

/* Tabelle responsive - wrapper scroll-x con visual cue */
@media (max-width: 900px) {
    .article-body table,
    .ccnl-art table,
    .liec-cmp table,
    .liec-tab table,
    main table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        max-width: 100%;
        font-size: 14px;
        scrollbar-width: thin;
        position: relative;
    }
    .article-body table thead,
    .ccnl-art table thead {
        position: sticky; left: 0;
    }
}

/* === BREAKPOINT 768px (tablet/mobile) === */
@media (max-width: 768px) {
    /* Body baseline + line-height generoso per mobile */
    body, .article-body, .ccnl-art, .liec-cmp, .liec-gloss, .ccnl-subhub {
        font-size: 17px !important;
        line-height: 1.7 !important;
    }

    /* Headers compatti */
    h1, .article-hero h1 {
        font-size: clamp(1.55rem, 5.5vw, 2.1rem) !important;
        line-height: 1.25 !important;
        margin-bottom: 0.5em;
    }
    h2 {
        font-size: clamp(1.3rem, 4.5vw, 1.75rem) !important;
        line-height: 1.3 !important;
        margin-top: 1.6em !important;
        margin-bottom: 0.5em;
    }
    h3 {
        font-size: clamp(1.15rem, 4vw, 1.35rem) !important;
        line-height: 1.35 !important;
        margin-top: 1.3em;
    }
    h4, h5 {
        font-size: clamp(1.05rem, 3.5vw, 1.2rem) !important;
        line-height: 1.4 !important;
    }

    /* Padding container ridotto su mobile (era clamp 3rem,6vw,5rem) */
    .article-body,
    .ccnl-art,
    .liec-cmp,
    .ccnl-subhub,
    main > article,
    main .container {
        padding: clamp(1rem, 4vw, 1.5rem) clamp(1rem, 4vw, 1.5rem) !important;
    }

    /* Touch targets minimo 44px (WCAG AAA: 44x44) */
    nav a,
    .nav-dd-trigger,
    .nav-dd-menu a,
    .pagination a,
    .liec-toc a,
    .liec-vedi-anche a,
    .ccnl-art a.button,
    .liec-cta,
    button:not(.nav-spotlight-btn),
    .menu-item a {
        min-height: 44px;
        line-height: 1.4;
        display: inline-flex;
        align-items: center;
        padding-top: 8px;
        padding-bottom: 8px;
    }

    /* Footer leggibile (era 11-13px) */
    .footer-copy,
    footer p,
    footer .footer-inner,
    footer small {
        font-size: 13px !important;
        line-height: 1.55 !important;
    }

    /* Fix font-size hardcoded TROPPO PICCOLI (10-12px) */
    *[style*="font-size: 10px"],
    *[style*="font-size:10px"],
    *[style*="font-size: 11px"],
    *[style*="font-size:11px"] {
        font-size: 13px !important;
    }
    *[style*="font-size: 12px"],
    *[style*="font-size:12px"] {
        font-size: 14px !important;
    }
    *[style*="font-size: 13px"],
    *[style*="font-size:13px"] {
        font-size: 14px !important;
    }

    /* Hero + featured images responsive */
    .article-hero img,
    .featured-grid img,
    .areas-grid img,
    .hero-img,
    main img {
        width: 100% !important;
        height: auto !important;
        max-width: 100% !important;
    }

    /* Fixed-width container fluid */
    .footer-inner,
    .article-hero-inner,
    .nav-inner,
    .nav-container {
        max-width: 100% !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
    }

    /* FAQ details + summary readable */
    details {
        margin: 10px 0;
    }
    details summary {
        padding: 14px 16px !important;
        font-size: 16px !important;
        min-height: 48px;
        line-height: 1.5;
    }
    details > *:not(summary) {
        padding: 12px 16px !important;
        font-size: 15px !important;
        line-height: 1.65 !important;
    }

    /* Code/pre/data tables */
    pre, code {
        font-size: 13px !important;
        max-width: 100% !important;
        overflow-x: auto !important;
        white-space: pre-wrap;
        word-break: break-word;
    }

    /* Grid utilities - gap ridotto */
    .featured-grid,
    .areas-grid,
    .banner-v3-cards,
    .nav-cards {
        gap: 12px !important;
    }

    /* Paragrafi / liste */
    p, li {
        max-width: 100%;
        font-size: 17px !important;
        line-height: 1.7 !important;
    }
    li { margin-bottom: 0.5em; }

    /* CTA buttons larger + clear touch area */
    .liec-cta,
    .cta-button,
    .btn,
    .fi-cta-btn,
    a.button {
        padding: 14px 22px !important;
        font-size: 16px !important;
        min-height: 48px !important;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
    }

    /* TOC sobrio leggibile */
    .liec-toc,
    .ccnl-toc,
    .article-toc {
        font-size: 15px !important;
        padding: 14px 16px !important;
    }
    .liec-toc a,
    .ccnl-toc a {
        padding: 6px 0 !important;
        line-height: 1.45 !important;
    }

    /* Box informativi (meta-box, alert) */
    .ccnl-meta-box,
    .liec-meta-box,
    .liec-alert,
    .liec-disclaimer {
        padding: 14px 16px !important;
        font-size: 15px !important;
        line-height: 1.6 !important;
    }

    /* Casi pratici (Tizio/Caia) */
    .ccnl-caso,
    .liec-caso {
        padding: 14px 16px !important;
        margin: 16px 0 !important;
        font-size: 15px !important;
    }

    /* Link visivi più chiari */
    article a:not(.button):not(.btn):not(.liec-cta) {
        text-decoration: underline;
        text-decoration-thickness: 1px;
        text-underline-offset: 2px;
    }

    /* Sticky nav non copra H1 quando si clicca su anchor */
    h1, h2, h3, h4, h5 {
        scroll-margin-top: 70px;
    }
}

/* === BREAKPOINT 480px (smartphone small) === */
@media (max-width: 480px) {
    body, .article-body, p, li {
        font-size: 16.5px !important;
        line-height: 1.65 !important;
    }
    h1, .article-hero h1 {
        font-size: 1.45rem !important;
    }
    h2 {
        font-size: 1.2rem !important;
    }
    h3 {
        font-size: 1.1rem !important;
    }

    .article-body,
    .ccnl-art,
    .liec-cmp {
        padding: 0.85rem 0.9rem !important;
    }

    /* Nav stretto */
    .nav-inner,
    .nav-container {
        padding-left: 0.75rem !important;
        padding-right: 0.75rem !important;
    }
}

/* === Accessibility focus visible su tutto === */
@media (max-width: 900px) {
    a:focus-visible,
    button:focus-visible,
    summary:focus-visible {
        outline: 2px solid var(--gold, #c4943a);
        outline-offset: 3px;
        border-radius: 3px;
    }
}

/* === Prevent layout shift mobile (reserva spazio se width/height set) === */
img, video, iframe { max-width: 100%; height: auto; }
img[width][height] { aspect-ratio: attr(width) / attr(height); }
.featured-grid img, .areas-grid img, .nav-cards img { aspect-ratio: 16/9; object-fit: cover; }

/* === Safe areas iPhone notch === */
@supports (padding: max(0px)) {
    @media (max-width: 768px) {
        body { padding-left: max(0px, env(safe-area-inset-left)); padding-right: max(0px, env(safe-area-inset-right)); }
    }
}