:root {
  --bg: #F5F3EE;
  --dark: #20332B;
  --accent: #E6C031;
  --highlight: #B64939;
}

html {
scroll-behavior: smooth;
}

body {
  background-color: #F5F3EE;
  margin: 0;
  padding-top: 60px; /* uguale all'altezza dell'header */
}

/* STILI HEADER */
#headerBar {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 60px; /* Mantieni la tua altezza */
  background: #e3e4df;
  border-bottom: 2px solid rgba(32, 51, 43, 0.15);
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  padding: 0 20px;
  box-sizing: border-box;
  white-space: nowrap;
  overflow-x: hidden;
  z-index: 1000; /* Sopra tutto il resto */
}

.header-left { 
  justify-self: start; 
  /* Aggiungi queste righe per allineare i due bottoni */
  display: flex;
  gap: 12px; /* Spazio tra i due bottoni */
  align-items: center;
}
.header-center {
  display: flex;
  align-items: center;
  justify-content: center;
}
.header-right {
  justify-self: end;
  display: flex;
  gap: 20px;
}

/* STILE LOGO MULTI-LINEA (ROBOTO) */
#siteLogo {
  display: flex;
  align-items: center;
}

#siteLogo img.logo-img {
  height: 55px;   /* sicuro dentro i 60px */
  max-height: 100%;
  width: auto;
  display: block;
}

/* LINK NAVIGAZIONE (ROBOTO MONO) */
.nav-btn, .nav-link {
  font-family: 'Roboto Mono', monospace; 
  font-weight: 500;
  font-size: 0.9rem;
  color: var(--dark);
  text-decoration: none;
}

.nav-btn {
  padding: 10px 18px;
  border-radius: 20px;
  border: 2px solid var(--dark);
  background: transparent;
  transition: all 0.25s ease;
}

.nav-btn:hover {
  background: var(--dark);
  color: var(--bg);
  transform: translateY(-2px);
}

.nav-link {
  position: relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  bottom: -4px;
  left: 0;
  width: 0%;
  height: 2px;
  background: var(--accent);
  transition: width 0.25s ease;
}

.nav-link:hover::after {
  width: 100%;
}

.nav-btn.btn-secondary {
  border-color: transparent; /* Senza bordo */
  background: rgba(32, 51, 43, 0.05); /* Sfondo leggerissimo */
  color: var(--dark);
}

.nav-btn.btn-secondary:hover {
  border-color: var(--dark);
  background: transparent;
}

/* STATO PAGINA CORRENTE */
.nav-btn.active {
  background: var(--dark);
  color: var(--bg);
  border-color: var(--dark);
  transform: translateY(0);          /* niente effetto hover */
  box-shadow: inset 0 2px 6px rgba(0,0,0,0.25);
}

/* disattiva hover sul bottone attivo */
.nav-btn.active:hover {
  background: var(--dark);
  color: var(--bg);
  transform: none;
}


/* =========================
 HELP BUTTON ( ? )
========================= */

#helpBtn {
position: fixed;
left: 2rem;
bottom: 2rem;
width: 36px;
height: 36px;
border-radius: 50%;
background: #b64939; /* rosso coerente con palette */
color: #f4f1ec;
font-family: 'Roboto', sans-serif;
font-size: 18px;
font-weight: 500;
border: none;
cursor: pointer;
z-index: 900;
box-shadow: 0 8px 20px rgba(0,0,0,0.25);
transition: transform 0.2s ease, box-shadow 0.2s ease;
}

#helpBtn:hover {
transform: scale(1.1);
box-shadow: 0 12px 28px rgba(0,0,0,0.35);
}


/* =========================
 TUTORIAL OVERLAY (Sfondo oscurante)
========================= */

#tutorialSection {
position: fixed;
inset: 0;
background: rgba(0, 0, 0, 0.6); 
backdrop-filter: blur(3px);
display: none;
align-items: center;
justify-content: center;
z-index: 9999;
pointer-events: all;
padding: 20px; /* Margine di sicurezza per schermi piccoli */
}

#tutorialSection.active {
display: flex;
}

/* =========================
 TUTORIAL CONTAINER (Il Box Verde Fodera)
========================= */

