/**
 * LBF Fireworks — v2 header + page-wide shells
 *
 * Loads after the page's own inline stylesheet and only ever ADDS or
 * overrides. Every rule is scoped under body.page-template-page-fireworks-v2-php, a class only the v2
 * template sets, so the original fireworks page is untouched.
 *
 *  §1  the page-wide canvas
 *  §2  header box made translucent so the shells read through it
 *  §3  header layout — logo left, copy right
 *  §4  the glow behind the logo
 *  §5  Charter block
 *  §6  responsive
 */

/* ═════ §0 CANVAS SAFETY ═════
   Deliberately unscoped. If any selector below ever fails to match, an
   unstyled <canvas> lays out at its ATTRIBUTE size — the script sets that to
   innerWidth x DPR, so it would drop a ~2560x1440 block into the document
   flow and shove the page down and sideways. That is exactly what happened
   when the body class went missing. These four lines make that impossible. */
#fwv2-sky{
	position:fixed !important;
	inset:0 !important;
	width:100% !important;
	height:100% !important;
	z-index:0;
	pointer-events:none;
}

/* ═════ §1 PAGE BACKGROUND ═════
   The original page paints its dark sky on .page-template-page-fireworks-php.
   v2's template class is different, so without this the page falls back to the
   theme's default white. Same four stops, copied across. */
body.page-template-page-fireworks-v2-php{
	background-color:#010208 !important;
	background-image:
		radial-gradient(ellipse 1200px 800px at 20% 10%,rgba(124,58,237,.07),transparent 60%),
		radial-gradient(ellipse 1000px 700px at 80% 20%,rgba(0,55,167,.09),transparent 60%),
		radial-gradient(ellipse 1400px 900px at 50% 90%,rgba(243,195,3,.035),transparent 60%),
		linear-gradient(180deg,#010208 0%,#050a18 50%,#070d22 100%) !important;
	background-attachment:fixed !important;
	background-repeat:no-repeat !important;
	background-size:cover !important;
	color:#fff;
}

/* ═════ §1b PAGE-WIDE CANVAS ═════
   Fixed behind everything. It fades by ERASING rather than painting a dark
   wash, so the page gradient and the existing star field still read through
   it — painting darkness would bury both. */
body.page-template-page-fireworks-v2-php #fwv2-sky{
	position:fixed; inset:0; z-index:0;
	pointer-events:none; width:100%; height:100%;
}
body.page-template-page-fireworks-v2-php #lbf-fw{ position:relative; z-index:1; }

