/* Reset and Base Styles */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}

body {
    font-family: 'Georgia', 'Playfair Display', serif;
    font-size: 18px;
    color: #F3F5F6;
    line-height: 1.6;
    background: #B7ABA7;
    user-select: none; /* Prevent text selection */
}

/* Allow text selection in form inputs */
#contact-form input, #contact-form textarea {
    user-select: auto; /* Re-enable selection for form inputs */
}

/* Header */
header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px;
    background: #837A7A;
    position: fixed;
    top: 0;
    width: 100%;
    z-index: 1000;
}

.logo img {
    width: 55px;
    height: 55px;
}

nav ul {
    list-style: none;
    display: flex;
    margin: 0;
    padding: 0;
}

nav ul li {
    margin-left: 15px;
}

nav ul li a {
    color: #DDE1E4;
    text-decoration: none;
    font-size: 18px;
    transition: color 0.3s;
}

nav ul li a:hover {
    color: #9A9087;
}

/* Background Slideshow */
.background-slideshow {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: -1;
}

.bg-image {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-size: cover;
    background-position: center;
    opacity: 0;
    transition: opacity 1s ease-in-out;
    will-change: transform;
}

.bg-image.active {
    opacity: 0.20;
    animation: fadeIn 1s ease-in-out forwards;
}

/* Ensure Contacts section background remains fully opaque */
.bg-image[data-section="contacts"].active {
    opacity: 1;
}

/* Parallax Effect */
.bg-image:not([data-section="contacts"]) {
    /* Parallax handled via JavaScript */
}

/* Fade-in Animation for Page Load */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

/* Sections */
.section {
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: 80px 20px;
    position: relative;
    color: #F3F5F6;
}

h1, h2 {
    font-family: 'Playfair Display', serif;
    font-weight: 700;
}

h1 {
    font-size: 48px;
    margin-bottom: 20px;
}

h2 {
    font-size: 36px;
    margin-bottom: 30px;
}

/* Home Section */
.home-content {
    display: flex;
    flex-direction: column; /* Impila verticalmente su mobile */
    justify-content: center;
    align-items: center;
    max-width: 1200px;
    width: 100%;
    min-height: auto; /* Rimuovi min-height fisso, lascia che il contenuto lo definisca */
    padding: 80px 20px; /* Padding generico per la sezione */
    text-align: center; /* Centra il testo per default su mobile */
}

.bg-image[data-section="home"].active {
    opacity: 1;
}

.home-title {
    flex: none; /* Rimuovi flex-basis per mobile */
    text-align: center;
    padding-right: 0;
    padding-bottom: 20px; /* Spazio sotto il titolo */
}

.home-description {
    flex: none; /* Rimuovi flex-basis per mobile */
    padding-left: 0;
    text-align: center;
    padding-top: 0; /* Rimuovi padding-top fisso */
    margin-bottom: 30px; /* Spazio sotto la descrizione */
}

.social-links {
    position: static; /* Rendi statico su mobile per farlo scorrere con il contenuto */
    transform: none;
    margin-top: 50px; /* Aggiungi un po' di margine in alto */
    width: auto; /* Lascia che la larghezza sia automatica */
    padding-bottom: 20px;
}

.social-links a {
    color: #F3F5F6;
    margin: 0 10px;
    text-decoration: none;
    font-size: 18px;
}

.social-links a:hover {
    color: #DDE1E4;
}

/* Music Section */
#music {
    color: #554C4C;
}

#music h4 {
    font-size: 24px; /* Lascia questa dimensione o adeguala */
    color: #554C4C; /* Imposta il colore del testo principale */
    font-weight: bold; /* Rende il testo in grassetto */
    margin-bottom: 15px;
    text-align: center;
    width: 100%;
    padding: 0 10px;
    box-sizing: border-box;
}

#music .music-list { /* Modificato per targettare solo la ul dentro #music */
    list-style: none; /* Rimuovi i pallini della lista */
    padding: 0;
    margin: 0;
    display: flex; /* Rende la lista un flex container */
    flex-direction: column; /* Impila gli elementi verticalmente */
    align-items: center; /* Centra gli elementi nella lista */
    width: 100%;
    max-width: 1200px; /* Aggiungi un max-width per controllare l'ampiezza delle descrizioni */
    margin: 0 auto; /* Centra la lista orizzontalmente */
}

.music-item {
    display: flex;
    flex-direction: column; /* Stacca l'embed dalla descrizione in una colonna */
    align-items: center; /* Centra orizzontalmente l'embed e la descrizione */
    margin-bottom: 40px;
    width: 100%; /* Occupa tutta la larghezza disponibile */
    padding: 0 15px; /* Aggiungi padding ai lati per non far incollare il contenuto ai bordi */
    text-align: center; /* Centra il testo all'interno dell'item */
}

.music-embed {
    width: 100%; /* L'iframe occupa il 100% della larghezza del music-item */
    max-width: 600px; /* Opzionale: limita la larghezza massima dell'iframe */
    margin-bottom: 20px; /* Spazio sotto l'iframe */
}

