/* Stile generale della pagina */
body{background-color:#cde6f5;
font-family:"Lato", sans-serif;
font-weight:500}

/* Stile header */
header{
    color: #fff; /* Colore del testo dell'header */
    background-color:#2f6e8f; /* Colore dello sfondo dell'header */
    padding-top:3%; 
    padding-right:3%;
    padding-left:3%;
    padding-bottom:3%; 
}

/* Contenitore flessibile che permette di affiancare immagine e testi */
.header-flex{
    display: flex; /* Attivo flexbox */
    align-items: center; /* Allineo immagine e testo */
    gap: 3%; /* Spazio tra l'immagine e testi */
}

header h1{
    text-align:left;
    font-weight:700;
    font-size:2.7em;
}

header h2{
    font-size: 1.7em;
    font-weight: 650;
    text-align: left;
    margin: 0.5% 0 0 0;
}

/* Dimensioni del logo */  
.img{
    width:17%; /* Imposto la larghezza dell'immagine */
    display:block; /* Evito spazi indesiderati sotto l'immagine*/
}

/*contenitore dei testi (h1 e h2) */
.testi {
    display:flex; /* Attivo Flexbox */
    flex-direction:column; /* Allineo h1 e h2 verticalmente */
    justify-content: center; /* Allineo h1 e h2 verticalmente rispetto al logo */
}

@media (max-width:480px){
  

    .header-flex {
        flex-direction: column; /* Posiziono il logo sopra */
        align-items: flex-start; /* Allinea tutto a sinistra*/
        gap: 1em;
        
    }
    
    .img{
        width: 40%;
        display: block;
        margin-left: auto;
        margin-right: auto; /* Forzo il centraggio */
    }
    
    /* Per allinearli a sinistra */
    .testi {
        width: 100%;              
        align-items: flex-start;
        text-align: left;
    }

    /* Riduzione font per evitare overflow */
    header h1 {
        font-size: 2em;
        line-height: 1.2;
    }

    header h2 {
        font-size: 1.3em;
        line-height: 1.3;
    }

}

/* Barra di navigazione */
nav ul{
    list-style:none; /* Rimuovo i pallini della lista*/
    display: flex; /* Dispongo gli elementi <li> in orizzontale */
    gap:20%; /* Creo distanza tra le voci del menù */
    margin-top:3.125em; 
    justify-content: center; /* centra il contenuto orizzontalmente */
}

/* Menù versione tablet */
@media (max-width: 768px) {

 /*Agisco su tutto l'elemento ul*/
 nav ul{
    display:block; 
    margin:2em;
    padding:0;
    width:200px;
    margin-bottom:2em;}

/* Agisco sulle singole voci del menù creando uno spazio verticale tra esse */
nav ul li{
    margin-bottom:1em;
}
}



/* Stile dei link nel menù */
nav ul li a {
    display:block; /* Permette di cliccare anche sul padding */
    color:#2f6e8f;
    padding: 0.5em 1em;
    text-decoration:none;
}

/* Stile generale dei link del nav */
nav a {
    text-decoration:none; /*rimuove i pallini che avrebbe la lista*/
    color: #fff;
    font-weight:600;
    text-align: center;
}

/* Stile del bottone del menù (Bordo, padding, hover, ecc) */
nav ul li a /*comprende tutti gli elementi della gerarchia (nav, ul, li, a)*/{
    padding: 0.5em 1em;
    border: 0.125em solid #fff;
    border-radius: 0.5em;
    color: #fff;
    transition: 0.3s; /*Aggiungo una transizione fluida quando cambia qualche proprietà, in questo caso quando si passa con il cursore il cambiamento sarà più morbido e non immediato*/
} 


nav ul li a:hover {
    text-shadow: 0.05em 0.05em 0.05em;
    color: #b7a3bc;
}

/* Layout generale contenitori */
.container{
    display:flex; /* Affianco il contenuto principale e l'aside */
    gap:30%; /* Creo pazio tra le due colonne */
    margin-bottom:5%;
    align-items: flex-start; /* Allineo in alto */
}


.contenuto{
    font-size: 1.4em;
    font-weight: normal;
    margin-left:5%;
    margin-top:6%;
}

.contenuto h2{
    font-size: 1.1em;
    font-weight: bold;
    margin-left: 10%;

}

/* Stile scheda del corso */
#p0{
    width:100%;
    border-style:double;
    border-color:#2f6e8f;
    border-radius: 0.625em;
    background-color: #D2DAE9;
    margin-bottom:5%;
    margin-top:10%;
    margin-left:10%;
    margin-right: 40%;
    padding:5%;
    font-size: medium;
    line-height: 1.5em;
    flex:4; /* Rendo p0 più grande di aside*/
}

aside {
border-style:solid;
border-radius: 0.25em;
border-color: #2f6e8f;
background-color:#FCFAF2;
padding:0.5em;
margin-top:5%;
margin-right:5%;
flex:1; /*Rendo aside più piccolo di p0*/
}

aside h3{
    text-align: center;
}

aside ul li{
    margin-top:1em;
}


h2{font-size: 1.4em;
font-weight: normal;
margin-left:5%;
margin-top:6%;
}

