/*
 * Correzioni mobile — easyadw.it
 *
 * Caricato per ultimo, dopo i CSS di Gridbox, cosi' da poterli correggere
 * senza toccare i file originali del template.
 */

/* Il tema passa al menu hamburger a 768px inclusi: le correzioni qui sotto
   devono coprire la stessa soglia, altrimenti a 768px esatti l'intestazione
   torna a tre righe. */
@media (max-width: 768px) {

    /* ------------------------------------------------------------------ *
     * Intestazione
     *
     * Nel layout originale logo, badge Google Partner e menu finiscono uno
     * sotto l'altro: 262px sulle pagine standard, 233px sulle landing, cioe'
     * quasi un terzo dello schermo prima di vedere un contenuto.
     *
     *   pagine standard   riga 1: logo | badge     riga 2: menu hamburger
     *   landing           riga 1: logo | badge     riga 2: numero di telefono
     *
     * Il rimescolamento e' solo visivo: `display: contents` toglie di mezzo i
     * contenitori intermedi di Gridbox in modo che logo, badge e menu diventino
     * celle della stessa griglia. L'ordine nel documento resta l'originale.
     * ------------------------------------------------------------------ */

    /* I contenitori di colonna spariscono dal layout: restano i loro figli.
       Gli overlay che contengono sono trasparenti e in posizione assoluta,
       quindi a video non cambia nulla. */
    header .ba-row > .column-wrapper > .ba-grid-column-wrapper,
    header .ba-row > .column-wrapper > .ba-grid-column-wrapper > .ba-grid-column {
        display: contents !important;
    }

    /* I due loghi affiancati. */
    header .ba-row > .column-wrapper:has(.ba-item-logo) {
        display: grid !important;
        grid-template-columns: minmax(0, 1fr) auto;
        grid-template-areas: "logo badge";
        align-items: center;
        column-gap: 10px;
        /* Il padding laterale se ne va insieme ai contenitori resi
           `display: contents`: va rimesso qui, altrimenti i due loghi
           finiscono a filo dei bordi dello schermo.
           box-sizing serve perche' il padding stia DENTRO i 100%: senza,
           si somma alla larghezza e la riga sborda di 30px. */
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    /* Dove c'e' anche il menu, scende sotto occupando tutta la larghezza. */
    header .ba-row > .column-wrapper:has(.ba-item-logo):has(.ba-item-main-menu) {
        grid-template-areas:
            "logo  badge"
            "menu  menu";
    }

    header .ba-row > .column-wrapper:has(.ba-item-logo) .ba-item-logo {
        grid-area: logo;
        margin: 8px 0 !important;
    }

    header .ba-row > .column-wrapper:has(.ba-item-logo) .ba-item-image {
        grid-area: badge;
        margin: 8px 0 !important;
    }

    header .ba-row > .column-wrapper:has(.ba-item-logo) .ba-item-main-menu {
        grid-area: menu;
        margin: 0 !important;
    }

    /* Accanto al logo il badge va rimpicciolito, altrimenti si mangia meta'
       della riga. La larghezza va forzata: il tema la fissa a 151px e con la
       sola altezza limitata l'immagine esce schiacciata (il Google Partner ha
       un rapporto di 2.68, non di 3.77). */
    header .ba-row > .column-wrapper:has(.ba-item-logo) .ba-item-image img {
        max-height: 40px;
        width: auto !important;
        height: auto;
    }

    /* Il logo ha una larghezza propria di 214px e da solo non si restringe:
       sotto i 400px spingerebbe il badge oltre il bordo. */
    header .ba-row > .column-wrapper:has(.ba-item-logo) .ba-item-logo img {
        max-width: 100%;
        height: auto;
    }

    /* ------------------------------------------------------------------ *
     * Titoli
     *
     * Gli h1 e h2 stanno a 48px con interlinea 58px: su uno schermo da 375px
     * un titolo riempie una schermata intera prima di dire qualcosa. Scendono
     * a 36px / 46px.
     *
     * Restano fuori h3 (26px) e h4 (24px): sono gia' sotto i 36px e la regola
     * li ingrandirebbe, che e' il contrario di quel che serve. Lo stesso vale
     * per i paragrafi rossi delle landing, a 18px.
     * ------------------------------------------------------------------ */

    .content-text :is(h1, h2),
    .content-text :is(h1, h2) span,
    .content-text :is(h1, h2) strong {
        font-size: 36px !important;
        line-height: 46px !important;
    }
}

/* ---------------------------------------------------------------------- *
 * Menu orizzontale su schermi medi e grandi
 *
 * Le cinque voci occupano 749px fra testo, padding e margini, ma la colonna
 * del menu ne offre 678 a 1280px e 727 a 1366px: "Contatti" finisce a capo e
 * l'intestazione passa da 89px a 128px. Sta su una riga sola solo dai 1440px.
 *
 * Si stringe il corpo del carattere e le spaziature quanto basta a farle
 * stare in fila, senza toccare la struttura dell'intestazione.
 * ---------------------------------------------------------------------- */

/* Corpo e spaziature delle voci: valgono su tutti gli schermi non-telefono. */
@media (min-width: 769px) {

    /* Nessuna voce deve spezzarsi al proprio interno. */
    header .ba-item-main-menu ul > li {
        white-space: nowrap;
        margin-left: 3px !important;
        margin-right: 3px !important;
    }

    header .ba-item-main-menu ul > li > a {
        font-size: 14px !important;
        padding-left: 11px !important;
        padding-right: 11px !important;
    }
}

/* Fra 769 e 1279px il menu non entra accanto ai loghi nemmeno stringendolo:
   a 900px servirebbero 526px contro i 460 disponibili, cioe' un carattere da
   11px, illeggibile. A 1200px entrerebbe, ma con 12px di margine: troppo poco
   perche' un rendering leggermente diverso non lo mandi a capo.
   Qui il menu prende una riga tutta sua e le cinque voci restano in fila. */
@media (min-width: 769px) and (max-width: 1279px) {

    header .ba-row > .column-wrapper > .ba-grid-column-wrapper,
    header .ba-row > .column-wrapper > .ba-grid-column-wrapper > .ba-grid-column {
        display: contents !important;
    }

    header .ba-row > .column-wrapper:has(.ba-item-main-menu) {
        display: grid !important;
        grid-template-columns: auto 1fr;
        grid-template-areas:
            "logo  badge"
            "menu  menu";
        align-items: center;
        box-sizing: border-box;
        width: 100%;
        max-width: 100%;
        padding: 0 15px;
    }

    header .ba-row > .column-wrapper:has(.ba-item-main-menu) .ba-item-logo {
        grid-area: logo;
        margin: 10px 0 !important;
    }

    /* Il tema da' all'elemento larghezza piena e centra il contenuto. Il
       contenitore interno e' inline-block, quindi i margini automatici non lo
       spostano: l'unica leva e' l'allineamento del testo sul genitore. */
    header .ba-row > .column-wrapper:has(.ba-item-main-menu) .ba-item-image {
        grid-area: badge;
        margin: 10px 0 !important;
        text-align: right !important;
    }

    header .ba-row > .column-wrapper:has(.ba-item-main-menu) .ba-item-main-menu {
        grid-area: menu;
        margin: 0 0 6px !important;
    }
}

/* ------------------------------------------------------------------
 * Riquadri con fondo colorato (elenco ricavato in fase di build).
 * Nell'originale hanno padding solo verticale: su telefono, dove la
 * colonna occupa tutta la larghezza, il testo finisce contro i bordi.
 * ------------------------------------------------------------------ */
@media (max-width: 768px) {
    #item-15086059818946,
    #item-15086059818947,
    #item-15086059818948,
    #item-15086059818950,
    #item-15086059818951,
    #item-15086059818952,
    #item-15768591814003,
    #item-16962325261787,
    #item-16962325261788,
    #item-16962429549574,
    #item-16964144356567,
    #item-16964144356568 {
        padding-left: 20px !important;
        padding-right: 20px !important;
    }
}