/* ═════ §2 HEADER BOX ═════ */
body.page-template-page-fireworks-v2-php .fwv2-hero{
	position:relative; overflow:hidden;
	border-radius:clamp(1.25rem,2.4vw,2rem);
	margin:clamp(.6rem,1.6vw,1.3rem);
	min-height:clamp(620px,88vh,880px);
	display:flex; flex-direction:column;
	padding:0;
	border:1px solid rgba(255,255,255,.07);
	box-shadow:0 30px 90px rgba(0,0,0,.75);
	/* background-color is OPAQUE on purpose. The previous build made the whole
	   box translucent so the page canvas could read through it, which meant
	   anything sitting behind — including the theme's white body default —
	   tinted the box grey. An opaque base makes that impossible; the gradients
	   sit on top of it. */
	background-color:#040814 !important;
	background-image:
		radial-gradient(ellipse at 50% 110%,rgba(243,195,3,.14),transparent 60%),
		radial-gradient(ellipse at 20% 30%,rgba(124,58,237,.12),transparent 60%),
		radial-gradient(ellipse at 80% 20%,rgba(0,55,167,.14),transparent 60%),
		linear-gradient(180deg,#010208 0%,#050a18 52%,#070d22 100%) !important;
}
/* the original hero lays an 80px white fade across its bottom edge to blend
   into the page beneath it. On this dark page it reads as a grey smear. */
body.page-template-page-fireworks-v2-php .fwv2-hero::after{ display:none !important; }
body.page-template-page-fireworks-v2-php .fwv2-hero::before{ display:none !important; }
/* the page canvas already carries the sky; the hero's own burst layer is off */
body.page-template-page-fireworks-v2-php .fwv2-hero .fw-burst{ display:none; }

/* ═════ §3 LAYOUT ═════ */
body.page-template-page-fireworks-v2-php .fwv2-wrap{
	position:relative; z-index:4; flex:1;
	display:grid; grid-template-columns:minmax(0,1.04fr) minmax(0,.96fr);
	align-items:center; gap:clamp(1rem,3.5vw,3.25rem);
	width:100%; max-width:1340px; margin:0 auto;
	padding:clamp(2.5rem,6vh,4rem) clamp(1.25rem,4vw,3rem);
}
body.page-template-page-fireworks-v2-php .fwv2-logowrap{ position:relative; display:grid; place-items:center; min-width:0; }
body.page-template-page-fireworks-v2-php .fwv2-halo{
	position:absolute; width:120%; aspect-ratio:1; pointer-events:none;
	background:radial-gradient(circle,rgba(243,195,3,.14) 0%,rgba(124,58,237,.09) 42%,transparent 68%);
	animation:fwv2-halo 12s ease-in-out infinite;
}
@keyframes fwv2-halo{ 0%,100%{opacity:.6;transform:scale(1)} 50%{opacity:1;transform:scale(1.05)} }
body.page-template-page-fireworks-v2-php .fwv2-mark{
	position:relative; width:min(46vw,560px); height:auto; display:block;
	filter:drop-shadow(0 22px 54px rgba(0,0,0,.8)) drop-shadow(0 0 46px rgba(243,195,3,.24));
	animation:fw-fade-up 1.4s cubic-bezier(.16,1,.3,1) both;
}
body.page-template-page-fireworks-v2-php .fwv2-copy{
	min-width:0; max-width:560px;
	display:flex; flex-direction:column; align-items:flex-start; text-align:left;
}
body.page-template-page-fireworks-v2-php .fwv2-sr{
	position:absolute; width:1px; height:1px; overflow:hidden;
	clip:rect(0 0 0 0); white-space:nowrap;
}
body.page-template-page-fireworks-v2-php .fwv2-copy .fw-hero__lead{ margin:1rem 0 0; max-width:540px; }
body.page-template-page-fireworks-v2-php .fwv2-copy .fw-hero__lead + .fw-hero__lead{ margin-top:.9rem; animation-delay:1.6s; }

/* ═════ §4 THE GLOW BEHIND THE LOGO ═════
   A separate element UNDER the image, invisible at rest. It is not a filter on
   the artwork — lighting the artwork itself is what made earlier attempts read
   as the logo blinking on and off. This is light appearing behind it. */
body.page-template-page-fireworks-v2-php .fwv2-pop{
	position:absolute; left:50%; top:50%;
	transform:translate(-50%,-50%) scale(.82);
	width:132%; aspect-ratio:1; border-radius:50%;
	pointer-events:none; z-index:-1; opacity:0; filter:blur(30px);
	background:radial-gradient(circle,var(--pc,#f3c303) 0%,transparent 62%);
}

/* ═════ §5 CHARTER ═════ */
body.page-template-page-fireworks-v2-php .fw-presents{ margin:0 auto 1.05rem; }
body.page-template-page-fireworks-v2-php .fw-presents__plate{
	background:#fff; border-radius:11px; padding:.55rem 1rem; margin-bottom:.65rem;
	box-shadow:0 0 0 1px rgba(255,255,255,.5),0 0 30px rgba(255,255,255,.14),0 10px 26px rgba(0,0,0,.5);
	display:inline-block;
}
body.page-template-page-fireworks-v2-php .fw-presents__logo{ height:clamp(42px,5.8vw,66px); width:auto; display:block; }
body.page-template-page-fireworks-v2-php .fw-presents__title{ margin-top:.55rem; text-align:center; display:grid; gap:.3rem; }
body.page-template-page-fireworks-v2-php .fw-presents__title .t1{
	font-family:var(--f-head,'Barlow Condensed',sans-serif);
	font-size:clamp(1.15rem,2.4vw,1.6rem); font-weight:900; line-height:1;
	color:#fff; text-shadow:0 0 22px rgba(243,195,3,.35);
}
body.page-template-page-fireworks-v2-php .fw-presents__title .t2{
	font-size:.58rem; font-weight:700; letter-spacing:.3em;
	text-transform:uppercase; color:#f3c303;
}

/* ═════ §6 RESPONSIVE ═════ */
@media (max-width:980px){
	body.page-template-page-fireworks-v2-php .fwv2-wrap{
		grid-template-columns:1fr; gap:1rem; justify-items:center; text-align:center;
	}
	body.page-template-page-fireworks-v2-php .fwv2-copy{ max-width:none; align-items:center; text-align:center; }
	body.page-template-page-fireworks-v2-php .fwv2-mark{ width:min(76vw,420px); }
	body.page-template-page-fireworks-v2-php .fwv2-copy .fw-hero__lead{ margin-left:auto; margin-right:auto; }
}
@media (prefers-reduced-motion:reduce){
	body.page-template-page-fireworks-v2-php #fwv2-sky,
	body.page-template-page-fireworks-v2-php .fwv2-pop{ display:none; }
	body.page-template-page-fireworks-v2-php .fwv2-halo,
	body.page-template-page-fireworks-v2-php .fwv2-mark{ animation:none; }
}


/* ═════ §7 OLD BACKGROUND OUT, OUR STAR FIELD IN ═════
   The original page paints its own ambient layer: .fw-bg, holding 80 stars and
   8 spoked mini-bursts on a 5s loop. Those bursts are the pinwheels showing
   through the page. The whole layer is switched off here and replaced with the
   star field from the header previews — 180 stars placed with Math.random()
   rather than a counting formula, at three sizes and varying brightness. */
body.page-template-page-fireworks-v2-php .fw-bg{ display:none !important; }
body.page-template-page-fireworks-v2-php #fwv2-stars{
	position:fixed; inset:0; z-index:0;
	pointer-events:none; overflow:hidden;
}
body.page-template-page-fireworks-v2-php #fwv2-stars .fwv2-star{
	position:absolute; border-radius:50%; background:#fff;
	animation:fwv2-twinkle 6s ease-in-out infinite;
}
@keyframes fwv2-twinkle{
	0%,100%{ opacity:.25; transform:scale(1) }
	50%    { opacity:1;   transform:scale(1.4) }
}
@media (prefers-reduced-motion:reduce){
	body.page-template-page-fireworks-v2-php #fwv2-stars .fwv2-star{ animation:none }
}


/* ═════ §8 THE HEADER CARRIES ITS OWN SKY ═════
   Earlier builds relied on a fixed page-wide layer showing THROUGH the header.
   That forced the box to be translucent, which let whatever sat behind it tint
   the box grey; making the box opaque then hid the sky entirely. Both problems
   go away if the header simply owns its own stars and canvas. The box stays
   fully opaque and nothing outside it matters. */
body.page-template-page-fireworks-v2-php .fwv2-hero-stars{
	position:absolute; inset:0; z-index:1;
	pointer-events:none; overflow:hidden;
}
body.page-template-page-fireworks-v2-php .fwv2-hero-stars .fwv2-star{
	position:absolute; border-radius:50%; background:#fff;
	animation:fwv2-twinkle 6s ease-in-out infinite;
}
body.page-template-page-fireworks-v2-php .fwv2-hero-sky{
	position:absolute; inset:0; z-index:2;
	width:100%; height:100%; pointer-events:none;
}
body.page-template-page-fireworks-v2-php .fwv2-wrap{ z-index:4; }
body.page-template-page-fireworks-v2-php .fwv2-hero .fw-hero__scroll{ z-index:5; }

/* ═════ §9 NOTHING LIGHT BEHIND THE BOX ═════
   The light frame in the header's margin is whatever sits behind the page
   wrapper. Rather than hunt it, html and body are pinned dark for this
   template and every wrapper between them and the content is forced
   transparent, so the only thing that can show in that margin is the sky. */
html:has(> body.page-template-page-fireworks-v2-php){ background:#010208 !important; }
body.page-template-page-fireworks-v2-php #main-content,
body.page-template-page-fireworks-v2-php #lbf-fw,
body.page-template-page-fireworks-v2-php .site-content,
body.page-template-page-fireworks-v2-php #content,
body.page-template-page-fireworks-v2-php #primary,
body.page-template-page-fireworks-v2-php #main,
body.page-template-page-fireworks-v2-php .site-main{ background:transparent !important; }


/* ═════ §10 THE WHITE FRAME ═════
   Found it. The page wraps every section in .fw-outer, which carries:
       border:1px solid rgba(255,255,255,.7);
       background:rgba(255,255,255,.84);
       box-shadow:0 32px 100px rgba(0,51,172,.13);
   An 84%-opaque white panel with a near-white 1px border and a blue-tinted
   drop shadow. On the original page that is the intended look — the sections
   sit as light cards. On this dark page it renders as the light ring around
   the header, and the shadow is the soft halo just outside it.

   I had been forcing #main-content, #lbf-fw and the theme's wrappers
   transparent, but .fw-outer sits between them and the content and was never
   in that list. Neutralised here, along with .fw-canvas's own padding block. */
body.page-template-page-fireworks-v2-php .fw-outer{
	/* .fw-outer is the page's overall rounded container — it holds every
	   section, clips them to its radius, and is what gives the page its card
	   shape. 32.47.0 flattened it to kill the white ring, which threw the
	   container away with it. Only the COLOURS change here: the radius,
	   overflow:hidden and the shadow all stay so the shape is intact. */
	background:transparent !important;
	border:1px solid rgba(255,255,255,.10) !important;
	box-shadow:0 32px 100px rgba(0,0,0,.55) !important;
}
body.page-template-page-fireworks-v2-php .fw-canvas{ background:transparent !important; }


/* ═════ §11 THE HEADER SITS INSIDE THE CONTAINER ═════
   With .fw-outer restored as the rounded box, the header must not carry a
   second one. Its margin, radius, border and shadow are dropped so it sits
   flush at the top of the container; .fw-outer's own overflow:hidden clips
   its top corners to the container radius automatically. */
body.page-template-page-fireworks-v2-php .fwv2-hero{
	margin:0 !important;
	border:0 !important;
	border-radius:0 !important;
	box-shadow:none !important;
}


/* ═════ §12 TIGHTEN THE GAP UNDER THE NAV ═════
   The page clears the fixed nav with padding-top: calc(var(--header-h,82px)
   + 1.5rem). The 82px is the nav's own height and has to stay or the content
   slides under it; the 1.5rem on top is pure breathing room. That extra drops
   to 0.25rem, pulling the whole page up ~20px.

   32.50.0 takes a further 10px. There was no slack left above — 0.25rem is
   only 4px — so it comes out of the nav clearance itself: 82px becomes 72px.
   Safe rather than arbitrary: the theme's other --header-h value is 68px, so
   72px still clears the shorter nav, and the nav renders as a floating pill
   with its own margin rather than a full-bleed bar.

   The two .admin-bar variants add 32px (desktop) and 46px (mobile) for the
   WordPress toolbar. Both are kept — without them the page would tuck under
   the toolbar while logged in — just with the same reduced gap. */
body.page-template-page-fireworks-v2-php .fw-canvas{
	padding-top:calc(var(--header-h,82px) - 10px + 0.25rem) !important;
}
body.admin-bar.page-template-page-fireworks-v2-php .fw-canvas{
	padding-top:calc(var(--header-h,82px) - 10px + 32px + 0.25rem) !important;
}
@media screen and (max-width:782px){
	body.admin-bar.page-template-page-fireworks-v2-php .fw-canvas{
		padding-top:calc(var(--header-h,82px) - 10px + 46px + 0.25rem) !important;
	}
}


/* ═════ §13 READABLE BODY COPY ═════
   .fw-moment__inner is 780px wide and centred, and .fw-moment__body sets no
   measure of its own. At 1rem that column fits roughly 95–100 characters per
   line — comfortable reading is 60–75 — and centring long paragraphs means
   every line starts at a different point, so the eye loses the left edge on
   every return. The three paragraphs are 244, 320 and 122 characters, so they
   wrap to three or four lines each and the last line of each is left stranded.

   Fixes, applied to the long paragraphs only:
     · measure capped at 62ch, which lands around 62–68 characters
     · left-aligned, while the column itself stays centred in the section
     · the eyebrow, heading and rule above stay centred — they are short
       enough that centring reads as deliberate
     · text-wrap:pretty asks the browser to avoid a one-word last line;
       it is ignored by browsers that do not support it, so nothing breaks
     · line-height eased from 1.85 to 1.7, which is more comfortable once the
       lines are shorter */
body.page-template-page-fireworks-v2-php .fw-moment__body,
body.page-template-page-fireworks-v2-php .fw-encore__body{
	max-width:62ch;
	margin-left:auto;
	margin-right:auto;
	text-align:left;
	line-height:1.7;
	text-wrap:pretty;
}
body.page-template-page-fireworks-v2-php .fw-moment__body{ margin-bottom:1.35rem; }

/* the FAQ answers have no measure either and run the full panel width */
body.page-template-page-fireworks-v2-php .fw-faq__a{
	max-width:68ch;
	line-height:1.7;
	text-wrap:pretty;
}

/* the hero lead is already capped at 580px; just soften the wrap */
body.page-template-page-fireworks-v2-php .fwv2-copy .fw-hero__lead{ text-wrap:pretty; }

@media (max-width:640px){
	body.page-template-page-fireworks-v2-php .fw-moment__body,
	body.page-template-page-fireworks-v2-php .fw-encore__body{ max-width:none; }
}


/* ═════ §14 CHARTER LINKS OUT ═════
   Both Charter marks — the header lockup and the sponsor section further down
   — link to cnginc.com. New tab, with rel="noopener noreferrer sponsored":
   noopener/noreferrer are the standard safety pair for target=_blank, and
   sponsored is what Google asks for on a paid placement. Each carries an
   aria-label warning that it opens a new tab, since the link text is an image.
   line-height:0 stops the anchor adding a descender gap under the logo. */
body.page-template-page-fireworks-v2-php .fwv2-cng-link{
	display:inline-block;
	line-height:0;
	text-decoration:none;
	border-radius:11px;
	transition:transform .18s ease, box-shadow .18s ease;
}
body.page-template-page-fireworks-v2-php .fwv2-cng-link:hover{ transform:translateY(-2px); }
body.page-template-page-fireworks-v2-php a.fw-presents__plate:hover{
	box-shadow:0 0 0 1px rgba(255,255,255,.7),0 0 40px rgba(255,255,255,.22),0 12px 30px rgba(0,0,0,.55);
}
body.page-template-page-fireworks-v2-php .fwv2-cng-link:focus-visible{
	outline:3px solid #f3c303;
	outline-offset:4px;
}