/* ================================
   Custom Bootstrap 5-Compatible Styles
================================== */

html {
    font-size: 100%;
}

body {
    background: #ffffff;
    font-family: 'Roboto', sans-serif;
    font-size: 16px;
    font-weight: 300;
    color: #313131;
    line-height: 28px;
    text-align: center;
    overflow-x: hidden !important;
    margin: auto !important;
}

a {
    transition: all ease 0.25s;
    text-decoration: none;
}

    a:hover {
        text-decoration: none;
    }

.btn:focus,
.btn:active {
    outline: none;
    box-shadow: none;
}

*, *::before, *::after {
    box-sizing: border-box;
}

ul,
ol {
    padding-left: 0 !important;
}

li {
    list-style: none;
}

/* Preloader */
.preloader {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: #fefefe;
    z-index: 99999;
    height: 100%;
    width: 100%;
    overflow: hidden !important;
}

.status {
    width: 40px;
    height: 40px;
    position: absolute;
    left: 50%;
    top: 50%;
    background: url(../images/loading.gif) center center no-repeat;
    background-size: cover;
    margin: -20px 0 0 -20px;
}

/* Typography */
h1,
h2 {
    font-family: 'Lane', sans-serif;
    font-weight: normal;
}

h1 {
    font-size: 3.75rem;
    line-height: 4.688rem;
}

h2 {
    font-size: 3.125rem;
    line-height: 4.063rem;
}

h3 {
    font-size: 24px;
    line-height: 38px;
    font-weight: 300;
}

h4 {
    font-size: 20px;
    line-height: 30px;
    font-weight: 300;
}

h5 {
    font-size: 18px;
    font-weight: 300;
}

/* Custom Buttons */
.standard-button,
.standard-button2 {
    font-size: 18px;
    font-weight: 400 !important;
    border-radius: 4px !important;
    color: #ffffff;
    min-width: 150px;
    border: none;
    padding: 16px 25px;
    margin: 5px;
    transition: all ease 0.25s;
    background-color: #007bff;
}

    .standard-button:hover,
    .standard-button2:hover {
        background-color: #0056b3;
        color: #fff;
    }

    .standard-button i,
    .standard-button2 i {
        vertical-align: middle;
        margin-right: 8px;
        font-size: 20px;
    }

/* Utilities */
.white-text {
    color: #ffffff;
}

.dark-text {
    color: #272727;
}

.grey-bg {
    background: #F7F8FA !important;
}

/* Navbar */
.navbar-white {
    background-color: white !important;
    border-bottom: 1px solid rgba(0, 0, 0, 0.1);
}

.navbar-white .nav-link,
.navbar-white .navbar-brand {
    color: #999 !important;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
}

    .navbar-white .nav-link:hover,
    .navbar-white .dropdown-item:hover {
        color: #0056b3 !important;
    }

/* Dropdown styling to match main nav links */
.navbar-white .dropdown-menu {
    border: none;
    border-radius: 0;
    padding: 0;
}

.navbar-white .dropdown-item {
    color: #999;
    font-family: 'Roboto', sans-serif;
    font-size: 13px;
    text-transform: uppercase;
    padding: 10px 20px;
    transition: all ease 0.25s;
}

/* Sections */
.section-header {
    padding-bottom: 78px;
}

    .section-header h2 {
        margin-bottom: 20px;
    }

    .section-header .section-description {
        display: inline-block;
        position: relative;
        text-align: center;
        padding: 10px 0;
    }

/* Le tre righine decorative sotto i titoli di sezione.
   In styles.css erano tre regole distinte; accorpandole si erano persi
   "margin: auto" (che e' cio' che le centra) e il margine inferiore della
   variante allineata a sinistra. Il colore arriva da css/colors/blue.css. */
.colored-line,
.white-line,
.colored-line-left {
    width: 165px;
    height: 1px;
    z-index: 1;
}

.colored-line,
.white-line {
    margin: auto;         /* <- senza questo la riga resta attaccata a sinistra */
}

.white-line {
    background: #ffffff;
}

.colored-line-left {
    display: block;
    margin-bottom: 10px;
}

/* Header */
header {
    //background: url(../images/bg-1.jpg) no-repeat center top fixed;
    //background-size: cover;
}

.stellar-bg {
    background: url(../images/bg-1.jpg) no-repeat center top fixed;
    background-size: cover;
}


    header .color-overlay {
        min-height: 900px;
    }

    header .full-screen {
        width: 100%;
        min-height: 100vh;
    }

    header .intro-section {
        margin: auto;
        padding-top: 15%;
    }

        header .intro-section .intro,
        header .intro-section h5 {
            color: #ffffff;
        }

        header .intro-section .intro {
            margin-bottom: 36px;
        }

        header .intro-section .buttons {
            margin-top: 35px;
        }

