/* === Header principale del sito === */
.site-header {
    background-color: #2c2c2c;         /* Sfondo grigio scuro */
    color: #f0f0f0;                    /* Testo chiaro */
    position: relative;                /* Non fisso: scrolla con la pagina */
    height: 120px;                      /* Altezza visiva della barra */
    display: flex;                     /* Layout flessibile orizzontale */
    align-items: center;              /* Allineamento verticale centrato */
    justify-content: center;          /* Contenuto centrato orizzontalmente */
    padding: 0px 20px 0px 20px;        /* Padding solo orizzontale */
  }
  
  /* === Contenitore interno dell’header === */
  .header-container {
    display: flex;                     /* Layout flessibile */
    justify-content: space-between;   /* Logo a sinistra, nav a destra */
    align-items: center;              /* Allineamento verticale centrato */
    width: 100%;
    padding: 0px 20px 0px 20px;        /* Padding interno orizzontale */
  }
  
  /* === Logo testuale o immagine === */
  .logo {
    font-size: 1.5rem;                 /* Dimensione del font */
    font-weight: bold;                /* Grassetto */
  }
  
  /* === Navigazione desktop === */
  .main-nav ul {
    list-style: none;                 /* Nessun bullet nei list item */
    display: flex;                    /* Menu orizzontale */
    gap: 20px;                        /* Spaziatura tra i link */
  }
  
  .main-nav a {
    text-decoration: none;            /* Rimuove sottolineatura */
    color: #f0f0f0;                   /* Colore chiaro per link */
    font-weight: 500;                 /* Peso medio */
  }
  
  /* === Icona hamburger in modalità mobile === */
  .menu-toggle {
    display: none;                    /* Nascosto di default (visibile su mobile) */
    font-size: 2rem;                  /* Icona grande */
    cursor: pointer;                 /* Puntatore cliccabile */
  }
  
  /* === Menu mobile a comparsa === */
  .mobile-menu {
    position: fixed;                  /* Posizione fissa rispetto alla finestra */
    top: 0;
    right: -100%;                     /* Inizia fuori dallo schermo */
    width: 80vw;                      /* Occupa l’80% dello schermo */
    max-width: 300px;                 /* Larghezza massima */
    min-width: unset;                 /* Larghezza minima */
    height: 100%;
    background-color: #1e1e1e;        /* Sfondo scuro */
    padding: 40px 20px;               /* Spaziatura interna */
    transition: right 0.3s ease;      /* Transizione fluida per apertura */
    z-index: 100;                     /* In primo piano sopra tutto tranne l’overlay */
    overflow-y: auto;                 /* Scroll se contenuto supera l’altezza */
    display: block;                   /* Visibile (ma fuori dalla viewport inizialmente) */
  }
  
  /* === Quando il menu è attivo === */
  .mobile-menu.open {
    right: 0;                         /* Porta il menu visibile da destra */
  }
  
  /* === Bottone di chiusura X === */
  .mobile-menu .close-btn {
    font-size: 2rem;
    position: absolute;
    top: 20px;
    right: 20px;
    cursor: pointer;
  }
  
  /* === Lista link nel menu mobile === */
  .mobile-menu ul {
    list-style: none;
    padding-top: 60px;
  }
  
  .mobile-menu ul li {
    margin-bottom: 20px;
  }
  
  .mobile-menu ul a {
    color: #f0f0f0;
    text-decoration: none;
    font-size: 1.2rem;
  }
  
  /* === Overlay scuro dietro il menu mobile === */
  .mobile-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background-color: rgba(0, 0, 0, 0.6); /* Sfondo nero semi-trasparente */
    z-index: 90;                           /* Sotto al menu mobile */
    opacity: 0;                            /* Invisibile inizialmente */
    pointer-events: none;                 /* Non cliccabile */
    transition: opacity 0.3s ease;        /* Transizione di fade-in/out */
  }
  
  /* === Overlay attivo === */
  .mobile-overlay.open {
    opacity: 1;
    pointer-events: all;                  /* Attiva clic e chiusura */
  }
  
  /* === Media query per dispositivi mobili === */
  @media (max-width: 768px) {
    .main-nav {
      display: none;                      /* Nasconde il menu desktop */
    }
  
    .menu-toggle {
      display: block;                     /* Mostra il bottone hamburger */
    }
  }