/* Regole aggiunte durante il porting su ASP.NET Core.
   Stanno in un file a parte per non toccare i CSS ereditati dal sito WebForms. */

.nascondi { display: none !important; }

/* Riserva lo spazio delle immagini prima che vengano scaricate: senza width/height
   dichiarati il contenuto salta durante il caricamento (Cumulative Layout Shift). */
.img-piccolo img,
.img-piccolo video,
.img-xl img,
.img-xl video {
    display: block;
}

/* Messaggi di validazione del form candidature. */
.field-validation-error,
.validation-summary-errors {
    color: #ff8a65;
    font-size: 15px;
}

.validation-summary-errors ul {
    list-style: none;
    padding-left: 0;
}

.form-control.input-validation-error,
.form-select.input-validation-error {
    border-bottom-color: #ff8a65;
}

/* Honeypot antispam: fuori dallo schermo ma non display:none, cosi' i bot lo compilano. */
.hp-field {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* Pagine di errore e di conferma: il layout del sito e' scuro a tutta pagina. */
.pagina-messaggio {
    min-height: 60vh;
    padding: 200px 0 100px;
}

.pagina-messaggio h1 {
    color: #fff;
    font-weight: 700;
    text-transform: uppercase;
}

.pagina-messaggio p {
    color: #fff;
    font-size: 20px;
}

/* --- Gerarchia dei titoli ---
   Nel sito WebForms la home aveva cinque <h1>. Ne resta uno solo (il nome del locale) e gli
   altri sono diventati <h2>/<p>: queste regole ricreano l'aspetto originale sui nuovi tag,
   quindi la resa e' identica ma la struttura e' quella che si aspettano motori e screen reader. */

.mega-title h2.titolo-grande {
    font-size: 70px;
    font-weight: 700;
    color: #fff;
    text-transform: uppercase;
}

@media (min-width: 1399.98px) {
    .mega-title h2.titolo-grande {
        font-size: calc(12.4375549em - var(--ffsd)) !important;
    }
}

h2.titolo-sezione,
h3.titolo-sezione {
    font-weight: 700;
    font-size: max(calc(12px * var(--rfso, var(--bfso, 1))), calc(9.72222917em - var(--ffsd)));
    color: #fff;
    text-transform: uppercase;
}

@media (min-width: 1024.05px) {
    h2.titolo-sezione,
    h3.titolo-sezione {
        font-size: max(calc(12px * var(--rfso, var(--bfso, 1))), calc(3.41630307em - var(--ffsd)));
    }
}

/* Etichette dei contatti: erano <h2>, ora sono paragrafi e voci di lista di definizione. */
p.sub-subtitle,
dt.sub-subtitle {
    color: #fff;
    padding-top: 3%;
    text-transform: uppercase;
    font-weight: 700;
    font-size: 20px;
}

p.sub-text,
dd.sub-text {
    color: #fff;
    font-size: 18px;
    margin-bottom: 0;
}

dl.contatti-lista {
    margin-bottom: 0;
}

/* Il footer resta in fondo alla finestra anche sulle pagine corte (404, grazie):
   senza questo, sotto al footer resta una fascia bianca. */
body.pagina-sito {
    display: flex;
    flex-direction: column;
    min-height: 100vh;
    background: var(--bg-color-dark);
}

body.pagina-sito > main {
    flex: 1 0 auto;
}

body.pagina-sito > footer {
    flex-shrink: 0;
}

/* Icona del menu mobile: sostituisce l'unica icona Font Awesome che il sito usava. */
.navbar-toggler .icona-menu {
    color: #fff;
    display: block;
}