/* base.css — GlitchZone · fondazione SEMPRE caricata (Step 2.1)
   ------------------------------------------------------------------
   Estratto UNA volta dal <style> inline duplicato delle 9 pagine v13
   (sorgente: glitchzone-statico/*_v13.html · mappa: §5).

   VERSIONE CANONICA: i token di testo sono nella variante ACCESSIBILE (AA)
   — #c8c8dc / #9090b0 / #a8a8c8 — non nei vecchi #b0b0c8 / #606080 presenti
   in 5 pagine su 9 (drift verificato). Riferimento: index_v13 + 404_v13.

   Tema INDIPENDENTE: ZERO @import/link verso techzone (firewall: si copia,
   non si linka).

   AMBITO: solo la fondazione (token, reset, body, bg-noise, link, a11y,
   prefers-reduced-motion). Header/nav/footer/glitch-mode/card/newsletter =
   component (micro-step 2.2→). Il sistema colori-sezione (--cat-color per
   Polli/Affari/Flop/Rumors) si aggiunge allo Step 4 come override su body-class
   (i valori reali sono già censiti dalle 4 pagine categoria). */

:root {
    /* Palette neon */
    --primary: #00ff88;
    --primary-glow: rgba(0, 255, 136, 0.4);
    --accent: #ff0080;
    --accent-glow: rgba(255, 0, 128, 0.4);
    --yellow: #ffcc00;
    --yellow-glow: rgba(255, 204, 0, 0.3);
    --glitch-cyan: #00ffff;                       /* accento "colpo affare" (Affari): stacca dal verde, NON è il blu-brand TZ */
    --glitch-cyan-glow: rgba(0, 255, 255, 0.35);

    /* Superfici */
    --surface: #13131f;
    --surface-light: #1e1e2e;
    --background: #0a0a12;

    /* Testo — variante AA (alzata per contrasto: era #b0b0c8 / #606080) */
    --text-primary: #ffffff;
    --text-secondary: #c8c8dc;
    --text-muted: #9090b0;
    --text-muted-strong: #a8a8c8;    /* disclaimer/meta su superfici scure */

    /* Bordi / stato */
    --border: #2a2a40;
    --error: #ff4444;

    /* Raggi */
    --radius-sm: 8px;
    --radius-md: 12px;
    --radius-lg: 16px;

    /* Glow di stato (serve a --cat-glow della sezione Flop) */
    --error-glow: rgba(255, 68, 68, 0.4);

    /* Colore-sezione: default neutro. Gli archivi gz_sezione lo sovrascrivono
       per sezione su body.term-* (sotto, Step 4). */
    --cat-color: var(--primary);
    --cat-glow: var(--primary-glow);
    --cat-soft: rgba(0, 255, 136, 0.1); /* sezione a bassa opacità (hover/bg soft); default = primary */
    --cat-soft-strong: rgba(0, 255, 136, 0.15); /* sezione a opacità media (hover intensificato, es. .translation:hover) */
}

/* ── Colore-sezione per l'archivio gz_sezione (Step 4) ──
   WordPress mette già `term-<slug>` sul <body> negli archivi di tassonomia,
   quindi gli override per sezione sono CSS puro (zero PHP). Valori censiti
   byte-fedeli dalle 4 pagine categoria v13. */
