body {
 background-color: white;
}

/* ===============================
HEADER CONTAINER
=============================== */
.header-container {
  display: flex;                 /* attiva Flexbox per distribuire le sezioni interne (sinistra, centro, destra) */
  position: fixed;               /* l'header resta sempre in alto */
  top: 0;                        /* lo posiziona a 0 pixel dal bordo superiore della finestra → attaccato in alto */
  left: 0;                       /* lo posiziona a 0 pixel dal bordo sinistro della finestra → aderente al lato sinistro */
  right: 0;                      /* lo estende fino a 0 pixel dal bordo destro della finestra → occupa tutta la larghezza */
  z-index: 1000;                 /* lo porta sopra agli altri elementi della pagina */
  align-items: center;           /* allinea verticalmente tutti gli elementi al centro */
  background-color: rgba(255, 255, 255, 0.8); /* sfondo colorato per distinguere l’header con opacità 80% */
  backdrop-filter: blur(8px);    /* sfoca cio che sta dietro */
  max-width: 1100px;             /* larghezza massima: non si allarga oltre 1100px anche su schermi grandi */
  margin: 0 auto;                /* centra orizzontalmente il contenitore all’interno della pagina */
  padding: 10px 10px; /* lo estende fino a 5 pixel dal bordo destro della finestra → occupa tutta la larghezza */
  /* 
  padding: definisce lo spazio interno tra il contenuto e i bordi del box.
  0 20px → è la shorthand con due valori:
    - 0 = nessuno spazio verticale (sopra e sotto).
    - 20px = spazio orizzontale (a sinistra e a destra).
  Risultato:
    - Il contenuto non tocca i bordi laterali del background-color.
    - Rimane un “cuscinetto” di 20px a sinistra e a destra.
    - L’header respira meglio, i link (es. About) e le icone social (es. Instagram)
      non sono appiccicati ai bordi.
  Vantaggi:
    - Migliora l’estetica: layout più armonioso e bilanciato.
    - Migliora l’usabilità: link più facili da cliccare, non troppo vicini ai bordi.
    - È responsivo: i 20px restano costanti su qualsiasi schermo.
  */

  /* Bordo solo ai lati */
  border-left: 2px solid rgba(47,79,79);
  border-right: 2px solid rgba(47,79,79);
}

/* ===============================
  SEZIONI LATERALI (sinistra e destra)
  =============================== */
.left-section,
.right-section {
  flex: 1;                       /* entrambe occupano lo stesso "peso" per bilanciare il layout */
  display: flex;                 /* attiva Flexbox anche all’interno delle sezioni */
  align-items: center;           /* allinea verticalmente gli elementi */
  min-width: 0;                  /* evita che i contenuti forzino overflow orizzontale */
}

/* ===============================
  NAVBAR A SINISTRA
  =============================== */
.left-section {
  justify-content: flex-start;   /* allinea i link della navbar all’inizio (a sinistra) */
  gap: 18px;                     /* spazio orizzontale tra i link */
}

.navbar {
  display: flex;        /* i link restano in linea */
  flex-wrap: wrap;      /* permette di andare a capo quando non c’è spazio */
  gap: 18px;            /* spazio orizzontale e verticale tra i bottoni */
}

.navbar a {
  font-family: 'Poppins', sans-serif; /* font coerente con il resto del sito */
  font-weight: 400;
  letter-spacing: -0.25px;
  color: darkslategray;               /* colore del testo dei link */
  text-decoration: none;              /* rimuove la sottolineatura predefinita */
  transition: color 0.5s ease; 
  /* 
    - transition: definisce un'animazione fluida quando cambia una proprietà CSS.
    - color: indica che la transizione riguarda il colore del testo.
    - 0.5s: durata della transizione (mezzo secondo).
    - ease: funzione di accelerazione; parte veloce, rallenta a metà e termina dolcemente.
    Risultato: quando il colore del testo cambia (es. al passaggio del mouse), 
    il cambiamento non è immediato ma graduale.
  */
}

/* Effetto hover */
.navbar a:hover {
  color: orange;
  /* 
    - :hover: pseudo-classe che si attiva quando il cursore passa sopra il link.
    - color: cambia il colore del testo in #d06363 (un rosso tenue).
    - Grazie alla regola di transition sopra, il passaggio dal colore normale 
      a questo colore avviene in modo fluido in 0.5 secondi.
  */
}

/* ===============================
  LOGO CENTRALE
  =============================== */
.middle-section {
  flex: 0;                       /* non cresce né si restringe: mantiene la sua dimensione naturale */
  display: flex;                 /* attiva Flexbox per centrare il logo */
  justify-content: center;       /* centra orizzontalmente il logo */
}

.mauro_giannubilo {
  max-width: 100px;              /* larghezza massima del logo */
  height: auto;                  /* mantiene le proporzioni originali */
}

/* ===============================
  SEZIONE DESTRA (icone social)
  =============================== */
.right-section {
  justify-content: flex-end;     /* allinea le icone social a destra */
  gap: 20px;                     /* spazio orizzontale tra le icone */
}

