/* Halloween layer (24 October to 4 November). Loads after the theme CSS.
   Every rule is scoped to html.bb-halloween. The head script sets that class
   from the visitor's own clock, so cached pages drop the look on 5 November
   without a deploy. Decorations are CSS backgrounds on pseudo-elements: no
   markup, nothing for screen readers, no pointer events, no motion. */

/* ---------- tokens ---------- */
html.bb-halloween {
  --hw-pumpkin: #ff7a1a;
  --hw-pumpkin-edge: #d9620c;
  --hw-ink: #1b0d02;            /* text on pumpkin, 7.3:1 */
  --hw-night: #120c1c;
  --hw-night-2: #1e1630;
  --hw-footer: #140f1f;         /* same fill as graveyard.svg */
  --hw-graveyard-h: 80px;

  /* Accent: burnt orange for text and rings (5.5:1 on white), pumpkin for fills. */
  --gold: #b04a00;
  --gold-2: #c25400;
  --gold-deep: #8a3a00;
  --gold-ink: #ffffff;
  --gold-border: #b04a00;
  --gold-glow: rgba(255, 122, 26, .16);
  --gold-glow-strong: rgba(255, 122, 26, .26);
  --btn-fill: var(--hw-pumpkin);
  --code-fg: #b04a00;
}

html.bb-halloween[data-theme="dark"] {
  --bg0: #0c0911;
  --bg1: #110d18;
  --panel: rgba(23, 18, 33, .86);
  --panel-solid: #171221;
  --panel-2: #1d1729;
  --sunk: #0a0710;
  --veil-rgb: 12, 9, 17;
  --gold: #ff9a4d;              /* 9.5:1 on bg */
  --gold-2: #ffab66;
  --gold-deep: #b04a00;
  --gold-ink: #1b0d02;
  --gold-border: #ff9a4d;
  --code-fg: #ff9a4d;
}

/* Night scenes: heroes, CTA band, featured plan and footer, in both modes.
   Overrides the theme's always-dark scopes (.band, .plan.featured, .site-footer). */
html.bb-halloween .bb-home-hero,
html.bb-halloween .bb-bot-hero,
html.bb-halloween .band,
html.bb-halloween .plan.featured,
html.bb-halloween .site-footer {
  color-scheme: dark;
  --bg0: var(--hw-night);
  --bg1: #171024;
  --panel: rgba(32, 23, 48, .86);
  --panel-solid: var(--hw-night-2);
  --panel-2: #251c38;
  --sunk: #0e0916;
  --line: rgba(255, 255, 255, .10);
  --line-2: rgba(255, 255, 255, .22);
  --fill-1: rgba(255, 255, 255, .04);
  --fill-2: rgba(255, 255, 255, .08);
  --fill-3: rgba(255, 255, 255, .14);
  --fg: #f5f3ec;
  --muted: #b8afc6;
  --lede: #ddd6e6;
  --body: #ddd6e6;
  --body-2: #cbc2d8;
  --gold: #ff9a4d;
  --gold-2: #ffab66;
  --gold-deep: #b04a00;
  --gold-ink: #1b0d02;
  --gold-border: #ff9a4d;
  --code-fg: #ff9a4d;
  --veil-rgb: 18, 12, 28;
  --shadow-ink: rgba(0, 0, 0, .45);
  --shadow-ink-strong: rgba(0, 0, 0, .6);
  --text-shadow: none;
  --text-shadow-soft: none;
  --hero-bg: var(--hw-night);
  color: var(--fg);
}

/* ---------- actions ---------- */
html.bb-halloween .btn,
html.bb-halloween a.btn,
html.bb-halloween button.btn {
  background: var(--hw-pumpkin);
  color: var(--hw-ink) !important;
  border-color: var(--hw-pumpkin-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 6px 16px rgba(176, 74, 0, .22);
}
html.bb-halloween .btn:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .35) inset, 0 8px 20px rgba(176, 74, 0, .3);
}
html.bb-halloween .ribbon {
  background: var(--hw-pumpkin); color: var(--hw-ink);
  box-shadow: 0 4px 12px rgba(176, 74, 0, .35);
}
html.bb-halloween .ribbon::after { display: none; }
html.bb-halloween ::selection { background: var(--hw-pumpkin); color: var(--hw-ink); }

/* ---------- sale bar: pumpkin strip with a bat at each end ---------- */
html.bb-halloween #bb-sale-bar { background: var(--hw-pumpkin); color: var(--hw-ink); }
html.bb-halloween #bb-sale-bar::before,
html.bb-halloween #bb-sale-bar::after {
  content: ""; flex: none; width: 32px; height: 15px;
  background: url("../img/halloween/bat-ink.svg") center / contain no-repeat;
}
html.bb-halloween #bb-sale-bar::after { transform: scaleX(-1); }