/* Articoli nella pagina Home */
article{
font-size:18px;
margin-left :5%;
margin-right:20%;
text-align: justify;
line-height:1.6;
}



ul li{
    margin-top:1em;
}


.esami{font-size:1.4em;
    font-weight: 560;
}

/* Layout del primo anno: griglia a due colonne */
#esami-primo-anno{
    display: grid; /* Attivo il grid layout*/
    grid-template-columns: 1fr 1fr; /* Creo due colonne affiancate, ognuna prende il 50% dello spazio della pagina */
    gap: 1.25em; /* Creo spazio tra righe e colonne*/
    padding:5%;
}

/* Ogni colonna contiene più box */
.colonna { /*ogni colonna prende metà della larghezza*/
    display: flex;
    flex-direction:column; /*i box si impilano verticalmente*/
    gap: 20%;
}

/* Stile dei box di ciascun esame*/
.esame-box  {
    font-size:1em;
    background-color:#C5BFD3;
    border: 0.125em solid #2f6e8f;
    border-radius: 0.625em;
    padding: 5%;
    box-shadow: 0.125em 0.125em 0.5em; /* Ombra */
    
}

/* Gestisco l'ombra dei box quando passi il cursore */
.esame-box:hover {
    text-shadow: 0.8px 0.8px 0.8px #cde6f5; 
    color: #2f6e8f;
}

/* Stesso layout per il secondo anno */
#esami-secondo-anno {
    display: grid; /*attiva il grid layout*/
    grid-template-columns: 1fr 1fr; /*due colonne affiancate*/
    gap: 1.25em; /*spazio tra righe e colonne*/
    padding:5%;
}

/* Nella versione smartphone imposto una sola colonna di box altrimenti sarebbero troppo vicini tra loro rovinando il layout */

@media (max-width: 480px) {
    #esami-primo-anno {
        display: grid;
        grid-template-columns: 1fr; 
        padding: 5%;
        gap: 1.5em; /* spazio tra i box */
    }
    
    #esami-secondo-anno {
      display: grid;
        grid-template-columns: 1fr; 
        padding: 5%;
        gap: 1.5em; /* spazio tra i box */
    }
      

    .esame-box {
        width: 100%;
        padding: 1.2em;
    }
    
}


#sbocchi-professionali  {
    font-size: 1.4em;
    font-weight:bold;
    margin-left:5%;
    margin-top:6%;
    margin-bottom:1em;
}

/* Contenitore principale testo + immagini */
.sbocchi-container {
    display:grid; /* Creo due colonne non uguali */
    grid-template-columns:6fr 1fr; /* Rendo la colonna del testo molto più larga della colonna delle immagini */
    padding-right:5em;
}

/* Colonna del testo */
.sbocchi-testo{
    font-size:18px;
    line-height:1.6;
    text-align: justify;
    margin-left:5%;
}

/* Colonna delle immagini */
.sbocchi-img{
    display:flex;
    flex-direction:column; /* Dispongo le immagini in verticale */
    justify-content: space-between; /* Distribuisco le immagini in modo che la prima sia allineata all'inizio del testo, l'ultima alla fine e quelle intermedie in modo omogeneo */
    height:100%; /* Faccio in modo che le immagini occupino tutta l'altezza nella colonna quindi stessa altezza del blocco di testo */
    align-items:center; /* Allineo le immagini al centro della colonna*/
    
}

/* Nascondo le immagini per la versione smartphone */

@media (max-width: 768px) {
    /* Rimuovo completamente la colonna delle immagini */
    .sbocchi-img {
        display: none;
    }
     /* Creo una sola colonna*/
    .sbocchi-container {
        display: block;
        width:100vw; /* Tutta la larghezza dello schermo*/
        margin: 0;
        padding:0;
    }

    /* Il testo usa tutta la larghezza */
    .sbocchi-testo {
        width: 100%;
        margin-right: 0;
    }

}

/* Applico le stesse modifiche per la versione per tablet*/

@media (min-width: 769px) and (max-width: 1024px) {

    /* Nascondo immagini come su smartphone */
    .sbocchi-img {
        display: none;
    }

    /* Layout del testo a tutta larghezza */
    .sbocchi-container {
        display: block;
    }
} 


.sbocchi-testo {
    width:100%;
    padding-right:5em;
}


/* Stile immagini */
.sbocchi-img img{
    width: 100%;
    max-width: none; 
    border-radius: 10px;
    border-style:double;
    border-color:#2f6e8f;
    border-width: 0.375em;
    object-fit: cover; /* L'immagine si adatta alle dimensioni del contenitore mantenendo le proporzioni originali senza deformarsi */
    display: block; 
    margin-top: 3.75em; /* Aggiungo il margine tra header e immagine */
}

footer{font-size:0.8em;
background-color:#2f6e8f;
color:#fff;
padding:2%;
padding-bottom: 1em;
margin-top:5%;
}

/* Cambio il colore dei link nel footer */

footer a:link{
    color:#b7a3bc;
}

footer a:visited{
    color:#800080;
}

footer a:hover{
    color: #E1E2C3;
}


/* Stile licenza */

#licenza{
    font-size: 0.625em;
    margin-top: 2em;
}