/* ===============================
  ICONE SOCIAL
  =============================== */
.social-link {
  display: inline-flex;              
  /* il link diventa un contenitore flessibile in linea:
  - si comporta come un elemento inline (non va a capo da solo)
  - ma può usare le proprietà di Flexbox per allineare il contenuto */
  align-items: center;               /* allinea verticalmente al centro l’icona all’interno del link */
  justify-content: center;           /* centra orizzontalmente l’icona all’interno del link */
  border-radius: 50%;                
  /* arrotonda i bordi fino a farli diventare un cerchio (se altezza = larghezza),
  utile per dare l’effetto “bottone tondo” attorno all’icona */
  padding: 4px;                      
  /* aggiunge 4px di spazio interno su tutti i lati,
  così l’icona non tocca direttamente i bordi del link */
  transition: transform 0.3s ease,   
  /* definisce una transizione fluida di 0.3s per l’effetto di trasformazione
  (es. ingrandimento con scale) */
  filter 0.3s ease;      
  /* definisce una transizione fluida di 0.3s anche per i filtri grafici
  (es. grayscale, brightness, invert) */
  text-decoration: none;             
  /* rimuove la sottolineatura predefinita dei link,
  così l’icona appare pulita senza linee sotto */
}
  

/* Icone in versione monocromatica (grigio) di default */
.social-link img {
  filter: grayscale(100%);   /* converte l’immagine in scala di grigi */
  transition: filter 0.4s ease, 
  /* definisce una transizione fluida di 0.3s anche per i filtri grafici
  (es. grayscale, brightness, invert) */
  transform 0.4s ease;
  /* definisce una transizione fluida di 0.3s per l’effetto di trasformazione
  (es. ingrandimento con scale) */
}

/* Hover: torna a colori e si ingrandisce leggermente */
.social-link:hover img {
  filter: grayscale(0%);     /* rimuove il filtro → immagine a colori */
  transform: scale(1.2);     /* leggero ingrandimento */
}

.linkedin {
  width: 27px;                   /* larghezza icona LinkedIn */
  border-radius: 12px;           /* angoli arrotondati per un effetto più morbido */
}

.instagram {
  width: 29px;                   /* larghezza icona Instagram (più grande di LinkedIn) */
  border-radius: 24px;           /* angoli arrotondati proporzionati alla dimensione */
}


/* ===============================
  HAMBURGER
  =============================== */

/* Checkbox nascosto che funge da interruttore del menu mobile */
.menu-toggle {
  display: none; /* non visibile all’utente, ma usato per gestire lo stato :checked */
}

/* Contenitore dell’icona hamburger (le tre linee) */
.hamburger {
  display: none;                  /* di default nascosto su desktop */
  flex-direction: column;         /* le tre linee sono disposte in colonna */
  cursor: pointer;                /* il cursore diventa "mano" al passaggio */
  gap: 6px;                       /* spazio verticale tra le linee */
}

/* Stile delle tre linee dell’hamburger */
.hamburger span {
  width: 28px;                    /* larghezza di ciascuna linea */
  height: 3px;                    /* spessore della linea */
  background: darkslategray;      /* colore delle linee */
  border-radius: 2px;             /* angoli leggermente arrotondati */
  transition: all 0.3s ease;      /* transizione fluida per l’animazione */
}

/* ===============================
  RESPONSIVE: modalità mobile
  =============================== */
@media (max-width: 768px) {
/* Navbar nascosta di default su mobile */
  .navbar {
    display: none;                /* i bottoni non sono visibili */
    flex-direction: column;       /* quando riappaiono, si dispongono in verticale */
    align-items: center;          /* centrati orizzontalmente */
    gap: 16px;                    /* spazio verticale tra i bottoni */
    position: absolute;           /* posizionata in overlay sotto l’header */
    top: 136px;                   /* distanza dall’alto (altezza header) */
    left: 0; right: 0;            /* occupa tutta la larghezza */
    background-color: rgba(247, 247, 247, 0.8);      /* stesso colore dell’header */
    padding: 20px 0;              /* respiro interno verticale */
  }

  /* Mostra l’icona hamburger su mobile */
  .hamburger {
    display: flex;                /* diventa visibile e attiva Flexbox */
  }

  /* Quando il checkbox è spuntato, mostra la navbar */
  .menu-toggle:checked ~ .hamburger + .navbar {
    display: flex;                /* la navbar torna visibile */
  }

  /* ===============================
      Animazione hamburger → X
      =============================== */

  /* Prima linea: ruota di 45° e si sposta */
  .menu-toggle:checked + .hamburger span:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }

  /* Seconda linea: scompare */
  .menu-toggle:checked + .hamburger span:nth-child(2) {
    opacity: 0;
  }

  /* Terza linea: ruota di -45° e si sposta */
  .menu-toggle:checked + .hamburger span:nth-child(3) {
    transform: rotate(-45deg) translate(6px, -6px);
  }
}