/*
 * Menu principale: un unico breakpoint a 1200px, indipendente dall'orientamento.
 *
 * Sostituisce i breakpoint in conflitto tra media-queries.css del tema padre
 * (1199px) e il CSS di Simple CSS (1030px, 1024px landscape/portrait, 767px),
 * che durante il ridimensionamento della finestra producevano voci
 * sovrapposte o un hamburger arancione invisibile sullo sfondo arancione.
 * Sotto i 1200px le voci non stanno su una riga senza toccarsi (es. iPad Pro
 * 13" in verticale, 1032px), quindi si passa all'hamburger.
 *
 * Il prefisso #header serve a prevalere sul CSS di Simple CSS, stampato dopo.
 */

/* ---------- MENU ORIZZONTALE (>= 1200px) ---------- */
@media screen and (min-width: 1200px) {
    #header #navbar-main {
        display: block !important;
    }

    #header .main-navbar .navbar-toggle,
    #header .main-navbar a#btnsx-220683 {
        display: none !important;
    }
}

/* ---------- HAMBURGER (< 1200px) ---------- */
@media screen and (max-width: 1199px) {
    #header #navbar-main {
        display: none !important;
    }

    #header .main-navbar .navbar-toggle {
        display: flex !important;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        float: left !important;
        position: relative;
        width: 44px;
        height: 44px;
        margin: 8px 0 8px 10px;
        padding: 0;
        border: 0;
        border-radius: 50%;
        background: #ffffff;
        box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.08);
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 9999;
    }

    #header .main-navbar .navbar-toggle .icon-bar {
        width: 22px;
        height: 3px;
        margin: 3px 0;
        background: #000000 !important;
        border-radius: 2px;
    }
}

/*
 * Pulsante DONA ORA accanto all'hamburger su tablet e finestre medie.
 * Lo stile completo è ripetuto qui perché Simple CSS lo definisce solo
 * fino a 1024px.
 */
@media screen and (min-width: 768px) and (max-width: 1199px) {
    #header .main-navbar a#btnsx-220683 {
        display: block !important;
        float: right;
        max-width: 400px;
        margin: 10px 0 8px !important;
        padding: 10px 40px;
        background-color: #f4f4f4 !important;
        border: 0;
        border-radius: 25px;
        box-shadow: none;
    }

    #header .main-navbar a#btnsx-220683:hover {
        background-color: #e8e8e8 !important;
    }

    #header .main-navbar a#btnsx-220683 .btnsx-text-primary {
        padding: 0;
        color: #ee7d0c;
        font-size: 21px;
        font-weight: 800;
        line-height: 21px;
    }

    #header .main-navbar a#btnsx-220683:hover .btnsx-text-primary {
        color: #777777;
    }

    #header .main-navbar #sb-search.sb-search {
        width: 44px;
        height: 44px;
        margin: 8px 10px 8px 12px !important;
    }
}

/* Il <p> che contiene DONA ORA ha un margine che spinge giù ricerca e burger */
@media screen and (min-width: 768px) {
    #header .main-navbar .inner-wrap > p {
        margin: 0;
    }
}

/*
 * DONA ORA su tutti i telefoni: Simple CSS lo mostra solo tra 320 e 480px,
 * quindi spariva sotto i 320px e tra 481 e 767px.
 */
@media screen and (max-width: 767px) {
    #header .main-navbar a#btnsx-220683 {
        display: block !important;
        float: none;
        margin: 10px 0 !important;
        padding: 10px 20px;
        background-color: #f4f4f4 !important;
        border: 0;
        border-radius: 25px;
        box-shadow: none;
    }

    #header .main-navbar a#btnsx-220683 .btnsx-text-primary {
        padding: 0;
        color: #ee7d0c;
        font-size: 21px;
        font-weight: 800;
        line-height: 21px;
    }
}

/*
 * Larghezza pagina su mobile: un elemento più largo dello schermo allargava
 * l'intera pagina, spingendo fuori a destra DONA ORA e la ricerca.
 * "clip" taglia l'eccedenza senza creare un contenitore di scroll.
 */
@media screen and (max-width: 767px) {
    html,
    body {
        overflow-x: clip;
    }

    /* c.f.jpg (280px + margine 30px da Simple CSS) usciva sotto i 340px */
    img.inlinecenter {
        max-width: calc(100% - 60px);
        height: auto;
    }
}