/*
Theme Name: Hello Elementor Child
Description: Tema Child per Hello Elementor
Template: hello-elementor
Version:        1.0.0
*/

/* classi generiche */

/* pagine che contengono categorie di post */

.container {
  margin: 0 5%;
}

.title-page-category{
  padding: 100px 0 50px 0;
}

.title-page-category h1{
  font-size: 2.5rem;
  text-align: center;
}

/* single-post */
.single-page-container {
    margin: 5% 10%;
}

.single-page-title {
    text-align: justify;
    margin-bottom: 50px;
}


.single-page-title h1{
  font-size: 1.3em;
}

.single-page-content{
  text-align: justify;
}

/* Home Page Layout ========================================================= */

/* Impostazioni generali per la struttura delle due colonne */
/* Impostazioni generali per la struttura delle due colonne */
.two-columns-box {
    display: flex;  /* Usare Flexbox per il layout */
    /* flex-wrap: wrap; Permette il wrapping dei contenuti */
    padding: 0;
    gap: 4%; /* Spazio tra le colonne */
}

.col-left-box {
    width: 30%; /* Colonna sinistra occupa il 30% dello spazio */
    padding: 10px; /* Padding per la colonna sinistra */
    box-sizing: border-box; /* Includere il padding nel calcolo della larghezza */
    background-color: #f0f0f0; /* Colore di sfondo per vedere la colonna */
}

.col-left-box p{
  font-weight: 600;
  padding: 10px 0 0 0;
}

.col-right-box {
    width: 70%; /* Colonna destra occupa il 70% dello spazio */
    padding: 0 10px; /* Padding per la colonna destra */
    box-sizing: border-box; /* Includere il padding nel calcolo della larghezza */
    background-color: #ffffff; /* Colore di sfondo per vedere la colonna */
}

.sidebar-container{
  padding: 15px 0;
}

.bio-content{
  padding: 25px 0 50px 0;
  text-align: justify;
}

.fundings{
  margin-bottom: 20px;
}

/* Media query per schermi più piccoli */
@media (max-width: 768px) {
    .two-columns-box{
      flex-wrap: wrap; Permette il wrapping dei contenuti
    }
    .col-left-box, .col-right-box {
      width: 100%; /* Su schermi piccoli, le colonne occupano il 100% della larghezza */
    }
}

/* Team Archive Layout ========================================================= */

.team-name-button{
  display: inline-block;
  line-height: 1;
  font-size: 15px;
  padding: 12px 24px;
  border-radius: 3px;
  text-align: center;
  background-color: #000;
  color: #fff;
  margin-left: 50px;
}

.one-column-group{
    display: flex;
    flex-wrap: wrap;
    gap: 20px;
    margin-bottom: 75px;
}

.staff-phd{
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 3% 10%;
}

/* Impostazioni specifiche per .staff-phd */
.staff-phd .foto-col {
  width: 250px;  /* Imposta la larghezza del contenitore */
  height: 250px; /* Imposta l'altezza del contenitore */
  overflow: hidden;  /* Nasconde la parte che fuoriesce */
  padding: 10px;
}

.staff-phd .foto-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Rende l'immagine quadrata senza distorsioni */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
}

.two-columns-group {
  display: flex;
  flex-wrap: wrap;  /* Aggiunto per far andare gli elementi su più righe */
  gap: 20px;        /* Mantieni uno spazio tra le colonne */
  margin-bottom: 75px;
  margin-left: 8%;
}

/* Impostazioni per le immagini nei membri a 150x150px */
.membro .foto-col {
  width: 150px;  /* Imposta la larghezza del contenitore */
  height: 150px; /* Imposta l'altezza del contenitore */
  overflow: hidden;  /* Nasconde la parte che fuoriesce */
  padding: 10px;
}

.membro .foto-col img {
  width: 100%;
  height: 100%;
  object-fit: cover;  /* Rende l'immagine quadrata senza distorsioni */
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
}

.info-col {
    flex: 1; /* Colonna per il nome e il contenuto, occupa il restante spazio */
    margin-left: 3%;

}

.info-col h3 {
    margin-top: 0;
}

.membro-contenuto {
    box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
    margin-top: 10px;
    padding: 3%;
    height: auto; /* Rimuove eventuali limiti di altezza */
    text-overflow: unset;   /* Rimuove i puntini di sospensione */
    white-space: normal;    /* Permette al testo di andare a capo */
    overflow: visible;      /* Rende visibile il testo senza troncamenti */
    word-wrap: break-word;  /* Fa andare a capo il testo lungo */
    word-break: break-word; /* Assicura che le parole lunghe non causino overflow */
    width: auto;            /* Imposta la larghezza in modo che il contenuto pos*/
}

/* layout a 2 colonne */
.membro {
  display: flex;
  flex-wrap: wrap;
    width: 48%;
    margin: 50px auto;
}


.membro img {
    width: 100%;
    height: auto;
}

