/*
 * Gingerbread Lane popup. The poster box matches the cropped artboard
 * (967.43 x 1392 pt, origin 56.28,67.76 in the AI), so every layer below is
 * placed with percentages taken straight from the artboard coordinates.
 */

/* Stand-in for Gibson (desktop-only license). SIL OFL, see fonts/figtree/OFL.txt. */
@font-face {
  font-family: "Figtree";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("../fonts/figtree/figtree-regular-latin.woff2") format("woff2");
}

html.shaverhall-campaign-popup-open,
html.shaverhall-campaign-popup-open body {
  overflow: hidden;
}

.shaverhall-campaign-popup {
  width: min(600px, calc((100dvh - 32px) * 967.43 / 1392), calc(100vw - 24px));
  max-width: none;
  max-height: none;
  margin: auto;
  padding: 0;
  overflow: visible;
  border: 0;
  background: transparent;
  color: #f5efef;
}

.shaverhall-campaign-popup[open] {
  display: block;
}

/*
 * No backdrop-filter blur: Firefox re-blurs the whole screen whenever the
 * snow moves, and at 72% dim the 2px blur was barely visible anyway.
 */
.shaverhall-campaign-popup::backdrop {
  background: rgba(20, 27, 13, 0.72);
}

.shaverhall-campaign-popup__poster {
  position: relative;
  width: 100%;
  aspect-ratio: 967.43 / 1392;
}

/*
 * The popup's shadow, cast by a static silhouette (frame + logo box +
 * banner) behind everything, rather than a filter on the whole poster: the
 * animated snow would force that to be redrawn every frame.
 */
.shaverhall-campaign-popup__shadow {
  z-index: 0; /* Before the frame in the markup, so it paints underneath. */
  inset: 0;
  width: 100%;
  height: 100% !important;
  filter: drop-shadow(0 18px 28px rgba(20, 27, 13, 0.45));
}

.shaverhall-campaign-popup__poster img {
  position: absolute;
  display: block;
  max-width: none;
  height: auto;
  margin: 0;
  border: 0;
  border-radius: 0;
  box-shadow: none;
}

.shaverhall-campaign-popup__frame {
  inset: 0;
  width: 100%;
  height: 100% !important;
}

/*
 * Stacking, back to front. Snow layers sit between the art layers, always
 * under the logos and CTA.
 */
.shaverhall-campaign-popup__frame { z-index: 0; }
.shaverhall-campaign-popup__sky { z-index: 1; }
.shaverhall-campaign-popup__snow--back { z-index: 2; }
.shaverhall-campaign-popup__house { z-index: 3; }
.shaverhall-campaign-popup__snow--mid { z-index: 4; }
.shaverhall-campaign-popup__copy { z-index: 5; }
.shaverhall-campaign-popup__snow--front { z-index: 6; }

.shaverhall-campaign-popup__logo-box,
.shaverhall-campaign-popup__banner,
.shaverhall-campaign-popup__cta {
  z-index: 7;
}

/*
 * Stars and house share one group at 84% of the artboard size: the stars'
 * box (AI x 98.97, y 172.55, w 861.75) keeps its centre line (x 529.85) and
 * drops so the roof peak clears the logo box. Group maps AI (x, y) to
 * (167.92 + (x - 98.97) * 0.84, 213.7 + (y - 172.55) * 0.84); house base
 * lands at y 951.6.
 */
.shaverhall-campaign-popup__sky {
  top: 10.484%;
  left: 11.54%;
  width: 74.824%;
}

/* House alone: AI x 230.72, w 652.25 -> x 278.59, w 547.89. */
.shaverhall-campaign-popup__house {
  top: 10.484%;
  left: 22.979%;
  width: 56.634%;
}

/* Logo box (designer export): AI x 294.25, y 67.76, w 491.75. */
.shaverhall-campaign-popup__logo-box {
  top: 0;
  left: 24.585%;
  width: 50.83%;
}

/* Shaver Hall·idays banner: AI x 269, y 1385.86, w 541.99. */
.shaverhall-campaign-popup__banner {
  top: 94.691%;
  left: 21.988%;
  width: 56.024%;
}

