/* components/site-switch.css — GlitchZone · switcher di sito (caret accanto al logo)
   ------------------------------------------------------------------
   Caret a DESTRA del wordmark → tendina coi due gemelli (GlitchZone corrente + Tech-Zone).
   È il concept "Double Agent" reso UI permanente e discreta (BRIEFING: i due siti si
   rimbalzano). Convive coi rimandi esistenti (entry-modal, tz-promo) come canale CALMO,
   passivo, "per chi cerca" — non spinge.

   STILE "scritta" COPIATO dal banner tz-promo (css/components/techzone-promo.css, che al
   proprietario piace): wordmark mono + tagline; ogni sito nel SUO colore — Tech-Zone in BLU
   (#5b9bf8, il colore dell'altro sito: nella palette GZ il blu non esiste → "stacca, sito
   serio"), GlitchZone in verde. keyframe gzSwitchGlitch = copia di tzPromoGlitch (firewall:
   si copia, non si linka). Dipendenza: gz-base. Caricato SEMPRE (globale).

   ⚠️ Voce: label/tagline = PLACEHOLDER NEUTRI (quasi-fattuali) → rifinibili in sessione-voce.
   ⚠️ Link Tech-Zone: href='#' finché non c'è l'URL reale (Step 8 cross-promo).
   NB Step 1 (guscio): la tendina è resa VISIBILE dal CSS per curare il look. Lo Step 2
   aggiunge default-chiuso + JS (IIFE #7: toggle/aria-expanded/ESC/click-fuori/focus). */

/* Blocco brand: logo + caret + tendina, ancorati come un solo blocco a sinistra dell'header. */
.gz-brand { position: relative; display: flex; align-items: center; gap: 6px; }

/* Caret trigger — controllo a sé, separato dal link-logo→home. */
.gz-switch-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    background: transparent;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--primary);
    cursor: pointer;
    transition: border-color 0.2s ease, color 0.2s ease, box-shadow 0.2s ease, background 0.2s ease;
}
.gz-switch-toggle:hover {
    border-color: var(--primary);
    box-shadow: 0 0 12px var(--primary-glow);
    background: var(--surface-light);
}
.gz-switch-toggle:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.gz-switch-caret { transition: transform 0.25s ease; }
.gz-switch-toggle[aria-expanded="true"] .gz-switch-caret { transform: rotate(180deg); }

/* Tendina (dropdown): pannello scuro sotto il brand. */
.gz-site-switch {
    position: absolute;
    top: calc(100% + 10px);
    left: 0;
    z-index: 101;                       /* sopra l'header sticky (z 100) */
    min-width: 240px;
    padding: 10px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.55);
    display: flex;
    flex-direction: column;
    gap: 3px;
}
.gz-site-switch[hidden] { display: none; }                                    /* chiusa di default (Step 2); il caret la apre */
.gz-site-switch:not([hidden]) { animation: gzSwitchOpen 0.16s ease both; }
@keyframes gzSwitchOpen { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: translateY(0); } }
.gz-site-switch__label {
    margin: 2px 4px 2px;
    font-family: 'Space Mono', monospace;
    font-size: 0.62rem;
    letter-spacing: 2px;
    text-transform: uppercase;
    color: var(--text-muted);
}

/* Site card (stile copiato da .tz-promo-link: wordmark mono + tagline). */
.gz-site-card {
    display: flex;
    flex-direction: column;
    gap: 3px;
    padding: 11px 14px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease, background 0.2s ease;
}
.gz-site-card__logo { font-family: 'Space Mono', monospace; font-size: 0.95rem; font-weight: 700; line-height: 1; }
.gz-site-card__tag  { font-family: 'Space Mono', monospace; font-size: 0.66rem; font-weight: 500; color: var(--text-muted); }

/* Card corrente = GlitchZone (verde, palette GZ), spenta/non cliccabile. */
.gz-site-card--current { cursor: default; opacity: 0.7; }   /* corrente: niente box, solo attenuata */
.gz-site-card--current .gz-site-card__logo { color: var(--primary); text-shadow: 0 0 12px var(--primary-glow); }
.gz-site-card--current .gz-site-card__accent { color: var(--accent); }   /* "Zone" magenta come il logo header */

/* Card gemello = Tech-Zone (BLU dell'altro sito, copiato dal banner tz-promo). */
.gz-site-card--tz:hover { background: color-mix(in srgb, #3b82f6 14%, var(--surface)); }   /* solo highlight all'hover, niente box fisso */
.gz-site-card__logo--tz { color: #5b9bf8; text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); }
.gz-site-card__accent--tz { color: var(--text-primary); }   /* "-Zone" neutro (due-tono leggibile) */
.gz-site-card--tz:hover .gz-site-card__logo--tz { animation: gzSwitchGlitch 0.3s steps(2) 1; }
.gz-site-card:focus-visible { outline: 2px solid #5b9bf8; outline-offset: 2px; }

@keyframes gzSwitchGlitch {
    0%   { text-shadow: 2px 0 var(--accent), -2px 0 #00ffff; }
    50%  { text-shadow: 1px -1px var(--accent), -1px 1px #00ffff; }
    100% { text-shadow: 0 0 12px rgba(59, 130, 246, 0.6); }
}

@media (prefers-reduced-motion: reduce) {
    .gz-switch-caret { transition: none; }
    .gz-site-switch:not([hidden]) { animation: none; }
    .gz-site-card--tz:hover .gz-site-card__logo--tz { animation: none; }
}