/**
 * bootstrap3-compat.css — rimette su Bootstrap 5 quello che la 3 dava per scontato
 * ================================================================================
 *
 * PERCHE' ESISTE. Il sito pubblico stava su Bootstrap 3.3.1 (dicembre 2014).
 * Fra la 3 e la 5 non e' cambiato solo il nome di qualche classe: sono cambiate
 * tre cose che il sito usa in ogni pagina senza scriverle da nessuna parte.
 *
 *   1. IL CLEARFIX. In Bootstrap 3 ogni `.container` e ogni `.row` avevano uno
 *      pseudo-elemento `::after { clear: both }`. Il nostro main.css fa
 *      galleggiare a sinistra `.imageTop`, `.menuContainer` e `.newsCom`: erano
 *      quei clearfix, invisibili nel markup, a tenere in piedi l'impaginazione.
 *      Bootstrap 5 li ha tolti (la griglia e' flex e non ne ha piu' bisogno) e
 *      senza di essi il `.container` della home collassava ad altezza zero e il
 *      `<footer>` verde si prendeva tutta la pagina.
 *
 *   2. I BREAKPOINT HANNO CAMBIATO SOGLIA A PARITA' DI NOME.
 *         Bootstrap 3:  sm >= 768   md >= 992   lg >= 1200
 *         Bootstrap 5:  sm >= 576   md >= 768   lg >= 992
 *      Le 27 `col-md-*` del sito passavano quindi su due colonne gia' a 768px
 *      invece che a 992px: su tablet il testo finiva accanto alle foto invece
 *      che sopra. Non e' una classe rinominata, e' la stessa classe che si
 *      accende prima.
 *
 *   3. LE MISURE DI BASE. Bootstrap 3 scriveva a 14px/1.428 con Helvetica,
 *      Bootstrap 5 a 16px/1.5 con il font di sistema; `.container` era largo
 *      750/970/1170, ora e' 540/720/960/1140/1320; le liste avevano il rientro
 *      del browser (40px), ora 2rem. Tutto insieme spostava ogni riga di testo.
 *
 * COME E' STATO VERIFICATO. Ho catturato le sette pagine vere del sito, ne ho
 * fatte due copie identiche cambiando solo il CSS di Bootstrap, e le ho
 * confrontate pixel per pixel a 375, 576, 768, 992, 1200 e 1400 px di
 * larghezza. Le regole qui sotto sono quelle che servono per far coincidere i
 * due rendering: sono ricopiate da Bootstrap 3.3.1, non inventate.
 *
 * COSA NON E' QUI, perche' e' stato convertito sul serio nei template:
 * `data-toggle="dropdown"` -> `data-bs-toggle="dropdown"` in menu.html, che in
 * Bootstrap 5 non e' una questione di aspetto ma di funzionamento.
 *
 * ⚠️ QUESTO FILE E' UN PONTE, NON UNA META'. Finche' esiste, il sito usa classi
 * che Bootstrap non conosce piu' (`.navbar-fixed-top`, `.navbar-header`,
 * `.navbar-toggle`, `.caret`, `.sr-only`, `.nav > li > a`). Rifacendo l'HTML
 * con il markup di Bootstrap 5 si possono cancellare da qui i blocchi
 * corrispondenti, uno per volta.
 */

/* --- tipografia di base: Bootstrap 3.3.1, _scaffolding.scss e _type.scss --- */
body {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
    font-size: 14px;
    line-height: 1.42857143;
    color: #333;
}
a { text-decoration: none; }
a:hover, a:focus { text-decoration: underline; }
h1, h2, h3 { margin-top: 20px; margin-bottom: 10px; font-weight: 500; line-height: 1.1; }
h4, h5, h6 { margin-top: 10px; margin-bottom: 10px; font-weight: 500; line-height: 1.1; }
h1 { font-size: 36px; }
h2 { font-size: 30px; }
h3 { font-size: 24px; }
h4 { font-size: 18px; }
h5 { font-size: 14px; }
h6 { font-size: 12px; }
p  { margin: 0 0 10px; }
/* Bootstrap 3 lasciava alle liste il rientro del browser; il reboot della 5 lo
   porta a 2rem = 32px, e ogni elenco puntato si allarga di 8px. */
ul, ol { margin-top: 0; margin-bottom: 10px; padding-left: 40px; }

