/* ============================================================
   Halloween theme - layered on top of midnight.css.
   Loaded by includes/header.php ONLY inside the window set in
   includes/seasonal_promo.php, so it switches itself off afterwards.
   ============================================================ */

/* Accent: pumpkin orange instead of cyan, site-wide. midnight.css drives
   colour through these tokens, so buttons, links and badges all follow. */
body.midnight-theme.halloween {
  --rgb-primary: 249 115 22; --rgb-primary-light: 251 146 60; --rgb-primary-dark: 234 88 12;
  --rgb-accent: 249 115 22;  --rgb-accent-light: 251 146 60;  --rgb-accent-dark: 234 88 12;
  --color-primary: #f97316; --color-primary-light: #fb923c; --color-primary-dark: #ea580c;
  --color-accent: #f97316;
  --gradient-primary: linear-gradient(120deg,#f97316,#fb923c);
  --gradient-hero: linear-gradient(120deg,#0b0712,#1c1027);
  --rgb-aurora-a: 76 29 149; --rgb-aurora-b: 41 18 66;
}

/* ---------- Sale banner under the navigation ---------- */
.hw-banner {
  position: relative; z-index: 30; display: flex; align-items: center; justify-content: center;
  gap: 12px; flex-wrap: wrap; padding: 10px 16px; text-align: center; text-decoration: none;
  background: linear-gradient(90deg,#1c1027 0%,#4c1d95 45%,#7c2d12 100%);
  border-bottom: 1px solid #f9731655; color: #fde7d3 !important; font-size: 14px;
}
.hw-banner strong { color: #fff; }
.hw-banner code {
  font-family: ui-monospace, Menlo, Consolas, monospace; font-weight: 800; letter-spacing: .1em;
  color: #1c1027; background: #f97316; padding: 2px 8px; border-radius: 6px;
}
.hw-banner .hw-ends {
  font-size: 12px; font-weight: 700; color: #fb923c; border: 1px solid #f9731666;
  padding: 2px 10px; border-radius: 999px;
}
.hw-banner .hw-pumpkin { width: 22px; height: 22px; animation: hw-bob 3s ease-in-out infinite; }
.hw-banner:hover { filter: brightness(1.08); }

/* ---------- Homepage hero: orange moon and a few bats ---------- */
body.halloween .midnight-home-hero { overflow: hidden; }
body.halloween .midnight-home-hero::after {
  content: ""; position: absolute; top: 6%; right: 5%; width: 190px; height: 190px;
  pointer-events: none; z-index: 3;
  background: url("../images/halloween-pumpkin.svg") center / contain no-repeat;
  filter: drop-shadow(0 10px 24px rgba(0,0,0,.55));
  animation: hw-flicker 3.2s ease-in-out infinite;
}
@keyframes hw-flicker {
  0%,100% { filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)) brightness(1); transform: rotate(-3deg); }
  45%     { filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)) brightness(1.12); transform: rotate(3deg); }
  55%     { filter: drop-shadow(0 10px 24px rgba(0,0,0,.55)) brightness(.95); }
}
body.halloween .midnight-home-hero .hw-bats {
  position: absolute; inset: 0; pointer-events: none; z-index: 2;
  background-repeat: no-repeat;
  background-image:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -12 48 24'%3E%3Cpath fill='%23110a1a' d='M0 -4 C3 -8 6 -8 8 -5 C12 -10 18 -10 22 -6 C18 -4 16 0 17 4 C13 1 9 2 7 6 C5 3 2 3 0 6 C-2 3 -5 3 -7 6 C-9 2 -13 1 -17 4 C-16 0 -18 -4 -22 -6 C-18 -10 -12 -10 -8 -5 C-6 -8 -3 -8 0 -4 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -12 48 24'%3E%3Cpath fill='%23110a1a' d='M0 -4 C3 -8 6 -8 8 -5 C12 -10 18 -10 22 -6 C18 -4 16 0 17 4 C13 1 9 2 7 6 C5 3 2 3 0 6 C-2 3 -5 3 -7 6 C-9 2 -13 1 -17 4 C-16 0 -18 -4 -22 -6 C-18 -10 -12 -10 -8 -5 C-6 -8 -3 -8 0 -4 Z'/%3E%3C/svg%3E"),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='-24 -12 48 24'%3E%3Cpath fill='%231c1027' d='M0 -4 C3 -8 6 -8 8 -5 C12 -10 18 -10 22 -6 C18 -4 16 0 17 4 C13 1 9 2 7 6 C5 3 2 3 0 6 C-2 3 -5 3 -7 6 C-9 2 -13 1 -17 4 C-16 0 -18 -4 -22 -6 C-18 -10 -12 -10 -8 -5 C-6 -8 -3 -8 0 -4 Z'/%3E%3C/svg%3E");
  background-size: 64px 32px, 44px 22px, 34px 17px;
  background-position: 84% 22%, 72% 12%, 92% 38%;
  animation: hw-flutter 4s ease-in-out infinite;
}

/* ---------- Checkout: the BOO40 button in night purple + pumpkin ---------- */
body.halloween .fall-promo-btn {
  background: linear-gradient(120deg,#1c1027 0%,#5b21b6 45%,#f97316 100%) !important;
}
body.halloween .fall-promo-btn .fp-apply { color: #5b21b6 !important; }
body.halloween .fall-promo-btn .fp-dot { border-color: #f97316; }

@keyframes hw-bob { 0%,100% { transform: translateY(0) rotate(-4deg); } 50% { transform: translateY(-2px) rotate(4deg); } }
@keyframes hw-flutter { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-8px); } }
@media (prefers-reduced-motion: reduce) {
  .hw-banner .hw-pumpkin, body.halloween .midnight-home-hero .hw-bats,
  body.halloween .midnight-home-hero::after { animation: none; }
}
@media (max-width: 640px) {
  body.halloween .midnight-home-hero::after { width: 110px; height: 110px; top: 4%; right: 4%; }
  .hw-banner { font-size: 13px; gap: 8px; }
}