/* =============================================================================
   TEMA DE NATAL — Estilos (edição especial da identidade JF).
   -----------------------------------------------------------------------------
   TUDO aqui é escopado em `html.natal` (a classe é ligada por js/xmas/xmas-config.js
   só dentro do período). Fora do Natal: ZERO efeito → o site volta 100% ao normal
   sozinho, sem nada apagado. Reversível e isolado.

   Direção: vermelho JF (âncora) + DOURADO antigo (acento premium) + verde-pinho
   (mínimo). Dourado é SÓ decorativo (borda/brilho/divisor) — nunca cor de texto,
   pra não ferir contraste. Respeita claro/escuro e prefers-reduced-motion.

   Camadas de token (design-system): primitivo → semântico → componente.
   ========================================================================== */

/* --------------------------------- TOKENS -------------------------------- */
html.natal {
  /* Primitivos natalinos */
  --x-red:         #c61c1c;             /* = vermelho JF (âncora, não invento outro) */
  --x-gold:        #c9a24b;             /* dourado antigo, premium (não amarelo) */
  --x-gold-bright: #e8c874;             /* brilho/realce do dourado */
  --x-gold-deep:   #9c7a2e;             /* dourado escuro (sombra do metal) */
  --x-pine:        #14532d;             /* verde-pinho — uso MÍNIMO */
  --x-snow:        rgba(255,255,255,0.92);

  /* Semânticos (propósito) */
  --x-accent:        var(--x-gold);
  --x-accent-strong: var(--x-gold-deep);
  --x-glow:          rgba(201,162,75,0.42);
  --x-hairline:      rgba(201,162,75,0.38);
  --x-ribbon:        linear-gradient(90deg, var(--x-gold-deep), var(--x-gold-bright) 50%, var(--x-gold-deep));

  /* Componentes (aplicação) */
  --x-divider:   linear-gradient(90deg, transparent, var(--x-gold), transparent);
  --x-focus:     0 0 0 4px var(--x-glow);
  --x-card-edge: var(--x-hairline);
}

/* Dark mode: dourado um tom mais claro pra manter o brilho no escuro. */
html.natal[data-theme="dark"] {
  --x-gold:        #d8b45e;
  --x-gold-bright: #f0d488;
  --x-hairline:    rgba(216,180,94,0.40);
  --x-glow:        rgba(216,180,94,0.40);
}

/* -------------------------- FRAME: fita dourada -------------------------- */
/* Uma fita fina de "embrulho de presente" no topo — sinal festivo discreto,
   não intrusivo. Fixa, fininha, atrás de tudo que é interativo. */
html.natal.natal-acentos body::before {
  content: "";
  position: fixed;
  inset: 0 0 auto 0;
  height: 3px;
  background: var(--x-ribbon);
  z-index: 9998;           /* acima do conteúdo, mas é só 3px na borda superior */
  pointer-events: none;
  opacity: 0.9;
}

/* --------------------------- ACENTO: botões ----------------------------- */
/* CTA primário ganha um leve halo dourado no hover/foco. Mantém o vermelho JF
   (cor e contraste intactos) — o dourado é só um brilho decorativo em volta. */
html.natal.natal-acentos .btn--primary {
  position: relative;
}
html.natal.natal-acentos .btn--primary:hover {
  box-shadow: var(--shadow-red, 0 8px 32px rgba(200,16,46,0.25)),
              0 0 0 1px var(--x-gold) inset,
              0 6px 22px var(--x-glow);
}
html.natal.natal-acentos .btn--primary:focus-visible {
  box-shadow: var(--x-focus);
}

/* ------------------------- ACENTO: divisor dourado ---------------------- */
/* Classe utilitária opcional pra um filete dourado onde fizer sentido
   (ex.: sob um título de seção). Não força nada — só quando aplicado. */
html.natal .x-divider {
  height: 2px;
  border: 0;
  background: var(--x-divider);
  opacity: 0.8;
}

