body {
  font-family: 'Inter', sans-serif;
  margin: 0;
  padding: 0;
  background-color: #494949;
  color: #fff;
  line-height: 1.6;
  padding-bottom: 70px;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 20px;
}

.header {
  background-color: #494949;
  padding: 20px 0;
  text-align: center;
  border-bottom: 1px solid #333;
}

.header__title {
  font-size: 2.5rem;
  font-weight: 700;
  color: #ff7926;
  margin-bottom: 0;
}

.section {
  padding: 60px 0;
  border-bottom: 0px solid #333;
}

.section:last-child {
  border-bottom: none;
}

.section__title {
  font-size: 2rem;
  font-weight: 600;
  color: #ff7926;
  margin-bottom: 20px;
  text-align: center;
  /* Helps center the icon vertically if needed */
  line-height: 1;
}

.section__paragraph {
  font-size: 1rem;
  color: #eee;
  text-align: justify;
}

.view-buttons {
  display: flex;
  justify-content: center;
  margin-bottom: 30px;
}

.view-button {
  background-color: #ff7926;
  color: #fff;
  padding: 12px 25px;
  border: none;
  border-radius: 5px;
  cursor: pointer;
  font-size: 1.1rem;
  transition: background-color 0.3s ease;
  margin: 0 15px;
  font-weight: 600;
}

.view-button:hover {
  background-color: #cc5200;
}