.tutorial-container {
font-family: 'Roboto Mono', monospace; 
font-weight: 500;
font-size: 0.9rem;

background: #365b55; 
color: #F5F3EE;

/* NESSUN PADDING QUI */
padding: 0; 
width: 100%;
max-width: 900px;

/* ALTEZZA: Non tocca mai i bordi dello schermo */
max-height: 85vh; 

/* Gestione Scroll e Layout */
overflow: hidden; /* Nascondiamo lo scroll sul contenitore principale */
display: flex;    /* Per gestire il layout interno */
flex-direction: column;
position: relative;

/* ARROTONDAMENTO */
border-radius: 24px;
border: 1px solid rgba(245, 243, 238, 0.3);

/* OMBRA */
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);

pointer-events: auto;
}

/* =========================
 NUOVO WRAPPER PER SCROLL
 Questo gestisce il contenuto che scorre
========================= */
.tutorial-scroll-wrapper {
overflow-y: auto; /* Scroll attivo qui */
height: 100%;     /* Occupa tutta l'altezza disponibile */

/* MODIFICA QUI: Aumentato da 3rem a 5rem per più spazio attorno */
padding: 5rem;    

/* Fix per Firefox per la scrollbar */
scrollbar-width: thin;
scrollbar-color: rgba(245, 243, 238, 0.3) transparent;
}

/* --- SCROLLBAR STYLES --- */
.tutorial-scroll-wrapper::-webkit-scrollbar {
width: 8px;
}
.tutorial-scroll-wrapper::-webkit-scrollbar-track {
background: transparent; 
margin-top: 20px;
margin-bottom: 20px;
}
.tutorial-scroll-wrapper::-webkit-scrollbar-thumb {
background-color: rgba(245, 243, 238, 0.3);
border-radius: 20px;
border: 3px solid #365b55;
}


/* Titolo del Tutorial */
.tutorial-title {
color: #F5F3EE;
font-family: 'Roboto', sans-serif;
font-size: 2.2rem;
margin-bottom: 2rem;
text-align: center;
font-weight: 700;
margin-top: 10px;
}

/* =========================
 STEPS LIST
========================= */

.tutorial-steps {
list-style: none;
padding: 0;
margin: 0;
display: flex;
flex-direction: column;
}

.tutorial-steps li {
background: transparent;
padding: 2.5rem 0;
border-bottom: 1px solid rgba(245, 243, 238, 0.15);
display: flex;
flex-direction: column;
gap: 15px;
color: #F5F3EE;
}

.tutorial-steps li:last-child {
border-bottom: none;
padding-bottom: 0;
}

.tutorial-steps li > strong {
font-size: 1.4rem;
color: #F5F3EE; 
display: block;
margin-bottom: 5px;
}

.tutorial-steps li p {
  margin: 0;
  line-height: 1.7;
  opacity: 0.9;
}

/* =========================
 IMAGES
========================= */

.tutorial-screenshot {
margin-top: 1.5rem;
width: 100%;
max-width: 100%;
border-radius: 12px;
border: 1px solid rgba(245, 243, 238, 0.2);
box-shadow: 0 10px 30px rgba(0,0,0,0.2);
}

body.tutorial-open {
overflow: hidden;
}

/* =========================
 CLOSE BUTTON (X GEOMETRICA)
========================= */

#tutorialCloseBtn {
position: absolute; 
top: 25px;
right: 25px;
width: 44px;
height: 44px;
border-radius: 50%;

background: #365b55; /* Colore sfondo uguale al box */
border: 2px solid #F5F3EE;       
color: #F5F3EE; 
cursor: pointer;
z-index: 10; /* Per stare sopra al contenuto scrollabile */
transition: all 0.3s ease;
font-size: 0; 
}

/* X */
#tutorialCloseBtn::before,
#tutorialCloseBtn::after {
content: '';
position: absolute;
top: 50%;
left: 50%;
width: 20px; 
height: 2px; 

background-color: currentColor;
border-radius: 2px; 
}

/* linee per formare la X */
#tutorialCloseBtn::before {
transform: translate(-50%, -50%) rotate(45deg);
}

#tutorialCloseBtn::after {
transform: translate(-50%, -50%) rotate(-45deg);
}

#tutorialCloseBtn:hover {
background-color: #F5F3EE;
color: #365b55; 
}