/* Layout predefinito per gli altri membri */
.membri-contenuto {
  margin-top: 10px;
  padding: 3%;
  height: auto; /* Rimuove eventuali limiti di altezza */
  max-width: 300px;
  text-overflow: unset;   /* Rimuove i puntini di sospensione */
  white-space: normal;    /* Permette al testo di andare a capo */
  overflow: visible;      /* Rende visibile il testo senza troncamenti */
  word-wrap: break-word;  /* Fa andare a capo il testo lungo */
  word-break: break-word; /* Assicura che le parole lunghe non causino overflow */
  width: auto;            /* Imposta la larghezza in modo che il contenuto pos*/
}

@media (max-width: 1024px){
  .staff-phd .foto-col  {
      width: 100%;
  }

  .staff-phd .foto-col img {
    max-width: 250px;
}
  .info-col{
    padding-top: 15px;
    }

  .membro.col-left, .membro.col-right{
    flex: 1; /* Assicura che entrambe le colonne occupino lo stesso spazio */
    display: flex;
    flex-direction: column; /* Colonne allineate verticalmente */
  }

  .membro .foto-col img{
    max-width: 150px;
  }

  .two-columns-group{
    margin: 0 0 0 10%;
  }
}

@media (max-width: 768px){
  .two-columns-group {
        display: flex;
        flex-direction: column;  /* Dispone le colonne una sopra l'altra */
        margin-top: 20px;
    }

  .two-columns-group .col-left, .two-columns-group .col-right {
      width: 100%;  /* Imposta le colonne per occupare tutta la larghezza */
      margin: 0;    /* Rimuove i margini laterali */
  }

  .team-name-button{
    margin-top: 50px;
  }
  
}
/* Research (category) Layout =============================================== */

.research-post-row{
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
  padding: 25px;
  margin: 5% 0;
}

/* Stile per la riga contenente titolo e cerchio */
.title-and-circle-row {
  display: flex;            /* Usa Flexbox per allineare gli elementi sulla stessa riga */           /* Usa Flexbox per disporre gli elementi sulla stessa riga o colonna */
  align-items: flex-start;   /* Allinea gli elementi al top (verticalmente) */
  flex-wrap: wrap; /* Permettere agli elementi di andare a capo se necessario */
  margin-bottom: 20px;      /* Aggiungi spazio tra le righe */
}

/* Contenitore del titolo */
.research-title-container {
  flex: 1;                  /* Il contenitore del titolo occupa lo spazio rimanente */
  margin-right: 20px;       /* Spazio tra il titolo e il cerchio */
  /* Puoi anche aggiungere altre regole di stile come font-size, padding, etc. */
}

/* Contenitore del cerchio */
.research-circle-container .circle {
  width: 30px;              /* Larghezza del cerchio */
  height: 30px;             /* Altezza del cerchio */
  border-radius: 50%;       /* Rende il cerchio rotondo */
  display: flex;            /* Usa Flexbox per centrare il contenuto */
  justify-content: flex-start;  /* Allinea orizzontalmente al lato sinistro (se necessario) */
  overflow: hidden;             /* Evita che il contenuto esca dal cerchio */
}

/* Cerchio verde per "attivo" */
.research-circle-container .circle.active {
  background-color: green; /* Colore di sfondo verde */
}

/* Cerchio rosso per altri valori */
.research-circle-container .circle.concluded {
  background-color: red;   /* Colore di sfondo rosso */
}

/* Stile per la riga contenente il testo e l'immagine */
.image-and-text-row {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    margin-bottom: 20px;
    flex-wrap: wrap;              /* Permette agli elementi di andare a capo se necessario */
}

/* Contenitore dell'immagine */
.image-container {
    flex: 0 0 auto;               /* L'immagine ha una dimensione fissa (no crescita, no shrink) */
    width: 25%;                   /* Imposta la larghezza dell'immagine al 25% della riga su desktop */
    max-width: 100%;              /* Assicura che l'immagine non superi la larghezza del contenitore */
    box-sizing: border-box;       /* Per includere padding e margini nella larghezza totale */
}

/* Contenitore del testo */
.text-container {
    flex: 1;
    box-sizing: border-box;
}

.text-container p {
    text-align: justify;
}

/* Media Query per schermi piccoli (smartphone) */
@media (max-width: 768px) {

    .research-title-container{
      max-width: 80%;
    }

    .research-circle-container .circle{
      width: 20px;
      height: 20px;
    }

    .image-and-text-row {
        flex-direction: column;    /* Disposizione verticale per schermi piccoli */
        align-items: center;       /* Allinea al centro */
    }

    .image-container {
        width: 100%;               /* L'immagine occupa il 100% della larghezza del contenitore */
        max-width: 100%;           /* Assicura che l'immagine non superi il contenitore */
    }

    .text-container {
        width: 100%;               /* Il testo occupa il 100% su schermi piccoli */
    }

    /* Ridurre la dimensione del cerchietto verde sui dispositivi mobili */
    .circle {
        width: 20px;               /* Riduci la larghezza del cerchio */
        height: 20px;              /* Riduci l'altezza del cerchio */
    }
}


/* Publications (category) Layout =========================================== */

/* Contenitore che gestisce la disposizione dei post */
.publications-year-group {
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    padding: 5% 0;
}

.publications-posts-group{
  width: 100%;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
  padding: 15px;
}

