@font-face {
    font-family: 'SuisseIntlnews';
    src: url('font/SuisseIntl-News.otf') format('opentype'); 
    font-weight: normal;
    font-style: normal;
}

body {
    background-color: rgb(251, 250, 248); 
    align-items: center; 
    height: 100vh;
    width: 100%;
    margin-left: 2vh;
    flex-direction: column;
    overflow: hidden; 
    display: flex; 
    
    -webkit-font-smoothing: antialiased;
  
    -moz-osx-font-smoothing: grayscale;
    
    text-rendering: optimizeLegibility;
}

.framecentrale {
    display: flex; 
    justify-content: center; 
    align-items: center;    
    position: relative;
    z-index: 10;
    width: 100vw;        
    margin-left: -2vh; 
    flex-grow: 1;       
}

h1 {
    font-family: 'SuisseIntlnews';
    font-size: 7vh;
    color: rgb(29, 24, 21);
    margin-left: 2vh;
}

h2 {
    font-family: 'SuisseIntlnews';
    font-size: 4vh;
    color: rgb(29, 24, 21);
    margin-left: 2vh;
    margin-right: 2vh;
    padding-bottom: 7vh;
    max-width: 70%; 
}

p, span, button, input {
    font-family: 'SuisseIntlnews';
    font-size: 2.5vh;
    color: rgb(29, 24, 21);
}

.hover-effect:hover {
    text-decoration: underline;
}

.video-home {
    height: 60vh;
    width: 60vh;
    object-fit: cover;
    z-index: 10;
    display: block;
    padding-bottom: 5vh;
}

/* === NUOVO SISTEMA A GRIGLIA PER ALLINEAMENTO PERFETTO === */

/* Applichiamo lo stesso layout a Banner (Alto) e Footer (Basso) */
.banner-container, footer {
    display: grid;
    /* 1fr (Sinistra) - auto (Centro in base al contenuto) - 1fr (Destra) */
    grid-template-columns: 1fr auto 1fr;
    align-items: end; /* Allinea tutto in basso sulla riga */
    
    /* Margini laterali identici */
    margin-right: 2vh;
    margin-left: 2vh;
    
    /* Larghezza fissa rispetto ai margini */
    width: calc(100% - 4vh); 
}

/* Regole specifiche per il Banner in alto */
.banner-container {
    height: 5vh; /* Altezza fissa header */
    align-items: center; /* Nel banner alto centriamo verticalmente */
}

/* Regole specifiche per il Footer */
footer {
    position: fixed;
    bottom: 0;
    left: 0;
    padding-bottom: 2vh; 
    z-index: 100; 
    pointer-events: auto; 
}

/* === CLASSI DI ALLINEAMENTO GRIGLIA === */

/* Colonna Sinistra (Freccia, Soema) */
.grid-left {
    justify-self: start;
    text-align: left;
}

/* Colonna Centrale (Menu, Indirizzo) */
.grid-center {
    justify-self: center;
    text-align: center;
    display: flex;
    flex-direction: row;
    align-items: center;
}

/* Colonna Destra (1/4, Iscriviti) */
.grid-right {
    justify-self: end;
    text-align: right;
}

/* Reset margini paragrafi dentro la griglia */
.grid-left p, .grid-center p, .grid-right p {
    margin: 0;
}


/* Form Iscriviti */
#form-iscriviti {
    display: flex;
    align-items: center;
    justify-content: flex-end; /* Allinea a destra dentro la sua cella */
    gap: 10px;
}

#form-iscriviti input {
    background: transparent;
    border: none;
    border-bottom: 1.5px solid rgb(29, 24, 21);
    outline: none;
    width: 200px;
    font-family: 'SuisseIntlmedium';
    font-size: 2vh;
    color: rgb(29, 24, 21);
    padding: 0;
}

#form-iscriviti button {
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
}


/* Pannello Info */
.pannello-nascosto {
    position: fixed;
    bottom: -100%;
    left: 0;
    width: 100%;
    height: 75vh; 
    background-color: rgb(185, 177, 167); 
    z-index: 50; 
    transition: bottom 0.8s cubic-bezier(0.2, 1, 0.3, 1);
    display: flex;
    flex-direction: column;
    padding-top: 2vh;
}

.pannello-nascosto.aperto {
    bottom: 0;
}


/* RESPONSIVE */
@media (max-width: 768px) {
   
    .video-home {
        width: 70vw;
        height: 70vw;
        max-height: 50vh;
        max-width: 50vh;
        padding-bottom: 5vh;
    }

    footer {
        font-size: 11px; 
        padding-bottom: 15px; 
        /* Su mobile la larghezza è gestita dal padding laterale del grid, ok così */
    }
    
    #form-iscriviti input {
        width: 100px; 
        font-size: 2vh;
    }

    .pannello-nascosto {
        height: 90vh; 
        padding-top: 20px;
    }

    h2 {
        font-size: 3.3vh; 
        line-height: 1.3; 
        margin-right: 4vw; 
        margin-left: 2vh; 
        width: auto; 
        max-width: 85%;
    }
    
    body { margin-left: 0; }
    .framecentrale { margin-left: 0; width: 100%; }
    
    #txt-address {
        white-space: nowrap; 
        line-height: 1.4;
    }

    /* Logica sparizione footer mobile */
    footer.searching .grid-left,
    footer.searching .grid-center {
        display: none !important; 
    }

    /* Quando cerchi, la colonna destra si espande */
    footer.searching {
        display: flex; /* Passiamo a flex per centrare facilmente */
        justify-content: center;
    }
    
    footer.searching .grid-right {
        width: 100%;
        display: flex;
        justify-content: center;
    }

    footer.searching #form-iscriviti input {
        width: 60vw;
        text-align: center; 
    }
}