/*Versione originale con aggiunta commenti*/

/* Reset base */
* {
  padding: 0;                  /* Rimuove padding di default da tutti gli elementi */
  margin: 0;                   /* Rimuove margine di default da tutti gli elementi */
  box-sizing: border-box;      /* Include padding e bordo nelle dimensioni degli elementi */
}

html {
  font-size: 62.5%;            /* Imposta il font base a 10px (62.5% di 16px) per facilitare i calcoli con rem */
}

*:not(i) {
  font-family: "Poppins", sans-serif;  /* Applica il font Poppins a tutti tranne l’elemento <i> */
}

/* Header */
header {
  position: fixed;             /* Rende l’header fisso in cima alla pagina */
  width: 100%;                 /* Larghezza dell’header pari al 100% del viewport */
  background-color: #ffffff;   /* Sfondo bianco */
  padding: 1rem 1rem;          /* Padding interno di 1rem sui lati */
}

/* Layout */
.main {
  float: left;                 /* Fa galleggiare il contenuto a sinistra */
  width: 75%;                  /* Occupa il 75% della larghezza */
  padding: 1px;                /* Aggiunge leggero padding per compatibilità layout */
  overflow: hidden;            /* Nasconde il contenuto che eccede */
}

.right {
  background-color: #f1f1f1;   /* Sfondo grigio chiaro */
  float: left;                 /* Anche questo fluttua a sinistra (a fianco di .main) */
  width: 25%;                  /* Occupa il restante 25% della larghezza */
  padding: 1px;                /* Aggiunge leggero padding */
  margin-top: 0;               /* Rimuove margine superiore */
}

/* Navbar */
nav {
  display: flex;               /* Usa Flexbox per layout flessibile */
  justify-content: space-between; /* Spazia gli elementi della nav ai lati opposti */
  align-items: center;         /* Allinea verticalmente al centro */
}

nav ul {
  list-style: none;            /* Rimuove i punti elenco */
  display: flex;               /* Disposizione orizzontale degli elementi */
  gap: 2rem;                   /* Spazio tra gli elementi */
}

nav a {
  font-size: 1.5rem;           /* Imposta la dimensione del font */
  text-decoration: none;       /* Rimuove la sottolineatura */
}

nav a#logo {
  color: #000;                 /* Colore nero per il logo */
  font-weight: 700;            /* Grassetto per evidenziare */
}

nav ul a {
  color: #2c8eec;              /* Colore blu per i link del menu */
  font-weight: 600;            /* Peso medio */
}

nav ul a:hover {
  border-bottom: 2px solid #2c8eec;  /* Aggiunge una linea blu sotto al link al passaggio del mouse */
}

/* Home section */
section#home {
  height: 200vh;               /* Altezza uguale alla viewport */
  display: grid;               /* Usa CSS Grid per il layout */
  place-items: center;         /* Centra contenuto sia verticalmente che orizzontalmente */
}

h1 {
  font-size: 4rem;             /* Titolo grande */
}

/* Hamburger icon */
#ham-menu {
  display: none;               /* Nasconde l'icona del menu hamburger (visibile da mobile) */
}

/* Menu attivo */
nav ul.active {
  left: 0;                     /* Sposta il menu visibile da sinistra */
}

/* Media Queries */

/* Tablet */
@media (max-width: 991px) {
  html {
    font-size: 56.25%;         /* Riduce la dimensione base del font */
  }

  header {
    padding: 2.2rem 5rem;      /* Aumenta il padding per maggiore spazio su tablet */
  }
}

/* Mobile menu */
@media (max-width: 768px) {
  html {
    font-size: 50%;            /* Font ancora più piccolo su schermi più stretti */
  }

  #ham-menu {
    display: block;            /* Mostra il menu hamburger */
    color: #2c8eec;            /* Colore blu */
    font-size: 4.2rem;         /* Dimensione grande */
margin-right: 8px; /* sposta l’hamburger leggermente a sinistra (~2mm) */
  }

  nav a#logo {
    font-size: 4.2rem;         /* Ingrandisce il logo */
  }

  nav ul {
    position: fixed;           /* Posizione fissa */
    top: 73.6px;               /* Posizionato sotto l’header */
    left: -100vw;              /* Inizia fuori dallo schermo */
    width: 60vw;               /* Larghezza del menu mobile */
    max-height: 60vh;          /* Altezza massima */
    overflow-y: auto;          /* Aggiunge scrollbar se serve */
    background-color: #ffffff; /* Sfondo azzurrino e1e1ff*/
    display: flex;             /* Disposizione flessibile */
    flex-direction: column;    /* Colonna verticale */
    align-items: left;       /* Centra gli elementi orizzontalmente center */
    justify-content: flex-start; /* Allinea in alto */
    padding: 8px 0;            /* Padding verticale */
    gap: 15px;                    /* Nessuno spazio tra i link 0 */
    transition: 1s;            /* Animazione fluida */
  }

nav ul {
  padding: 8px 0 8px 16px; /* 16px di spazio a sinistra agg AI*/
}


  nav ul li {
    width: 100%;               /* Ogni elemento occupa tutta la larghezza del menu 100*/
    text-align: left;        /* Testo centrato center */
  }

  nav ul li a {
    display: block;            /* Link a blocco */
    width: 100%;               /* Larghezza piena */
    padding: 4px 8px;          /* Spaziatura interna */
    font-size: 1.8rem;         /* Dimensione testo */
    font-weight: 500;          /* Peso medio */
    line-height: 1.2;          /* Altezza della riga */
    text-decoration: none;     /* Nessuna sottolineatura */
    color: #000;               /* Testo nero */
  }

  nav ul li a:hover {
    background-color: #ccc;    /* Cambia colore al passaggio del mouse */
  }
}

/* Smartphone piccoli */
@media (max-width: 575px) {
  html {
    font-size: 46.87%;         /* Font ancora più ridotto */
  }

  header {
    padding: 0.1rem 0.2rem;    /* Riduce il padding per risparmiare spazio */
  }

  nav ul {
    top: 80.18px;              /* Posiziona il menu un po’ più in alto */
    max-height: calc(100vh - 65.18px);  /* Limita l’altezza al resto del viewport */
  }
}

/* Layout 100% su schermi stretti */
@media (max-width: 500px) {
  .menu,
  .main,
  .right {
    width: 100%;               /* Ogni colonna prende tutta la larghezza (layout a colonna unica) */
  }
}


/* ===== Layout container principale ===== */
.container {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 10px;
}




td ul {
  padding-left: 1.5em;     /* spazio per il bullet */
  margin: 0;
  list-style-position: inside; /* evita che il bullet esca fuori */
  box-sizing: border-box;
}