.music-embed iframe {
    width: 100%;
    height: 166px; /* Mantieni l'altezza standard di SoundCloud */
    border: none;
    display: block;
}

.music-description {
    width: 100%; /* Occupa il 100% della larghezza del music-item */
    text-align: justify; /* Giustifica il testo per una migliore leggibilità */
    padding: 0; /* Rimuovi padding non necessari qui */
    font-size: 16px; /* Riduci la dimensione del font per mobile se necessario */
    line-height: 1.5;
}

.music-description p {
    margin-top: 0; /* Rimuovi margin-top se la descrizione è l'unica cosa */
}


/* Scores Section */
.scores-grid {
    display: grid;
    /* Usa repeat(auto-fit, minmax(180px, 1fr)) per schermi più piccoli, così da avere 2 o più colonne */
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); /* Riduci minmax per mobile */
    gap: 20px;
    max-width: 1200px;
    width: 100%;
    padding: 0 15px; /* Aggiungi padding ai lati */
    margin-top: 20px; /* Aggiungi un po' di spazio dal titolo */
}

.score-item {
    text-align: center; /* Centra il contenuto (immagine e testo) */
    display: flex; /* Rendi l'item un flex container */
    flex-direction: column; /* Impila immagine e testo verticalmente */
    align-items: center; /* Centra gli elementi all'interno dell'item */
}

.score-item img {
    width: 100%; /* L'immagine occupa il 100% della larghezza dell'item */
    height: auto; /* Mantieni le proporzioni */
    max-width: 300px; /* Limita la larghezza massima dell'immagine */
    object-fit: contain; /* Assicurati che l'immagine sia contenuta senza tagli */
    margin-bottom: 10px; /* Spazio sotto l'immagine */
}

.score-item a {
    text-decoration: none;
    color: #F3F5F6;
    display: flex; /* Rendi il link un flex container per impilare i paragrafi */
    flex-direction: column;
    align-items: center; /* Centra il testo all'interno del link */
    width: 100%;
}

.score-item p {
    margin-top: 5px; /* Riduci il margine per le descrizioni */
    font-size: 14px; /* Riduci la dimensione del font per il testo descrittivo */
    line-height: 1.3;
    word-wrap: break-word; /* Forza il testo ad andare a capo se troppo lungo */
    hyphens: auto; /* Abilita la sillabazione automatica (potrebbe non funzionare su tutti i browser) */
    text-align: center; /* Centra il testo del paragrafo */
}

/* About Section */
.about-content {
    display: flex;
    flex-direction: column; /* Impila verticalmente su mobile */
    align-items: center; /* Centra gli elementi */
    max-width: 1200px;
    width: 100%;
    min-height: auto; /* Rimuovi min-height fisso per il responsive */
    padding: 20px; /* Aggiungi padding ai lati */
}

.about-image {
    width: 100%; /* L'immagine occupa il 100% della larghezza disponibile */
    max-width: 300px; /* Limita la larghezza massima dell'immagine */
    height: auto; /* Mantieni le proporzioni */
    margin-bottom: 30px; /* Spazio sotto l'immagine */
    margin-right: 0; /* Rimuovi margine destro */
}

.about-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
    aspect-ratio: 1/1; /* Mantiene l'immagine quadrata */
}

.about-text {
    width: 100%; /* Occupa il 100% della larghezza */
    padding-left: 0; /* Rimuovi padding-left */
    text-align: justify; /* Giustifica il testo per migliore leggibilità */
    font-size: 16px; /* Riduci la dimensione del font se necessario */
    line-height: 1.6;
}

/* Contacts Section */
#contacts {
    background: #B7ABA7;
}

#contact-form {
    max-width: 600px;
    width: 100%;
    display: flex;
    flex-direction: column;
}

#contacts input[type="text"],
#contacts input[type="email"],
#contacts textarea {
    color: #F3F5F6; /* Imposta il colore del testo digitato su bianco */
    background-color: transparent; /* Rende lo sfondo del campo trasparente (opzionale, ma comune) */
    border: 1px solid #777; /* Rendi il bordo visibile, magari un grigio più scuro */
    padding: 10px;
    margin-bottom: 15px;
    width: calc(100% - 20px); /* Regola la larghezza tenendo conto del padding */
    box-sizing: border-box; /* Include padding e bordo nel calcolo della larghezza */
    border-radius: 5px; /* Angoli leggermente arrotondati */
    font-family: 'Georgia', serif; /* Assicurati che il font sia lo stesso del resto del testo */
    font-size: 1em;
}

/* Stile per il placeholder (il testo suggerito all'interno del campo prima che l'utente scriva) */
#contacts input::placeholder,
#contacts textarea::placeholder {
    color: rgba(243, 245, 246, 0.7); /* Un bianco leggermente più trasparente per il placeholder */
}

/* Stile per il focus (quando il campo è selezionato) */
#contacts input[type="text"]:focus,
#contacts input[type="email"]:focus,
#contacts textarea:focus {
    border-color: #FF7700; /* Colore arancione del tuo tema quando il campo è attivo */
    outline: none; /* Rimuove il contorno predefinito del browser */
}

