/* Global Styles */
body {
  font-family: 'Inter', sans-serif;
  font-weight: 600;
  margin: 0;
  padding: 0;
  background-color: #f8f8f8;
  color: #1a1a1a;
  line-height: 1.6;
  transition: background-color 0.3s, color 0.3s;
  /* Aumenta padding-top per staccare il contenuto dalla topbar fluttuante */
  /* Calcoliamo un padding sufficiente per l'altezza della topbar + lo spazio fluttuante */
  padding-top: calc(1rem + 40px + 1rem); /* Altezza originale (1rem*2 padding + 40px bottoni) + top: 1rem di float */
}

/* Header */
header {
  background: rgba(248, 248, 248, 0.8); /* Sfondo semi-trasparente di default */
  /* Mantieni il padding originale dell'header per non alterare l'altezza interna */
  padding: 1rem 2rem; 
  position: fixed; /* Torna a fixed per l'effetto fluttuante */
  top: 1rem; /* Sposta la topbar verso il basso per creare l'effetto "staccato" */
  left: 50%; /* Centra la topbar orizzontalmente */
  transform: translateX(-50%); /* Assicura il centraggio perfetto */
  z-index: 1000;
  /* Transizione solo per sfondo, blur, ombra e border-radius. Rimosso transform e opacity. */
  transition: background 0.3s, backdrop-filter 0.3s, box-shadow 0.3s, border-radius 0.3s;
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08); /* Ombra più pronunciata per effetto fluttuante */
  backdrop-filter: blur(8px); /* Effetto sfocato per la semi-trasparenza SEMPRE ATTIVO */
  border-radius: 999px; /* Bordi molto arrotondati */
  width: calc(100% - 4rem); /* Larghezza della topbar, meno il padding laterale */
  max-width: 1000px; /* Limite massimo di larghezza */
  border: 1px solid rgba(220, 220, 220, 0.4); /* Bordo leggero e semi-trasparente */
  min-height: 40px; /* Altezza minima basata sui bottoni (40px) */
  box-sizing: border-box; /* Assicura che padding e border siano inclusi nella larghezza/altezza */
}

header.scrolled {
  background: rgba(248, 248, 248, 0.9); /* Sfondo leggermente più opaco quando si scrolla */
  backdrop-filter: blur(12px); /* Aumenta leggermente il blur allo scroll */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12); /* Ombra più scura allo scroll */
}

/* New class on body to remove header shadow/blur when menu is open */
body.menu-open header {
  box-shadow: none !important; /* Forza la rimozione dell'ombra */
  backdrop-filter: none !important; /* Forza la rimozione del blur */
  background: #f8f8f8 !important; /* Assicura uno sfondo solido */
  border-radius: 0 !important; /* Rimuovi i bordi arrotondati quando il menu è aperto (copre tutta la larghezza) */
  top: 0 !important; /* Si attacca in alto */
  left: 0 !important;
  transform: none !important; /* Rimuovi la trasformazione */
  width: 100% !important; /* Piena larghezza */
  min-height: auto !important; /* Resetta l'altezza minima in modalità mobile/menu aperto */
}
body.dark-mode.menu-open header {
  background: #1c1c1c !important; /* Sfondo solido per dark mode */
}


.navbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  max-width: 100%;
  gap: 1rem;
}

/* Base style for nav buttons (including the logo now) */
.nav-btn {
  padding: 8px 16px;
  border-radius: 999px;
  background: transparent;
  color: #1a1a1a; /* Default text color */
  text-decoration: none;
  transition: all 0.3s ease;
  border: 1px solid transparent;
  display: inline-block; /* Ensure it behaves like a block for padding/margin */
  font-weight: 600;
  font-size: 1.1rem; /* Dimensione più piccola per le voci di navigazione regolari */
}

.nav-btn:hover {
  background-color: #eaeaea;
  color: #333;
  border-color: #bbb;
}

/* Specific styles for the logo when it's a nav-btn */
.logo {
  margin-right: auto; /* Push the logo to the left */
  font-size: 1.8rem; /* Dimensione più grande per il logo */
}

/* Shiny Effect for Logo */
.logo-shiny {
  position: relative; /* Necessario per posizionare lo pseudoelemento */
  overflow: hidden; /* Nasconde il riflesso quando è fuori dal logo */
  z-index: 1; /* Assicura che l'effetto sia sopra il background del bottone, ma sotto la topbar */
}

