/* 
==========================================================================
   FOGLIO DI STILE PER IL DIARIO PERSONALE (style.css)
   ----------------------------------------------------------------------
   Questo file definisce tutto l'aspetto visivo del diario.
   È strutturato in sezioni logiche per facilitare la lettura, la manutenzione
   e le future personalizzazioni estetiche.
==========================================================================
*/

/* 
   ==========================================================================
   1. CONFIGURAZIONE E VARIABILI GLOBALI (:root)
   ==========================================================================
   Qui definiamo la palette dei colori principale e le variabili di stile.
   Usare le variabili permette di cambiare il tema (es. colori o font) in un 
   unico punto modificando solo il valore della variabile corrispondente.
*/
:root {
    /* Palette Colori: Stile Editoriale, Minimalista e Caldo */
    --bg-color: #fcfaf7;       /* Sfondo generale della pagina (crema molto chiaro e rilassante) */
    --container-bg: #ffffff;   /* Sfondo dei blocchi delle voci di diario (bianco puro) */
    --text-main: #2c2520;      /* Colore del testo principale (marrone molto scuro, meno aggressivo del nero) */
    --text-muted: #706259;     /* Colore per testi secondari, date o info secondarie (marrone desaturato medio) */
    --accent-color: #8c6d58;   /* Colore di accento principale (marrone caldo desaturato per date, link e dettagli) */
    --accent-light: #f3ede6;   /* Sfondo chiaro di accento per elementi speciali come i box allegati */
    --border-color: #e6ded6;   /* Colore per bordi e linee divisorie sottili */
}

/* 
   ==========================================================================
   2. RESET DEI MARGINI E IMPOSTAZIONI DI BASE
   ==========================================================================
   Un reset di base assicura che tutti i browser (Chrome, Firefox, Safari, Edge) 
   mostrino la pagina con le stesse spaziature di partenza.
*/
* {
    box-sizing: border-box; /* Include padding e bordi nel calcolo della larghezza/altezza degli elementi */
    margin: 0;              /* Rimuove i margini di default impostati dai browser */
    padding: 0;             /* Rimuove i padding di default impostati dai browser */
}

/* 
   ==========================================================================
   3. STILI DEL CORPO DELLA PAGINA (body)
   ==========================================================================
   Definisce i caratteri tipografici generali, il colore dello sfondo e il 
   comportamento del testo per l'intera pagina.
*/
body {
    /* Font graziati (serif) per dare una sensazione di diario cartaceo e classico */
    font-family: "Georgia", "Times New Roman", serif;
    background-color: var(--bg-color); /* Applica lo sfondo crema chiaro */
    color: var(--text-main);           /* Applica il colore del testo principale */
    line-height: 1.6;                  /* Aumenta l'interlinea per una lettura più riposante */
    padding: 40px 20px;                /* Spazio esterno intorno a tutta la pagina (sopra/sotto e lati) */
}

/* 
   ==========================================================================
   4. CONTENITORE CENTRALE (.container)
   ==========================================================================
   Limita la larghezza massima del diario per evitare che le righe di testo 
   diventino troppo lunghe su schermi molto grandi, migliorando la leggibilità.
*/
.container {
    max-width: 750px; /* Larghezza massima ottimale per la lettura del testo */
    margin: 0 auto;   /* Centra il contenitore orizzontalmente sullo schermo */
}

/* 
   ==========================================================================
   5. INTESTAZIONE DEL DIARIO (header)
   ==========================================================================
   Stili dedicati al titolo principale del diario ("Le Mie Memorie") e al sottotitolo.
*/
header {
    text-align: center;                         /* Centra il testo dell'intestazione */
    margin-bottom: 60px;                        /* Spazio vuoto sotto l'intestazione prima del contenuto */
    padding-bottom: 30px;                       /* Spazio interno prima del bordo inferiore */
    border-bottom: 2px double var(--border-color); /* Riga divisoria doppia ed elegante in stile libro */
}

/* Titolo principale */
header h1 {
    font-size: 2.5rem;       /* Dimensione generosa del carattere */
    font-weight: normal;     /* Non in grassetto per un aspetto più pulito ed elegante */
    color: var(--text-main); 
    margin-bottom: 10px;     /* Spazio tra il titolo e il sottotitolo */
    letter-spacing: 1px;     /* Spaziatura leggermente aumentata tra le lettere */
}

