:root {

  --dark: #121826;

  --dark-2: #1b2235;

  --accent: #ff7a18;

  --light: #f4f5f7;

  --beige: #f6f2e7;

  --white: #ffffff;

  --text: #1e1e1e;

}



* { margin: 0; padding: 0; box-sizing: border-box; font-family: "Poppins", sans-serif; }

html { scroll-behavior: smooth; }

body { background: var(--light); color: var(--text); }



/* ===== HEADER ===== */

/* ===== HEADER IDENTICO ALLA HOME ===== */

header {

  position: fixed;

  top: 0;

  width: 100%;

  height: 90px;

  background: var(--dark);

  z-index: 1000;

}



.header-container {

  width: 90%;

  height: 100%;

  margin: auto;

  display: grid;

  grid-template-columns: auto 1fr;

  align-items: center;

}



/* STILE LOGO CON RIGA VERTICALE SOTTILE */

.logo {

    display: flex;

    flex-direction: column;

    justify-content: center;

    border-left: 3px solid var(--accent); /* Riga sottile come richiesto */

    padding-left: 15px;

    height: 50px;

    animation: headerSlideDown 0.8s ease-out forwards;

}



.logo .name {

    color: var(--white);

    font-size: 20px;

    font-weight: bold;

    font-family: Arial, sans-serif;

    text-transform: uppercase;

    line-height: 1;

    margin-bottom: 4px;

}



.logo .subtitle {

    font-size: 13px;

    color: var(--accent) !important; /* Colore arancione */

    font-weight: 500;

    letter-spacing: 1px;

    text-align: left;

}



/* NAVIGAZIONE */

nav { text-align: center; }

nav a {

  margin: 0 18px;

  text-decoration: none;

  color: var(--white);

  font-size: 15px;

  position: relative;

  display: inline-block;

  transition: transform 0.25s ease, color 0.25s ease;

  opacity: 0; /* Parte nascosto per l'animazione */

  animation: headerSlideDown 0.8s ease-out forwards 0.3s; /* Delay per effetto cascata */

}



nav a::after {

  content: "";

  position: absolute;

  width: 0;

  height: 2px;

  background: var(--accent);

  left: 0;

  bottom: -6px;

  transition: 0.3s;

}



nav a:hover {

  transform: translateY(-5px);

  color: var(--accent);

}



nav a:hover::after { width: 100%; }



/* ANIMAZIONE DI ENTRATA (SOLO INIZIALE) */

@keyframes headerSlideDown {

    from {

        opacity: 0;

        transform: translateY(-30px);

    }

    to {

        opacity: 1;

        transform: translateY(0);

    }

}



/* LINK ATTIVO (pagina corrente) */

nav a.active {

  color: var(--accent);

  pointer-events: none; /* disabilita click */

  cursor: default;

}



/* linea sotto sempre visibile */

nav a.active::after {

  width: 100%;

}



/* disattiva animazioni hover */

nav a.active:hover {

  transform: none;

}



/* ===== HERO PARALLAX ===== */

.publications-hero {

  margin-top: 90px;

  height: 80vh;

  background-image: url("img/slider.jpg");

  background-size: cover;

  background-position: center;

  background-attachment: fixed;

  position: relative;

}

.publications-hero::before {

  content: "";

  position: absolute;

  inset: 0;

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

}

.hero-content {

  position: absolute;

  top: 50%;

  left: 50%;

  transform: translate(-50%, -50%);

  text-align: center;

  color: var(--white);

  z-index: 2;

}

.hero-content h1 { font-size: 46px; font-weight: 600; margin-bottom: 15px; }

.hero-content h2 { font-size: 18px; font-weight: 400; line-height: 1.6; }



/* ===== TITOLO standard della page ===== */



.publications-title {

  margin-top: 90px; /* Aggiungi questo per far apparire il titolo sotto la barra nera */

  text-align: center;

  background: var(--beige);

  padding: 60px 20px 40px;

}

.publications-title h2 {

  font-size: 32px;

  color: var(--accent);

  letter-spacing: 2px;

  margin-bottom: 10px;

}

