/* =====================================================================
   SEASONAL: Halloween / fall accents. Loaded only when SEASON = 'halloween'
   in /workspace/callsaulco-src/build.py (adds <body class="halloween">).
   To turn off: set SEASON = '' and re-run build.py. Safe to delete this file.
   ===================================================================== */
body.halloween{--orange:#e8741c;--orange-l:#f5a35a}

/* seasonal banner under the header */
.halloween .hw-banner{display:flex;align-items:center;justify-content:center;gap:.6rem;flex-wrap:wrap;text-align:center;
  padding:.6rem 1rem;font-size:.9rem;color:#f3e6d6;border-bottom:1px solid #4a2a10;
  background:linear-gradient(90deg,#140b05,#2a1407 50%,#140b05)}
.halloween .hw-banner strong{color:var(--orange-l)}
.halloween .hw-banner a{color:var(--gold-l);font-weight:600;text-decoration:none;white-space:nowrap}
.halloween .hw-banner a:hover{text-decoration:underline}
.hw-pumpkin{width:22px;height:22px;flex:none}

/* hero: warm candlelight glow + a few bats drifting near the top */
.halloween .hero::after{background:
  radial-gradient(ellipse at 15% 100%,rgba(232,116,28,.22),transparent 55%),
  linear-gradient(180deg,rgba(11,11,12,.35) 0%,rgba(11,11,12,.55) 45%,rgba(11,11,12,.97) 100%)}
.halloween .hero::before{content:"";position:absolute;z-index:1;pointer-events:none;top:3.2rem;left:4%;width:min(340px,60%);height:110px;opacity:.55;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 340 110'%3E%3Cdefs%3E%3Cpath id='b' d='M0 6c4-1 7 1 9 4 1-3 3-4 5-4l1-3 1 3 1-3 1 3c2 0 4 1 5 4 2-3 5-5 9-4-3 1-5 4-5 7-2-2-5-2-7 0-1-2-2-2-4-1-2-1-3-1-4 1-2-2-5-2-7 0 0-3-2-6-5-7z' fill='%23111'/%3E%3C/defs%3E%3Cuse href='%23b' transform='translate(20 40) scale(1.6)'/%3E%3Cuse href='%23b' transform='translate(120 12) scale(1.1)'/%3E%3Cuse href='%23b' transform='translate(210 58) scale(.9)'/%3E%3Cuse href='%23b' transform='translate(290 22) scale(.7)'/%3E%3C/svg%3E") no-repeat center/contain;
  filter:drop-shadow(0 0 6px rgba(232,116,28,.45));animation:hw-drift 9s ease-in-out infinite alternate}
@keyframes hw-drift{from{transform:translate(0,0)}to{transform:translate(18px,-8px)}}
@media(prefers-reduced-motion:reduce){.halloween .hero::before{animation:none}}

/* subtle cobweb in the corner of feature banners */
.halloween .banner{position:relative;overflow:hidden}
.halloween .banner::before{content:"";position:absolute;top:0;right:0;width:130px;height:130px;opacity:.18;pointer-events:none;
  background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100' fill='none' stroke='%23f3d98b' stroke-width='.8'%3E%3Cpath d='M100 0 0 100M100 0 30 100M100 0 0 30M100 0 60 100M100 0 0 60'/%3E%3Cpath d='M88 0q2 10 12 12M74 0q4 22 26 26M58 0q6 36 42 42M40 0q8 54 60 60M20 0q10 72 80 80'/%3E%3C/svg%3E") no-repeat top right/contain}

/* orange accent touches (brand stays black + gold) */
.halloween .eyebrow{color:var(--orange-l)}
.halloween .step{border-top-color:var(--orange)}
.halloween .card:hover{border-color:var(--orange)}
.halloween ul.check li::before{color:var(--orange)}
.halloween .lucid-av{border-color:var(--orange)}
.halloween .banner{border-color:#8a4a16}
@media(max-width:639px){.halloween .hw-banner{font-size:.8rem;padding:.5rem .7rem}.halloween .hero::before{top:2.6rem;height:80px}}
.halloween .hw-short{display:none}
@media(max-width:639px){.halloween .hw-long{display:none}.halloween .hw-short{display:inline}.halloween .hw-banner{flex-wrap:nowrap;white-space:nowrap;gap:.4rem;font-size:.76rem}.hw-pumpkin{width:18px;height:18px}}