/* Sottotitolo descrittivo */
header p {
    font-style: italic;       /* Testo in corsivo */
    color: var(--text-muted); /* Colore più chiaro e discreto */
    font-size: 1.1rem;
}

/* 
   ==========================================================================
   6. STRUTTURA DELLE VOCI DI DIARIO (.diario-entry)
   ==========================================================================
   Definisce l'aspetto di ciascuna pagina o articolo inserito nel diario.
*/
.diario-entry {
    background-color: var(--container-bg);          /* Sfondo bianco per far risaltare la pagina */
    padding: 40px;                                  /* Margine interno per dare "respiro" al testo */
    border-radius: 8px;                             /* Angoli leggermente arrotondati */
    box-shadow: 0 4px 15px rgba(140, 109, 88, 0.05); /* Ombra sfumata e delicata per dare profondità */
    border: 1px solid var(--border-color);           /* Bordo sottile per definire i contorni */
    margin-bottom: 40px;                            /* Distanza tra una voce di diario e quella successiva */
    position: relative;                             /* Consente posizionamenti assoluti interni se necessario */
}

/* 
   ==========================================================================
   7. INTESTAZIONE DELLA SINGOLA VOCE (.entry-header)
   ==========================================================================
   Contiene la data (a sinistra) e i metadati come meteo o ora (a destra).
*/
.entry-header {
    display: flex;                  /* Allinea la data e le info sulla stessa riga */
    justify-content: space-between; /* Spinge la data a sinistra e le info a destra */
    align-items: baseline;          /* Allinea le basi del testo per una precisione visiva */
    border-bottom: 1px solid var(--border-color); /* Linea di separazione orizzontale */
    padding-bottom: 15px;           /* Spazio tra il testo e la linea */
    margin-bottom: 25px;            /* Spazio sotto la linea prima del titolo dell'articolo */
}

/* La data principale del giorno */
.entry-date {
    font-size: 1.4rem;
    font-weight: bold;
    color: var(--accent-color); /* Utilizza il colore marrone caldo di accento */
}

/* Informazioni aggiuntive (Giorno della settimana, ora, meteo) */
.entry-meta {
    font-size: 0.9rem;
    color: var(--text-muted);
    font-style: italic;
}

/* 
   ==========================================================================
   8. TITOLO E CONTENUTO DI UNA VOCE
   ==========================================================================
*/
/* Titolo dell'articolo/giorno */
.entry-title {
    font-size: 1.8rem;
    font-weight: normal; /* Aspetto pulito e non troppo pesante */
    margin-bottom: 20px; /* Spazio prima del testo del paragrafo */
    color: var(--text-main);
}

/* Paragrafi di testo del diario */
.entry-content p {
    font-size: 1.1rem;
    margin-bottom: 20px;       /* Distanza tra un paragrafo e l'altro */
    text-align: justify;       /* Giustifica il testo per un look da pagina stampata */
    text-justify: inter-word;  /* Ottimizza la spaziatura tra le parole per la giustificazione */
}

/* 
   ==========================================================================
   9. SEZIONE MEDIA (Foto, Video, Audio)
   ==========================================================================
   Gestisce la visualizzazione degli elementi multimediali allegati ad ogni giorno.
*/
.entry-media {
    margin-top: 30px;                       /* Distanza dal testo soprastante */
    padding-top: 20px;                      /* Spazio interno sopra la linea tratteggiata */
    border-top: 1px dashed var(--border-color); /* Linea tratteggiata per separare i media dal testo */
}

/* Contenitore generico per la griglia dei media */
.media-grid {
    display: block;      /* Layout semplice, gli elementi vanno uno sotto l'altro */
    margin-bottom: 20px;
}

/* Singolo elemento multimediale (es. un'immagine o un video con la sua didascalia) */
.media-item {
    margin-bottom: 20px; /* Distanza tra i vari media allegati */
    text-align: center;  /* Centra le immagini, i video e le didascalie */
}

