/*
 * responsive-fix.css
 * Correzioni di responsività mobile additive — caricate per ultime in header.php
 * dopo template.css/accessibility.css per evitare di rompere il layout desktop.
 * Tutti i fix sono dentro media query (max-width: 767px) o targettano
 * elementi che non hanno regole esistenti conflittuali.
 */

/* ============================================================
   1. Tab navigation (jQuery UI .ui-tabs-nav) — wrap su tutte le viewport
   Era display:flex ma flex-wrap nowrap di default → i tab uscivano
   dal viewport mobile (homepage "Esplora i dati del catalogo" e
   carosello notizie).
   flex-wrap:wrap è innocuo su desktop dove i tab già ci stanno in linea.
   ============================================================ */
.ui-tabs-nav {
    flex-wrap: wrap;
}

/* ============================================================
   2. Cookie banner (#cookie-bar) — wrap del testo
   Il banner ha position:fixed; width:100% e contiene un <p> con
   messaggio + 3 bottoni. Su mobile (<400px) i bottoni inline restavano
   accanto al testo facendo overflow.
   ============================================================ */
#cookie-bar p {
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: anywhere;
    padding: 0 12px;
    line-height: 1.4;
}
@media (max-width: 767px) {
    #cookie-bar {
        height: auto !important;
        padding: 8px 0 !important;
    }
    #cookie-bar .cb-enable,
    #cookie-bar .cb-policy {
        display: inline-block;
        margin: 4px 4px 0;
    }
}

/* ============================================================
   3. Mobile only — fix tabelle, paginazione, link lunghi nei contenuti
   Tutti i fix sotto si applicano solo a viewport < 768px (Bootstrap 3
   "xs"). Non toccano il rendering desktop.
   ============================================================ */
@media (max-width: 767px) {

    /* 3.1 Tabelle dentro gli articoli Joomla 4 (com_content)
       — Esempio: /documenti, /strumenti/api-rest
       Le tabelle erano larghe ~430-450px su viewport 390px.
       Le rendiamo scroll-orizzontale interno, senza forzare il body. */
    .item-page table,
    .com-content-article__body table,
    .blog .item table,
    .article-content table {
        display: block;
        width: 100% !important;
        max-width: 100%;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        white-space: normal;
    }
    /* Evita che le celle a contenuto solido espandano lo scroll esterno */
    .item-page table th,
    .item-page table td,
    .com-content-article__body table th,
    .com-content-article__body table td,
    .blog .item table th,
    .blog .item table td,
    .article-content table th,
    .article-content table td {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 3.2 Link / URL lunghi dentro gli articoli (api-rest aveva un <a>
       da 459px che era un endpoint URL). */
    .item-page a,
    .com-content-article__body a,
    .blog .item a,
    .article-content a {
        word-break: break-word;
        overflow-wrap: anywhere;
    }

    /* 3.3 Paginazione Bootstrap 5 (Joomla 4) della vista categoria/blog
       — /notizie aveva 5 numeri inline che uscivano a x=552.
       La pagination "legacy" del template (con .num-page 50x50) non
       è toccata da questi selettori. */
    ul.pagination,
    nav.pagination-nav ul.pagination,
    .pagination__wrapper ul.pagination,
    .pagination-wrapper ul.pagination {
        flex-wrap: wrap;
        justify-content: center;
        gap: 4px;
        row-gap: 6px;
    }
    ul.pagination > li.page-item {
        margin: 0;
    }

    /* 3.4 Carousel Owl: assicura che il container non espanda il body
       Il .owl-stage è naturalmente largo (somma delle slide) ma deve
       restare clippato dal genitore .owl-stage-outer.
       Già lo è di default, ma alcuni custom container sovrascrivono.
       Aggiungiamo overflow-x:hidden conservativo solo sui carousel. */
    .owl-carousel .owl-stage-outer {
        overflow-x: hidden;
    }
}

/* ============================================================
   4. Salvaguardia generale — evitare che un singolo elemento
   "rotto" (es. iframe embed legacy) faccia scrollare l'intera
   pagina su mobile. Volutamente NON impostiamo overflow-x:hidden
   sul <body> perché può rompere sticky/dropdown.
   Targettiamo invece le immagini e i media: max-width:100%.
   Sono regole già standard ma le ribadiamo per sicurezza.
   ============================================================ */
@media (max-width: 767px) {
    .item-page img,
    .com-content-article__body img,
    .blog .item img,
    .article-content img,
    .item-page iframe,
    .com-content-article__body iframe,
    .blog .item iframe,
    .article-content iframe {
        max-width: 100%;
        height: auto;
    }
}