/* --- il clearfix del punto 1 --------------------------------------- */
.container:before, .container:after,
.container-fluid:before, .container-fluid:after,
.row:before, .row:after,
.navbar:before, .navbar:after,
.navbar-header:before, .navbar-header:after,
.navbar-collapse:before, .navbar-collapse:after,
.nav:before, .nav:after,
.clearfix:before, .clearfix:after {
    content: " ";
    display: table;
}
.container:after, .container-fluid:after, .row:after,
.navbar:after, .navbar-header:after, .navbar-collapse:after, .nav:after,
.clearfix:after {
    clear: both;
}

/* --- griglia: larghezze fisse e colonne a float --------------------- */
.container, .container-fluid {
    padding-left: 15px;
    padding-right: 15px;
    margin-left: auto;
    margin-right: auto;
}
.container { width: auto; max-width: none; }
@media (min-width: 768px)  { .container { width: 750px;  } }
@media (min-width: 992px)  { .container { width: 970px;  } }
@media (min-width: 1200px) { .container { width: 1170px; } }

/* In Bootstrap 3 la `.row` era un blocco con margini negativi di 15px e le
   colonne galleggiavano. Qui la riporto a blocco e riuso la variabile della 5
   per ottenere gli stessi 15px di gronda invece dei 12px nuovi. */
.row { display: block; --bs-gutter-x: 30px; --bs-gutter-y: 0; }
[class*="col-"] { position: relative; min-height: 1px; float: left; }

/* --- i breakpoint del punto 2 --------------------------------------
   Sotto la soglia di Bootstrap 3 la colonna deve tornare un blocco a tutta
   larghezza. Serve togliere ANCHE il float, non solo la percentuale: una
   colonna che galleggia non si sovrappone alle immagini flottanti come faceva
   il blocco, si mette sotto, e la pagina si allunga. */
@media (max-width: 767.98px)  { [class*="col-sm-"] { width: 100%; float: none; } }
@media (max-width: 991.98px)  { [class*="col-md-"] { width: 100%; float: none; } }
@media (max-width: 1199.98px) { [class*="col-lg-"] { width: 100%; float: none; } }

/* --- nav: la 3 impilava i <li>, la 5 li mette in fila con flex ------
   Sta PRIMA della navbar apposta: e' l'ordine di Bootstrap 3, dove
   `.navbar-nav { margin: 7.5px -15px }` deve poter vincere su
   `.nav { margin-bottom: 0 }`. Invertendoli il menu mobile perde 7,5px. */
