/* Correzioni di responsive al CSS originale del sito (templates/template_2), caricate dopo i file originali.

   Indice
   1. Menu su computer: voci sempre su una riga, mai sotto il logo
   2. Testata a tutto schermo: spazio riservato da subito
   3. Menu su computer più grande (bozza del cliente, 9/11/2026) */

/* 1. Menu su computer
   Le voci hanno spazi laterali fissi (45px, 30px sotto i 1400px) mentre i caratteri crescono con lo schermo: tra
   1250 e 1650px la riga non ci stava e le ultime voci andavano a capo sotto il logo, anche nella barra che compare
   scorrendo (lì il menu parte dopo il logo). Gli spazi ora seguono la larghezza dello schermo, con gli stessi valori
   di prima dove la riga entrava; It | En mantengono i loro 10px attorno al filetto. */
@media (min-width: 993px) {
    body #menu ul.navbar-nav {
        display: inline-flex;
        flex-wrap: nowrap;
        white-space: nowrap;
    }
    body #menu ul.navbar-nav > li {
        float: none;
        padding-left: clamp(15px, calc((100vw - 1000px) / 14), 45px);
        padding-right: clamp(15px, calc((100vw - 1000px) / 14), 45px);
    }
    body #menu.menu-change ul.navbar-nav > li {
        padding-left: clamp(10px, calc((100vw - 1100px) / 16), 45px);
        padding-right: clamp(10px, calc((100vw - 1100px) / 16), 45px);
    }
    body #menu ul.navbar-nav > li:nth-child(8),
    body #menu.menu-change ul.navbar-nav > li:nth-child(8) {
        padding-right: 10px;
    }
    body #menu ul.navbar-nav > li:nth-child(9),
    body #menu.menu-change ul.navbar-nav > li:nth-child(9) {
        padding-left: 10px;
    }
}

/* Barra scura (logo a sinistra, largo fino a 190px): il menu parte a 200px come fa già l'originale tra 1401 e
   1600px. Sotto i 1400px partiva a 160px, sopra i 1600px era centrato e in inglese arrivava sotto il logo. */
@media (min-width: 1201px) and (max-width: 1400px) {
    body #menu.menu-change ul.navbar-nav {
        margin-left: 200px;
    }
}
@media (min-width: 1601px) and (max-width: 1840px) {
    body #menu.menu-change .menu-content {
        text-align: left;
    }
    body #menu.menu-change ul.navbar-nav {
        margin-left: 200px;
    }
}

/* 2. Testata a tutto schermo
   Su computer lo script del template (functions.js, altezzasectionuno) porta la prima sezione all'altezza della
   finestra solo dopo il caricamento: fino ad allora la testata era bassa e tutta la pagina saltava giù di colpo
   (spostamento del layout misurato da Google, CLS). La stessa altezza ora è data subito; lo script poi la riscrive
   uguale nello stile della sezione. */
@media (min-width: 993px) {
    article > section#slideshow.imgrespons[data-altprimsez="1"]:first-child,
    article > section#slideshow.imgrespons[data-altprimsez="1"]:first-child > .colonna.imgrespons > .custom-col {
        height: 100vh;
    }
}

/* 3. Menu su computer più grande (bozza del cliente «Menu del sito: attuale e proposta», 9/11/2026)
   Voci +40% (a 1470px da 15 a 21px, stesso Canela), su una riga in alto e nella barra scura: dove la riga non
   entrerebbe la grandezza si ferma da sola (100vw - 470px)/46, con 46 = larghezza del testo inglese per ogni px
   di carattere. Gli spazi laterali prendono quello che avanza, fino a 30px per lato; It | En restano a 10px dal
   filetto, che resta 1,32 volte la voce come in origine. Ombra leggera solo sulla foto (non nella barra e non su Gallery e Mappa, che hanno le voci scure). */
@media (min-width: 993px) {
    body #menu ul.navbar-nav > li > a {
        font-size: max(1.1em, min(1.68em, calc((100vw - 470px) / 46)));
        line-height: max(20px, 1.32em); /* filetto It | En alto come in origine (20px su 15px) */
    }
    body #menu ul.navbar-nav > li {
        --voce: max(1.1em, min(1.68em, calc((100vw - 470px) / 46)));
        padding-left: clamp(10px, calc((100vw - 200px - 46 * var(--voce)) / 16), 30px);
        padding-right: clamp(10px, calc((100vw - 200px - 46 * var(--voce)) / 16), 30px);
    }
    body #menu.menu-change ul.navbar-nav > li {
        padding-left: clamp(8px, calc((100vw - 320px - 46 * var(--voce)) / 16), 30px);
        padding-right: clamp(8px, calc((100vw - 320px - 46 * var(--voce)) / 16), 30px);
    }
    body #menu ul.navbar-nav > li:nth-child(8),
    body #menu.menu-change ul.navbar-nav > li:nth-child(8) {
        padding-right: 10px;
    }
    body #menu ul.navbar-nav > li:nth-child(9),
    body #menu.menu-change ul.navbar-nav > li:nth-child(9) {
        padding-left: 10px;
    }
    body:not(#page_gallery):not(#page_mappa) #menu:not(.menu-change) ul.navbar-nav > li > a {
        text-shadow: 0 1px 3px rgba(0, 0, 0, .34), 0 0 1px rgba(0, 0, 0, .18);
    }
}

/* Barra scura: con le voci più grandi (sezione 3) la riga cresceva solo verso il basso, perché la sua cima resta
   fissa dove la mette il CSS originale; le voci scendevano fino a 7px sotto il centro sugli schermi grandi. La riga
   risale di metà dell'altezza aggiunta, così il centro resta dove era nell'originale (filetto It | En compreso). */
@media (min-width: 993px) {
    body #menu.menu-change ul.navbar-nav > li {
        margin-top: calc((20px - max(20px, 1.32 * var(--voce))) / 2);
    }
}