@import url('https://fonts.googleapis.com/css2?family=Open+Sans:wght@300;400;700&display=swap');



@import url('https://fonts.googleapis.com/css2?family=Press+Start+2P&display=swap');







:root {

   --highlight: #a81c3c;

   --mainfont: 'Open Sans';

   --testfont: 'Press Start 2P';

   --blue: #114b5f;

}



html,body

{

	width: 100vw;

    margin: 0px;

    padding: 0px;

    overflow-x: hidden;

    font-size: 17px;          /* Ingrandisce il testo di base */

    line-height: 1.5;         /* Regola lo spazio tra le righe (fondamentale!) */

    color: #222;              /* Un nero meno aggressivo per stancare meno la vista */

    font-family: var(--mainfont), sans-serif;

	background-color: #f4f4f2 !important; /* Un grigio-carta molto riposante */

	}

	

	



html {

    height: 100%;

}



body {

    min-height: 100vh; /* Occupa almeno tutta l'altezza dello schermo */

    display: flex;

    flex-direction: column;

    margin: 0;

    padding: 0;

}



/*basic paragraph styles*/

h1 {

	font-family: var(--mainfont), sans-serif;

	font-weight: 700;

	font-size: 2rem;

	margin-bottom: 5px; /* Riduce lo spazio sotto h1 */

}



h2 {

	font-size: 1.5rem;

	font-weight: 600;

	font-family: var(--mainfont), sans-serif;

	color: var(--highlight);

}



h3 {

	font-size: 1.3rem;

	font-weight: 300;

	font-family: var(--mainfont), sans-serif;

	color: DarkGrey;

	margin-top: 0px;     /* Elimina lo spazio sopra h3 */

}



/*titles for timeline*/



h4 {

	font-size: 1.5rem;

	font-weight: 500;

	font-family: var(--mainfont), sans-serif;

	color: var(--highlight);

	margin: 10px 0px;

}



h5 {

	font-size: 1.5rem;

	font-weight: 600;

	font-family: var(--mainfont), sans-serif;

	color: var(--highlight);

	margin: 10px 0px;

}







.big-container {

	display: flex;

	flex-flow: column wrap;

	margin: 0px;

	justify-content: space-around;

	/* min-height: 100%; */

	width: 100%;

	/* border: 5px solid pink; /*development*/

}





.kopf {

	/*border: 2px dotted fuchsia;/* for development*/

	display: block;

	width: 100%;

	background: var(--highlight);

	padding: 30px;

}





.container {

  display: flex;

  flex-wrap: wrap;

  justify-content: center;

  align-items: stretch;

  overflow: hidden;  

  margin: 70px 0px;

  width: 100%;

  padding: 0px;

  height: 100%;

  /*border: 5px solid pink; /*development*/



}



.space-between { 

  justify-content: space-between;

}



.emulated-flex-gap {

  display: flex;

  flex-wrap: wrap;       /* Permette di andare a capo */

  justify-content: center; /* CENTRA l'ultima riga */

  gap: 20px;             /* Sostituisce i vecchi margini manuali */

  padding: 20px 0;

}



.wrapper {

  /* Rimuovi display: inline-flex; e flex: 0; */

  display: flex; 

  border: 2px solid var(--highlight);

  width: 300px;

  height: 200px;

  border-radius: 10px;

  overflow: hidden;

  position: relative;

  justify-content: center;

  align-items: center;

  transition: transform 0.3s ease; /* Bonus: animazione fluida */

}



.wrapper:hover {

  transform: scale(1.03); /* Effetto zoom leggero al passaggio del mouse */

}





.wrapper img {

  filter: grayscale(80%);

  max-width:105%;

  max-height: auto;

}





.wrapper-text {

  display: flex;

  width: 100%;

  height: 100%;

  align-items: center;

  justify-content: center;

  font-family: var(--mainfont);

  font-size: 3rem;

  font-weight: 700;

  font-variant: small-caps;

  position: absolute;

  color: var(--highlight);

  /*border: 1px solid green; /* for development*/

}



.wrapper-text p {

	text-align: center;

}



.wrapper-text:hover {

	background-color: var(--highlight);

    color: white;

}