.publications-title h3 {

  font-size: 24px;

  color: var(--text);

}



/* ===== SEZIONE PUBBLICAZIONI ===== */

.publications-section {

  max-width: 1200px;

  margin: auto;

  padding: 60px 20px 10px;

}

.publication-item {

  display: grid;

  grid-template-columns: 320px 1fr;

  gap: 60px;

  margin-bottom: 80px;

  align-items: center;

}

.publication-card {

  background: var(--white);

  box-shadow: 0 20px 40px rgba(0,0,0,0.12);

  padding: 15px;

  text-align: center;

  transition: transform 0.3s ease, box-shadow 0.3s ease;

}

.publication-card:hover {

  transform: translateY(-8px);

  box-shadow: 0 25px 50px rgba(0,0,0,0.18);

}

.publication-card img {

  width: 100%;

  height: 220px;

  object-fit: cover;

  margin-bottom: 12px;

}

.publication-card a {

  text-decoration: none;

  font-weight: 600;

  color: var(--dark);

}

.publication-card a:hover { color: var(--accent); }

.publication-text {

  position: relative;

  padding-left: 20px;

}

.publication-text::before {

  content: "";

  position: absolute;

  left: 0;

  top: 0;

  width: 4px;

  height: 100%;

  background: var(--accent);

}

.publication-text p {

  font-size: 16px;

  line-height: 1.8;

  margin-bottom: 10px;

}

.publication-text a {

  color: var(--accent);

  text-decoration: none;

  font-weight: 500;

}



/* Modifica i titoli Aim, Methods, Conclusion in blu scuro e VAI A CAPO */

.publication-text h2 {

    display: block;        /* Forza l'andata a capo */

    font-size: 23px;       /* Leggermente più grande per risaltare */

    color: #0a2a66;        /* Il tuo blu scuro */

    font-weight: 700;

    text-transform: uppercase;

    margin-top: 15px;      /* Spazio sopra ogni titolo per separarli */

    margin-bottom: 5px;    /* Spazio tra titolo e testo sotto */

}



.publication-title {

  text-align: center;

  color: #0a2a66;

  font-size: 22px;

  font-weight: 600;

  margin-bottom: 15px;

}

.publication-title a {

  color: #0a2a66;

  text-decoration: none;

  font-weight: 600;

  font-family: Arial, sans-serif;

  transition: 0.25s;

}



.publication-title a:visited,

.publication-title a:active {

  color: #0a2a66;

}



.publication-title a:hover {

  color: #0a2a66;

  text-decoration: underline;

  border-radius: 4px;

}

.label {

  color: #0a2a66; /* blu scuro */

  font-weight: 600;

}





/* ===== SEZIONE LOCANDINE PDF ===== */

/* CONTENITORE GENERALE SEZIONE LOCANDINE */

.locandine-wrapper {

    position: relative;

    padding: 3% 0;

    overflow: hidden;

    background-color: #121826; /* Colore di sicurezza */

}



/* SFONDO CON IMMAGINE SFOCATA E TRASPARENTE */

.locandine-wrapper::before {

    content: "";

    position: absolute;

    inset: 0;

    background-image: url("img/foro.jpg");

    background-size: cover;

    background-position: center;

    background-attachment: fixed;

    filter: blur(8px) brightness(0.8); /* meno scuro */

    opacity: 0.5; /* più trasparente */

    z-index: 0;

    transform: scale(1.05);

}



/* CONTENUTO IN PRIMO PIANO */

.locandine-content {

    position: relative;

    z-index: 1; /* Porta tutto sopra lo sfondo */

    max-width: 1200px;

    margin: auto;

}



.pdf-title {

    text-align: center;

    font-size: 29px;

    font-weight: 600;

    margin-bottom: 50px;

    color: #ffffff;

    text-shadow: 2px 2px 10px rgba(0,0,0,0.5); /* Ombra per leggere meglio sul fondo */

}

/* GRIGLIA LOCANDINE PDF - ADATTABILE */