/* Voci di menu: allineate alla versione online (Bootstrap 3).
   La specificita' e' volutamente alta (.navbar.navbar-white .navbar-nav .nav-link)
   perche' Bootstrap 5 applica .navbar-expand-lg .navbar-nav .nav-link { padding: .5rem }
   che altrimenti vince su .navbar-white .nav-link. */
.navbar.navbar-white {
    /* Bootstrap 5 aggiunge .5rem sopra e sotto: senza azzerarlo la barra
       passa da 60px (versione online) a 77px. */
    padding-top: 0;
    padding-bottom: 0;
    /* altezza costante a ogni breakpoint (era in styles.css, .sticky-navigation):
       serve anche a poter usare un solo valore di scroll-margin-top qui sotto */
    min-height: 60px;
}

.navbar.navbar-white .navbar-nav .nav-link {
    font-size: 13px;      /* uguale al sito pubblicato */
    font-weight: 400;     /* senza questo eredita il 300 del body e sembra piu' piccolo */
    padding: 15px 8px;    /* Bootstrap 5 metterebbe .5rem = 8px, ma solo in orizzontale */
    line-height: 30px;
}

/* Sopra i 1400px il container e' 1320px: c'e' spazio per i 15px per lato
   del sito pubblicato. Sotto resta 8px, altrimenti le 9 voci non entrano. */
@media (min-width: 1400px) {
    .navbar.navbar-white .navbar-nav .nav-link {
        padding: 15px;
    }
}

/* Responsive overrides */
/* Il menu ha 9 voci: sotto i 1200px non ci sta in orizzontale (servirebbero
   ~1086px di container contro i 960px del breakpoint lg), per questo la navbar
   usa navbar-expand-xl e non -lg. */
@media (max-width: 1199.98px) {
    /* menu collassato: le voci diventano una lista verticale, il padding largo non serve */
    .navbar.navbar-white .navbar-nav .nav-link {
        padding: 8px 4px;
        line-height: 24px;
    }
}

/* (rimossa la riduzione a 13px sotto i 768px: ora il menu e' 13px ovunque) */


/* =========================================================================
   Regole per le pagine che usano cda.Master.
   Questo foglio e' caricato DOPO styles.css e ne corregge le parti scritte
   per Bootstrap 3.
   ========================================================================= */

/* styles.css nasconde la navbar con transform:translateY(-100%) e la rivela
   aggiungendo .nav-visible via JS. Con .fixed-top di Bootstrap 5 non serve:
   senza questo override il menu non si vedrebbe mai. */
.navbar.navbar-white.sticky-navigation {
    transform: none;
}

/* .text-justify non esiste piu' in Bootstrap 5 ma e' usata su ~43 blocchi
   di testo (il wrapper del contenuto in cda.Master la applica a tutti). */
.text-justify {
    text-align: justify;
}

/* Modulo contatti: era gestito da simple-expand.js, ora e' un collapse di
   Bootstrap 5. La regola di styles.css (footer .contact-box .expanded-contact-form
   { display:none }) ha specificita' 0,3,0 e vincerebbe su .collapse.show,
   quindi va battuta esplicitamente. */
footer .contact-box .expanded-contact-form.collapse:not(.show) {
    display: none;
}

footer .contact-box .expanded-contact-form.collapse.show {
    display: flex;
}

footer .contact-box .expanded-contact-form.collapsing {
    display: block;
}


/* =========================================================================
   Facciata dei video YouTube (vedi js/video-privacy.js).
   Nessuna immagine esterna: sfondo pieno, cosi' finche' non si clicca non
   parte nessuna richiesta verso Google.
   ========================================================================= */
.video-privacy {
    background: #1f2933;
    overflow: hidden;
}

