/* components/header.css — GlitchZone · chrome di testata (Step 2.2)
   ------------------------------------------------------------------
   Estratto dal <style> inline delle pagine v13 (canonico: index_v13; il drift
   fra pagine è solo formattazione/ordine, i valori sono identici).
   Dipendenza: gz-base. Caricato SEMPRE (l'header è su ogni pagina).

   ESCLUSI di proposito: @keyframes float (non usato nello statico) e la regola
   `main { max-width:1200px }` (layout, non header → arriverà col layer layout).
   I colori-sezione del nav-hover (#ff4444 flop, #c084fc rumors) restano hardcoded
   come nello statico → si tokenizzano allo Step 4 (sistema colori-sezione).
   Firewall: zero riferimenti a techzone. */

/* GLITCH LOGO (hover continuo) */
.glitch { position: relative; display: inline-block; }
@keyframes logo-hover-glitch {
    0% { text-shadow: 2px 0 var(--accent), -2px 0 var(--primary); transform: translate(0); }
    20% { text-shadow: -2px 0 var(--accent), 2px 0 var(--primary); transform: translate(-2px, 1px); }
    40% { text-shadow: 2px 0 var(--accent), -2px 0 var(--primary); transform: translate(2px, -1px); }
    60% { text-shadow: -2px 0 var(--accent), 2px 0 var(--primary); transform: translate(-1px, 2px); }
    80% { text-shadow: 2px 0 var(--accent), -2px 0 var(--primary); transform: translate(1px, -2px); }
    100% { text-shadow: -2px 0 var(--accent), 2px 0 var(--primary); transform: translate(0); }
}
.logo:hover { color: white; animation: logo-hover-glitch 0.2s infinite linear; }

/* Header bar */
header {
    background: rgba(19, 19, 31, 0.95); border-bottom: 1px solid var(--border);
    position: sticky; top: 0; z-index: 100;
    backdrop-filter: blur(10px); -webkit-backdrop-filter: blur(10px);
}
.header-container {
    max-width: 1200px; margin: 0 auto; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; height: 60px;
}
.logo { font-family: 'Space Mono', monospace; font-size: 1.4rem; font-weight: 700; color: var(--primary); text-decoration: none; text-shadow: 0 0 15px var(--primary-glow); }
.logo-accent { color: var(--accent); text-shadow: 0 0 15px var(--accent-glow); }
/* Fulmine del logo: SVG al posto dell'emoji ⚡ (9 lug). PIENO e verde-brand: eredita --primary dal
   .logo (e dalla card-switcher current, anch'essa --primary). fill:currentColor riempie il polygon
   (la primitiva icona è a solo tratto); stroke:none toglie il contorno. Dimensione in em → scala col
   font sia nel logo header (1.4rem) sia nella card (0.95rem). */
.logo-bolt { display: inline-flex; align-items: center; vertical-align: -0.14em; margin-right: 0.12em; }
.logo-bolt svg { width: 0.95em; height: 0.95em; fill: currentColor; stroke: none; }

#primary-nav { display: flex; gap: 4px; }

/* ===== HAMBURGER BUTTON (solo mobile) ===== */
.menu-toggle {
    display: none;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    width: 44px; height: 44px;
    cursor: pointer;
    position: relative;
    padding: 0;
    transition: border-color 0.3s ease;
}
.menu-toggle:hover { border-color: var(--primary); }
.menu-toggle .bar {
    display: block;
    width: 22px; height: 2px;
    background: var(--primary);
    margin: 5px auto;
    transition: all 0.3s ease;
    box-shadow: 0 0 6px var(--primary-glow);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
    background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(2) {
    opacity: 0; transform: scaleX(0);
}
.menu-toggle[aria-expanded="true"] .bar:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
    background: var(--accent); box-shadow: 0 0 6px var(--accent-glow);
}

/* Backdrop dietro al drawer.
   Pattern di casa (come .gz-entry in entry-notice.css): la base è VISIBILE e
   l'attributo [hidden] (specificità più alta) la spegne — il JS toggla .hidden
   (con delay 300ms in chiusura → fade in E out preservati). Prima era display:none
   in base + .open sulla sola opacity → il backdrop non veniva MAI renderizzato,
   quindi non intercettava il tap-fuori (bug QA A, 1 lug). */
.menu-backdrop {
    display: block;
    position: fixed; inset: 0;
    background: rgba(10, 10, 18, 0.7);
    backdrop-filter: blur(4px);
    -webkit-backdrop-filter: blur(4px);
    z-index: 98;
    opacity: 0; transition: opacity 0.3s ease;
}
.menu-backdrop[hidden] { display: none; }
.menu-backdrop.open { opacity: 1; }

