/* Reset di base e Layout Flex per la pagina intera */
html {
    height: 100%;
}

body {
    margin: 0;
    padding: 0;
    width: 100%;
    min-height: 100vh; /* Il corpo della pagina è sempre alto ALMENO quanto lo schermo */
    display: flex;
    flex-direction: column; /* Impila navbar, contenuti e footer verticalmente */
    overflow-x: hidden; /* Blocca per sempre lo scorrimento orizzontale */
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
    background-color: #ffffff;
    color: #1d1d1f;
    -webkit-font-smoothing: antialiased;
}

/* Regola fondamentale per i padding e i bordi */
*, *::before, *::after {
    box-sizing: border-box;
}

/* Stili tipografici globali */
h1, h2, h3, h4, h5, h6 {
    color: #1d1d1f;
    margin-top: 0;
}

p {
    color: #86868b;
    line-height: 1.6;
}

/* =========================================
   IL TRUCCO MAGICO PER IL FOOTER
   ========================================= */
/* Siccome il body è in flex-direction: column, 'margin-top: auto' 
   costringe il footer ad andare in fondo allo schermo se la pagina è vuota */
#footer-container {
    margin-top: auto; 
    width: 100%;
}