.video-privacy-avvio {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 10px;
    width: 100%;
    height: 100%;
    padding: 16px;
    border: 0;
    background: linear-gradient(160deg, #2b3a47 0%, #1f2933 100%);
    color: #fff;
    cursor: pointer;
    text-align: center;
    transition: background .25s ease;
}

    .video-privacy-avvio:hover,
    .video-privacy-avvio:focus-visible {
        background: linear-gradient(160deg, #35495a 0%, #243039 100%);
    }

    .video-privacy-avvio:focus-visible {
        outline: 3px solid #4ab3ff;
        outline-offset: -3px;
    }

.video-privacy-play {
    width: 0;
    height: 0;
    border-style: solid;
    border-width: 15px 0 15px 26px;
    border-color: transparent transparent transparent #ffffff;
    margin-left: 6px;   /* compensa il baricentro del triangolo */
}

.video-privacy-titolo {
    font-size: 16px;
    font-weight: 400;
    line-height: 22px;
}

.video-privacy-nota {
    font-size: 12px;
    line-height: 17px;
    font-weight: 300;
    color: #c7d0d8;
    max-width: 34em;
}


/* =========================================================================
   Regole di styles.css che servono anche alla home.
   Default.aspx non carica styles.css (usa solo questo foglio), quindi tutto
   cio' che riguarda le sue sezioni va replicato qui, altrimenti si perde.
   Valori presi tali e quali dalla versione online.
   ========================================================================= */

/* Le sezioni della home (#news, #storia, #spazi-orari...) hanno tutte
   class="app-brief": senza questa regola restavano con i soli 65px di
   pb.css sopra e zero sotto, contro 110/60 del sito pubblicato. */
.app-brief {
    padding-top: 110px;
    padding-bottom: 60px;
}

    .app-brief h2 {
        margin-bottom: 20px;
    }

    /* Senza "text-align: left" questi blocchi ereditavano il
       "text-align: center" del body e il testo finiva centrato. */
    .app-brief .left-align {
        text-align: left;
        margin-bottom: 50px;
    }

        .app-brief .left-align p {
            display: block;
            float: none;
            margin-top: 50px;
        }

/* Riga del copyright in fondo: grigia e staccata dal bordo inferiore. */
footer .copyright {
    color: #808080;
    padding-top: 10px;
    margin-bottom: 50px;
}


/* In Bootstrap 5 .row e' un contenitore flex: un <hr> figlio diretto diventa
   un flex item e i margini laterali di pb.css (30px 10px) si sommano alla
   larghezza invece di sottrarsi, facendo sforare la pagina di 10px in
   orizzontale sotto i 400px di larghezza. */
hr.style-pb {
    width: auto;
    /* i 10px di margine per lato di pb.css vanno tolti dalla larghezza,
       altrimenti si sommano e la pagina scorre in orizzontale */
    max-width: calc(100% - 20px);
    flex-basis: calc(100% - 20px);
    min-width: 0;
}


/* NOTA sulle ancore: non serve scroll-margin-top.
   pb.css applica gia' "section { padding-top:65px; margin-top:-65px }", che
   funziona da offset per la navbar fissa. Aggiungendo anche scroll-margin-top
   l'offset veniva contato due volte e sopra la sezione restava visibile una
   striscia dell'elemento precedente (sulla home: 74px di foto dopo il
   pulsante "Entra", contro i 4px del sito pubblicato). */


/* Ancora "Entra" -> #news.
   Qui sopra c'e' la foto a tutta pagina, quindi il trucco di pb.css
   ("margin-top:-65px") si vedeva: la sezione parte 65px piu' in alto della
   sua posizione naturale, e dopo lo scroll restava scoperta una striscia di
   foto sotto la navbar (65 - 60 = 5px, gli stessi che si vedono sul sito
   pubblicato). Per questa sola sezione tolgo la sovrapposizione e uso un
   offset esplicito: il padding passa a 45px, che e' esattamente quanto
   valeva prima il netto (110 di padding - 65 di margine negativo), quindi
   la spaziatura non cambia. */
section#news.app-brief {
    margin-top: 0;
    padding-top: 45px;
    scroll-margin-top: 60px;
}


/* Contenitore del contenuto nelle pagine con cda.Master (era uno style inline
   con solo margin-top:60px). I 60px liberano la navbar fixed-top, ma cosi' il
   titolo di pagina finiva incollato alla barra: il padding aggiunge il respiro.
   Il "section { margin-top:-65px }" di pb.css non lo mangia, perche' il suo
   "padding-top:65px" lo ricompensa: il netto e' esattamente il padding qui. */
.contenuto-pagina {
    margin-top: 60px;
    padding-top: 45px;
}

@media (max-width: 767.98px) {
    .contenuto-pagina {
        padding-top: 30px;
    }
}


/* Logo nella navbar. styles.css lo limitava a 30px con
   ".sticky-navigation .navbar-header img", ma .navbar-header non esiste piu'
   nel markup Bootstrap 5: senza questa regola il PNG (99x41) veniva mostrato
   alla sua dimensione naturale, piu' grande del sito pubblicato. */
.navbar-brand img {
    max-height: 30px;
    width: auto;
}