/*=============================================
=   Menù di testata: correzioni del sito      =
==============================================*/

/*
   Questo foglio si carica per ultimo e contiene SOLO le correzioni al menù.
   style.css è il foglio del tema comprato: non va toccato, un suo aggiornamento
   riscriverebbe le modifiche.

   Due cose:
   1. la barra delle sezioni da tre righe a due;
   2. le tendine lunghe su più colonne, invece di una colonna sola che esce
      dallo schermo.

   Tutto sta dentro la soglia dei 992px, sopra la quale compare il menù di
   testata; sotto entra quello a scomparsa del telefono, che non si tocca.
   Le regole partono da .navbar-wrap, che nel menù del telefono non esiste
   (main.js:30 ne copia il contenuto, non il contenitore): il clone resta com'è.
*/

@media (min-width: 992px) {

    /*---------------------------------------------
    =   1. La barra delle sezioni: due righe       =
    ---------------------------------------------*/

    /* Le diciotto voci sommate superano di due volte e mezza la larghezza del
       contenitore: su una riga sola non ci stanno in nessun caso. Corpo e
       spaziature ridotti portano la riga da 70px a 37, e le voci da tre righe
       a due su tutti gli schermi da 1200px in su. */
    .menu-style-six .navbar-wrap {
        flex: 1;
    }

    .menu-style-six .navbar-wrap > ul {
        width: 100%;
        justify-content: center;
    }

    .menu-style-six .navbar-wrap > ul > li > a {
        font-size: 13px;
        padding: 12px 13px;
    }

    /* Il segnaposto che compensa il menù quando si stacca e resta in alto:
       il tema lo dava alto 95px, quanto il menù non è mai stato. */
    #header-fixed-height.active-height {
        height: 111px;
    }

    /*---------------------------------------------
    =   2. Le tendine lunghe, su più colonne       =
    ---------------------------------------------*/

    /* La classe la mette include.php contando le voci della sezione
       (funzione classe_colonne_sottomenu). Le sezioni fino a otto voci non
       ricevono niente e restano la colonna stretta del tema. */

    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] {
        right: auto;                       /* il tema fissava left e right insieme */
        padding: 10px 4px;
        column-gap: 10px;
        column-rule: 1px solid #f1f1f1;
    }

    .navbar-wrap ul li .sub-menu-2 {
        width: min(480px, calc(100vw - 40px));
        column-count: 2;
    }

    .navbar-wrap ul li .sub-menu-3 {
        width: min(700px, calc(100vw - 40px));
        column-count: 3;
    }

    .navbar-wrap ul li .sub-menu-4 {
        width: min(900px, calc(100vw - 40px));
        column-count: 4;
    }

    .navbar-wrap ul li .sub-menu-6 {
        width: min(1280px, calc(100vw - 30px));
        column-count: 6;
    }

    /* Un pannello largo, aperto da una voce della prima riga, copre la seconda.
       Con un filo di ritardo il mouse che passa sopra per andare altrove non lo
       apre: si apre solo fermandocisi. La chiusura resta immediata. */
    .navbar-wrap ul li:hover > .sub-menu[class*="sub-menu-"] {
        transition-delay: 0.15s;
    }

    /* Una voce non deve spezzarsi fra il fondo di una colonna e la cima
       della successiva. */
    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li {
        break-inside: avoid;
        -webkit-column-break-inside: avoid;
    }

    /* Voci più strette e più fitte: con sei colonne lo spazio di ognuna è un
       sesto, e i nomi dei comuni sono lunghi. Nessuna altezza massima e nessuno
       scorrimento interno: un contenitore a colonne con l'altezza bloccata
       sposta le colonne di troppo di lato, non in basso, e sarebbero voci perse.
       Il pannello si tiene basso col numero di colonne: Cronaca, la più lunga,
       resta entro lo schermo di un portatile da 768px di altezza. */
    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li a {
        font-size: 13px;
        padding: 5px 8px 5px 16px;
    }

    .navbar-wrap ul li .sub-menu[class*="sub-menu-"] li a::before {
        left: 5px;
    }

}

/* Il contenitore del sito è largo 1320px fino a 1500 di finestra e 960 sotto
   i 1200 (responsive.css:76 e :421): la misura intermedia di Bootstrap, 1140,
   qui non esiste. Da 1200 in su le voci stanno in due righe, sotto restano
   tre — alte un terzo di prima. */
@media (min-width: 1200px) {
    #header-fixed-height.active-height {
        height: 74px;
    }
}

/* Tema scuro: il separatore fra le colonne, come il bordo delle tendine
   alla riga 6241 di style.css. */
[tg-theme=dark] .navbar-wrap ul li .sub-menu[class*="sub-menu-"] {
    column-rule-color: var(--tg-gray);
}