/* Immagini allegate */
.media-item img {
    max-width: 100%;                       /* Evita che l'immagine esca dal contenitore */
    height: auto;                          /* Mantiene le proporzioni corrette dell'immagine */
    border-radius: 4px;                    /* Angoli leggermente arrotondati della foto */
    border: 1px solid var(--border-color);  /* Cornice sottile intorno alla foto */
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05); /* Ombra leggera sotto la foto per sollevarla dallo sfondo */
}

/* Riproduttore Video */
.media-item video {
    width: 100%;
    max-width: 100%;
    border-radius: 4px;
    outline: none; /* Rimuove il bordo di focus predefinito in alcuni browser */
}

/* Riproduttore Audio */
.media-item audio {
    width: 100%;
    margin-top: 10px; /* Spazio sopra il player audio */
}

/* 
   ==========================================================================
   10. BOX DEGLI ALLEGATI (es. file PDF)
   ==========================================================================
   Un riquadro elegante per mostrare file scaricabili o consultabili separatamente.
*/
.attachment-box {
    background-color: var(--accent-light);         /* Sfondo color sabbia chiaro */
    padding: 15px 20px;                            /* Spaziatura interna */
    border-radius: 6px;                            /* Angoli arrotondati */
    display: flex;                                 /* Allinea l'icona/informazioni a sinistra e il pulsante a destra */
    align-items: center;                           /* Centra verticalmente gli elementi */
    justify-content: space-between;                /* Sposta i dettagli a sinistra e il link di apertura a destra */
    border-left: 4px solid var(--accent-color);    /* Linea colorata spessa a sinistra per evidenziare il box */
    margin-top: 15px;
    font-family: sans-serif;                       /* Carattere sans-serif moderno per le informazioni tecniche */
    font-size: 0.95rem;
}

/* Raggruppamento di icona e testo descrittivo */
.attachment-info {
    display: flex;
    align-items: center;
    color: var(--text-main);
}

/* Icona dell'allegato (es. l'emoji del foglio di carta) */
.attachment-icon {
    font-size: 1.5rem;
    margin-right: 12px; /* Spazio tra l'icona e il nome del file */
}

/* Link/Pulsante di apertura dell'allegato */
.attachment-link {
    color: var(--accent-color);
    text-decoration: none;      /* Rimuove la sottolineatura di default dei link */
    font-weight: bold;
}

/* Effetto al passaggio del mouse sul pulsante dell'allegato */
.attachment-link:hover {
    text-decoration: underline; /* Sottolinea il link per indicare che è cliccabile */
}

/* 
   ==========================================================================
   11. BOX DI GUIDA / ISTRUZIONI (.guide-box)
   ==========================================================================
   Riquadro informativo bluastro contenente le istruzioni su come usare il diario.
*/
.guide-box {
    background-color: #eef5f8;       /* Sfondo azzurro/grigio chiaro molto pulito */
    border-left: 4px solid #4a89a4;  /* Bordo sinistro blu scuro per staccare dal resto */
    padding: 20px;
    border-radius: 6px;
    margin-bottom: 50px;
    font-family: sans-serif;         /* Font moderno per istruzioni leggibili */
    font-size: 0.95rem;
    color: #2c4a5e;                  /* Testo blu scuro desaturato */
}

/* Titolo della guida */
.guide-box h3 {
    margin-bottom: 10px;
    color: #1f3747;
}

/* Lista ordinata/puntata delle istruzioni */
.guide-box ul {
    margin-left: 20px; /* Rientro per allineare i punti elenco */
    margin-top: 8px;
}

/* 
   ==========================================================================
   12. STILI DI STAMPA (@media print)
   ==========================================================================
   Regole speciali applicate automaticamente quando l'utente stampa la pagina 
   o la salva come PDF (es. da Chrome -> Stampa -> Salva come PDF).
*/
@media print {
    /* Nasconde completamente la guida per l'utente, inutile sulla carta */
    .guide-box {
        display: none;
    }

    /* Rimuove i padding esterni e imposta uno sfondo bianco puro per risparmiare inchiostro */
    body {
        background-color: #fff;
        padding: 0;
    }

    /* Rimuove ombre e bordi dalle pagine del diario per una stampa pulita e professionale */
    .diario-entry {
        box-shadow: none;
        border: none;
        page-break-inside: avoid; /* Evita che una pagina del diario venga spezzata a metà tra due fogli stampati */
        padding: 20px 0;
    }
}