.pdf-section {

    display: flex;

    justify-content: center;

    /* Usiamo gap in percentuale per distanziarle in modo fluido (es. 5% della larghezza) */

    gap: 15%; 

    max-width: 1000px; /* Ridotta larghezza massima per compattare */

    margin: auto;

    padding: 0 20px;

    /* Importante per farle andare a capo su mobile */

    flex-wrap: wrap; 

}



/* LA CARD SINGOLA IN PERCENTUALE */

.pdf-card {

    /* Impostiamo una larghezza base in % (circa un terzo meno il gap) */

    width: 20%; 

    /* Impostiamo una larghezza minima per evitare che diventino troppo strette su tablet */

    min-width: 220px; 

    text-align: center;

    transition: transform 0.3s ease;

    /* Spazio verticale se vanno a capo su mobile */

    margin-bottom: 20px; 

}



/* L'IMMAGINE DENTRO LA CARD */

.pdf-card img {

    width: 100%; /* Prende tutta la larghezza della card (%) */

    /* Rimuoviamo l'altezza fissa (360px) e usiamo aspect-ratio per mantenere la proporzione */

    height: auto;

    aspect-ratio: 2 / 3; /* Mantiene la proporzione verticale tipica delle locandine */

    

    object-fit: cover;

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

    border-radius: 12px;

    box-shadow: 0 10px 20px rgba(0,0,0,0.4); /* Ombra leggermente ridotta */

}

.pdf-card a {

    text-decoration: none !important; /* Rimuove la sottolineatura */

    display: block;

}



.pdf-card div {

    color: #ffffff;

	font-family: Arial;

    margin-top: 15px;

    font-weight: 500;

    text-shadow: 1px 1px 5px rgba(0,0,0,0.8);

} 



.pdf-card:hover {

    transform: translateY(-12px);

}



.pdf-card:hover img {

    box-shadow: 0 25px 45px rgba(0,0,0,0.6);

}





 /* ===== FOOTER NUOVO COMPATTO ===== */



.footer-main {

  background: #0f1626;

  color: #d0d3d8;

  font-size: 13px;

}



/* Contenitore centrale */

.footer-2col {

  display: grid;

  grid-template-columns: 1fr 1fr;

  gap: 40px;

  max-width: 700px;

  margin: 0 auto;

  padding: 12px 20px;   /* altezza dimezzata */

  align-items: start;

}



/* Colonne */

.footer-col {

  text-align: center;   /* centrato come richiesto */

}



/* Titoli */

.footer-col h4 {

  font-size: 15px;

  margin-bottom: 8px;

  font-weight: 600;

}



/* Testi */

.footer-col p,

.footer-links li {

  margin-bottom: 4px;

  line-height: 1.3;

}



/* Link */

.footer-main a {

  color: #d0d3d8;

  text-decoration: none;

}



.footer-main a:hover {

  color: #ff7a18;

}



/* Lista sitemap */

.footer-links {

  list-style: none;

  padding: 0;

  margin: 0;

}



/* Parte finale */

.footer-bottom {

  border-top: 1px solid rgba(255,255,255,0.08);

  text-align: center;

  padding: 6px;

  font-size: 11px;

  color: #aaa;

}



/*Logo creator*/



/* Contenitore per allineare gli elementi */

.footer-bottom-content {

  display: flex;

  justify-content: space-between; /* Mette il copyright a sinistra e Simone a destra */

  align-items: center;

  max-width: 900px; /* O la larghezza del tuo sito */

  margin: 0 auto;

  padding: 0 20px;

  flex-wrap: wrap; /* Per il mobile: si mettono uno sotto l'altro */

}



.created-by {

  font-style: italic;

  font-size: 14px;

  letter-spacing: 0.5px;

  font-weight: 800;

}



.created-by a {

  color: #ff7a18; /* Arancione come il tuo hover per richiamare il brand */

  font-weight: 600;

  text-decoration: none;

  transition: opacity 0.3s;

}



.created-by a:hover {

  text-decoration: underline;

  opacity: 0.8;



}



/* Fix per mobile: centra tutto quando lo schermo è piccolo */

@media (max-width: 600px) {

  .footer-bottom-content {

    flex-direction: column;

    gap: 5px;

    text-align: center;

  }

}