/*!
 * Site integration — site-integration.css
 * Plain, hand-written CSS (not compiled from SCSS, no build step) that wires
 * the seasonal decorations kit (seasonal.css/seasonal.js) into the REAL site
 * templates, gated by the "Enable Halloween theme" toggle on the Site
 * Configuration options page — see functions/halloween-theme.php.
 *
 * Each block below is the positioning/stacking a touchpoint needs so its
 * sd-deco/tile decoration renders correctly without disturbing real content:
 * a positioned ancestor for the decoration to fill, overflow:hidden so it
 * doesn't spill past the component's edges, and the real content lifted to
 * z-index:2 so decorations (z-index 0/1) stay behind it.
 */

/* ---------------------------------------------------------------------
   Single product image (single-product.php's .page-singleproduct__image)
   — already position:relative; needs overflow clipping + isolation, and
   the real packshot lifted above the bat-tile decoration.
   --------------------------------------------------------------------- */
.page-singleproduct__image {
  overflow: hidden;
  isolation: isolate;
}
.page-singleproduct__image picture,
.page-singleproduct__image img {
  position: relative;
  z-index: 2;
}
/* Bats scaled up — this box is much larger than a grid tile, so the kit's
   default tile-bat size reads as too small here. */
.page-singleproduct__image .sd-tile-fx {
  transform: scale(3);
  transform-origin: center;
}
/* Purpose-made background image (supplied directly for this spot), square
   like the product box, replacing the earlier graveyard-scene/moon-and-
   clouds combination — CSS background-image so it paints behind every
   child automatically, no z-index/layering needed. Solid orange stays as
   the fallback base colour showing through any transparent areas of the
   frame image. */
body.halloween-theme-active .page-singleproduct__image {
  background: url('../images/halloween-product-frame.avif') no-repeat center / cover, #f2801a;
}

/* Product grid tiles (templates/sections/grid-item.php) are intentionally
   left untouched — reverted after theming there caused more trouble than
   it was worth. /deals/ and any other page using that partial renders
   exactly as normal, Halloween toggle on or off. */

/* ---------------------------------------------------------------------
   Red image-button block (gutenberg-blocks/image-button-block.php) —
   the desktop variant's text panel carries the brand-red background;
   bats fill it behind the heading/link text.
   --------------------------------------------------------------------- */
.image-button-block-desktop > div {
  position: relative;
  overflow: hidden;
  isolation: isolate;
}
.image-button-block-desktop > div > * {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Header nav (templates/header.php's .header) — already position:relative
   with its own z-index:2. Background swaps to a near-black purple night
   sky while the toggle is on. Bunting sits behind the logo/nav (sd-fill,
   z-index:0) at the header's normal height, faded down so it reads as a
   backdrop rather than competing with the real content in front of it.
   --------------------------------------------------------------------- */
.header .sd-hang {
  z-index: 25;
}
body.halloween-theme-active .header {
  background-color: #17111f;
}
body.halloween-theme-active .header .sd-fill {
  opacity: .35;
}
body.halloween-theme-active .header > *:not(.sd-deco) {
  position: relative;
  z-index: 2;
}

/* ---------------------------------------------------------------------
   Red image-button block — background swapped from brand red to Halloween
   orange while the toggle is on, so it doesn't read as an ordinary promo
   panel with bats accidentally on it.
   --------------------------------------------------------------------- */
body.halloween-theme-active .image-button-block-desktop > div {
  background-color: #f2801a;
}

/* ---------------------------------------------------------------------
   Side gutters (templates/header.php's .gutter/.gutter__left/.gutter__right)
   — the same fixed side-rail elements a real sales-period "gutter takeover"
   uses, reused here for the Halloween artwork. header.php only prints these
   when bb_halloween_enabled() AND no takeover is active for the current
   sales period, so a real takeover always wins over the Halloween art.
   The shared .gutter rule tiles its background (background-repeat: repeat-y)
   for takeover art that's designed to tile; these two images are single
   full-height illustrations, so they're shown once, anchored to the
   bottom (where the graveyard/pumpkins sit) so tall viewports crop the
   empty sky at the top rather than the ground detail. Horizontally,
   each is anchored to its inner edge (the edge facing the page's centre
   content) so cover crops from the outer edge (the browser window edge)
   instead — left gutter keeps its right side and crops off the left,
   right gutter keeps its left side and crops off the right. */
body.halloween-theme-active .gutter {
  background-repeat: no-repeat;
  background-size: cover;
  /* .footer has its own z-index: 100 (layouts/_footer.scss) and the
     gutters have none, so without this the footer's stacking context
     paints over the gutters once the page scrolls far enough for the
     footer to reach the fixed gutter's screen position. */
  z-index: 101;
}
body.halloween-theme-active .gutter__left {
  background-position: right bottom;
}
body.halloween-theme-active .gutter__right {
  background-position: left bottom;
}

/* ---------------------------------------------------------------------
   Footer graveyard scene (templates/footer.php, via
   bb_halloween_graveyard_scene()) — sd-graveyard draws the moon/clouds/
   lightning "sky" as the footer's own background; the ground photo is
   pinned along the bottom edge, full width, and brightens in step with
   the moon's own glow via --gy-clear (set by seasonal.js's
   gyUpdateLight() on the effect's host AND this element, since the host's
   parent is exactly this .footer — see the seasonal-kit README).
   --------------------------------------------------------------------- */
body.halloween-theme-active .footer {
  position: relative;
  overflow: hidden;
  isolation: isolate;
  padding-top: 280px;
  background: linear-gradient(180deg, #1c0508, #e30613) !important;
}
body.halloween-theme-active .footer > *:not(.sd-deco):not(.sd-scene-photo) {
  position: relative;
  z-index: 2;
}
.sd-scene-photo {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  width: 100%;
  height: auto;
  display: block;
  pointer-events: none;
  z-index: 1;
  filter: brightness(calc(1 + .35 * var(--gy-clear, 0)));
  transition: filter .6s ease;
}