/* =============================================================================
   SD-1306b — Snow-guns page redesign
   Built to Design's build spec v1 of 3 Nov 2026 (md5 335368c1856a…), §7.

   UNITS: the spec is written in px; this project's standing rule is rem/em only.
   Every length below is the spec's number divided by 17, because the parent theme's
   skin sets `html{font-size:17px}` -- so these values render at EXACTLY the spec's
   pixel sizes on this site, and still scale with a reader's font setting. Ruled by
   the PD on 3 Nov after the first pass used /16 and came out 6.25% large.
   DO NOT re-divide by 16, and do not override html{font-size}.
   The mobile breakpoint stays in em: in a media query `em` is the INITIAL font size
   (16px), not html's, so 47.9375em is exactly 767px as the spec intends.

   FLUID WIDTHS, one deliberate deviation: the spec fixes the hero columns at
   720px each and the main grid at 640|576 inside a 1312 container with no side
   padding. Those are exact at the 1440 design width but OVERFLOW the viewport
   between the 768px breakpoint and 1440 -- a 1280-wide laptop would scroll
   sideways. The columns below are therefore ratio-preserving inside a 90rem
   (1440) frame with 4rem gutters, which resolves to exactly 45rem|45rem and
   40rem|6rem|36rem at 1440 and shrinks correctly under it. Same design, no
   horizontal scroll.

   SPECIFICITY, learned post-ship on 3 Nov: every rule below is scoped under
   `.sd-page--snow-guns`. The theme sets `.sd-page h1 {...}` and `.sd-page a {...}`
   -- element+class, 0,1,1 -- which beat a bare `.sg-hero__title` or `.sg-btn` at
   0,1,0 however late this file loads. That is why the H1 rendered navy on navy and
   the Contribute label red on red: the colours here never applied. One extra class
   takes every rule to 0,2,0 and wins without a single !important.

   SCOPE: the spec's `*{box-sizing:border-box;margin:0}` and `body{background}`
   are NOT applied globally -- the shared header and footer render inside this
   page's wrapper and a global reset would reach them. The reset is scoped to this
   page's own three sections, and the canvas colour to the page wrapper.
   ========================================================================== */

.sd-page--snow-guns {
	--navy: #003355;
	--navy-500: #33556F;
	--red: #C1121F;
	--red-800: #892312;
	--cream: #EFEBDF;
	--white: #FFFFFF;
	--n100: #F4F2EE;
	--n250: #E1E1DD;
	/* Measured at runtime so the #contribute jump clears the fixed site header
	   (spec §4). The fallback is the desktop header height. */
	--sg-header-h: 9.9559rem;
	background: var(--cream);
	color: var(--navy);
	/* DEFECT FIX, 3 Nov: the hero's first line sat UNDER the fixed site header.
	   The theme offsets interior pages with
	   `document.querySelector('.page_content_wrap').style.paddingTop`, but that
	   wrapper is the PARENT theme's and a standalone SD template never emits it --
	   querySelector returns null and the offset silently never applies. (The string
	   does appear in the page, inside a plugin's JSON settings, which is what made
	   a grep look like the element was there.) So this page reserves the header's
	   height itself, from the same measured variable the #contribute jump uses. */
	padding-top: var(--sg-header-h);
}

.sd-page--snow-guns .sg-hero *, .sd-page--snow-guns .sg-main *, .sd-page--snow-guns .sg-close * { box-sizing: border-box; margin: 0; }