/* ------------------------------- NEVE ----------------------------------- */
/* Container da neve (canvas via js/xmas/xmas-snow.js): tela cheia, decorativo,
   nunca bloqueia clique nem rolagem, atrás do conteúdo. */
html.natal .x-snow {
  position: fixed;
  inset: 0;
  width: 100%;
  height: 100%;
  z-index: 1;              /* acima do fundo, abaixo do conteúdo/header */
  pointer-events: none;
  display: block;
}

/* ------------------------- CRÉDITO CC-BY (rodapé) ----------------------- */
html.natal .x-credit {
  margin: 14px auto 4px;
  padding: 6px 16px;
  max-width: 920px;
  text-align: center;
  font-size: 11px;
  line-height: 1.5;
  color: inherit;                 /* herda a cor do rodapé (some no fundo) */
  opacity: 0.55;
}
html.natal .x-credit a { color: var(--x-gold); text-decoration: underline; }
html.natal .x-credit a:hover { color: var(--x-gold-bright); }

/* --------------------- FUNDO NATALINO ATRÁS DO ROBÔ --------------------- */
/* Uma sala de Natal aconchegante atrás do robô do chatbot (o canvas do robô é
   transparente, então a imagem aparece atrás; a neve fica por cima). Um leve
   escurecimento em cima e embaixo mantém o robô destacado e o título "FALE COM
   A JF" legível. Só quando o tema E o elemento `fundoRobo` estão ligados.
   Se a imagem falhar, fica a cor de fundo (o site continua funcionando). */
html.natal.natal-fundoRobo .bot3d {
  background-color: #120a07;                 /* fallback se a imagem não carregar */
  background-image:
    linear-gradient(180deg, rgba(12,7,4,0.62) 0%, rgba(12,7,4,0.30) 42%, rgba(12,7,4,0.70) 100%),
    url("../../assets/xmas/fundo-robo.webp");
  background-size: cover, cover;
  background-position: center 26%, center 26%;
  background-repeat: no-repeat, no-repeat;
}

/* ------------------- GUIRLANDA DE ÍCONES (rodapé) ----------------------- */
/* Faixa discreta de ícones natalinos no topo do rodapé (injetada por
   js/xmas/xmas-icons.js só no Natal). Poucos ícones, pequenos, com um filete
   dourado embaixo — festivo sem poluir. Decorativo (aria-hidden). */
html.natal .x-garland {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: flex-end;
  gap: clamp(20px, 5vw, 46px);
  padding: 4px 16px 20px;
  margin: 0 auto 10px;
  border-bottom: 1px solid var(--x-hairline);
}
html.natal .x-garland__icon {
  width: clamp(34px, 5vw, 54px);
  height: auto;
  filter: drop-shadow(0 6px 12px rgba(0, 0, 0, 0.40));
  transition: transform .35s ease;
  will-change: transform;
}
html.natal .x-garland__icon:hover {
  transform: translateY(-6px) rotate(-4deg) scale(1.06);
}

/* --------------------- PISCA-PISCA (topo de todas as páginas) ----------- */
/* Fio de luzes decorativo no topo. Fixo, fininho, à frente de tudo mas sem
   capturar clique. A imagem (luz.webp) repete na horizontal. */
html.natal.natal-ilustras .x-lights {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 34px;
  z-index: 9999;
  pointer-events: none;
  background: url("../../assets/xmas/icons/luz.webp") repeat-x top center;
  background-size: auto 34px;
  opacity: 0.96;
  filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.35));
}
@media (max-width: 640px) {
  html.natal.natal-ilustras .x-lights { height: 26px; background-size: auto 26px; }
}

/* -------------------- ACESSIBILIDADE: movimento reduzido ---------------- */
/* Quem pede menos movimento: sem neve e sem qualquer animação natalina. */
@media (prefers-reduced-motion: reduce) {
  html.natal .x-snow { display: none !important; }
  html.natal [class*="x-anim"] { animation: none !important; }
  html.natal .x-garland__icon { transition: none !important; }
}