.albums-view {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.album {
  background-color: #1f1f1f;
  padding: 15px;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  cursor: pointer;
  transition: transform 0.2s ease;
  margin-bottom: 20px;
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  text-align: left;
  position: relative;
}

.album:hover {
  /* transform: scale(1.04); */ /* Remove or comment out this line */
}

.album-cover {
  width: 300px;
  height: auto;
  border-radius: 5px;
  margin-right: 15px;
  display: block;
  flex-shrink: 0;
  cursor: pointer;
  filter: grayscale(1); /* Start as grayscale */
  transition: filter 0.4s ease; /* Smooth transition for the filter */
}

.album:hover .album-cover,
.album.active .album-cover {
  filter: grayscale(0); /* Back to full color on hover OR when active */
}

.album:hover {
  /* transform: scale(1.04); */ /* Remove or comment out this line */
}

.album-details {
  display: flex;
  flex-direction: column;
  flex-grow: 1;
}

.album-info {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
  flex-grow: 1;
  cursor: pointer;
  padding-bottom: 5px;
}

.album-info-text {
  display: flex;
  flex-direction: column;
  justify-content: center;
}

.album-title {
  font-size: 1.2rem;
  color: #ff7926;
  font-weight: 600;
  margin-bottom: 5px;
}

.album-year {
  font-size: 1rem;
  color: #ddd;
}

.album-credits {
  margin-top: 15px;
  padding-top: 10px;
  border-top: 1px solid #333;
  font-size: 0.9rem;
  color: #ccc;
  cursor: default;
}

.album-credits h4 {
  margin-top: 0;
  margin-bottom: 8px;
  color: #ff7926;
  font-size: 1rem;
  font-weight: 600;
}

.album-credits p {
  margin: 0;
  white-space: pre-line;
  line-height: 1.5;
}

.songs {
  margin-top: 0;
  width: calc(100% - 30px);
  margin-left: 15px;
  margin-right: 15px;
  border-top-left-radius: 0;
  border-top-right-radius: 0;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  z-index: 10;
  box-sizing: border-box;
  border-top: 1px solid #333;
}

.album.active .songs {
  display: block;
}

.song {
  padding: 12px;
  border-bottom: 1px solid #333;
  font-size: 1.1rem;
  color: #eee;
  justify-content: space-between;
  align-items: center;
  cursor: pointer;
  transition: background-color 0.3s ease;
}

.song:last-child {
  border-bottom: none;
}

.song:hover {
  background-color: #2a2a2a;
}

.song-title-container {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 1px;
  transition: background-color 0.3s ease;
}

.song-title-container:hover {
  background-color: #2a2a2a;
}

.song-title-text {
  flex-grow: 1;
  margin-right: 10px;
}

.song-icons {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.audio-icon {
  width: 20px;
  height: auto;
  display: block;
}

.spotify-link {
  line-height: 0;
}

.expand-lyrics-btn {
  background: none;
  border: none;
  padding: 5px;
  margin: 0;
  color: #ff7926;
  cursor: pointer;
  line-height: 0;
  transition: transform 0.3s ease;
}

.expand-lyrics-btn:hover {
  color: #cc5200;
}

.expand-lyrics-btn .arrow-icon {
  width: 30px;
  height: 30px;
  fill: currentColor;
  display: block;
  transition: transform 0.3s ease;
}

.lyrics {
  margin-top: 0;
  padding: 20px;
  background-color: #1f1f1f;
  border-radius: 10px;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
  display: none;
  width: 100%;
  box-sizing: border-box;
  border-top: 1px solid #333;
}

.lyrics-container {
  display: flex;
  justify-content: space-between;
  gap: 40px;
  flex-wrap: wrap;
}

.lyrics-container div {
  flex: 1;
  min-width: 300px;
  box-sizing: border-box;
}

.meaning {
  display: block;
  color: #ff7926;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  margin-bottom: 15px;
  padding-left: 15px;
  padding-right: 15px;
  line-height: 1.5;
  white-space: pre-line;
}

.original-text {
  font-size: 1.1rem;
  color: #eee;
  line-height: 1.7;
  white-space: pre-line;
  box-sizing: border-box;
}

.translation {
  font-size: 1.1rem;
  color: #ff7926;
  font-style: italic;
  line-height: 1.7;
  white-space: pre-line;
  box-sizing: border-box;
}

footer {
  background-color: #1f1f1f;
  padding: 25px 0;
  text-align: center;
  border-top: 1px solid #333;
  margin-top: 60px;
}

.footer__link {
  color: #ff7926;
  text-decoration: none;
  font-size: 1.1rem;
  font-weight: 600;
  transition: color 0.3s ease;
  display: inline-flex;
  align-items: center;
}

.footer__link:hover {
  color: #cc5200;
}

.footer__icon {
  width: 24px;
  height: auto;
  margin-right: 8px;
}

/* Stili per il nuovo Header Hero */
.hero-header {
  position: relative;
  width: 100%;
  height: 100vh;
  background-image: url('./img/header-background.jpg');
  background-size: cover;
  background-position: center center;
  background-repeat: no-repeat;
  overflow: hidden;
}

.social-icons {
  position: absolute;
  top: 20px;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  gap: 20px;
  z-index: 10;
}

.social-icon {
  width: 4em;
  height: auto;
  opacity: 0.8;
  transition: opacity 0.3s ease;
}

.social-icon:hover {
  opacity: 1;
}

/* Definisci l'animazione per il fade-in */
@keyframes fadeInLogo {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}

.hero-logo {
  position: absolute;
  bottom: 15px;
  left: 0;
  width: 100%;
  max-height: 300px;
  padding: 0 30px;
  box-sizing: border-box;
  object-fit: contain;
  z-index: 5;
  top: 50%;
  opacity: 0;
  animation-name: fadeInLogo;
  animation-duration: 0.5s;
  animation-timing-function: linear-in;
  animation-delay: 0.1s;
  animation-fill-mode: forwards;
}

/* Rimuovi o modifica gli stili del vecchio header se presenti */
/* Esempio:
.header {
   display: none; // O rimuovi completamente la regola
}
.header__title {
   display: none; // O rimuovi completamente la regola
}
*/

/* Aggiungi questo se non è già presente per un migliore controllo del layout */
* {
  box-sizing: border-box;
}
@media (max-width: 768px) {
  .container {
    padding: 15px;
  }

  .header__title {
    font-size: 2rem;
  }

  .section__title {
    font-size: 1.75rem;
    margin-bottom: 15px;
  }

  .section__paragraph {
    font-size: 1rem;
    text-align: left;
  }

  .view-buttons {
    flex-direction: column;
    align-items: stretch;
  }

  .view-button {
    margin: 10px 0;
    width: 100%;
  }

  .albums-view {
    flex-direction: column;
    align-items: center;
  }

  .album {
    width: 90%;
    margin-bottom: 20px;
    flex-direction: column;
    text-align: center;
    align-items: center;
  }

  .album-cover {
    width: 100%;
    margin-right: 0;
    margin-bottom: 15px;
  }

  .album-details {
    width: 100%;
    align-items: center;
  }

  .songs {
    width: 100%;
    margin-left: 0;
    margin-right: 0;
    border-radius: 0;
  }

  .lyrics-container {
    flex-direction: column;
  }

  .lyrics-container div {
    min-width: 100%;
  }

  .footer__link {
    font-size: 1rem;
  }

  .social-icons {
    gap: 50px;
    top: 15px;
  }

  .social-icon {
    width: 2.5em;
  }

  .hero-logo {
    bottom: auto;
    left: auto;
    position: absolute;
    transform: translate(-50%, -50%);
    top: 50%;
    left: 50%;
    width: 85%;
    padding: 0;
    max-height: 70vh;
    object-fit: contain;
    box-sizing: border-box;
    z-index: 5;
    opacity: 0;
    animation-name: fadeInLogo;
    animation-duration: 0.5s;
    animation-timing-function: ease-in;
    animation-delay: 0.1s;
    animation-fill-mode: forwards;
  }

  body {
    padding-bottom: 65px;
  }

  .meaning {
    padding-left: 0;
    padding-right: 0;
    margin-bottom: 10px;
  }

  #random-phrase-display {
    font-size: 1.3rem;
  }

  .album-credits {
    font-size: 0.85rem;
    text-align: center;
    width: 90%;
    margin-left: auto;
    margin-right: auto;
  }

  .album-credits h4 {
    font-size: 0.95rem;
  }

  .song-title-container {
    padding: 1px;
  }

  .song-icons {
    gap: 8px;
  }

  .expand-lyrics-btn .arrow-icon {
    width: 16px;
    height: 16px;
  }

  .lyrics {
    border-radius: 0;
  }

  .album-info {
    padding-bottom: 8px;
    flex-direction: column;
    align-items: center;
    gap: 10px;
    width: 100%;
  }

  .album-info-text {
    text-align: center;
  }

  .expand-lyrics-btn .arrow-icon {
    width: 18px;
    height: 18px;
  }

  .expand-album-btn {
    font-size: 0.8rem;
    padding: 3px 8px;
    min-width: 50px;
  }

  .album:hover {
    transform: none; /* Ensure no scaling on mobile hover if removed above */
  }
}

/* Stili per la Navigazione Inferiore Fissa */
.bottom-nav {
  position: fixed;
  bottom: 0;
  left: 50%;
  width: 50%;
  background-color: transparent;
  transform: translateX(-50%);
  border-top: none;
  box-shadow: none;
  display: flex;
  justify-content: space-around;
  align-items: center;
  padding: 15px 0;
  z-index: 1000;
}

.bottom-nav__link {
  color: #ff7926;
  text-decoration: none;
  font-size: 1.5rem;
  font-weight: 600;
  text-align: center;
  padding: 5px 10px;
  transition: color 0.3s ease, transform 0.2s ease;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7);
}