/* ---------- HERO ---------- */
.sd-page--snow-guns .sg-hero {
	display: grid;
	grid-template-columns: 1fr 1fr;       /* 720 | 720 at the 1440 design width */
	height: 28.2353rem;                        /* 480 */
	background: var(--navy);
}
.sd-page--snow-guns .sg-hero__text {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 0 3.7647rem;                      /* 64 */
}
.sd-page--snow-guns .sg-hero__title {
	font-family: Outfit, sans-serif;
	font-weight: 700;
	font-size: 4.2353rem;                    /* 72 */
	line-height: 1;
	letter-spacing: -0.02em;
	color: var(--white);
	max-width: 28.2353rem;                     /* 480 — forces "Snow for the / Hill Climb" */
}
.sd-page--snow-guns .sg-hero__sub {
	font-family: 'DM Sans', sans-serif;
	font-weight: 400;
	font-size: 1.2941rem;                  /* 22 */
	line-height: 1.4;
	color: var(--cream);
	margin-top: 1.1765rem;                  /* 20 */
}
.sd-page--snow-guns .sg-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	align-self: flex-start;
	height: 3.2941rem;                       /* 56 */
	padding: 0 2.1176rem;                   /* 36 */
	background: var(--red);
	color: var(--white);
	font-family: Outfit, sans-serif;
	font-weight: 600;
	font-size: 1.0588rem;                  /* 18 */
	letter-spacing: 0;
	border-radius: 0.2353rem;                /* 4 */
	text-decoration: none;
	margin-top: 2.3529rem;                   /* 40 */
	transition: background .25s;
}
.sd-page--snow-guns .sg-btn:hover { background: var(--red-800); }
.sd-page--snow-guns .sg-btn:focus-visible { outline: 0.1765rem solid var(--white); outline-offset: 0.1765rem; }
.sd-page--snow-guns .sg-hero__img {
	width: 100%;                          /* 720 at 1440 */
	height: 28.2353rem;                        /* 480 */
	object-fit: cover;
	object-position: 50% 100%;
	display: block;
}

/* ---------- BODY ---------- */
.sd-page--snow-guns .sg-main {
	max-width: 84.7059rem;                     /* 1440 frame; content box = 82rem (1312) */
	margin: 0 auto;
	padding: 3.7647rem 3.7647rem 0;                 /* 64 top, 64 gutters */
	display: grid;
	grid-template-columns: minmax(0, 40fr) minmax(0, 36fr);  /* 640 | 576 at 1440 */
	column-gap: 5.6471rem;                     /* 96 */
	align-items: start;
}
.sd-page--snow-guns .sg-copy p { font-size: 1.1176rem; line-height: 1.6; color: var(--navy); }   /* 19 */
.sd-page--snow-guns .sg-copy p + p { margin-top: 1.4118rem; }                                        /* 24 */

.sd-page--snow-guns .sg-card {
	background: var(--white);
	border: 0.0588rem solid var(--n250);
	border-top: 0.2353rem solid var(--red);  /* redline */
	border-radius: 0.7059rem;                /* 12 */
	padding: 2.3529rem 2.8235rem;                 /* 40 48 */
	scroll-margin-top: calc(var(--sg-header-h) + 1.4118rem);
}

/* progress */
.sd-page--snow-guns .sg-progress__figures { display: flex; align-items: baseline; gap: 0.5882rem; }  /* 10 */
.sd-page--snow-guns .sg-progress__amt {
	font-family: Outfit, sans-serif;
	font-weight: 700;
	font-size: 2.3529rem;                    /* 40 */
	line-height: 1;
	color: var(--navy);                   /* navy in every state, never red */
}
.sd-page--snow-guns .sg-progress__goal { font-family: 'DM Sans', sans-serif; font-size: 0.9412rem; color: var(--navy-500); }
.sd-page--snow-guns .sg-track {
	position: relative;
	height: 0.5882rem;                      /* 10 */
	border-radius: 0.2941rem;              /* 5 */
	background: var(--n250);
	margin-top: 0.9412rem;                     /* 16 */
	overflow: hidden;
}
.sd-page--snow-guns .sg-fill { position: absolute; left: 0; top: 0; bottom: 0; background: var(--red); border-radius: 0.2941rem; }
.sd-page--snow-guns .sg-tick { position: absolute; top: 0; bottom: 0; width: 0.1176rem; background: var(--white); transform: translateX(-0.0588rem); }
/* At zero there is no fill at all; the ticked track carries the shape. */
.sd-page--snow-guns .sg-progress[data-state="zero"] .sg-fill { display: none; }

/* P1 — approved 3 Nov, shown only while the live total is $0. Kept in the DOM and
   driven by data-state, so the client-side refresh only has to set that one
   attribute; display:none hides it from assistive tech as well. */
.sd-page--snow-guns .sg-zero { display: none; margin-top: 0.7059rem; font-size: 0.8824rem; line-height: 1.5; color: var(--navy-500); }
.sd-page--snow-guns .sg-progress[data-state="zero"] ~ .sg-zero { display: block; }

