/* =========================================
   IL MENU NELLA FASCIA STRETTA (800px - 1060px)
   =========================================

   Sotto gli 800px il menu diventa quello a panino: le voci scompaiono, resta il
   logo a sinistra e il pulsante a destra. Sopra gli 800 torna orizzontale.

   Ma fra gli 800 e i ~1000px le sette voci di Crivi Design piu' il pulsante
   «Preventivo» ci stanno appena. La lista ha flex-wrap: wrap, quindi invece di
   uscire dallo schermo andrebbe a capo, e la seconda riga finirebbe sopra la
   testata della pagina, accavallata al logo.

   Si vede solo restringendo la finestra su un portatile — cioe' mai, guardando
   il sito a schermo intero. E' per questo che era rimasto li'.

   Qui si stringono spazi e caratteri quel tanto che basta a farlo stare su una
   riga sola.
   ========================================= */

@media screen and (min-width: 800px) and (max-width: 1060px) {

    #menu { gap: 0.6em; }

    .m0 {
        gap: 0.6em;
        font-size: 0.92em;
    }

    /* Il separatore fra le voci: con gli spazi stretti va avvicinato, o le
       voci sembrano attaccate al trattino invece che separate da esso. */
    #menu>.m0>.n0:not(:last-child)::after {
        margin-left: 0.6em;
    }

    .cta-preventivo {
        padding-left: 0.9em;
        padding-right: 0.9em;
        font-size: 0.9em;
    }
}

/* Appena sopra il punto di passaggio lo spazio e' pochissimo: va tolto anche
   il trattino fra una voce e l'altra. Le voci restano separate dallo spazio,
   che e' meno elegante ma si legge — e comunque meglio di un menu su due righe
   appoggiato sopra la fotografia della testata. */
@media screen and (min-width: 800px) and (max-width: 980px) {

    #menu { gap: 0.45em; }

    .m0 {
        gap: 0.45em;
        font-size: 0.84em;
    }

    #menu>.m0>.n0:not(:last-child)::after {
        display: none;
    }

    .cta-preventivo {
        padding-left: 0.7em;
        padding-right: 0.7em;
        font-size: 0.82em;
    }
}

/* Gli ultimi cinquanta pixel prima del panino.
   Misurato a 800: alle voci servivano 577px e ce n'erano 565. Mancavano
   dodici. Il margine si recupera dal respiro laterale dell'intestazione, che
   a questa larghezza e' spazio sprecato, e da un filo di carattere in meno —
   senza toccare il logo, che e' il marchio. */
@media screen and (min-width: 800px) and (max-width: 860px) {

    #header-panel-inner {
        padding-left: 1.25em;
        padding-right: 1.25em;
    }

    .m0 { font-size: 0.8em; }

    .cta-preventivo {
        padding-left: 0.6em;
        padding-right: 0.6em;
        font-size: 0.78em;
    }
}