.logo-container {

  display: flex;

  flex-flow:row wrap;

  /*border: 2px solid blue; /* for development*/

  width: 100%;

  justify-content: space-around;

  align-items: center;

  padding: 10px;

  margin: 2rem 0;

  align-self: center;

  

}

	

.logo-container img {

	display: inline-flex; /* this does not allow the images to stretch*/

	width: 20vw;

	max-width: 200px;

	max-height: 17vh;

	height: auto;

	flex: 0;

	margin: 0 10px;

}

	

.article {

	margin: 10px 0;

	font-family: var(--mainfont);

	font-weight: 300;

	/*border: 2px solid #a81c3c; /* for development*/

	border-radius: 5px;

	padding: 0 3rem;

	/*max-width:80%;*/

	text-align: left;

    text-justify: inter-word;

	width: 100%;

}





.article a {

	font-weight: 400;

	color: var(--highlight);

	text-decoration: none;

}



.article a:hover {

	border-bottom: 1px solid var(--highlight);

}



.contact {

	width: 200px;

	height: 50px;

	min-width: 200px;

	background-color: var(--highlight);

	color: white;

	font-family: var(--mainfont) , sans-serif;

	font-size: 1.5rem;

	font-weight: 700;

	text-align: center;

	line-height: 50px;

	margin: 20px;

	border: 2px solid white;

	text-decoration: none;

	align-self: center;

}



.contact:hover {

	text-decoration: none;

	color: var(--highlight);

	background-color: white;

	border: 2px solid var(--highlight);

}



.contact:active {

	transform: scale(1.1);

}



/* menu style*/

nav {

    height: 100%;

 }



ul {

  display: flex;

  float: right;

  top: 0;

  width: 100%;

  flex-flow: row unwrap;

  justify-content: flex-end;

  list-style-type: none; /* Remove bullets */

  padding: 0; /* Remove padding */

  margin: 10px 50px;  /* Remove margins */

  /* border: 2px solid fuchsia; /* for development*/

}



li {

    margin-left: 1rem;

}



.cool-link {

    color: var(--highlight);

	font-family: var(--mainfont);

	font-weight: 300;

    font-size: 1rem;

    text-decoration: none;

	white-space: nowrap;

}



.cool-link::after {

    content: '';

    display: block;

    border-bottom: solid 2px var(--highlight);  

    transform: scaleX(0);  

    transition: transform 250ms ease-in-out;

}



.cool-link:hover::after {

    transform: scaleX(1);

}

/* menu style END*/





.gallery {

	font-family: var(--mainfont), sans-serif;

	font-weight: 400;

}





.PDFframe {

	width: 80vw;

	height: 100vh;

	border: 3px solid var(--highlight);

}

	

/* flag of mauritius red #EB2436	blue #131A6D	yellow #FFD600	green #00A650*/

.flag {

    height: 40px;

    width: 100%;

    filter: grayscale(40%);

    background-image: linear-gradient(

        #EB2436, #EB2436 25%,

        #131A6D 25%, #131A6D 50%,

        #FFD600 50%, #FFD600 75%,

        #00A650 75%

    );

    color: transparent; /* Più pulito di rgb(255,255,255,0) */

    text-align: center;

    margin-top: auto; /* Un'ulteriore sicurezza per tenere il footer giù */

}



.disclamer {

	color: rgb(150,150,150,1);

	font-family: var(--mainfont);

	font-size: 0.75rem;

	font-weight: 300;

}





.disclamer a {

	font-weight: 400;

	color: var(--highlight);

	text-decoration: none;

}







/* test for the webgis*/



.legend {

	font-family: var(--testfont) , sans-serif;

	font-weight: 300;

}



tr {

	font-family: var(--mainfont) , sans-serif;

	font-weight: 300;

}



tr strong {

	font-family: var(--mainfont) , sans-serif;

	font-weight: 400;

	color: var(--highlight)

}



span strong {

	font-family: var(--mainfont) , sans-serif;

	font-weight: 400;

	color: var(--highlight);

	line-height: 2rem;

	border-bottom: 1px solid var(--highlight);

	margin-bottom: 5px;

}









/*CSS per timeline roadmap*/

* {

  box-sizing: border-box;

}