/*
 * Copy: plain HTML text placed on the artboard baselines.
 * - Sizes: 1cqw = 1% of poster width = 9.6743 artboard pt.
 * - top: baseline as % of poster height, minus the baseline's offset inside
 *   a line-height:1 box (LaFarge Demi 0.8265em, Figtree 0.85em, from each
 *   font's vertical metrics).
 * - Doubled class beats Elementor's kit h2/p rules.
 */
.shaverhall-campaign-popup__poster {
  container-type: inline-size;
}

/*
 * Text block, laid out below at artboard size, then scaled to 88% about the
 * headline's cap top (x 540, y 1078.05) and moved up 102.65pt so it keeps
 * its original 27pt gap (scaled) under the smaller house.
 */
.shaverhall-campaign-popup__copy {
  position: absolute;
  inset: 0;
  transform: translateY(-7.374%) scale(0.88);
  transform-origin: 50% 72.578%;
  pointer-events: none;
}

/* Date rules (AI: x 113.08, w 519.55, y 1190.72 / 1253.05, 2pt). */
.shaverhall-campaign-popup__copy::before,
.shaverhall-campaign-popup__copy::after {
  content: "";
  position: absolute;
  left: 5.871%;
  width: 53.704%;
  height: 0.144%;
  background: #f5efef;
}

.shaverhall-campaign-popup__copy::before {
  top: 80.601%;
}