body.term-polli  { --cat-color: var(--accent);  --cat-glow: var(--accent-glow);      --cat-soft: rgba(255, 0, 128, 0.1);   --cat-soft-strong: rgba(255, 0, 128, 0.15); }
body.term-affari { --cat-color: var(--primary); --cat-glow: var(--primary-glow);     --cat-soft: rgba(0, 255, 136, 0.1);   --cat-soft-strong: rgba(0, 255, 136, 0.15); }
body.term-flop   { --cat-color: var(--error);   --cat-glow: var(--error-glow);       --cat-soft: rgba(255, 68, 68, 0.1);   --cat-soft-strong: rgba(255, 68, 68, 0.15); }
body.term-rumors { --cat-color: #c084fc;        --cat-glow: rgba(192, 132, 252, 0.4); --cat-soft: rgba(192, 132, 252, 0.1); --cat-soft-strong: rgba(192, 132, 252, 0.15); }

* { margin: 0; padding: 0; box-sizing: border-box; }

/* Contenitore principale del <main> (≈ il `main` dello statico v13; estratto in
   4.1 — mancava dallo Step 2). Tutte le pagine GZ usano <main class="container">. */
.container { max-width: 1200px; margin: 0 auto; padding: 32px 24px; }

/* Fix overflow orizzontale su mobile: il drawer del menu (#primary-nav, position:fixed,
   translateX(100%) off-canvas a destra) creava ~320px di scroll orizzontale (i figli
   position:fixed sfuggono al clip di body). Soluzione: overflow-x:CLIP su html E body
   (sotto). clip ≠ hidden: NON crea uno scroll-container → l'header sticky resta intatto
   (testato: body{overflow-x:hidden}+html clip ROMPE lo sticky; clip su entrambi no).
   overflow-y resta visible su entrambi. */
html { overflow-x: clip; }

body {
    font-family: 'Outfit', sans-serif;
    background: var(--background);
    color: var(--text-primary);
    line-height: 1.6;
    overflow-x: clip;   /* clip, non hidden: sticky-safe (vedi nota su html sopra) */
    position: relative;
}

/* TV STATIC BACKGROUND */
@keyframes noiseAnimation {
    0% { transform: translate(0,0); } 10% { transform: translate(-5%,-5%); }
    20% { transform: translate(-10%,5%); } 30% { transform: translate(5%,-10%); }
    40% { transform: translate(-5%,15%); } 50% { transform: translate(-10%,5%); }
    60% { transform: translate(15%,0); } 70% { transform: translate(0,10%); }
    80% { transform: translate(-15%,0); } 90% { transform: translate(10%,5%); }
    100% { transform: translate(5%,0); }
}
.bg-noise {
    position: fixed; top: -50%; left: -50%; width: 200%; height: 200%;
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
    opacity: 0.04; pointer-events: none; z-index: -1; animation: noiseAnimation 0.5s steps(4) infinite;
}
main, header, footer { position: relative; z-index: 1; }

a { color: var(--primary); text-decoration: none; transition: all 0.3s ease; }
a:hover { color: white; text-shadow: 0 0 10px var(--primary-glow); }

/* ===== A11Y: Focus visibile per navigazione da tastiera ===== */
a:focus-visible,
button:focus-visible,
input:focus-visible {
    outline: 2px solid var(--primary);
    outline-offset: 3px;
    border-radius: 4px;
}
nav a:focus-visible { outline-offset: 0; outline: 2px solid var(--primary); }

/* Skip link per screen reader / tastiera */
.skip-link {
    position: absolute; top: -100%; left: 8px; /* -100% (non -40px): nasconde del tutto a prescindere dall'altezza resa ~42px → niente sliver verde in cima (pattern robusto di techzone) */
    background: var(--primary); color: var(--background);
    padding: 8px 16px; border-radius: var(--radius-sm);
    font-family: 'Space Mono', monospace; font-weight: 700;
    z-index: 1000; transition: top 0.2s ease;
}
.skip-link:focus { top: 8px; color: var(--background); text-shadow: none; }

/* Utility a11y: nascondi visivamente ma resta leggibile da screen reader */
.visually-hidden {
    position: absolute !important;
    width: 1px; height: 1px;
    padding: 0; margin: -1px; overflow: hidden;
    clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

/* ── Icona SVG inline: primitiva UNIVERSALE (Step 5.0d) ──
   Estratta byte-fedele dallo statico v13. Le icone usano stroke="currentColor":
   il colore lo decide il contesto (es. la reazione card segue --cat-color). Il
   sizing è di contesto (listing.css / single-base.css), qui solo display+reset. */
.icon-svg {
    display: inline-flex; align-items: center; justify-content: center;
    vertical-align: middle; flex-shrink: 0; line-height: 0;
}
.icon-svg svg { display: block; width: 1em; height: 1em; } /* default 1em: senza un sizing di contesto un <svg> non dimensionato collasserebbe a 0x0 nel flex (icona invisibile) → le regole per-contesto lo sovrascrivono */

/* ── Kicker satirico "// ..." (componente CONDIVISO: home/archivio/single) ──
   Etichetta sopra il titolo. Il "//" lo mette il CSS → l'editor scrive solo il testo
   (campo kicker_tag sulle pollate / tag_label sui rumor). Stile mono muted, byte-fedele
   allo statico v13. Spostato qui da home.css: una definizione sola, vale ovunque. */
.article-category {
    font-size: 0.7rem; font-weight: 700; text-transform: uppercase; letter-spacing: 1px;
    font-family: 'Space Mono', monospace; display: block; margin-bottom: 5px; color: var(--text-muted-strong);
}
.article-category::before { content: '// '; }

/* ── Badge TIPO-CONTENUTO "NEWS" (componente CONDIVISO: archivio/home; poi single) ──
   Marca la NEWS nella griglia MISTA dove news/pollate/rumor convivono (modello B, 1 lug).
   Angolo OPPOSTO a .article-tag (top-left = tipo-prodotto) e stile OUTLINE — stessa famiglia
   (pill mono uppercase, colore-sezione via --cat-color) ma a contorno invece che pieno:
   l'occhio separa "tipo prodotto" (pieno) da "tipo contenuto NEWS" (contorno). Fondo scuro
   translucido = leggibile su ogni copertina. Colore = --cat-color: sezione sull'archivio,
   default verde in home (come le altre meta). Una definizione sola qui — niente copie che driftano. */
.article-type-badge {
    position: absolute; top: 10px; right: 10px; z-index: 3;
    background: rgba(0, 0, 0, 0.55); color: var(--cat-color); border: 1px solid var(--cat-color);
    padding: 4px 10px; border-radius: 15px; font-family: 'Space Mono', monospace;
    font-size: 0.6rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.5px;
    box-shadow: 0 0 5px var(--cat-glow);
}

/* ════════════ DISCLAIMER satira (canonico, condiviso da TUTTE le pagine) ════════════ */
.disclaimer {
    background: #111; border-left: 3px solid var(--text-muted-strong);
    padding: 16px 20px; margin: 32px 0; border-radius: 0 var(--radius-md) var(--radius-md) 0;
    font-size: 0.8rem; color: var(--text-muted-strong); text-align: left;
}
.disclaimer strong { color: var(--yellow); }
.disclaimer .icon-svg { vertical-align: -3px; margin-right: 4px; }
.disclaimer .icon-svg svg { width: 16px; height: 16px; }

/* Riduce il noise di sfondo su mobile per leggibilità */
@media (max-width: 640px) {
    .bg-noise { opacity: 0.02; }
}

/* Rispetta prefers-reduced-motion: spegne le animazioni globali (incl. bg-noise) */
@media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}