/* The actual timeline (the vertical ruler) */

.timeline {

  position: relative;

  max-width: 750px;

  margin: 0 auto;

}



/* The actual timeline (the vertical ruler) */

.timeline::after {

  content: '';

  position: absolute;

  width: 6px;

  background-color: black;

  top: 0;

  bottom: 0;

  left: 50%;

  margin-left: -3px;

}



/* Container around content */

.card_done {

  padding: 10px 35px;

  position: relative;

  background-color: inherit;

  width: 50%;

}



/* The circles on the timeline */

.card_done::after {

  content: '';

  position: absolute;

  width: 25px;

  height: 25px;

  right: -17px;

  background-color: var(--highlight);

  border: 4px solid white;

  top: 15px;

  border-radius: 50%;

  z-index: 1;

}



.card_todo {

  padding: 10px 35px;

  position: relative;

  background-color: inherit;

  width: 50%;

}



/* The circles on the timeline */

.card_todo:after {

  content: '';

  position: absolute;

  width: 25px;

  height: 25px;

  right: -17px;

  background-color: white;

  border: 4px solid var(--highlight);

  top: 15px;

  border-radius: 50%;

  z-index: 1;

}

/* Place the container to the left */

.left {

  left: 0;

}



/* Place the container to the right */

.right {

  left: 50%;

}





/* Fix the circle for containers on the right side */

.right::after {

  left: -16px;

}



/* The actual content */

.content {

  padding: 1px 20px;

  background-color: white;

  position: relative;

  border: 2px solid var(--highlight);

  border-radius: 6px;

 

}



/* Media queries - Responsive timeline on screens less than 600px wide */

@media screen and (max-width: 600px) {

/* Place the timelime to the left */

  .timeline::after {

    left: 31px;

  }



/* Full-width containers */

  .card {

    width: 100%;

    padding-left: 70px;

    padding-right: 25px;

  }





/* Make sure all circles are at the same spot */

  .left::after, .right::after {

    left: 15px;

  }



/* Make all right containers behave like the left ones */

  .right {

    left: 0%;

  }

}













/*FOREWORD*/

/* Il contenitore che comanda l'allineamento */

.container-foreword {

    display: flex;

    gap: 20px;

    padding: 0 3rem; /* Sposta il padding qui! */

    width: 100%;

    margin: 10px 0;

}



/* Rimuovi il padding extra solo per gli articoli dentro le colonne */

.container-foreword .article {

    flex: 1;

    padding: 0; /* Azzera il padding interno per non farlo raddoppiare */

    margin: 0;  /* Gestiamo lo spazio con il gap del padre */

    text-align: justify;

}



/* Gestione immagini all'interno */

.container-foreword img {

    max-width: 100px; /* Riducile un po' per le colonne strette */

    height: auto;

    float: left;

    margin-right: 15px;

}



/* Responsività: se lo schermo è piccolo (es. cellulare), tornano uno sotto l'altro */

@media (max-width: 900px) {

  .container-foreword {

    flex-direction: column;

  }

}



/*FINE FOREWORD*/









/*header*/

/* Style the header with a grey background and some padding */

.header {

  overflow: hidden;

  background-color: var(--highlight);

  margin: 0px;

  width: 100%;

  height: fit-content;

  padding-left: 3rem;



}



/* Style the header links */

.header a {

  float: left;

  color: white;

  text-align: left;

  text-decoration: none;

  font-size: 18px;

  line-height: 0px;

  border-radius: 4px;

}



/* Style the logo link (notice that we set the same value of line-height and font-size to prevent the header to increase when the font gets bigger */

.header a.logo {

  font-size: 25px;

  font-weight: bold;

}





/* Style the active/current link*/

.header a.active {

  background-color: var(--highlight);

  color: white;

}



/* Float the link section to the right */

.header-right {

  float: right;

}



/* Add media queries for responsiveness - when the screen is 500px wide or less, stack the links on top of each other */

@media screen and (max-width: 500px) {

  .header a {

    float: none;

    display: block;

    text-align: left;

  }

  .header-right {

    float: none;

  }

}



.footer {

  position: fixed;

  bottom: 0;

}







/* REPORT */