/* Stile per il paragrafo di promozione del servizio */
.service-promo {
    font-size: 1.1em; /* Leggermente più grande del testo normale */
    line-height: 1.6;
    margin-bottom: 30px; /* Spazio sotto il testo e prima del form */
    text-align: center; /* Centra il testo */
    max-width: 700px; /* Limita la larghezza per una migliore leggibilità */
    margin-left: auto;
    margin-right: auto; /* Centra il blocco di testo */
    color: #F3F5F6; /* Colore del testo principale, assicurati che sia visibile sul background */
}

.service-promo strong {
    color: #FF7700; /* Puoi usare un colore più brillante per l'enfasi, se lo desideri */
    font-weight: bold;
}

#contact-form label {
    margin-top: 10px;
}

#contact-form input, #contact-form textarea {
    padding: 10px;
    margin-top: 5px;
    border: 1px solid #89807E;
    background: #9A9087;
    color: #7F7271;
    font-size: 18px;
}

#contact-form textarea {
    resize: vertical;
    min-height: 100px;
}

#contact-form button {
    margin-top: 20px;
    padding: 10px;
    background: #837A7A;
    color: #B7ABA7;
    border: none;
    cursor: pointer;
    font-size: 18px;
}

#contact-form button:hover {
    background: #7F7271;
}

/* Responsive Design */
@media (max-width: 768px) {
    header {
        flex-direction: row; /* Mantieni la riga per header */
        padding: 10px;
    }

    nav ul {
        display: flex;
        flex-wrap: nowrap;
        justify-content: center;
    }

    nav ul li {
        margin: 0 5px;
    }

    nav ul li a {
        font-size: 14px;
    }

    /* Home Section - Mobile Specific */
    .home-content {
        padding-top: 50px; /* Regola il padding superiore per lasciare spazio all'header fisso */
    }

    .home-title {
        padding-bottom: 0;
        margin-bottom: 10px;
    }

    .home-description {
        padding-top: 0;
        padding-left: 0;
        text-align: center;
        margin-bottom: 20px;
    }

    .social-links {
        position: static;
        transform: none;
        margin-top: 140px; /* Spazio aggiuntivo per i link social */
    }

    /* Music Section - Mobile Specific */
    .music-item {
        margin-bottom: 30px; /* Riduci lo spazio tra gli elementi su mobile */
    }

    #music h4 {
        font-size: 18px;
        margin-bottom: 10px;
    }

    .music-embed iframe {
        height: 120px; /* Puoi ridurre l'altezza su mobile se lo desideri */
    }

    .music-description {
        padding: 0 10px; /* Aggiungi padding laterale per il testo */
    }
    
    /* Scores Section - Mobile Specific */
    .scores-grid {
        grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); /* Potresti voler 2 colonne piccole */
        gap: 15px;
        padding: 0 10px;
    }
    .score-item img {
        max-width: 150px; /* Riduci la larghezza massima delle immagini su mobile */
    }
    .score-item p {
        font-size: 12px; /* Riduci ulteriormente il font per le descrizioni */
    }

    /* About Section - Mobile Specific */
    .about-content {
        padding: 20px 15px; /* Aggiusta il padding per i bordi su mobile */
    }

    .about-image {
        margin-bottom: 20px;
    }

    .about-text {
        padding: 0 10px; /* Aggiungi padding laterale per il testo */
    }

    .section {
        padding: 60px 20px; /* Regola il padding generale delle sezioni su mobile */
        min-height: auto; /* Lascia che l'altezza sia definita dal contenuto */
        margin-bottom: 40px; /* Spazio tra le sezioni */
    }

    .service-promo {
        font-size: 1em;
        margin-bottom: 20px;
        padding: 0 15px; /* Aggiungi un po' di padding sui lati per mobile */
    } 
}

/* Desktop Specific Styles (min-width media queries) */
@media (min-width: 769px) {
    /* Home Section - Desktop Specific */
    .home-content {
        flex-direction: row; /* Torna a layout orizzontale su desktop */
        min-height: 600px; /* Ripristina min-height su desktop */
    }

    .home-title {
        flex: 0 0 50%;
        text-align: left;
        padding-right: 20px;
        padding-bottom: 200px; /* Ripristina padding originale */
    }

    .home-description {
        flex: 0 0 50%;
        text-align: left;
        padding-left: 40px;
        padding-top: 180px; /* Ripristina padding originale */
    }

    .social-links {
        position: absolute; /* Ripristina posizione assoluta */
        bottom: 50px;
        left: 50%;
        transform: translateX(-50%);
        width: 100%;
        max-width: 1200px;
        margin-top: 0;
    }

    /* About Section - Desktop Specific */
    .about-content {
        flex-direction: row; /* Torna a layout orizzontale su desktop */
        min-height: 300px; /* Ripristina min-height su desktop */
    }

    .about-image {
        flex: 0 0 auto;
        width: 300px;
        height: 300px;
        margin-right: 100px; /* Ripristina margine destro */
        margin-bottom: 0;
    }

    .about-text {
        flex: 0 0 50%;
        padding-left: 40px; /* Ripristina padding-left */
        text-align: left;
    }
}