.publications-posts-group h3{
  font-size: 19px;
  font-weight: 600;
  text-align: left;
}

.publications-posts-group p{
  text-align: left;
}

/* Contenitore per la disposizione dei post in due colonne */
.posts-row {
    display: flex;
    flex-wrap: wrap;
    padding: 0px;
    gap: 4%;  /* Aggiungi spazio tra i post */
}

/* Ogni elemento <li> avrà una larghezza del 48% */
.posts-row li {
    width: 48%;  /* Imposta la larghezza di ogni post per ottenere due colonne */
    list-style-type: none;  /* Rimuove i punti elenco */
    margin-bottom: 20px;  /* Distanza tra i post in verticale */

}

.year-button {
    display: inline-block;   /* Allinea il rettangolo in linea con altri elementi */
    line-height: 1;
    font-size: 15px;         /* Imposta la dimensione del font */
    padding: 12px 24px;      /* Spaziatura interna per fare il "pulsante" */
    border-radius: 3px;      /* Aggiunge bordi arrotondati */
    text-align: center;      /* Allinea il testo al centro */
    background-color: #000;  /* Colore di sfondo nero */
    color: #fff;             /* Colore del testo bianco */
    margin-bottom: 20px;
}

/* Colonna di sinistra */
.col-left {
    text-align: left;
}

/* Colonna di destra */
.col-right {
    text-align: left;
}

/* Stile per l'immagine in evidenza */
.post-thumbnail {
    float: left; /* Allinea l'immagine a sinistra */
    margin-right: 20px; /* Distanza tra l'immagine e il testo */
}

/* Stile per il testo che avvolge l'immagine */
.col-left .post-thumbnail + .post-title,
.col-right .post-thumbnail + .post-title {
    margin-top: 0;
    clear: both; /* Fa in modo che il testo venga disposto sotto l'immagine */
}

/* Stile per l'allineamento dell'immagine */
.col-left .col-right .post-thumbnail {
    text-align: left; /* Allinea l'immagine a sinistra */
}

/* Responsività: su schermi piccoli, i post occupano il 100% della larghezza */
@media (max-width: 768px) {
    .posts-row li {
        width: 100%;  /* Ogni post occupa tutta la larghezza su schermi piccoli */
    }

    .post-thumbnail{
      width: 100%;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-bottom: 15px;
    }

}/* END */

/* Outreach & Media Layout ================================================== */

.media-posts-group{
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.3); /* Aggiunge una leggera ombra */
  padding: 3%;
  margin: 1% 0;
}

.outreach-container {
    display: flex;
  }

  .years-list {
    width: 10%;
    padding: 10px;
    border-right: 1px solid #ccc;
  }

  /* Anno non selezionato */
.year-tab {
    cursor: pointer;
    padding: 10px;
    margin-bottom: 5px;
    background-color: #f0f0f0
    /* Colore grigio per gli anni non selezionati */
    border: 1px solid #ddd;
    border-radius: 4px;
    text-align: center;
    transition: color 0.3s, background-color 0.3s;
}

/* Anno selezionato */
.year-tab.selected {
    color: #fff; /* Colore nero per l'anno selezionato */
    font-weight: bold;  /* Enfatizza l'anno selezionato */
    background-color: #000; /* Colore di sfondo per l'anno selezionato (opzionale) */
}

/* Passaggio del mouse */
  .year-tab:hover {
    background-color: #000;
    color: #fff
  }

  .posts-content {
    width: 90%;
    padding: 10px;
  }

  .year-posts {
    display: none;
  }

  .post {
    margin-bottom: 20px;
  }

  .post h4 {
    margin: 0;
    font-size: 1.2em;
  }

  .post p {
    margin-top: 5px;
    font-size: 1em;
  }

  /* Media query per schermi più piccoli (come tablet o mobile) */
@media (max-width: 768px) {
  .outreach-container {
    flex-direction: column;  /* I contenuti saranno disposti verticalmente */
  }

  .years-list {
    width: 100%;  /* La lista degli anni prende tutta la larghezza */
    border-right: none; /* Rimuove il bordo destro per adattarsi meglio al layout */
    margin-bottom: 15px;  /* Aggiungi margine inferiore per distanziare dalla lista dei post */
  }

  .posts-content {
    width: 100%;  /* Imposta la larghezza a 100% per occupare tutta la larghezza */
  }

  /* Rimpicciolisci i bottoni degli anni su schermi più piccoli */
 .year-tab {
   font-size: 0.9em;  /* Riduce la dimensione del font per schermi piccoli */
   padding: 8px;  /* Riduce il padding per farli più compatti */
   margin-bottom: 10px;  /* Aggiunge uno spazio inferiore per distanziare meglio gli anni */
   width: 25%;
 }

 /* Rendi più piccolo anche l'anno selezionato */
 .year-tab.selected {
   font-size: 1em;  /* Leggermente più grande per enfatizzare l'anno selezionato */
   padding: 10px;  /* Un po' più di spazio per l'anno selezionato */
 }
}

/* Elementor */
.elementor-menu-toggle{
  font-size: 50px;
  color: #fff !important;
}