/* Stile base per il corpo */
body {
    margin: 0;
    padding: 0;
    font-family: 'Mulish', sans-serif;
    background-color: #6B896D;
}

/* Selettore per la classe 'paragrafo-grande' */
.big-p p {
    font-size: 1.2em;
    color: white;
    padding: 0 20px;
    margin-top: 30px; 
    margin-bottom: 15px;
}
/* -------------------- NAVBAR STYLES (90px) -------------------- */

.navbar {
    /* Colore di sfondo: #6B896D */
    background-color: #6B896D; 
    
    /* Altezza fissa */
    height: 90px; 
    position: fixed; 
    top: 0;
    left: 0;
    width: 100%;
    
    /* Disposizione: Logo 1 a sinistra, Gruppo (2 e 3) a destra */
    display: flex;
    justify-content: space-between; 
    align-items: center;    
    
    padding: 0; 
    z-index: 1000; 
}

/* -------------------- GESTIONE DEI LOGHI -------------------- */

.logo-item {
    display: flex;
    align-items: center;
}

/* Padding a sinistra per Logo 1 */
.navbar > .logo-item {
    padding-left: 10px; 
}

/* Contenitore per raggruppare Logo 2 e Logo 3 */
.logo-group-right {
    display: flex; 
    align-items: center;
    gap: 5px; 
    
    /* Padding a destra per il gruppo */
    padding-right: 10px; 
}

/* -------------------- CONTROLLO DIMENSIONI IMMAGINI LOGO -------------------- */

.logo-img {
    /* Limita l'altezza massima per stare nella navbar di 90px */
    max-height: 60px; 
    
    /* Limita la larghezza massima per prevenire sforamento orizzontale */
    max-width: 40vw; 
    
    height: auto; 
    width: auto;     
    display: block;
}

/* -------------------- STILE PER TESTO SOPRA IMMAGINE -------------------- */

/* Rende il contenitore un punto di riferimento per gli elementi assoluti */
.hero-container {
    position: relative; 
    /* L'altezza deve essere la stessa dell'immagine (110px) */
    height: 300px; 
    width: 100%;
    margin: 0;
}

/* Posiziona il testo in modo assoluto sopra l'immagine */
.hero-text {
    position: absolute;
    top: 50%; /* Sposta il testo del 50% dall'alto */
    left: 20px; /* Inizia il testo 20px dal bordo sinistro */
    transform: translateY(-50%); /* Centra perfettamente il testo verticalmente */
    
    left: 10px;
    right: 10px;
   
    /* Stili visivi per il testo */
    color: white; /* Rendi il testo visibile */
    text-shadow: 1px 1px 3px rgba(0, 0, 0, 0.7); /* Ombra per migliorare la leggibilità */
    z-index: 2; /* Assicura che il testo sia sopra l'immagine */
}

.hero-text p {
    /* Aumenta la dimensione del font */
    font-size: 1.5em; /* Puoi usare 1.1em, 1.5em, ecc. a seconda di quanto grande lo vuoi */
    /* Opzionale: Aggiunge un po' di margine sotto per separarlo dal titolo */
    margin-top: 10px;
}

/* Regola l'immagine all'interno del nuovo contenitore */
.hero-image {
    width: 100%; 
    height: 100%; /* Usa 100% dell'altezza del .hero-container (che è 110px) */
    object-fit: cover; 
    display: block; 
}

/* -------------------- SOLUZIONE PROBLEMA TESTO COPERTO -------------------- */

/* Crea una classe per aggiungere spazio sopra il contenuto principale */
.main-content-padding {
    /* NUOVO VALORE: Altezza NavBar (90px) + Altezza Immagine (110px) = 200px */
    padding-top: 90px;
}

/* -------------------- STILE ELENCO TRACCE -------------------- */

/* Opzionale: Rimuove l'eccessivo margine superiore predefinito dell'elenco, se presente. */
ul {
    margin-top: 15px;
    margin-left: 20px;
}

/* Regola per gli elementi della lista (interlinea) */
ul li {
    margin-bottom: 10px; /* Spazio tra le tracce */
    padding-left: 10px;
}

/* Opzionale: Migliora lo stile del link stesso */
.traccia {
    /* Imposta il colore del testo su BIANCO */
    color: white; 
    
    /* Rimuove la sottolineatura di default */
    text-decoration: none; 
    
    /* Assicura che l'interlinea funzioni bene */
    display: inline-block; 
    padding: 5px 0; 
}

/* Opzionale: Effetto hover per i link delle tracce */
.traccia:hover {
    color: black; /* Cambia colore al passaggio del mouse */
    text-decoration: underline;
}

main h3 {
    /* Imposta il colore del testo su BIANCO */
    color: white; 
    
    /* Aggiunge spazio dai bordi sinistro e destro dello schermo */
    padding: 0 20px; 
    
    /* Rimuove o regola il margine superiore predefinito per un miglior stacco */
    margin-top: 30px; 
}

main h2 {
    /* Imposta il colore del testo su BIANCO */
    color: white; 
    
    /* Aggiunge spazio dai bordi sinistro e destro dello schermo */
    padding: 0 20px; 
    
    /* Rimuove o regola il margine superiore predefinito per un miglior stacco */
    margin-top: 30px; 
}

/* -------------------- STILE PAGINA RIPRODUCI.PHP (Centraggio) -------------------- */

/* Regola generica per centrare gli elementi che contengono testo/link */
.centered-element {
    text-align: center;
    margin: 10px auto; /* Centra orizzontalmente gli elementi a blocco (come H3, H2, P) */
    width: 100%; /* Assicura che l'elemento occupi tutta la larghezza per centrare il testo */
    max-width: 600px; /* Limita la larghezza massima per una migliore leggibilità */
}

.centered-element a {
    color: white; 
    text-decoration: none; /* Rimuove la sottolineatura di default */
}

/* Definisce l'effetto hover (al passaggio del mouse) per quel link, se desiderato */
.centered-element a:hover {
    color: black; /* Cambia a nero quando selezionato */
    text-decoration: underline;
}

/* Stile specifico per il lettore audio */
.audio-wrapper {
    /* Il lettore audio è un elemento a blocco, usa i margini per centrarlo */
    margin: 30px auto;

    /* Assicura che l'audio non sia troppo largo sui desktop */
    max-width: 500px;
    
    /* Impedisce che il contenuto interno tocchi i bordi stretti su mobile */
    padding: 0 10px; 
    
    /* Il contenitore deve occupare l'intera larghezza disponibile */
    width: 100%; 
}

/* Stile per l'elemento audio effettivo */
.audio-wrapper audio {
    display: block;
    width: 100%;
    
    /* Forziamo il box-sizing che aiuta a includere i controlli nella larghezza 100% */
    box-sizing: border-box; 
    
    /* Questa è cruciale: elimina qualsiasi larghezza minima predefinita del browser */
    min-width: 0; 
}