/*
 * Tema Halloween (09/10/2026) — carregado por includes/favicon.php só quando
 * system_settings.site_theme = 'halloween'. Camada ADITIVA: não reescreve o CSS
 * das páginas, só troca os tokens de destaque e acrescenta decoração.
 *
 * `html:root` tem especificidade maior que o `:root` das páginas, então vence
 * independentemente da ordem em que o <style> da página aparece.
 */
html:root {
    --accent: #ff7a1a;
    --accent-bright: #ffa24c;
    --accent-deep: #c2410c;
    --zh-purple: #7c3aed;
    --zh-glow: rgba(255, 122, 26, 0.35);
}

::selection { background: #ff7a1a; color: #1a0b00; }

/* Barra de rolagem em laranja (Chromium/WebKit e Firefox). */
html { scrollbar-color: #c2410c #0a0e1a; }
::-webkit-scrollbar-thumb { background: #c2410c; }

/* Brilho laranja sob a navbar compartilhada. */
#siteNav, nav.nav { box-shadow: 0 1px 0 rgba(255, 122, 26, 0.35), 0 8px 30px -12px var(--zh-glow); }

/* ---- Decoração (montada por theme.js; tudo aria-hidden e sem cliques) ---- */
.zh-deco { position: fixed; inset: 0; pointer-events: none; z-index: 40; overflow: hidden; }
.zh-deco svg { display: block; max-width: none; max-height: none; } /* preflight do Tailwind */

.zh-web { position: absolute; top: 0; width: clamp(90px, 12vw, 170px); height: auto; opacity: 0.55; }
.zh-web--l { left: 0; }
.zh-web--r { right: 0; transform: scaleX(-1); }

.zh-fog {
    position: absolute; left: 0; right: 0; bottom: 0; height: 120px;
    background:
        radial-gradient(60% 100% at 20% 100%, rgba(124, 58, 237, 0.16), transparent 70%),
        radial-gradient(60% 100% at 80% 100%, rgba(255, 122, 26, 0.12), transparent 70%);
}

.zh-bat { position: absolute; left: -60px; width: 34px; height: auto; opacity: 0; color: #1b1027;
          filter: drop-shadow(0 0 6px rgba(255, 122, 26, 0.45)); animation: zh-fly 14s linear forwards; }
@keyframes zh-fly {
    0%   { transform: translate(0, 0) scale(.9);       opacity: 0; }
    8%   { opacity: .85; }
    50%  { transform: translate(55vw, -40px) scale(1); }
    92%  { opacity: .85; }
    100% { transform: translate(110vw, 20px) scale(.9); opacity: 0; }
}
.zh-bat path { animation: zh-flap .28s ease-in-out infinite alternate; transform-box: fill-box; transform-origin: 50% 50%; }
@keyframes zh-flap { from { transform: scaleY(1); } to { transform: scaleY(.55); } }

/* Telas pequenas: só a névoa, sem teias ocupando espaço útil. */
@media (max-width: 767px) {
    .zh-web { display: none; }
    .zh-fog { height: 70px; }
}

@media print {
    .zh-deco { display: none; }
}