/* =================================
   TEMA CSS: FORESTA D'AUTUNNO
   =================================
*/

/* Variabili dei colori per una facile modifica */
:root {
    --colore-sfondo: #F5F5DC;          /* Beige/Crema, come la luce del sole autunnale */
    --colore-testo-principale: #4B3F38; /* Marrone scuro, come la terra umida */
    --colore-banner: #0A361E;           /* Verde foresta molto scuro */
    --colore-testo-banner: #EAE7DC;     /* Un bianco caldo per il testo sul banner */
    --colore-accento: #D95F18;          /* Arancione/Ruggine, come le foglie cadute */
}

/* Stile generale del corpo della pagina */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    background-color: var(--colore-sfondo); /* Sfondo color crema */
    color: var(--colore-testo-principale); /* Testo marrone scuro */
}

/* Modifica la regola esistente .credits-banner */
.credits-banner {
    background-color: var(--colore-banner, #0A361E);
    color: var(--colore-testo-banner, #EAE7DC);
    padding: 10px 25px; /* Aumentato padding laterale */
    border-bottom: 4px solid var(--colore-accento, #D95F18);
    
    /* Nuove regole Flexbox per l'allineamento */
    display: flex;
    justify-content: space-between; /* Spinge gli elementi ai lati e al centro */
    align-items: center;
}

/* Centra il testo dei crediti, dato che flex lo sposta */
.credits-banner p {
    margin: 0;
    text-align: center;
}

/* Stile per il nuovo pulsante "Torna al Menu" */
.back-button {
    background-color: var(--colore-accento, #D95F18);
    color: white;
    padding: 8px 15px;
    text-decoration: none; /* Rimuove la sottolineatura del link */
    border-radius: 5px;
    font-weight: bold;
    transition: transform 0.2s ease;
}

.back-button:hover {
    transform: scale(1.05); /* Leggero ingrandimento al passaggio del mouse */
}

/* Regola per il placeholder invisibile */
.placeholder {
    /* Occupa lo stesso spazio del pulsante per un bilanciamento perfetto */
    width: 135px; /* Adatta questa larghezza se cambi il testo del pulsante */
}
.credits-banner strong {
    color: #FFFFFF; /* Bianco puro per far risaltare i ruoli */
}

/* Stile per i titoli e il testo principale */
h1 {
    text-align: center;
    margin-top: 40px;
    margin-bottom: 10px;
    color: var(--colore-banner); /* Titolo verde scuro */
}

p {
    text-align: center;
}

/* Stile per il contenitore del PDF */
.pdf-container {
    width: 80%;
    max-width: 900px; /* Larghezza massima per schermi grandi */
    margin: 30px auto;
    /* Ombra più morbida e bordo in tinta */
    border: 1px solid #D3C5BC; 
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.pdf-viewer-container {
    text-align: center; /* Centra il canvas se è più stretto del contenitore */
    margin-top: 30px;
    margin-bottom: 30px;
}

.pdf-nav {
    text-align: center;
    margin: 20px 0;
}

.pdf-nav button {
    background-color: var(--colore-banner, #0A361E); /* Usa il colore del banner */
    color: var(--colore-testo-banner, #EAE7DC);
    border: none;
    padding: 10px 20px;
    font-size: 1em;
    cursor: pointer;
    border-radius: 5px;
    margin: 0 15px;
    transition: background-color 0.2s;
}

.pdf-nav button:hover:not(:disabled) {
    background-color: var(--colore-accento, #D95F18); /* Colore d'accento al passaggio del mouse */
}

.pdf-nav button:disabled {
    background-color: #cccccc;
    cursor: not-allowed;
}

iframe {
    display: block; /* Rimuove spaziature indesiderate sotto l'iframe */
    border: none;   /* Rimuove il bordo predefinito dell'iframe */
}

/* Stile per il player audio */
audio {
    display: block;
    margin: 40px auto;
    width: 80%;
    max-width: 900px;
}

/* Stile personalizzato per i controlli audio (compatibile con Chrome e Safari) */
audio::-webkit-media-controls-panel {
    background-color: var(--colore-banner);
}

audio::-webkit-media-controls-play-button,
audio::-webkit-media-controls-mute-button {
    background-color: var(--colore-accento);
    border-radius: 50%;
}

audio::-webkit-media-controls-timeline,
audio::-webkit-media-controls-volume-slider {
    background-color: var(--colore-accento);
    border-radius: 25px;
    margin: 0 10px;
}