.nav { display: block; padding-left: 0; margin-bottom: 0; list-style: none; }
.nav > li { position: relative; display: block; }
.nav > li > a { position: relative; display: block; padding: 10px 15px; }
.nav > li > a:hover, .nav > li > a:focus { text-decoration: none; background-color: #eee; }

/* --- navbar: in Bootstrap 3 e' un blocco, nella 5 e' un flex -------- */
.navbar {
    position: relative;
    display: block;
    padding: 0;
    min-height: 50px;
    margin-bottom: 20px;
    border: 1px solid transparent;
}
.navbar-fixed-top {
    position: fixed;
    top: 0; right: 0; left: 0;
    z-index: 1030;
    border-width: 0 0 1px;
}
@media (min-width: 768px) {
    .navbar { border-radius: 4px; }
    .navbar-fixed-top { border-radius: 0; }
}
/* Sotto i 768px Bootstrap 3 riportava l'intestazione a filo del bordo,
   annullando il padding del `.container` che la contiene. Senza questo il
   logo e il pulsante del menu rientrano di 15px per parte. */
.container > .navbar-header, .container-fluid > .navbar-header,
.container > .navbar-collapse, .container-fluid > .navbar-collapse {
    margin-right: -15px;
    margin-left: -15px;
}
@media (min-width: 768px) {
    .container > .navbar-header, .container-fluid > .navbar-header,
    .container > .navbar-collapse, .container-fluid > .navbar-collapse {
        margin-right: 0;
        margin-left: 0;
    }
}
/* Bootstrap 5 rende flex il `.container` dentro la navbar e lo distribuisce con
   space-between: il logo del sito, che e' in posizione assoluta, finirebbe a
   meta' schermo e uscirebbe dallo schermo sul telefono. */
.navbar > .container, .navbar > .container-fluid { display: block; }
@media (min-width: 768px) { .navbar-header { float: left; } }
.navbar-nav { margin: 7.5px -15px; }
.navbar-nav > li > a { padding-top: 10px; padding-bottom: 10px; line-height: 20px; }
@media (min-width: 768px) {
    .navbar-nav { float: left; margin: 0; }
    .navbar-nav > li { float: left; }
    .navbar-nav > li > a { padding-top: 15px; padding-bottom: 15px; }
}
.navbar-right { float: right !important; }
/* Unica cosa che bootstrap-theme.min.css (tolto) lasciava davvero sul sito:
   un'ombra bianca sotto le voci del menu. Il confronto pixel a pixel dice che
   e' l'unico suo effetto visibile — i gradienti sui bottoni erano gia'
   annullati da `.btn-success { background-image: none }` in main.css. */
.navbar-brand, .navbar-nav > li > a { text-shadow: 0 1px 0 rgba(255, 255, 255, .25); }
@media (min-width: 768px) { .navbar-right { margin-right: -15px; } }

/* Il pulsante del menu mobile: sotto i 768px apre mmenu, sopra sparisce. */
.navbar-toggle {
    position: relative;
    float: right;
    margin: 8px 15px 8px 0;
    padding: 9px 10px;
    background-color: transparent;
    background-image: none;
    border: 1px solid transparent;
    border-radius: 4px;
}
.navbar-toggle .icon-bar { display: block; width: 22px; height: 2px; border-radius: 1px; }
.navbar-toggle .icon-bar + .icon-bar { margin-top: 4px; }
@media (min-width: 768px) { .navbar-toggle { display: none; } }

/* --- dropdown: la 5 si aspetta `.dropdown-item`, il sito ha `<li><a>` --- */
.dropdown-menu {
    padding: 5px 0;
    /* niente margine: in Bootstrap 3 erano 2px, ma nella 5 li mette gia'
       Popper come scostamento, e sommandoli la tendina scende di 4px. */
    font-size: 14px;
    border: 1px solid rgba(0, 0, 0, .15);
    border-radius: 4px;
    box-shadow: 0 6px 12px rgba(0, 0, 0, .175);
}
.dropdown-menu > li > a {
    display: block;
    padding: 3px 20px;
    clear: both;
    font-weight: 400;
    line-height: 1.42857143;
    color: #333;
    white-space: nowrap;
    text-decoration: none;
}
.dropdown-menu > li > a:hover, .dropdown-menu > li > a:focus {
    color: #262626;
    background-color: #f5f5f5;
}
/* Dentro una navbar Bootstrap 3 attaccava la tendina al menu, senza stacco e
   con gli angoli alti squadrati. Lo stacco di 2px della 5 lo toglie invece
   `data-bs-offset="0,0"` sul link in menu.html: qui e' Popper a posizionare la
   tendina, e un margine CSS non basterebbe. */
.navbar-nav > li > .dropdown-menu {
    margin-top: 0;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

/* La 3 apriva il menu mettendo `.open` sul <li>, la 5 mette `.show` sul link.
   Tengo valida la vecchia regola per non far dipendere l'apertura da un solo
   nome di classe. */
.open > .dropdown-menu { display: block; }
/* `.caret` non esiste piu': e' la freccina accanto a "Chi siamo". La 5 la
   disegna da se' con uno pseudo-elemento sul link; lasciandoli tutti e due le
   freccine diventano due e il resto del menu scorre a destra. */
.dropdown-toggle::after { display: none; }
.caret {
    display: inline-block;
    width: 0; height: 0;
    margin-left: 2px;
    vertical-align: middle;
    border-top: 4px solid;
    border-right: 4px solid transparent;
    border-left: 4px solid transparent;
}

/* --- form e bottoni: misure della 3 (il form di login e' l'unico punto) --- */
.form-group { margin-bottom: 15px; }
.form-control {
    height: 34px;
    padding: 6px 12px;
    font-size: 14px;
    line-height: 1.42857143;
    color: #555;
    border: 1px solid #ccc;
    border-radius: 4px;
}
.btn { padding: 6px 12px; font-size: 14px; line-height: 1.42857143; border-radius: 4px; }

/* --- `.sr-only` in Bootstrap 5 si chiama `.visually-hidden` --------- */
.sr-only {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}