.logo-shiny::before {
  content: '';
  position: absolute;
  top: 0;
  left: -75%; /* Inizialmente fuori a sinistra */
  width: 50%; /* Larghezza del riflesso */
  height: 100%;
  background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.6) 50%, rgba(255, 255, 255, 0) 100%);
  transform: skewX(-20deg); /* Inclinazione del riflesso */
  pointer-events: none; /* Assicurati che l'overlay del gradiente non interferisca con il click */
  opacity: 0; /* Inizialmente nascosto */
  transition: opacity 0.01s ease; /* Transizione molto rapida per la comparsa */
}

/* Applica l'animazione solo al passaggio del mouse */
.logo-shiny:hover::before {
  animation: shine 0.4s forwards linear; /* DURATA 0.4s, 'forwards' mantiene lo stato finale */
  opacity: 1; /* Rendi visibile l'effetto quando il mouse è sopra */
}

/* Quando il mouse esce, resetta l'animazione per riavviarla al prossimo hover */
.logo-shiny:not(:hover)::before {
  animation: none; /* Rimuove l'animazione */
  opacity: 0; /* Nasconde l'effetto */
  left: -75%; /* Riporta l'elemento alla posizione iniziale per la prossima riproduzione */
  transform: skewX(-20deg); /* Riporta l'inclinazione iniziale */
}


@keyframes shine {
  0% {
    left: -75%;
  }
  100% {
    left: 100%; /* Scorre fino a uscire a destra */
  }
}


/* Desktop Navigation (senza sottomenu) */
.desktop-nav {
  display: block; /* Always visible on desktop */
}

.desktop-nav ul {
  list-style: none;
  display: flex;
  gap: 1.2rem;
  margin: 0;
  padding: 0;
}


/* Mode Toggle common styles (for sun/moon button) */
.mode-toggle {
  background: transparent;
  border: 1px solid transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  transition: all 0.3s ease; 
  color: #1a1a1a;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  z-index: 1003; /* Assicura che i pulsanti della topbar siano sopra l'overlay */
}

.mode-toggle:hover {
  background-color: #eaeaea;
  border-color: #bbb;
}

.mode-toggle i {
  font-size: 1.2rem;
  display: block;
}

/* Desktop Mode Toggle (visible on desktop) */
.desktop-mode-toggle {
  display: flex; /* Always visible on desktop */
}

/* Mobile specific controls (hidden on desktop) */
.mobile-header-controls {
  display: none; /* Hidden by default for desktop */
}

/* ========================================= */
/* Hamburger Icon Styles */
/* ========================================= */

.hamburger-btn {
  /* Assicurati che questo pulsante abbia la stessa dimensione e sia allineato come gli altri */
  background: transparent;
  border: 1px solid transparent;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  cursor: pointer;
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 0;
  position: relative; /* Per posizionare le linee all'interno */
  z-index: 1004; /* Ancora più alto per assicurarsi che sia sempre cliccabile */
  transition: background-color 0.3s ease, border-color 0.3s ease; /* Transizione per hover */
}

.hamburger-btn:hover {
  background-color: #eaeaea;
  border-color: #bbb;
}

.hamburger-lines {
  width: 20px; /* Larghezza delle linee (come prima) */
  height: 10px; /* Aumentato leggermente per distanziare le linee (era 8px) */
  display: flex;
  flex-direction: column;
  justify-content: center; /* Centra il blocco di linee verticalmente */
  align-items: center;
  position: relative; /* Contenitore per le linee */
}

.line {
  display: block;
  width: 100%;
  height: 2px; /* Spessore delle linee */
  background-color: #1a1a1a; /* Colore delle linee (stesso del testo) */
  border-radius: 1px; /* Bordi leggermente arrotondati */
  transition: transform 0.3s ease-in-out, opacity 0.3s ease-in-out; /* Transizione fluida */
  will-change: transform, opacity; /* Suggerisce al browser di ottimizzare queste proprietà */
  position: absolute; /* Rimuoviamo il flusso normale per posizionare le linee */
  left: 0;
}

/* Posizionamento iniziale delle linee */
.line-1 {
  /* top e bottom ora basati su metà altezza del contenitore - metà altezza della linea */
  top: 0; 
  transform-origin: center; /* Origine di rotazione al centro per simmetria */
}

.line-2 {
  bottom: 0; 
  transform-origin: center; /* Origine di rotazione al centro per simmetria */
}

