/* Importa un bel font da Google Fonts (es. Merriweather per uno stile elegante) */
@import url('https://fonts.googleapis.com/css2?family=Merriweather:wght@300;400;700&display=swap');

/* 1. Nasconde la scritta tecnica "Skip to main content" */
.skip-link {
    display: none !important;
}

body {
    background-color: var(--bg);
    color: var(--body);
    /* Applica il font */
    font-family: 'Merriweather', serif; 
    line-height: 1.6; /* Aumenta l'interlinea per leggere meglio */
    max-width: 800px; /* Evita che le righe siano lunghissime su schermi grandi */
    margin: 0 auto; /* Centra tutto il sito */
    padding: 20px;
}
/* Imposta la grandezza base del sito */
html {
    /* Su Desktop: 125% (equivale a mettere lo zoom a 125%) */
    font-size: 125%; 
}

/* Su Cellulare: Riduciamo un po' per non avere parole spezzate */
@media screen and (max-width: 768px) {
    html {
        font-size: 110%; /* Un po' più grande del normale, ma non enorme */
    }
}
/* Allarga la colonna principale per accomodare il testo più grande */
main, article {
    max-width: 850px !important; /* Prima era circa 700-800px */
}
:root {
    /* Sfondo crema/giallo chiaro */
    --bg: #fffbe8; 
    /* Testo scuro (quasi nero) per leggibilità */
    --body: #222222; 
    /* Colore dei link (un blu scuro o nero sottolineato) */
    --accent: #0044cc; 
}

body {
    background-color: var(--bg);
    color: var(--body);
}

h1, h2, h3, h4, h5, h6 {
    color: #000000; /* Titoli neri */
}

a {
    color: var(--accent);
}

/* Correzione specifica per il titolo "Nome Cognome" se è nell'header */
header h1, header a {
    color: #000000 !important;
}

nav {
    margin-bottom: 40px; /* Spazio tra menu e titolo Articoli */
    border-bottom: 1px solid #ccc; /* Una riga sottile per separare l'intestazione */
    padding-bottom: 10px;
}

nav a {
    margin-right: 15px; /* Distanzia i link tra loro */
    text-decoration: none; /* Toglie la sottolineatura fissa */
    font-weight: bold;
    text-transform: uppercase; /* Rende il menu più "autoritario" */
    font-size: 0.9em;
    letter-spacing: 1px;
}

a:hover {
    background-color: #14dec3dd; /* Un evidenziatore giallo classico al passaggio */
    color: #000;
    text-decoration: none;
}
/* Seleziona il paragrafo che si trova SUBITO dopo un titolo H1 */
h1 + p {
    color: #777777;       /* Grigio chiaro (ma leggibile sullo sfondo crema) */
    font-style: italic;   /* Corsivo */
    font-size: 0.9em;     /* Un po' più piccolo del testo normale */
    margin-top: -15px;    /* (Opzionale) Lo avvicina un po' al titolo */
    margin-bottom: 30px;  /* Aggiunge spazio prima che inizi l'articolo vero e proprio */
}

/* Restringiamo la colonna di lettura: meno larghezza = meno fatica per gli occhi */
article {
    max-width: 680px;  /* 680px è il "sweet spot" per la lettura */
    margin: 0 auto;    /* Centra la colonna nel mezzo della pagina */
}

/* Miglioriamo i paragrafi */
p {
    font-size: 15px;       /* Un po' più grande del default (16px è spesso piccolo) */
    line-height: 1.8;      /* FONDAMENTALE: Aumenta lo spazio tra le righe (1.8 è molto comodo) */
    margin-bottom: 1.5em;  /* Più spazio tra un paragrafo e l'altro */
    color: #333;           /* Un nero leggermente scarico per non "sparare" troppo sugli occhi */
}

/* Anche le liste devono respirare */
ul, ol {
    margin-bottom: 1.5em;
    padding-left: 20px;
}

li {
    font-size: 15px;       /* <--- QUESTA È LA RIGA MANCANTE: Ora è uguale ai paragrafi */
    line-height: 1.7;      /* Spazio anche tra i punti elenco */
    margin-bottom: 0.5em;  /* Spazio tra un punto e l'altro */
}