.shaverhall-campaign-popup__copy::after {
  top: 85.079%;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__headline,
.shaverhall-campaign-popup .shaverhall-campaign-popup__dates,
.shaverhall-campaign-popup .shaverhall-campaign-popup__tagline {
  margin: 0;
  padding: 0;
  border: 0;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  text-shadow: none;
  white-space: nowrap;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__headline {
  color: #d6b651;
  font-family: "LaFarge Demi", Georgia, serif;
  font-size: 12.135cqw; /* 117.4pt */
  letter-spacing: 0;
  text-transform: uppercase;
}

.shaverhall-campaign-popup__headline-1,
.shaverhall-campaign-popup__headline-2 {
  position: absolute;
}

/* AI: x 94.51, baseline 1160.23 */
.shaverhall-campaign-popup__headline-1 {
  top: calc(78.482% - 0.8265em);
  left: 3.952%;
}

/* AI: right edge 982.2, baseline 1261.87; tracking hangs past the edge. */
.shaverhall-campaign-popup__headline-2 {
  top: calc(85.784% - 0.8265em);
  right: calc(4.29% - 0.0153em);
  letter-spacing: 0.0153em;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__dates,
.shaverhall-campaign-popup .shaverhall-campaign-popup__tagline {
  position: absolute;
  font-family: "Figtree", "Helvetica Neue", Arial, sans-serif;
  font-size: 3.788cqw; /* 36.65pt */
}

/* AI: x 121.55, baseline 1233.72; sits between the frame SVG's rules. */
.shaverhall-campaign-popup .shaverhall-campaign-popup__dates {
  top: calc(83.762% - 0.85em);
  left: 6.747%;
  color: #f5efef;
  letter-spacing: 0.006em;
  text-transform: uppercase;
}

/* AI: centred, baseline 1328.94. Left padding balances trailing tracking. */
.shaverhall-campaign-popup .shaverhall-campaign-popup__tagline {
  top: calc(90.602% - 0.85em);
  right: 0;
  left: 0;
  padding-left: 0.082em;
  color: #ffa897;
  letter-spacing: 0.082em;
  text-align: center;
}

/*
 * Snow, adapted from "Snow (Pure CSS)" by alphardex
 * (https://codepen.io/alphardex/pen/dyPorwJ, MIT). The pen generates 200
 * keyframes in Sass; here the popup JS animates each flake with the Web
 * Animations API using concrete values, so the motion stays on the
 * compositor. Units are cqw of the poster: its height is 143.886cqw, and the
 * pen's 10px flake and 10px glow are 1.667cqw at the full 600px width.
 * The pen's glow is a drop-shadow over the whole scene; here it's drawn
 * into each flake's gradient, so nothing is re-filtered per frame.
 * Clipped to the inner edge of the green panel. Three layers (see the
 * stacking block above); the JS spreads flakes across them at random.
 */
.shaverhall-campaign-popup__snow {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  clip-path: polygon(
    6.508% 2.927%,
    93.493% 2.927%,
    93.493% 7.096%,
    98.508% 7.096%,
    98.508% 92.651%,
    93.493% 92.651%,
    93.493% 96.819%,
    6.508% 96.819%,
    6.508% 92.651%,
    1.493% 92.651%,
    1.493% 7.096%,
    6.508% 7.096%
  );
}

/*
 * Flake + glow as one radial gradient (cheaper than a blurred box-shadow,
 * notably in Firefox). The box is 3x the pen's 1.667cqw flake: the solid
 * core is the inner third, the glow fades out over the 1.667cqw beyond it,
 * and the negative offset keeps the flake's centre where it was.
 */
.shaverhall-campaign-popup__snowflake {
  position: absolute;
  top: -1.667cqw;
  left: -1.667cqw;
  width: 5cqw;
  height: 5cqw;
  border-radius: 50%;
  background: radial-gradient(
    closest-side,
    #fff 33%,
    rgba(255, 255, 255, 0.5) 36%,
    rgba(255, 255, 255, 0.15) 66%,
    rgba(255, 255, 255, 0) 100%
  );
  will-change: transform;
}

/*
 * "Learn More" plaque (shaverhall-elementor-widgets) in the freed space,
 * centred between the tagline (bottom ~y 1202.7) and the banner (y 1386.5).
 * AI: w 340 (h 112.6 at the plaque's 151:50), x 370, y 1238.3.
 */
.shaverhall-campaign-popup__cta {
  position: absolute;
  top: 84.08%;
  left: 32.428%;
  width: 35.145%;
  justify-content: center;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__link {
  width: 100%;
  color: #35451f;
  transition: filter 0.3s;
}

/*
 * Glow from the site's .shape_button CTAs (header "Contact Us"), minus their
 * brightness(1.2): on the pink plaque that washed the button out, so the
 * glow read as sitting on top. drop-shadow alone renders behind the plaque.
 */
.shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__link:hover,
.shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__link:focus {
  color: #35451f;
  filter: drop-shadow(0 0 8px #f3c49a);
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__link:focus-visible {
  outline: 3px solid #f5efef;
  outline-offset: 4px;
}

/* Pink plaque with a dark green inner border, like the banner inverted. */
.shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__border {
  stroke: #35451f !important;
}

/* Only used if the plugin providing the plaque is deactivated. */
.shaverhall-campaign-popup__cta-fallback {
  display: block;
  padding: 0.8em 1em;
  border: 2px solid #35451f;
  outline: 2px solid #ffa897;
  background: #ffa897;
  font-family: "LaFarge Bold", Georgia, serif;
  font-size: 3cqw;
  line-height: 1;
  text-align: center;
  text-transform: uppercase;
}

/*
 * Inside the green panel, top right: centred on the logo box's mid-line
 * (AI y 163.3) and centred between the box and the panel's main right
 * edge (AI x 897.5; the notch step is at x 960.76). Size tracks the
 * poster (44px at full size), with a 32px floor for tapping; the dialog is
 * the size container for it.
 */
.shaverhall-campaign-popup {
  container-type: inline-size;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__close,
.shaverhall-campaign-popup .shaverhall-campaign-popup__close:hover,
.shaverhall-campaign-popup .shaverhall-campaign-popup__close:focus {
  position: absolute;
  z-index: 3;
  top: 6.864%;
  left: 86.954%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: clamp(32px, 7.333cqw, 44px);
  height: clamp(32px, 7.333cqw, 44px);
  padding: 0;
  border: 2px solid #f5efef;
  border-radius: 50%;
  background: #35451f;
  color: #f5efef;
  cursor: pointer;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__close svg {
  width: 50%;
  height: 50%;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
  stroke-width: 2;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__close:hover {
  background: #d6b651;
  color: #35451f;
}

.shaverhall-campaign-popup .shaverhall-campaign-popup__close:focus-visible {
  outline: 3px solid #ffa897;
  outline-offset: 2px;
}


@media (prefers-reduced-motion: reduce) {
  .shaverhall-campaign-popup .shaverhall-campaign-popup__cta .shaverhall-svg-cta__link {
    transition: none;
  }

  .shaverhall-campaign-popup__snow {
    display: none;
  }
}