/* Stage scaffolding for the Cozy Candlelit Pumpkin clone.
 * Three fixed-width canvases, each zoom-scaled to fill the window by js/main.js fit():
 *   #stage   1710  desktop  >=1024
 *   #stage-t  820  tablet    770-1023
 *   #stage-m  430  mobile    <770
 * Only one is visible per breakpoint. (Mobile is built first at Cherish's request.)
 */

*, *::before, *::after { box-sizing: border-box; }

html {
  /* ‼️ The scrollbar trap: #stage zoom = clientWidth/frameWidth, and clientWidth EXCLUDES an
   * always-on vertical scrollbar (~15px) -> the page renders ~1% small and the error compounds
   * toward the bottom-right. Reserving the scrollbar gutter with zero width makes
   * clientWidth == innerWidth so the stage fills the window edge to edge. */
  overflow-x: hidden;
  overflow-y: scroll;
}
html::-webkit-scrollbar { width: 0; height: 0; }

body {
  margin: 0;
  background: #fbf9f4;           /* the page background, so the stage never sits on white */
  -webkit-font-smoothing: antialiased;
}

/* Each stage is its own fixed-width canvas. js/main.js sets `zoom` and the --z custom property. */
#stage, #stage-t, #stage-m {
  position: relative;
  margin: 0 auto;
  display: none;
}
#stage   { width: 1710px; }
#stage-t { width: 820px; }
#stage-m { width: 430px; }

/* one stage visible per breakpoint */
@media (max-width: 769px)                      { #stage-m { display: block; } }
@media (min-width: 770px) and (max-width: 1023px) { #stage-t { display: block; } }
@media (min-width: 1024px)                     { #stage   { display: block; } }

/* ---------------------------------------------------------------- Flickity base rules ----
 * The gallery markup is Flickity's, but Flickity injects its OWN base stylesheet at runtime and
 * the theme CSS does not contain it — so with the theme JS stripped there was nothing clipping
 * the slide track and the page scrolled sideways by 5 x 430px. These are Flickity's base rules,
 * nothing more; all visual styling still comes from the theme CSS. */
.flickity-enabled { position: relative; }
.flickity-viewport { overflow: hidden; position: relative; height: 100%; touch-action: pan-y; }
.flickity-slider { position: absolute; width: 100%; height: 100%; }
.flickity-enabled.is-draggable { -webkit-user-select: none; -ms-user-select: none; user-select: none; }
.flickity-button { position: absolute; border: none; background: transparent; cursor: pointer; padding: 0; }
/* Flickity's own prev/next placement. Without it BOTH arrows stacked at the container origin and
 * rendered as a single overlapping "diamond" glyph under the hero. The theme CSS only overrides
 * their SIZE (30x30), so the placement has to come from here. */
.flickity-prev-next-button { top: 50%; transform: translateY(-50%); }
.flickity-prev-next-button.previous { left: 10px; right: auto; }
.flickity-prev-next-button.next { right: 10px; left: auto; }
.flickity-page-dots { position: absolute; width: 100%; padding: 0; margin: 0; list-style: none; text-align: center; line-height: 1; }
/* The dot's FILL and round shape come from Flickity's base CSS — the theme only overrides size,
 * margin and opacity. Without these the dots render transparent and square, i.e. invisible. */
.flickity-page-dots .dot {
  display: inline-block; width: 10px; height: 10px; margin: 0 8px;
  background: #333; border-radius: 50%; opacity: .25; cursor: pointer;
}
.flickity-page-dots .dot.is-selected { opacity: 1; }

/* Stages not yet built fall back to the mobile canvas so the page is never blank while the
 * desktop/tablet stages are still in progress. Remove these two rules once they are built. */
@media (min-width: 770px) { #stage-m { display: block; } }
@media (min-width: 770px) { #stage-t, #stage { display: none; } }