/* Correzione per i grassetti (strong e b) */
strong, b {
    color: #5d8ca1 !important; /* Forza il nero puro */
    font-weight: 700;          /* Assicura che sia bello cicciotto */
}

/* Correzione per le citazioni (che nel tuo screenshot sembrano troppo chiare) */
blockquote {
    color: #444444;            /* Grigio scuro leggibile */
    border-left: 4px solid #5c6911; /* Una linea nera a sinistra per evidenziarle */
    background: rgba(0,0,0,0.05); /* Un leggerissimo sfondo scuro per farle risaltare */
    padding: 10px 20px;        /* Un po' di spazio interno */
}

.tag-badge {
    display: inline-block;     /* Per stare in linea col testo */
    font-size: 0.7em;          /* Molto più piccoli del titolo */
    font-family: sans-serif;   /* Uso un font bastoni per contrasto col titolo serif */
    color: #555;               /* Grigio scuro */
    border: 1px solid #bbb;    /* Un bordino sottile elegante */
    border-radius: 4px;        /* Angoli leggermente arrotondati */
    padding: 1px 6px;          /* Un po' di aria attorno al testo */
    margin-right: 5px;         /* Spazio tra un tag e l'altro */
    vertical-align: middle;    /* Allinea verticalmente col titolo */
    text-transform: uppercase; /* (Opzionale) Rende tutto maiuscolo per uniformità */
    opacity: 0.8;              /* Leggermente trasparente per non rubare scena al titolo */
}

.tag-badge {
    display: inline-block;
    font-size: 0.75em;
    color: #999;           /* Grigio molto chiaro, discreto */
    border: none;          /* Niente bordi */
    background: none;      /* Niente sfondo */
    padding: 0;
    margin-left: 10px;     /* Spazio dal titolo */
    margin-right: 5px;
    font-family: monospace; /* Font tecnico */
    font-weight: normal;
}

.tag-badge::before {
    content: "#";          /* Aggiunge automaticamente il cancelletto */
    color: #ccc;
}

.tag-badge:hover {
    color: #d35400;        /* Un colore arancio/ruggine solo se ci passi sopra */
    text-decoration: underline;
    cursor: pointer;
}

/* Effetto Hover sui titoli della lista */
li a:hover {
    background-color: rgba(0, 200, 255, 0.15); /* Celeste con 15% di opacità */
    text-decoration: none;      /* Toglie la sottolineatura standard */
    border-radius: 4px;         /* Smussa gli angoli dell'evidenziatura */
    box-shadow: 0 0 0 3px rgba(0, 200, 255, 0.15); /* Allarga un po' l'evidenziatura fuori dal testo */
    transition: background-color 0.2s; /* Rende il cambio colore morbido */
}

/* Assicuriamoci che i tag (#studio) non prendano lo sfondo celeste se non vuoi */
li .tag-badge:hover {
    background-color: transparent !important;
    box-shadow: none !important;
}

/* 1. Prepariamo lo spazio sotto il titolo */
header {
    position: relative;       /* Serve per ancorare l'ondina */
    padding-bottom: 30px;     /* Spazio tra il titolo e l'ondina */
    margin-bottom: 40px;      /* Spazio tra l'ondina e la lista articoli */
    border-bottom: none !important; /* Rimuove eventuali vecchie righe */
}

/* 2. Disegniamo l'ondina a penna */
header::after {
    content: "";              /* Crea un elemento invisibile */
    display: block;
    position: absolute;       /* Lo posiziona in basso al contenitore */
    bottom: 0;
    left: 0;
    width: 100%;              /* Largo quanto tutta la pagina */
    height: 8px;              /* Altezza dell'onda */
    
    /* Il disegno vettoriale dell'onda (colore grigio scuro #333) */
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4' fill='none' stroke='%23333' stroke-width='1'%3E%3Cpath d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E");
    
    background-repeat: repeat-x; /* Ripete l'onda all'infinito */
    background-size: 15px 8px;   /* Dimensione della singola curva (più strette o larghe) */
    opacity: 0.6;                /* Un po' trasparente per sembrare matita */
}

