.header-home {
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 5rem;
padding: 0 4rem;
background-color: var(--surface-alt);
border-bottom: 1px solid var(--border);
display: flex;
justify-content: space-between;
align-items: center;
z-index: 1000;
}

.header-hidden {
position: absolute;
width: 1px;
height: 1px;
font-size: 0px;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
display: inline;
}

.header-logo {
display: flex;
align-items: center;
height: 100%;
padding: 0.5rem 0;
}

.header-image {
height: 100%;
width: auto;
object-fit: contain;
}

.header-nav {
flex: 1;
display: flex;
justify-content: flex-end;
align-items: center;
height: 100%;
}

.header-nav ul {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
align-items: center;
gap: 1.5rem;
padding: 0;
margin: 0;
list-style: none;
}

.header-nav li {
    list-style: none;
}

.header-toggle {
display: none;
}

.header-bar {
}

.header-nav li a {
color: var(--text);
text-decoration: none;
font-size: 1.1rem;
font-weight: 500;
padding: 0.5rem 0.25rem;
border-radius: 0.25rem;
transition: color 0.2s ease-in-out, background-color 0.2s ease-in-out;
white-space: nowrap;
}

.header-nav li a:hover {
color: var(--primary);
}

.header-nav li a:focus-visible {
color: var(--primary);
outline: 0.125rem solid var(--focus);
outline-offset: 0.25rem;
}

@media (max-width: var(--media-width)) {

.header-home {
height: 4rem;
padding: 0 1.25rem;
}

.header-hidden {
display: none;
}

.header-toggle {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 1.75rem;
height: 1.25rem;
background: transparent;
border: none;
cursor: pointer;
padding: 0;
z-index: 1001;
}

.header-bar {
height: 0.125rem; /* Thickness sottile ed elegante */
width: 100%;
background-color: var(--text);
border-radius: 0.125rem;
transition: transform 0.25s ease-in-out, opacity 0.25s ease-in-out;
}

.header-toggle.is-active .header-bar:nth-child(1) {
transform: translateY(0.5625rem) rotate(45deg);
}

.header-toggle.is-active .header-bar:nth-child(2) {
opacity: 0;
}

.header-toggle.is-active .header-bar:nth-child(3) {
transform: translateY(-0.5625rem) rotate(-45deg);
}

.header-nav ul {
display: none; 
flex-wrap: none;
flex-direction: column;
justify-content: flex-start;
align-items: stretch;
position: absolute;
top: 4rem;
left: 0;
width: 100%;
background-color: var(--surface-alt);
border-bottom: 1px solid var(--border);
padding: 0.5rem 0;
gap: 0;
}

.header-nav li {
width: 100%;
}

.header-nav li a {
display: block;
padding: 0.875rem 1.5rem; /* Generosa area di tocco (touch target) */
width: 100%;
text-align: left; /* Allineamento a sinistra, più naturale per la lettura */
font-size: 1.05rem;
border-bottom: 0.0625rem solid var(--divider);
}

.header-nav li a:hover {
color: var(--primary);
background-color: color-mix(in srgb, var(--primary) 5%, var(--surface-alt));
}

.header-nav li:last-child a {
border-bottom: none;
}

.header-nav.is-open ul {
display: flex;
}

}