/* form */
.sd-page--snow-guns .sg-form { position: relative; margin-top: 1.8824rem; min-height: 29.8235rem; }     /* 32 / 507 */
.sd-page--snow-guns .sg-skel {
	position: absolute;
	inset: 0;
	background: var(--white);
	display: flex;
	flex-direction: column;
	gap: 0.7059rem;                          /* 12 */
	padding: 0.2353rem 0;
	transition: opacity .2s;
}
.sd-page--snow-guns .sg-skel .sp { flex: 1; }
.sd-page--snow-guns .sg-skel i { display: block; height: 1.1765rem; width: 8.2353rem; align-self: center; border-radius: 0.2353rem; background: var(--n100); }
.sd-page--snow-guns .sg-form.is-loaded .sg-skel { opacity: 0; pointer-events: none; }
.sd-page--snow-guns .sg-skel__row { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.7059rem; }
.sd-page--snow-guns .sg-skel b { display: block; height: 2.8235rem; border-radius: 0.4706rem; background: var(--n100); animation: sgpulse 1.6s ease-in-out infinite; }
.sd-page--snow-guns .sg-skel b.btn { height: 3.2941rem; background: var(--n250); margin-top: 0.7059rem; }
@keyframes sgpulse { 0%, 100% { opacity: 1; } 50% { opacity: .55; } }
@media (prefers-reduced-motion: reduce) { .sg-skel b { animation: none; } }

.sd-page--snow-guns .sg-note { margin-top: 1.4118rem; font-size: 0.8824rem; line-height: 1.5; color: var(--navy-500); }
.sd-page--snow-guns .sg-note a { color: var(--red); text-decoration: underline; text-underline-offset: 0.1176rem; }

/* P2 — approved 3 Nov, revealed only when the 20s fallback fires. */
.sd-page--snow-guns .sg-fallback { display: none; margin-top: 0.7059rem; font-size: 0.8824rem; line-height: 1.5; color: var(--navy-500); }
.sd-page--snow-guns .sg-form.is-timeout ~ .sg-fallback { display: block; }

.sd-page--snow-guns .sg-close {
	max-width: 84.7059rem;
	margin: 3.7647rem auto 0;                  /* 64 */
	padding: 1.8824rem 3.7647rem 5.6471rem;              /* 32 / 96, matching gutters */
	border-top: 0.0588rem solid var(--n250);
}
.sd-page--snow-guns .sg-close a { font-family: Outfit, sans-serif; font-weight: 600; font-size: 1.0588rem; color: var(--red); text-decoration: none; }

/* Smooth scroll only where motion is welcome (spec §4). */
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }

/* ---------- MOBILE (spec: max-width 767px) ---------- */
@media (max-width: 47.9375em) {
	.sd-page--snow-guns .sg-hero { display: flex; flex-direction: column-reverse; height: auto; }
	.sd-page--snow-guns .sg-hero__img { width: 100%; height: auto; aspect-ratio: 3 / 2; }
	.sd-page--snow-guns .sg-hero__text { padding: 1.8824rem 1.4118rem 2.3529rem; }     /* 32 24 40 */
	.sd-page--snow-guns .sg-hero__title { font-size: 2.5882rem; max-width: 17.6471rem; }   /* 44 / 300 */
	.sd-page--snow-guns .sg-hero__sub { font-size: 1.0588rem; margin-top: 0.8235rem; }    /* 18 / 14 */
	.sd-page--snow-guns .sg-btn { align-self: stretch; margin-top: 1.6471rem; }          /* 28 */
	.sd-page--snow-guns .sg-main { display: block; max-width: none; padding: 2.8235rem 1.4118rem 0; }   /* 48 24 */
	.sd-page--snow-guns .sg-copy p { font-size: 1rem; }                           /* 17 */
	.sd-page--snow-guns .sg-card { margin-top: 2.3529rem; padding: 1.6471rem 1.4118rem; }      /* 40 / 28 24 */
	.sd-page--snow-guns .sg-progress__amt { font-size: 2rem; }                     /* 34 */
	.sd-page--snow-guns .sg-form { min-height: 32.4118rem; }                           /* 551 */
	.sd-page--snow-guns .sg-close { max-width: none; margin: 2.8235rem 1.4118rem 0; padding: 1.6471rem 0 3.7647rem; }  /* 48 24 / 28 64 */
}