/* Stato "open" (quando il menu è aperto) */
.hamburger-btn.open .line-1 {
  /* Calcolo del translateY: (altezza contenitore / 2) - (altezza linea / 2) = (10px / 2) - (2px / 2) = 5px - 1px = 4px */
  transform: translateY(4px) rotate(45deg); 
}

.hamburger-btn.open .line-2 {
  /* Calcolo del translateY: (altezza contenitore / 2) - (altezza linea / 2) = (10px / 2) - (2px / 2) = 5px - 1px = 4px */
  transform: translateY(-4px) rotate(-45deg); 
}

/* ========================================= */
/* Fine Hamburger Icon Styles */
/* ========================================= */


/* Mobile Menu Overlay */
.mobile-menu-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh; /* Mantieni l'altezza piena per coprire tutto */
  max-height: 0; /* Inizialmente nascosto */
  background-color: #f8f8f8; /* Sfondo solido per giorno */
  z-index: 1001;
  overflow: hidden; /* Nasconde il contenuto mentre si anima */
  /* Animazione più fluida con max-height e cubic-bezier */
  transition: max-height 0.6s cubic-bezier(0.65, 0, 0.35, 1); /* Curva più fluida */
  display: flex;
  flex-direction: column;
  justify-content: flex-start; /* Allinea il contenuto in alto */
  align-items: center;
  box-shadow: none; /* No shadow */
  backdrop-filter: none; /* No blur */
}

.mobile-menu-overlay.active {
  max-height: 2000px; /* Aumenta a un valore molto grande per gestire contenuti alti */
}

.mobile-nav-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start; /* Allinea il contenuto in alto */
  height: 100%; /* Occupa l'altezza disponibile */
  width: 100%;
  position: relative; /* Contenitore per i link del menu */
  /* Padding top per dare spazio al contenuto sotto la topbar mobile */
  padding-top: calc(1rem + 40px + 1rem); /* Altezza della topbar + button height + extra space */
  box-sizing: border-box; /* Include padding nel calcolo dell'altezza/larghezza */
}

.mobile-nav-content ul {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
  text-align: center;
  width: 100%;
}

.mobile-nav-content .nav-btn {
  font-size: 1.5rem; /* Dimensione dei link nel menu mobile */
  width: auto;
  min-width: 150px;
}


/* Hero Section */
main {
  max-width: 800px;
  margin: 0 auto;
  padding: 2rem 1rem;
}

.hero {
  /* Regola il padding-top dell'hero per spingere il titolo più in basso */
  padding: 180px 0 80px; /* Mantiene il padding-top aumentato per la topbar fluttuante */
  display: flex;
  align-items: flex-start;
  justify-content: flex-start;
  min-height: 60vh;
}

.hero-content {
  max-width: 600px;
}

.hero h1 {
  font-size: 5rem;
  font-weight: 600;
  margin: 0 0 0.5rem;
  color: #000;
}

.hero p {
  font-size: 1.6rem;
  color: #888;
  margin: 0;
}

.content {
  padding-bottom: 100px;
}

h2 {
  margin-top: 3rem;
}

/* Footer */
footer {
  background: #f8f8f8;
  padding: 2rem;
  border-top: 1px solid #ddd;
}

.footer-content {
  max-width: 1000px;
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: flex-end;
  flex-wrap: wrap;
}

.footer-left .logo {
  font-size: 1.2rem; /* Dimensione del logo nel footer */
  font-weight: 600;
  margin-bottom: 0.2rem;
}

.footer-left p {
  margin: 0;
  font-size: 0.9rem;
  color: #666;
}

.footer-right a {
  margin-left: 1rem;
  color: #666;
  font-size: 1.2rem;
  text-decoration: none;
}

/* Dark Mode */
body.dark-mode {
  background-color: #1c1c1c;
  color: #f2f2f2;
}

body.dark-mode header {
  background-color: rgba(28, 28, 28, 0.8); /* Sfondo semi-trasparente in dark mode */
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.3); /* Ombra più scura in dark mode */
  border: 1px solid rgba(50, 50, 50, 0.4); /* Bordo leggero in dark mode */
}

body.dark-mode header.scrolled {
  background-color: rgba(28, 28, 28, 0.9); /* Sfondo più opaco allo scroll in dark mode */
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.4); /* Ombra più scura allo scroll in dark mode */
  border: 1px solid rgba(60, 60, 60, 0.4); /* Bordo leggermente più scuro allo scroll in dark mode */
}

/* Dark mode for generic nav buttons */
body.dark-mode .nav-btn {
  color: #ccc;
}

body.dark-mode .nav-btn:hover {
  background-color: #2e2e2e;
  color: #eee;
  border-color: #888;
}