/* BACK TO TOP BUTTON */
#backToTop {
position: fixed;
bottom: 30px;
right: 30px;
width: 44px;
height: 44px;
border-radius: 50%;
border: none;

background-color: #415E5A; 
color: #F5F3EE;            
font-size: 20px;
font-weight: bold;

cursor: pointer;
opacity: 0;
pointer-events: none;
transition: opacity 0.3s ease, transform 0.3s ease;
z-index: 999;
}

#backToTop.show {
opacity: 1;
pointer-events: auto;
transform: translateY(0);
}

#backToTop:hover {
background-color: #283618; /* verde scuro testo */
}

/* FOOTER */
.footer {
  background: var(--bg); /* O il tuo colore di sfondo es: #f0f0f0 */
  padding: 50px 60px;
  display: grid;
  /* Struttura a 3 colonne: Sinistra larga, linea sottile, Destra */
  grid-template-columns: 1.4fr 2px 1fr; 
  gap: 50px;
  align-items: start;
  border-top: 2px solid rgba(65, 94, 90, 0.2);
}

/* Stili Testo */
.footer p {
  font-size: 0.85rem;
  color: #415E5A; /* Il tuo colore verde scuro */
  margin: 4px 0;
  font-family: 'Roboto Mono', monospace; 
  line-height: 1.4;
}

.footer strong {
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

/* Griglia Nomi e Mail */
.contacts-grid {
  display: grid;
  grid-template-columns: auto 1fr; /* Colonna nomi si adatta, mail prende il resto */
  gap: 10px 30px; /* Spazio verticale e orizzontale */
  margin-top: 15px;
  margin-bottom: 30px;
}

/* Copyright piccolo */
.copyright-statement {
  font-size: 0.7rem !important;
  opacity: 0.7;
  margin-top: 20px;
  max-width: 90%;
}

/* Linea Divisoria */
.footer-divider {
  background: #415E5A;
  opacity: 0.35;
  width: 2px;
  height: 100%;
  min-height: 200px;
}

/* Colonna Destra */
.footer-right {
  display: flex;
  flex-direction: column;
  gap: 25px; /* Spazio tra i blocchi di testo */
}

/* Loghi */
.logos-container {
  display: flex;
  align-items: center;
  gap: 30px; /* Ho aumentato un po' anche lo spazio tra i loghi per farli respirare */
  margin-top: 20px; /* Un po' più di margine sopra */
  flex-wrap: wrap;
}

.footer-logo {
  height: 65px; /* <<< QUI HO AUMENTATO LA DIMENSIONE (era 40px) */
  width: auto;  /* Mantiene le proporzioni */
  display: block;
  mix-blend-mode: multiply;
}

/* Responsive Tablet/Mobile */
@media (max-width: 900px) {
  .footer {
      grid-template-columns: 1fr; /* Tutto in una colonna */
      gap: 40px;
      padding: 40px 20px;
  }
  
  .footer-divider {
      display: none;
  }
  
  .contacts-grid {
      grid-template-columns: 1fr; /* Nomi sopra, mail sotto o affiancati */
      gap: 5px;
  }
  
  /* Per mobile, magari vuoi nomi e mail vicini */
  .names p { display: block; font-weight: bold; margin-top: 10px; }
  .emails p { display: block; margin-bottom: 10px; }
}

/* STILI PER HEADER ANNO SELEZIONATO */
#fixed-header {
  position: fixed;
  top: 60px; /* Sotto l'header principale */
  left: 0;
  width: 100%;
  height: 70px; /* Altezza per titolo + slider + legenda */
  z-index: 999; /* Sotto l'header principale (1000) ma sopra il canvas */
  padding: 20px 0 0 0;
  /* INIZIALMENTE SENZA SFONDO */
  background-color: transparent;
  box-shadow: none;
}

/* Classe che si aggiunge quando scrolli */
#fixed-header.scrolled {
  background-color: rgba(245, 243, 238, 0.9); 
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}

/* Contenitore interno per il titolo e slider */
#fixed-content {
  position: relative;
  z-index: 1;
}

#year-display {
  text-align: center;
  font-family: 'Roboto', sans-serif;
  color: #415E5A;
  margin: 0 auto 10px auto;
  position: relative;
  z-index: 2;
}

#current-year {
  font-weight: bold;
  font-size: 24px;
}