/* Griglia per i report */

.report-grid {

  display: grid;

  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));

  gap: 15px;

  margin-top: 20px;

}



/* Stile della singola card */

.report-card {

  display: flex;

  align-items: center;

  padding: 15px;

  background-color: #fdfdfd;

  border: 1px solid #eee;

  border-left: 5px solid var(--highlight); /* Una linea colorata a sinistra */

  border-radius: 8px;

  text-decoration: none;

  color: #333;

  transition: all 0.3s ease;

}



.report-card:hover {

  background-color: white;

  box-shadow: 0 5px 15px rgba(0,0,0,0.1);

  transform: translateY(-3px);

  border-left-color: #2c3e50; /* Cambia colore al passaggio del mouse */

}



/* Icona download */

.report-icon {

  font-size: 1.5rem;

  margin-right: 15px;

  color: var(--highlight);

}



/* Testi dentro la card */

.report-info {

  display: flex;

  flex-direction: column;

}



.report-year {

  font-weight: 700;

  font-size: 1.1rem;

}



.report-label {

  font-size: 0.8rem;

  color: #777;

  text-transform: uppercase;

}





/*FINE REPORT*/





/*LISTS*/

.methodology-list {

  margin-top: 20px;

}



.method-item {

  display: flex;

  align-items: flex-start;

  margin-bottom: 25px; /* Spazio tra i punti */

}



.method-number {

  background-color: var(--highlight);

  color: white;

  width: 35px;

  height: 35px;

  border-radius: 50%;

  display: flex;

  align-items: center;

  justify-content: center;

  font-weight: bold;

  flex-shrink: 0; /* Impedisce al cerchio di schiacciarsi */

  margin-right: 20px;

}



.method-text {

  line-height: 1.6;

}







/* Layout Zig-Zag per le sezioni (Immagine/Testo alternati) */

.section-zigzag {

	display: flex;

    align-items: stretch; /* Fondamentale: l'immagine NON si allunga se il testo cresce */

    gap: 40px;

    margin-bottom: 80px;

	text-align: left;

}



/* Questa riga inverte automaticamente la posizione (Testo-Immagine -> Immagine-Testo) 

   per ogni articolo pari (2°, 4°, ecc.) */

.section-zigzag:nth-of-type(even) {

  flex-direction: row-reverse;

}



.zigzag-text {

flex: 1; /* Il testo occupa tutto lo spazio rimanente */

}



.zigzag-image {

	flex: 0 0 500px; /* L'immagine occupa esattamente il 40% della larghezza e non cresce */

    position: sticky; /* Opzionale: l'immagine resta ferma mentre scorri il testo */

    top: 20px;

	}



.zigzag-image img {

	width: 100%;

    height: 100%;      /* Prende l'altezza del contenitore (che segue il testo) */

    object-fit: cover;  /* Fondamentale: l'immagine si ritaglia per non deformarsi */

    border-radius: 12px;

    box-shadow: 0 10px 25px rgba(0,0,0,0.15);

	}



/* Fondamentale per il mobile: se lo schermo è piccolo, togliamo la larghezza fissa */

@media (max-width: 850px) {

    .section-zigzag {

        flex-direction: column !important;

    }

    .zigzag-image {

        flex: 0 0 auto;

        width: 100%;

        height: 300px; /* Altezza fissa su mobile per non farla sparire */

    }

}





/*NANOGALLERY*/

/* Il contenitore dei bottoni */

.nGY2NavigationbarItem {

    font-family: var(--mainfont), sans-serif !important;

    font-size: 0.9rem !important;

    font-weight: 500 !important;

    text-transform: uppercase !important;

    letter-spacing: 1px !important;

    padding: 8px 18px !important;

    margin: 5px !important;

    border-radius: 20px !important;

    transition: all 0.3s ease !important;

    cursor: pointer !important;

    display: inline-block !important;

    border: 1px solid #ddd !important;

}



/* Quando il tag NON è selezionato */

.nGY2NavFilterUnselected {

    background-color: #f8f8f8 !important;

    color: #444 !important;

}



/* Quando il tag È selezionato (Attivo) */