/* Dark mode for the Logo button effect */
body.dark-mode .logo {
  color: #f2f2f2; /* Colore del testo in dark mode */
}

body.dark-mode .logo-shiny::before {
    background: linear-gradient(to right, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.2) 50%, rgba(255, 255, 255, 0) 100%); /* Riflesso più discreto in dark mode */
}


body.dark-mode .hero h1 {
  color: #fff;
}

body.dark-mode .hero p {
  color: #aaa;
}

body.dark-mode .mode-toggle {
  color: #eee;
  background: transparent;
  border: 1px solid transparent;
}

body.dark-mode .mode-toggle:hover {
  background-color: #2e2e2e;
  border-color: #888;
}

body.dark-mode .mode-toggle i.fa-moon {
  display: block;
}

body:not(.dark-mode) .mode-toggle i.fa-moon {
    display: none;
}

/* Dark Mode for Mobile Menu Overlay */
body.dark-mode .mobile-menu-overlay {
  background-color: #1c1c1c; /* Solid dark background */
}

body.dark-mode .mobile-nav-content .nav-btn {
  color: #f2f2f2;
}

body.dark-mode .mobile-nav-content .nav-btn:hover {
  background-color: #2e2e2e;
  border-color: #888;
}

/* Dark mode for hamburger lines */
body.dark-mode .hamburger-lines .line {
  background-color: #eee; /* Colore delle linee in dark mode */
}


/* Footer in Dark Mode */
body.dark-mode footer {
  background: #1c1c1c;
  border-top: 1px solid #333;
}

body.dark-mode .footer-left p,
body.dark-mode .footer-right a {
  color: #aaa;
}

/* Responsive */
@media (max-width: 768px) {
  /* Header rimane fisso, ma senza l'effetto fluttuante su mobile */
  header {
    top: 0; /* Si attacca in alto */
    left: 0;
    transform: none; /* Rimuovi la trasformazione */
    width: 100%; /* Piena larghezza */
    border-radius: 0; /* Rimuovi i bordi arrotondati */
    padding: 1rem; /* Restore padding for smaller screens */
    box-shadow: 0 1px 5px rgba(0, 0, 0, 0.05); /* Restore default shadow */
    backdrop-filter: blur(0px); /* Remove blur by default */
    background: #f8f8f8; /* Restore solid background */
    border: none; /* Rimuovi il bordo */
  }

  body.dark-mode header {
    box-shadow: 0 1px 7px rgba(0, 0, 0, 0.2);
    border: none;
  }

  header.scrolled {
    background: rgba(248, 248, 248, 0.9);
    backdrop-filter: blur(12px);
    box-shadow: 0 1px 8px rgba(0, 0, 0, 0.1);
  }

  body.dark-mode header.scrolled {
    background-color: rgba(28, 28, 28, 0.9);
    box-shadow: 0 1px 10px rgba(0, 0, 0, 0.3);
  }

  /* Non serve più padding-top sul body per mobile, l'header si attacca in alto */
  body {
    padding-top: 0;
  }

  .navbar {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: nowrap; /* Prevent elements from wrapping */
  }

  .navbar .logo {
    margin-right: auto; /* Push logo to the left */
  }

  /* Hide desktop navigation and desktop mode toggle */
  .desktop-nav {
    display: none;
  }

  .desktop-mode-toggle {
    display: none;
  }

  /* Show mobile controls */
  .mobile-header-controls {
    display: flex; /* Show on mobile */
    gap: 0.5rem; /* Space between buttons */
    align-items: center; /* Align buttons vertically */
    z-index: 1002; /* Superiore all'overlay per rimanere visibili */
  }

  /* Ordine per mobile: darkModeToggleMobile a sinistra dell'hamburger */
  .mobile-header-controls #darkModeToggleMobile {
    order: 1; 
  }

  /* Il menu-toggle-wrapper è stato rimosso, ora #hamburgerToggle è il contenitore */
  .mobile-header-controls .hamburger-btn {
    order: 2; /* Sposta il pulsante hamburger a destra */
  }

  /* Mobile Menu Overlay */
  .mobile-menu-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%; 
  }

  .mobile-nav-content {
    justify-content: flex-start;
    padding-top: calc(1rem + 40px + 1rem); /* Header padding + button height + extra space */
  }
}

/* Specific adjustments for very small screens if needed */
@media (max-width: 480px) {
  .hero h1 {
    font-size: 2rem;
  }
}