.bottom-nav__link:hover,
.bottom-nav__link:focus {
  color: #ff7926;
  transform: scale(1.1);
  text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.9);
}

/* Stili opzionali per le icone (se le aggiungi) */
/*
.bottom-nav__icon {
  width: 24px;
  height: 24px;
  object-fit: contain;
}
*/

/* Stili per il pulsante Scroll Down */
.scroll-down-btn {
  display: inline-block;
  color: #ff7926;
  background-color: rgba(231, 120, 18, 0.3);
  padding: 8px;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease, color 0.3s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.scroll-down-btn svg {
  display: block;
  width: 3em;
  height: 3em;
  fill: currentColor;
}

.scroll-down-btn:hover,
.scroll-down-btn:focus {
  background-color: rgba(204, 82, 0, 0.8);
  transform: scale(1.1);
  color: #000000;
}

/* Stili per Layout Bio */
.bio-content {
  display: flex;
  align-items: flex-start;
  gap: 30px;
}

.bio-image {
  width: 40%;
  max-width: 450px;
  height: auto;
  border-radius: 8px;
  flex-shrink: 0;
}

.bio-text-content {
  flex: 1;
}

/* Sovrascrivi lo stile generale del titolo se necessario per la bio */
.bio-title {
  text-align: left;
  margin-top: 0;
  margin-bottom: 15px;
}

.bio-text-content .section__paragraph {
  text-align: justify;
}

@media (max-width: 768px) {
  /* ... altre regole mobile ... */

  /* Layout Bio su Mobile */
  .bio-content {
    flex-direction: column;
    align-items: center;
    gap: 20px;
  }

  .bio-image {
    width: 80%;
    max-width: 400px;
    margin-bottom: 10px;
  }

  .bio-text-content {
     width: 100%;
     display: flex;
     flex-direction: column;
     align-items: center;
  }

  .bio-title {
    text-align: center;
  }

  .bio-text-content .section__paragraph {
    text-align: left;
  }

  /* ... altre regole mobile ... */
}

/* Stili per la Sezione Frase Casuale */
.random-phrase-section {
  /* Rimuovi le proprietà background */
  /* background-image: url('./img/cit.png'); */
  /* background-size: contain; */
  /* background-position: center center; */
  /* background-repeat: no-repeat; */
  border-radius: 10px; /* Mantieni se vuoi l'arrotondamento sulla sezione */
  padding-top: 30px;
  padding-bottom: 40px;
  text-align: center;
  position: relative; /* Necessario se usi pseudo-elementi, altrimenti opzionale */
  /* z-index: 0; */ /* Probabilmente non più necessario */
  /* Considera un background solido se vuoi separarla visivamente */
  /* background-color: #1f1f1f; */ /* << Rimosso */
}

/* Rimuovi l'overlay scuro se presente */
/* .random-phrase-section::before { ... } */

/* ... */

.phrase-box {
  margin-bottom: 25px;
  min-height: 150px; /* May need adjustment depending on final padding */
  display: flex;
  justify-content: center;
  align-items: center;
  /* Aggiungi padding per distanziare il testo dalle immagini */
  /* Increase top/bottom padding */
  padding: 100px 60px; /* Increased vertical padding from 40px to 70px */
  box-sizing: border-box;
  position: relative; /* Fondamentale per posizionare le immagini figlie */
}

/* Stile base per le immagini decorative */
.phrase-decoration {
    position: absolute;
    width: 50%; /* Imposta una larghezza, aggiusta secondo necessità */
    height: auto;
    opacity: 0.7; /* Opzionale: rendile meno invadenti */
}

/* Posiziona l'immagine in alto a destra */
.phrase-decoration-top {
    top: 0px; /* Distanza dal bordo superiore del box */
    right: 25%; /* Distanza dal bordo destro del box */
}

/* Posiziona l'immagine in basso a sinistra */
.phrase-decoration-bottom {
    bottom: 0px; /* Distanza dal bordo inferiore del box */
    left: 25%; /* Distanza dal bordo sinistro del box */
}


#random-phrase-display {
  font-size: 1.6rem;
  color: #ff7926;
  margin: 0;
  line-height: 1.7;
  font-family: "Times New Roman", Times, serif;
  font-style: italic;
  text-align: center;
  position: relative; /* Per assicurare che sia sopra le immagini se si sovrappongono */
  z-index: 1;
}

