header {
    display: flex; /* Disposizione in riga */
    justify-content: space-between; /* Spaziatura tra il titolo e il menu */
    align-items: center; /* Allinea verticalmente gli elementi */
    padding: 0.8rem 1rem; /* Spaziatura intorno al contenitore */
    background-color: var(--background-contrast); /* Colore di sfondo */
    margin-top: 0.8rem;
    border-radius: 8px;
    box-sizing: border-box;
}
@media (max-width: 768px) {
    body {
        background-color: var(--background-contrast); /* Colore di sfondo */
        margin: 0;
        padding: 0;
    }
    main {
        width: 100%;
        margin-right: 0;
        background-color: var(--background-color);
        box-sizing: border-box;
    }
    .main-content {
        width: 100%;
        background-color: var(--background-color);
        padding: 90px 1rem 20px 1rem;
        margin-right: 0;
        box-sizing: border-box;
    }
    header {
        position: fixed;
        top: -11px;
        left: 0;
        width: 100%;
        min-height: 74px;
        height: auto;
        z-index: 499;
        border-radius: 0;
        backdrop-filter: blur(10px); /* Sfocatura */
        box-shadow: 0 2px 10px rgba(0, 0, 0, 0.2); /* Ombra opzionale */
        background: none;
        /* Assicurati che l'header abbia un contesto per lo pseudo-elemento */
    }
    
    header::before {
        content: "";
        position: absolute;
        top: -426px;
        left: 0;
        width: 100%;
        height: 500px;        
        background: linear-gradient(
            to bottom,
            rgba(var(--background-contrast-rgb), 1) 0%,         
            rgba(var(--background-contrast-rgb), 1) 450px,      
            rgba(var(--background-contrast-rgb), 0.8) 500px    
        );
        /*background: var(--background-contrast);*/
        /*opacity: 0.9; /* Solo il background è opaco */
        backdrop-filter: blur(10px); /* Sfocatura */
        z-index: -1; /* Dietro il contenuto */
        border-radius: 0; /* Per mantenere l'estetica */
    }
}

#website {
    font-family: "Space Grotesk", sans-serif;
    font-optical-sizing: auto;
    font-weight: 700;
    font-style: normal;
    font-size: 1.2rem;
    color: var(--standard-text); 
    margin-top: 2px; 
    margin-bottom: -2px;
    margin-left: 2%;
    color: var(--standard-text);
    text-decoration: none;
    cursor: pointer;
    transform: scale(0.95);
    transition: transform 0.7s ease,
                color 0.3s ease; /* Aggiunge una transizione per l'animazione */
}
#website .website-name {
    text-transform: uppercase;
}
#website:hover {
    color: var(--highlight-text);
    transform: scale(1); /* Aumenta la dimensione */
}




/* Stile di base */
@media (min-width: 768px) {
    .menu {
        background-color: var(--background-contrast);
    }
}
.menu {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0.5rem;    
}
.menu-items {
    list-style: none;
    display: flex; /* Mostra in linea su schermi grandi */
    gap: 0.2rem;
    margin: 0;
    padding: 0;
}
.menu-items .menu-item {
    display: inline-block;
}
.menu-items a {
    text-decoration: none;
    color: var(--standard-text);
    padding: 0.7rem 1rem;    
    border-radius: 4px;
    font-size: 0.9rem;
    transition: background-color 0.3s ease,
                transform 0.2s ease;
}
.menu-items a:hover {
    background-color: var(--background-high-contrast);
    transition: background-color 0.6s ease;
    color: var(--standard-text);
    transform: scale(1.05);
    transition: transform 0.4s ease;
}







/* Menu hamburger */
.menu-toggle {
    display: none; 
}
.menu-toggle span {
    cursor: pointer; /* Mostra il puntatore "mano" */
    background-color: var(--muted-text); /* Colore delle barre */
    height: 2px; /* Altezza di ogni barra */
    width: 20px; /* Larghezza di ogni barra */
    border-radius: 2px; /* Angoli arrotondati */
}
.menu-toggle:hover,
.menu-toggle.active {
    border: 1px solid var(--muted-text-50);
}
.menu-toggle:hover span,
.menu-toggle.active span {
    background-color: var(--standard-text); /* Colore delle barre */

}




/* Menu responsive */
@media (max-width: 768px) {
    header .menu {
        background-color: none !important;
    }
    header .menu-toggle {
        display: flex; /* Mostra il menu hamburger */
        position: absolute;        
        right: 1.5rem;
        top: 20px;
        padding: 0.6rem;
        flex-direction: column; /* Disposizione verticale delle barre */
        gap: 5px; /* Spazio tra le barre */
        cursor: pointer; /* Mostra il puntatore "mano" */
        border-radius: 2px;
        border: 1px solid transparent;
    }    
    .menu-items {
        border: 1px solid var(--muted-text-50);
        box-sizing: border-box;
        display: none;
        flex-direction: column;        
        background-color: var(--background-high-contrast);
        position: absolute;
        top: 54px; /* Posiziona il menu sotto il toggle */
        right: 1.5rem; /* Allinea il menu a destra */
        width: auto;
        border-radius: 2px;
        overflow: hidden;
        font-size: 0.8rem;
        gap: 0;
        box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1), 0 1px 3px rgba(0, 0, 0, 0.06);
        z-index: 499;
    }
    .menu-items .menu-item {
        border-radius: 0;
        text-align: center;
        border-bottom: 1px solid var(--background-contrast);
        padding: 0;
    }

    .menu-items .menu-item a {
        padding: 1.3rem 3.5rem 1.3rem 2.2rem;
        display: flex;
        align-items: center;
        border: none;
        font-size: 1rem;
        cursor: pointer;
    }
    .menu-items .menu-item a .dashicons {
        display: inline-flex;
        margin-right: 0.5rem;
    }
    .menu-items .menu-item a:hover,
    .menu-items .menu-item.active a {
        color: var(--highlight-text);
    }

    .menu-items.active {
        display: flex; /* Mostra il menu solo quando attivo */
    }


    
}