.nGY2NavFilterSelected {

    background-color: var(--highlight) !important;

    color: white !important;

    border-color: var(--highlight) !important;

    box-shadow: 0 4px 12px rgba(168, 28, 60, 0.3) !important;

}



/* Semplice, pulito, zero errori */

.nGY2GThumbnailMain, .nGY2GThumbnailImage {

    border-radius: 12px !important;

    overflow: hidden !important;

}



.nGY2GThumbnail {

    border: none !important;

    background: transparent !important;

}







/*MAP */



/* Contenitore principale dello slider */

#time-controls {

    position: absolute;

    bottom: 40px;

    left: 15%;

    right: 15%;

    z-index: 1000;

    text-align: center; /* Fondamentale per centrare l'anno e lo slider */

    pointer-events: none;

}



/* L'anno selezionato (grassetto, grande e colorato) */

#year-display {

    font-size: 26px;

    font-weight: 600;

    color: var(--highlight);

    text-shadow: 0px 0px 10px rgba(255,255,255,0.9);

    margin-bottom: 15px;

    pointer-events: auto;

    display: block;   /* Assicura che prenda tutto lo spazio orizzontale per centrarsi */

    font-variant-numeric: tabular-nums;

}



/* La riga dello slider */

#slider {

    -webkit-appearance: none;

    width: 100%;

    height: 4px;

    background: rgba(0, 0, 0, 0.30);

    border-radius: 10px;

    outline: none;

    cursor: pointer;

    pointer-events: auto;

}



/* Il pallino dello slider */

#slider::-webkit-slider-thumb {

    -webkit-appearance: none;

    appearance: none;

    width: 26px;

    height: 26px;

    background: var(--highlight);

    border: 3px solid #fff;

    border-radius: 50%;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    transition: transform 0.1s ease-in-out;

	margin-top: -9px;

}



#slider::-moz-range-thumb {

    width: 26px;

    height: 26px;

    background: var(--highlight);

    border: 3px solid #fff;

    border-radius: 50%;

    box-shadow: 0 4px 10px rgba(0,0,0,0.3);

    cursor: pointer;

}



/* Il contenitore che distribuisce i pallini */

.slider-track-container {

    position: absolute;

    top: 50%;

    left: 0;

    right: 0;

    transform: translateY(-50%);

    display: flex;

    justify-content: space-between;

    padding: 0 12px;

    pointer-events: none;

    z-index: 1;

    width: 100%;

    box-sizing: border-box;

}



/* LA RIGA GRIGIA SOLIDA */

.slider-track-container::before {

    content: "";

    position: absolute;

    top: 50%;

    left: 20px;   /* Inizia dal primo pallino visibile */

    right: 20px;  /* Finisce all'ultimo pallino visibile */

    height: 4px;  /* Spessore della riga */

    background: #ccc; /* Grigio solido (puoi usare rgba(0,0,0,0.2) se vuoi trasparenza) */

    transform: translateY(-50%);

    z-index: -1;  /* Sta dietro i pallini bianchi */

}



/* I PALLINI BIANCHI */

.step-dot {

    min-width: 10px;

    height: 10px;

    background: #ffffff; /* Sfondo bianco solido per coprire la riga grigia */

    border: 2px solid var(--highlight);

    border-radius: 50%;

    box-shadow: 0 1px 3px rgba(0,0,0,0.2);

    display: inline-block;

}



/* NASCONDI LA RIGA ORIGINALE DELLO SLIDER (che darebbe fastidio) */

#slider::-webkit-slider-runnable-track { background: transparent !important; border: none; }

#slider::-moz-range-track { background: transparent !important; border: none; }



/*POPUP*/

/* Forza le immagini nel popup a non uscire mai dai bordi */

.leaflet-popup-content img {

    max-width: 100% !important;

    height: auto !important;

    display: block;

    margin: 10px auto; /* Le centra e dà un po' di respiro sopra e sotto */

    border-radius: 4px; /* Un piccolo tocco di stile per smussare gli angoli delle foto */

}



/* Opzionale: allarga un po' il popup se le foto sono troppo piccole */

.leaflet-popup-content {

    width: auto !important;

    min-width: 200px;

    max-width: 350px; /* Scegli tu la larghezza massima desiderata */

}