/* ---------- heroes: moon, bats and a cobweb over a night sky ---------- */
html.bb-halloween .bb-home-hero,
html.bb-halloween .bb-bot-hero {
  position: relative; background: var(--hw-night); border-bottom-color: transparent;
}
html.bb-halloween .bb-bot-hero .hero-bg { display: none; }
html.bb-halloween .bb-home-hero::before,
html.bb-halloween .bb-bot-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("../img/halloween/bats.svg") no-repeat right 28% top 18px / 300px auto,
    url("../img/halloween/moon.svg") no-repeat right -150px top -120px / 360px auto,
    url("../img/halloween/web.svg") no-repeat left top / 190px auto;
}
html.bb-halloween .bb-home-hero .wrap,
html.bb-halloween .bb-bot-hero .wrap { position: relative; z-index: 1; }

/* ---------- plans ---------- */
html.bb-halloween .plan.featured {
  background: var(--hw-night-2);
  border: 1px solid var(--hw-pumpkin);
  box-shadow: 0 24px 60px var(--shadow-ink-strong);
}
html.bb-halloween:not([data-theme="dark"]) .plan.featured { box-shadow: 0 24px 60px rgba(18, 12, 28, .28); }
html.bb-halloween .plan.spot {
  border-color: var(--hw-pumpkin);
  box-shadow: 0 30px 70px var(--shadow-ink-strong), 0 0 0 4px rgba(255, 122, 26, .16);
}

/* ---------- buy pages: picked options take an orange tint, not the blue one ---------- */
html.bb-halloween { --hw-tint: rgba(255, 122, 26, .10); --hw-tint-edge: rgba(176, 74, 0, .45); }
html.bb-halloween .bb-pro-game-on { border-color: var(--hw-tint-edge); background: var(--hw-tint); }
html.bb-halloween .bb-pro-plan:has(input:checked),
html.bb-halloween .bb-pro-plan:has(input:focus-visible),
html.bb-halloween .bb-pro-more:has(input:checked),
html.bb-halloween .bb-pro-bump:has(input:checked),
html.bb-halloween .bb-acc:has(.bb-acc-on:checked),
html.bb-halloween .bb-acc-lv.is-on,
html.bb-halloween .bb-srv-type:has(input:checked),
html.bb-halloween .bb-srv-period:has(input:checked),
html.bb-halloween .bb-srv-period.is-on,
html.bb-halloween .bb-vol-tile.is-on,
html.bb-halloween .bb-vol-tile:has(input:checked) { background: var(--hw-tint); }
html.bb-halloween .bb-vol-tile.is-best { border-color: var(--hw-tint-edge); }

/* ---------- CTA band: night slab with a web in the corner ---------- */
html.bb-halloween .band {
  border-color: rgba(255, 122, 26, .4);
  background: var(--hw-night);
}
html.bb-halloween .band::before {
  opacity: 1; -webkit-mask-image: none; mask-image: none;
  background:
    url("../img/halloween/web.svg") no-repeat left top / 170px auto,
    url("../img/halloween/bats.svg") no-repeat right 24px bottom 20px / 220px auto;
}

/* ---------- footer: a graveyard rises out of it ---------- */
html.bb-halloween .site-footer {
  position: relative; background: var(--hw-footer); border-top: 0;
}
html.bb-halloween .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--hw-graveyard-h); pointer-events: none;
  background: url("../img/halloween/graveyard.svg") center bottom / auto 100% repeat-x;
}

/* ---------- wide screens: a spider drops from the header into the margin ---------- */
@media (min-width: 1320px) {
  html.bb-halloween .nav-shell::after {
    content: ""; position: absolute; top: 100%; left: calc((100% - 1160px) / 4 - 15px);
    width: 30px; height: 130px; pointer-events: none;
    background: url("../img/halloween/spider.svg") no-repeat;
  }
}

/* ---------- phones ---------- */
@media (max-width: 960px) {
  html.bb-halloween { --hw-graveyard-h: 56px; }
  /* Phones see the stones and pumpkins on the left of the scene, not the fence in the middle. */
  html.bb-halloween .site-footer::before { background-position: left -40px bottom; }
  html.bb-halloween .bb-home-hero::before,
  html.bb-halloween .bb-bot-hero::before {
    background:
      url("../img/halloween/bats.svg") no-repeat right 12px top 12px / 170px auto,
      url("../img/halloween/web.svg") no-repeat left top / 120px auto;
  }
  html.bb-halloween .band::before {
    background: url("../img/halloween/web.svg") no-repeat left top / 120px auto;
  }
}
@media (max-width: 600px) {
  html.bb-halloween #bb-sale-bar::before,
  html.bb-halloween #bb-sale-bar::after { display: none; }
}