article {    
    padding: calc(6vh + 4%) calc(10% + 2vw);
    color: var(--muted-text);
    max-width: 650px;
    margin: auto;
}

/* Ridurre la percentuale di padding man mano che la larghezza della finestra diminuisce */
@media (max-width: 1024px) { /* Per dispositivi di media dimensione come tablet */
    article {
        padding: calc(6vh + 4%) calc(10% + 1vw); /* Usa calc() per regolare dinamicamente */
    }
}

@media (max-width: 768px) { /* Per dispositivi mobile */
    article {
        padding: 5vh 4%; /* Limite inferiore per il padding */
    }
}


article h1 {
    padding-top: 0.5vw;
    padding-bottom: 0.5vw;
    font-family: "Space Grotesk", sans-serif;
    font-size: 3.5rem;
    font-weight: 300;
    color: var(--highlight-text);
}

article h2 {
    padding-top: 1vw;
    font-family: "Space Grotesk", sans-serif;
    font-size: 1.8rem;
    font-weight: 500;
    color: var(--standard-text);
}

article h3 {
    margin-top: 1vw;
    font-size: 1.3rem;
    font-weight: 300;
    color: var(--standard-text);
}

/*
article hr {
    border: none;
    height: 1px;
    background: repeating-linear-gradient(
        -45deg,
        var(--muted-text),
        var(--background-contrast) 10px,
        var(--muted-text-50) 18px,
        var(--muted-text) 22px,
        var(--background-color) 25px,
        var(--muted-text-50) 28px,
        var(--background-high-contrast) 32px,
        var(--muted-text-50) 33px,
        var(--standard-text) 35px
    );
}
*/

article hr {
    border: none;
    height: 1px;
    background: linear-gradient(to right, var(--background-color), var(--muted-text-50), var(--background-color));
}

article .page-content p {
    padding: calc(2vh * 0.5) 0;
    line-height: 1.5;
}
article .page-content p strong,
article .page-content p b {
    color: var(--standard-text);
}

article .page-content * a {
    font-weight: 500;
    color: var(--standard-text);
    align-items: center; /* Allinea l'icona e il testo verticalmente */
    text-decoration-color: var(--highlight-text); /* Colore della sottolineatura */
    text-underline-offset: 0.4rem; /* Distanza iniziale della sottolineatura */
    text-decoration: underline; /* Sottolineatura */
    transition: text-decoration-color 0.3s ease, 
                text-underline-offset 0.2s ease; /* Animazione per la distanza della sottolineatura */
}

article .page-content * a:hover {
    color: var(--link-text) !important;
    text-decoration-color: transparent !important; /* Nasconde la sottolineatura al passaggio del mouse */
    text-underline-offset: 0.2rem; /* Distanza della sottolineatura che si avvicina e sparisce */
    transition: text-underline-offset 0.2s ease, 
                text-decoration-color 0.3s ease; /* Animazione della sottolineatura */
}
article .page-content .dashicons {
    margin-right: 8px; /* Distanza tra l'icona e il testo */
    text-decoration: inherit; /* Assicura che l'icona segua la sottolineatura del link */
    display: inline-block; /* Rende l'icona un blocco inline per poter gestire la sottolineatura */    
}


article .page-content ul,
article .page-content ol {
    margin: 0.5rem 1rem 0.5rem 0;
    line-height: 1.5;
    padding-left: 0;
}
article .page-content ul li {
    display: flex;
    align-items: baseline;
    list-style-type: none;
    margin-bottom: 1rem;
}
article .page-content ul li a {
    display: inline-block; /* Forza il link a essere trattato come un blocco */
}
article .page-content ul li::before {
    content: '→';
    color: var(--highlight-text); /* Colore personalizzato */
    font-size: 1.5rem; /* Dimensione del simbolo */
    margin-right: 1rem; /* Distanza tra il simbolo e il testo */
    flex-shrink: 0; /* Impedisce che il simbolo venga ridotto */
}