/* header.css - Header sticky con navigazione a pill */

.header {
    position: sticky;
    top: 0;
    z-index: 100;
    background: #f5f5f4;
    background: rgba(245, 245, 244, 0.8);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid var(--gray-200);
}

.header-inner {
    max-width: 1280px;
    margin: 0 auto;
    padding: 0 32px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.logo {
    display: flex;
    align-items: center;
    gap: 7px;
    text-decoration: none;
    color: var(--gray-900);
}

/* Fulmine "nudo" nel blu brand (7 lug 2026, richiesta proprietario): tolto il box
   nero (gray-900) — il glifo fa da marchio, stesso blu di "Tech" (--blue-500). Il
   contenitore non ha più dimensione fissa: si stringe al glifo, così l'accostamento
   alla scritta è reale (niente aria fantasma del vecchio box 28px). */
.logo-mark {
    display: grid;
    place-items: center;
}

.logo-mark svg {
    width: 22px;
    height: 22px;
    fill: var(--blue-500);
}

.logo-type {
    font-size: 1rem;
    font-weight: 700;
    letter-spacing: -0.03em;
}

/* "Tech" nel blu brand (7 lug 2026, richiesta proprietario): stesso blu con cui GZ
   scrive il wordmark Tech-Zone (#3b82f6 = --blue-500; su GZ è schiarito a #5b9bf8
   solo perché lì lo sfondo è scuro). "-Zone" resta nel colore testo. */
.logo-type .logo-tech {
    color: var(--blue-500);
}

.nav {
    display: flex;
    gap: 2px;
    background: var(--white);
    padding: 4px;
    border-radius: 12px;
    box-shadow: var(--shadow-sm);
    position: relative;
}

.nav-pill {
    position: absolute;
    top: 4px;
    left: 0;
    height: calc(100% - 8px);
    /* 17 giu: pill PIENO = accento della pagina (come .filter-slider dei filtri rumors); fallback blu su home/about */
    background: var(--page-accent, #3b82f6);
    border-radius: 9px;
    transition: left 0.35s cubic-bezier(0.4, 0, 0.15, 1),
                width 0.35s cubic-bezier(0.4, 0, 0.15, 1);
    z-index: 0;
}

.nav a {
    padding: 7px 16px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--gray-400);
    text-decoration: none;
    border-radius: 9px;
    transition: color 0.2s;
    position: relative;
    z-index: 1;
    white-space: nowrap;
}

.nav a:hover {
    /* il pill pieno scorre sotto la voce toccata → testo bianco */
    color: var(--white);
}

.nav a.active {
    /* 17 giu: pill pieno sotto l'attiva → testo bianco, come .filter-tab.active */
    color: var(--white);
    font-weight: 600;
}

/* mouse su un'ALTRA voce → il pill lascia l'attiva → testo leggibile (accento scuro), mai bianco su bianco */
.nav:hover a.active:not(:hover) {
    color: var(--blue-600);
    color: color-mix(in srgb, var(--page-accent, #3b82f6) 78%, #000);
}

/* ── Mobile: solo logo centrato, nav in basso ── */
@media (max-width: 768px) {
    .nav {
        display: none;
    }

    .header-inner {
        justify-content: center;
        height: 44px;
    }

    /* Fulmine nudo anche su mobile (7 lug 2026): niente box, glifo un filo più piccolo. */
    .logo-mark svg {
        width: 20px;
        height: 20px;
    }

    .logo-type {
        font-size: 0.875rem;
    }
}