/* Quando selezioni il testo col mouse */
::selection {
    background-color: #d35400; /* Un arancione ruggine (lo stesso dell'hover dei tag) */
    color: #ffffff;            /* Testo bianco */
}

/* Versione Universale: Colpisce il primo paragrafo del contenuto, ignorando la data */
main > :not(p) > p:first-of-type::first-letter {
    float: left;
    font-size: 3.8em;
    line-height: 0.8;
    padding-right: 6px;
    padding-top: 0px;
    color: #000;
    font-family: serif;
    font-weight: bold;
}

/* Stile per le immagini dentro gli articoli */
article img {
    max-width: 100%;    /* Fondamentale: impedisce alla foto di uscire dalla colonna */
    height: auto;       /* Mantiene le proporzioni corrette */
    display: block;     /* La tratta come un blocco a sé stante */
    margin: 30px auto;  /* Centra la foto e dà spazio sopra e sotto (30px) */
    border-radius: 4px; /* Un piccolissimo arrotondamento agli angoli (opzionale) */
    box-shadow: 0 4px 10px rgba(0,0,0,0.1); /* Una leggera ombra per dare profondità */
}

/* (Opzionale) Se vuoi che la descrizione della foto appaia come didascalia sotto */
article img + em {
    display: block;
    text-align: center;
    font-size: 0.9em;
    color: #666;
    margin-top: -20px;
    margin-bottom: 30px;
}

/* RIMUOVE LA RIGA DRITTA IN FONDO ALLA PAGINA */
body, html {
    border-bottom: none !important; /* Forza la rimozione del bordo di default */
    border: none !important;        /* Per sicurezza togliamo tutto */
}


/* --- INIZIO BLOCCO FOOTER PULITO --- */

footer {
    position: relative;
    margin-top: 60px;
    padding-top: 30px;
    padding-bottom: 40px;
    text-align: center;
    font-size: 0.8em;
    color: #888;
    background: transparent !important; /* Toglie eventuali sfondi strani */
    border: none !important;            /* Toglie bordi indesiderati al footer */
}

/* L'unica ondina (SOPRA la scritta) */
footer::before {
    content: "";
    display: block;
    position: absolute;
    top: 10;
    left: 0;
    width: 100%;
    height: 8px;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 4' fill='none' stroke='%23333' stroke-width='1'%3E%3Cpath d='M0 3.5c5 0 5-3 10-3s5 3 10 3 5-3 10-3 5 3 10 3'/%3E%3C/svg%3E");
    background-repeat: repeat-x;
    background-size: 15px 8px;
    opacity: 0.6;
}

/* NASCONDE QUALSIASI COSA SOTTO (Ondine doppie o righe) */
footer::after {
    content: none !important;
    display: none !important;
    border: none !important;
}

/* --- FINE BLOCCO FOOTER --- */

/* --- CORREZIONI FINALI --- */


/* 2. Rimuove la sottolineatura dal titolo "Me Stesso" */
header a, header .title {
    text-decoration: none !important; /* Via la riga sotto */
    box-shadow: none !important;      /* Via eventuali ombre */
    color: #000 !important;           /* Forza il colore nero */
    background: none !important;      /* Rimuove eventuali sfondi al passaggio del mouse */
}


/* --- FIX FINALISSIMO HEADER --- */

/* 1. Reset totale del link del titolo (normale e al passaggio del mouse) */
header a.title, 
header a.title:hover, 
header a.title:focus, 
header a.title:active {
    background-color: transparent !important; /* Toglie il colore di sfondo celeste */
    color: #000 !important;                   /* Il testo resta sempre nero */
    text-decoration: none !important;         /* Niente sottolineatura */
    box-shadow: none !important;              /* Niente bordi o ombre */
    opacity: 1 !important;
}

/* 2. Sicurezza per l'immagine del logo */
header img {
    pointer-events: none; /* Evita che il logo diventi blu se selezionato */
}