/* Black Friday layer (20 November to 1 December 2026, the Black Friday sale in
   zz-boostbot-sale.php). Loads after the theme CSS. Every rule is scoped to
   html.bb-blackfriday. The head script sets that class from the visitor's own
   clock (see boostbot_season()), so cached pages drop the look on 2 December
   without a deploy. Decorations are CSS backgrounds on pseudo-elements: no
   markup, nothing for screen readers, no pointer events, no motion. The logo
   stays as it is. The decorations name the event only; the sale bar carries
   the offer. */

/* ---------- tokens ---------- */
html.bb-blackfriday {
  --bf-yellow: #ffd60a;         /* ink text on it, 14:1 */
  --bf-yellow-edge: #c9a400;
  --bf-ink: #0b0b0d;
  --bf-night: #0b0b0d;
  --bf-night-2: #17171b;
  --bf-footer: #0b0b0d;         /* same fill as bags.svg */
  --bf-bags-h: 90px;

  /* Accent: dark amber for text and rings (5.9:1 on white), yellow for fills. */
  --gold: #8a5a00;
  --gold-2: #a06a00;
  --gold-deep: #5c3c00;
  --gold-ink: var(--bf-ink);    /* text on the yellow button fill; white was 1.4:1 */
  --gold-border: #8a5a00;
  --gold-glow: rgba(255, 214, 10, .18);
  --gold-glow-strong: rgba(255, 214, 10, .3);
  --btn-fill: var(--bf-yellow);
  --code-fg: #8a5a00;
}

/* These sit on dark amber (--gold), not yellow, so they keep white text (5.9:1). */
html.bb-blackfriday:not([data-theme="dark"]) .nav-cart-count,
html.bb-blackfriday:not([data-theme="dark"]) .bb-code-copy,
html.bb-blackfriday:not([data-theme="dark"]) .entry-content .ks-copy.ks-copied,
html.bb-blackfriday:not([data-theme="dark"]) .bb-ck-steps li.is-on,
html.bb-blackfriday:not([data-theme="dark"]) .bb-pro-bump-box {
  --gold-ink: #ffffff;
}

html.bb-blackfriday[data-theme="dark"] {
  --bg0: #0a0a0b;
  --bg1: #101012;
  --panel: rgba(20, 20, 23, .86);
  --panel-solid: #141417;
  --panel-2: #1a1a1e;
  --sunk: #070708;
  --veil-rgb: 10, 10, 11;
  --gold: #ffd60a;              /* yellow on the dark pages */
  --gold-2: #ffe14d;
  --gold-deep: #5c3c00;
  --gold-ink: #0b0b0d;
  --gold-border: #ffd60a;
  --code-fg: #ffd60a;
}

/* Black 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-blackfriday .bb-home-hero,
html.bb-blackfriday .bb-bot-hero,
html.bb-blackfriday .band,
html.bb-blackfriday .plan.featured,
html.bb-blackfriday .site-footer {
  color-scheme: dark;
  --bg0: var(--bf-night);
  --bg1: #121215;
  --panel: rgba(28, 28, 33, .86);
  --panel-solid: var(--bf-night-2);
  --panel-2: #1f1f24;
  --sunk: #070708;
  --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: #f5f5f2;
  --muted: #b9b9c2;
  --lede: #dedee4;
  --body: #dedee4;
  --body-2: #c9c9d1;
  --gold: var(--bf-yellow);
  --gold-2: #ffe14d;
  --gold-deep: #5c3c00;
  --gold-ink: var(--bf-ink);
  --gold-border: var(--bf-yellow);
  --code-fg: var(--bf-yellow);
  --veil-rgb: 11, 11, 13;
  --shadow-ink: rgba(0, 0, 0, .5);
  --shadow-ink-strong: rgba(0, 0, 0, .65);
  --text-shadow: none;
  --text-shadow-soft: none;
  --hero-bg: var(--bf-night);
  color: var(--fg);
}

/* ---------- actions ---------- */
html.bb-blackfriday .btn,
html.bb-blackfriday a.btn,
html.bb-blackfriday button.btn {
  background: var(--bf-yellow);
  color: var(--bf-ink) !important;
  border-color: var(--bf-yellow-edge);
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 6px 16px rgba(201, 164, 0, .22);
}
html.bb-blackfriday .btn:hover {
  box-shadow: 0 1px 0 rgba(255, 255, 255, .4) inset, 0 8px 20px rgba(201, 164, 0, .32);
}
html.bb-blackfriday .ribbon {
  background: var(--bf-yellow); color: var(--bf-ink);
  box-shadow: 0 4px 12px rgba(201, 164, 0, .35);
}
html.bb-blackfriday .ribbon::after { display: none; }
html.bb-blackfriday ::selection { background: var(--bf-yellow); color: var(--bf-ink); }

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