/* Nav links */
#primary-nav a {
    color: var(--text-secondary); padding: 8px 16px; border-radius: var(--radius-sm); font-weight: 500; font-size: 0.9rem; transition: all 0.3s ease; position: relative; overflow: hidden;
}
#primary-nav a::after {
    content: ''; position: absolute; bottom: 4px; left: 50%; width: 0; height: 2px; background: var(--primary); transition: all 0.3s ease; transform: translateX(-50%); box-shadow: 0 0 10px var(--primary-glow);
}
#primary-nav a:hover::after { width: 60%; }
#primary-nav a:hover { background: var(--surface-light); }

/* Colori hover personalizzati per ogni sezione (da tokenizzare allo Step 4) */
#primary-nav a[href*="index"]:hover, #primary-nav a[href="/"]:hover { color: var(--primary); }
#primary-nav a[href*="index"]:hover::after, #primary-nav a[href="/"]:hover::after { background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

#primary-nav a[href*="polli"]:hover { color: var(--accent); }
#primary-nav a[href*="polli"]:hover::after { background: var(--accent); box-shadow: 0 0 10px var(--accent-glow); }

#primary-nav a[href*="affari"]:hover { color: var(--primary); }
#primary-nav a[href*="affari"]:hover::after { background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

#primary-nav a[href*="flop"]:hover { color: #ff4444; }
#primary-nav a[href*="flop"]:hover::after { background: #ff4444; box-shadow: 0 0 10px rgba(255, 68, 68, 0.4); }

#primary-nav a[href*="rumors"]:hover { color: #c084fc; }
#primary-nav a[href*="rumors"]:hover::after { background: #c084fc; box-shadow: 0 0 10px rgba(192, 132, 252, 0.4); }

#primary-nav a.nav-dietro:hover { color: var(--accent); }
#primary-nav a.nav-dietro:hover .glitch-word { color: var(--primary); }
#primary-nav a.nav-dietro:hover::after { background: linear-gradient(90deg, var(--accent) 50%, var(--primary) 50%); box-shadow: 0 0 10px var(--accent-glow), 0 0 10px var(--primary-glow); }

#primary-nav a.active { color: var(--primary); text-shadow: 0 0 10px var(--primary-glow); }
#primary-nav a.active::after { width: 60%; background: var(--primary); box-shadow: 0 0 10px var(--primary-glow); }

/* ===== MOBILE: hamburger drawer ===== */
@media (max-width: 768px) {
    .header-container {
        flex-direction: row;
        justify-content: space-between;
        height: 60px;
        padding: 0 16px;
    }
    /* z-index 100 = sopra il drawer (#primary-nav z99) e il backdrop (z98),
       sotto lo switcher (z101, non si sovrappone): così la "X" torna
       cliccabile/visibile invece di finire sotto il pannello (bug QA A). */
    .menu-toggle { display: block; z-index: 100; }

    #primary-nav {
        position: fixed;
        top: 0; right: 0;
        height: 100vh; height: 100dvh;
        width: min(85vw, 320px);
        background: var(--surface);
        border-left: 1px solid var(--accent);
        box-shadow: -10px 0 40px rgba(0,0,0,0.6), inset 4px 0 0 var(--accent);
        flex-direction: column;
        gap: 0;
        padding: 80px 24px 24px;
        z-index: 99;
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.7, 0, 0.3, 1);
        overflow-y: auto;
    }
    #primary-nav.open { transform: translateX(0); }

    /* Scanline reveal sul drawer */
    #primary-nav::before {
        content: '';
        position: absolute; inset: 0;
        background: repeating-linear-gradient(
            0deg,
            transparent, transparent 3px,
            rgba(255, 0, 128, 0.03) 3px, rgba(255, 0, 128, 0.03) 4px
        );
        pointer-events: none;
    }

    #primary-nav a {
        padding: 14px 16px;
        font-size: 1rem;
        border-bottom: 1px solid var(--border);
        border-radius: 0;
        font-family: 'Space Mono', monospace;
        opacity: 0;
        transform: translateX(20px);
        transition: opacity 0.3s ease, transform 0.3s ease, background 0.3s ease, color 0.3s ease;
    }
    #primary-nav.open a {
        opacity: 1;
        transform: translateX(0);
    }
    /* Stagger reveal */
    #primary-nav.open a:nth-child(1) { transition-delay: 0.08s; }
    #primary-nav.open a:nth-child(2) { transition-delay: 0.14s; }
    #primary-nav.open a:nth-child(3) { transition-delay: 0.20s; }
    #primary-nav.open a:nth-child(4) { transition-delay: 0.26s; }
    #primary-nav.open a:nth-child(5) { transition-delay: 0.32s; }
    #primary-nav.open a:nth-child(6) { transition-delay: 0.38s; }

    #primary-nav a::after { display: none; }
    #primary-nav a:hover { background: var(--surface-light); padding-left: 20px; }

    /* Numerazione decorativa stile terminale */
    #primary-nav a::before {
        content: '0' counter(navitem) ' /';
        counter-increment: navitem;
        color: var(--text-muted-strong);
        font-size: 0.75rem;
        margin-right: 12px;
        opacity: 0.6;
    }
    #primary-nav { counter-reset: navitem; }
}