/* ... */

@media (max-width: 768px) {
  /* ... */

  .random-phrase-section {
     padding: 25px 15px;
     /* background-size: contain; */ /* Rimosso */
     /* background-position: center center; */ /* Rimosso */
  }

  .phrase-box {
      /* Increase top/bottom padding on mobile as well */
      padding: 50px 40px; /* Increased vertical padding from 30px to 50px */
      min-height: 250px; /* Adjusted slightly if needed */
      position: relative; /* Keep relative positioning */
  }

  .phrase-decoration {
       width: 80%; /* Riduci dimensione immagine su mobile */
  }

   .phrase-decoration-top {
       top: 10px; /* Slightly increased distance from edge */
       right: 10%; /* Slightly increased distance from edge */
   }
   .phrase-decoration-bottom {
       bottom: 10px; /* Slightly increased distance from edge */
       left: 10%; /* Slightly increased distance from edge */
   }

  #random-phrase-display {
      font-size: 1.4rem; /* Leggermente più piccolo su mobile */
  }

  /* ... */
}

/* ... */

/* Stili per il Pulsante Refresh Frase */
.refresh-phrase-btn {
  display: inline-block;
  margin-top: 15px;
  padding: 10px;
  background-color: #ff7926;
  color: #ffffff;
  border-radius: 50%;
  line-height: 0;
  cursor: pointer;
  transition: background-color 0.3s ease, transform 0.2s ease;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.4);
}

.refresh-phrase-btn svg {
  display: block;
  width: 24px;
  height: 24px;
  fill: currentColor;
}

.refresh-phrase-btn:hover,
.refresh-phrase-btn:focus {
  background-color: #cc5200;
  transform: scale(1.1) rotate(90deg);
  color: #fff;
}

/* ... */

/* Stile per il bottone "Testi" dell'album */
.expand-album-btn {
    background: none;
    border: 1px solid #ff7926; /* Aggiungi bordo per visibilità */
    border-radius: 4px; /* Arrotonda angoli */
    padding: 4px 10px; /* Padding per testo */
    margin: 0;
    color: #ff7926; /* Colore testo */
    cursor: pointer;
    /* line-height: 0; */ /* Rimuovi se presente */
    transition: background-color 0.3s ease, color 0.3s ease; /* Transizione per hover */
    flex-shrink: 0;
    font-size: 0.9rem; /* Dimensione testo */
    font-weight: 600; /* Grassetto */
    text-transform: uppercase; /* Maiuscolo */
    min-width: 60px; /* Larghezza minima per coerenza */
    text-align: center;
}

.expand-album-btn:hover,
.expand-album-btn.expanded { /* Applica stile hover anche quando espanso */
    background-color: #ff7926; /* Sfondo arancione su hover/expanded */
    color: #1f1f1f; /* Testo scuro su sfondo arancione */
}

/* Rimuovi la regola per l'icona freccia dentro il bottone album */
/*
.expand-album-btn .arrow-icon {
    width: 20px;
    height: 20px;
    fill: currentColor;
    display: block;
    transition: transform 0.3s ease;
}
*/

@media (max-width: 768px) {
    /* ... */
    .expand-album-btn {
        font-size: 0.8rem; /* Testo più piccolo su mobile */
        padding: 3px 8px;
        min-width: 50px;
     }

     /* Rimuovi regola per icona anche qui se presente */
     /*
     .expand-album-btn .arrow-icon {
        width: 18px;
        height: 18px;
     }
     */
    /* ... */
}

/* ... */