/* ---------- heroes: a big tag in the corner, the sale tape along the bottom ---------- */
html.bb-blackfriday .bb-home-hero,
html.bb-blackfriday .bb-bot-hero {
  position: relative; background: var(--bf-night); border-bottom-color: transparent;
}
html.bb-blackfriday .bb-bot-hero .hero-bg { display: none; }
html.bb-blackfriday .bb-home-hero::before,
html.bb-blackfriday .bb-bot-hero::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    url("../img/blackfriday/tape.svg") repeat-x left bottom / auto 34px,
    url("../img/blackfriday/tag-big.svg") no-repeat right -60px top 24px / 300px auto;
}
/* Confetti on its own layer, faded out behind the text column. */
html.bb-blackfriday .bb-home-hero::after,
html.bb-blackfriday .bb-bot-hero::after {
  content: ""; position: absolute; inset: 0 0 34px; z-index: 0; pointer-events: none;
  background: url("../img/blackfriday/confetti.svg") repeat left top / 360px auto;
  -webkit-mask-image: linear-gradient(90deg, transparent 0 46%, #000 62%);
  mask-image: linear-gradient(90deg, transparent 0 46%, #000 62%);
}
html.bb-blackfriday .bb-home-hero .wrap,
html.bb-blackfriday .bb-bot-hero .wrap { position: relative; z-index: 1; }

/* ---------- plans ---------- */
html.bb-blackfriday .plan.featured {
  background: var(--bf-night-2);
  border: 1px solid var(--bf-yellow);
  box-shadow: 0 24px 60px var(--shadow-ink-strong);
}
html.bb-blackfriday:not([data-theme="dark"]) .plan.featured { box-shadow: 0 24px 60px rgba(11, 11, 13, .28); }
html.bb-blackfriday .plan.spot {
  border-color: var(--bf-yellow);
  box-shadow: 0 30px 70px var(--shadow-ink-strong), 0 0 0 4px rgba(255, 214, 10, .2);
}

/* ---------- buy pages: picked options take a yellow tint, not the blue one ---------- */
html.bb-blackfriday { --bf-tint: rgba(255, 214, 10, .16); --bf-tint-edge: rgba(138, 90, 0, .5); }
html.bb-blackfriday[data-theme="dark"] { --bf-tint: rgba(255, 214, 10, .08); --bf-tint-edge: rgba(255, 214, 10, .45); }
html.bb-blackfriday .bb-pro-game-on { border-color: var(--bf-tint-edge); background: var(--bf-tint); }
html.bb-blackfriday .bb-pro-plan:has(input:checked),
html.bb-blackfriday .bb-pro-plan:has(input:focus-visible),
html.bb-blackfriday .bb-pro-more:has(input:checked),
html.bb-blackfriday .bb-pro-bump:has(input:checked),
html.bb-blackfriday .bb-acc:has(.bb-acc-on:checked),
html.bb-blackfriday .bb-acc-lv.is-on,
html.bb-blackfriday .bb-srv-type:has(input:checked),
html.bb-blackfriday .bb-srv-period:has(input:checked),
html.bb-blackfriday .bb-srv-period.is-on,
html.bb-blackfriday .bb-vol-tile.is-on,
html.bb-blackfriday .bb-vol-tile:has(input:checked) { background: var(--bf-tint); }
html.bb-blackfriday .bb-vol-tile.is-best { border-color: var(--bf-tint-edge); }

/* ---------- CTA band: black slab, tape across the top, confetti at the ends ---------- */
html.bb-blackfriday .band {
  border-color: rgba(255, 214, 10, .45);
  background: var(--bf-night);
  padding-top: 76px;
}
html.bb-blackfriday .band::before {
  opacity: 1; -webkit-mask-image: none; mask-image: none;
  background: url("../img/blackfriday/tape.svg") repeat-x left top 18px / auto 30px;
}
html.bb-blackfriday .band::after {
  content: ""; position: absolute; inset: 0; pointer-events: none;
  background: url("../img/blackfriday/confetti.svg") repeat left top / 360px auto;
  -webkit-mask-image: linear-gradient(90deg, #000 0 12%, transparent 28% 72%, #000 88%);
  mask-image: linear-gradient(90deg, #000 0 12%, transparent 28% 72%, #000 88%);
}

/* ---------- footer: bags and boxes rise out of it ---------- */
html.bb-blackfriday .site-footer {
  position: relative; background: var(--bf-footer); border-top: 0;
}
html.bb-blackfriday .site-footer::before {
  content: ""; position: absolute; left: 0; right: 0; bottom: 100%;
  height: var(--bf-bags-h); pointer-events: none;
  background: url("../img/blackfriday/bags.svg") center bottom / auto 100% repeat-x;
}
/* Dark pages: ink bags would vanish, so the footer and its bags go one step lighter. */
html.bb-blackfriday[data-theme="dark"] .site-footer { background: #1c1c21; }
html.bb-blackfriday[data-theme="dark"] .site-footer::before { background-image: url("../img/blackfriday/bags-dark.svg"); }

/* ---------- wide screens: two price tags hang from the header into the margins ---------- */
@media (min-width: 1320px) {
  html.bb-blackfriday .nav-shell::before,
  html.bb-blackfriday .nav-shell::after {
    content: ""; position: absolute; top: 100%; width: 34px; pointer-events: none;
  }
  html.bb-blackfriday .nav-shell::before {
    left: calc((100% - 1160px) / 4 - 17px); height: 150px;
    background: url("../img/blackfriday/tag-yellow.svg") no-repeat;
  }
  html.bb-blackfriday .nav-shell::after {
    right: calc((100% - 1160px) / 4 - 17px); height: 100px;
    background: url("../img/blackfriday/tag-black.svg") no-repeat;
  }
}

/* ---------- phones ---------- */
@media (max-width: 960px) {
  html.bb-blackfriday { --bf-bags-h: 60px; }
  /* Phones see the bags and boxes on the left of the scene. */
  html.bb-blackfriday .site-footer::before { background-position: left -40px bottom; }
  html.bb-blackfriday .bb-home-hero::before,
  html.bb-blackfriday .bb-bot-hero::before {
    background: url("../img/blackfriday/tape.svg") repeat-x left bottom / auto 28px;
  }
  /* One column on phones: confetti only above the headline. */
  html.bb-blackfriday .bb-home-hero::after,
  html.bb-blackfriday .bb-bot-hero::after {
    background-size: 280px auto;
    -webkit-mask-image: linear-gradient(180deg, #000 0 40px, transparent 120px);
    mask-image: linear-gradient(180deg, #000 0 40px, transparent 120px);
  }
  html.bb-blackfriday .band { padding-top: 64px; }
  html.bb-blackfriday .band::before { background-size: auto 26px; background-position: left top 14px; }
  html.bb-blackfriday .band::after { display: none; }
}
@media (max-width: 600px) {
  html.bb-blackfriday #bb-sale-bar::before,
  html.bb-blackfriday #bb-sale-bar::after { display: none; }
}