/*
 * --- Header layout fixes ---
 * CEC's main-nav.css gives .site-navigation `width: 100%` on desktop, which
 * only works because their build pipeline sets min-width: 0 on flex children
 * (default browser min-width is `auto`, which is the item's content size and
 * prevents shrinking). Without that, .site-navigation refuses to shrink and
 * pushes primary-nav onto a new row. Forcing the flex behavior we want.
 */
@media ( min-width: 64em ) {
	.main-nav {
		justify-content: flex-start;
		flex-wrap: nowrap;
		gap: 1.5rem;
	}
	.main-nav > * {
		min-width: 0;
	}
	/* Content-sized so menu items cluster right after the logo, not spread
	 * across the full row. */
	.site-navigation {
		display: flex;
		align-items: center;
		height: 100%;
		flex: 0 1 auto;
	}
	.site-navigation > div {
		display: flex;
		align-items: center;
		height: 100%;
	}
	/* CTA gets pushed to the far right of .main-nav. */
	.main-nav > :last-child {
		margin-left: auto;
	}
	/* CEC items lean on .site-navigation: width 100% + justify-content:
	 * space-between to space themselves; since we made .site-navigation
	 * content-sized, give the items an explicit gap instead. */
	#primary-nav.primary-menu {
		gap: 2.5rem;
	}
}

/*
 * Adventure World — AW-specific frontend styles.
 *
 * Loaded after cec-baseline.css, so anything here overrides the baseline.
 * Keep this file slim: only put rules here that are AW-only (block style
 * variations, the location-list shortcode, brand polish). Anything that
 * lives in cec-baseline.css should not be redeclared here.
 */

/*
 * ===========================================================================
 * Adventure World design tokens (declared in theme.json settings.custom)
 * ===========================================================================
 * Sampled from the Figma comp "Home - Version A - Classic Stack",
 * file mXtydfpWCo7WBbb6KQPu2O, desktop node 175:142 and mobile node 256:2533.
 *
 * Fonts
 *   --wp--custom--font--family--body     Anybody. All copy, row titles, FAQ
 *                                        questions, button labels.
 *   --wp--custom--font--family--display  Summer Blaster. Section headings, h1.
 *   --...--family--primary / --secondary  CEC baseline tokens. Deliberately
 *                                        left on Montserrat / Summer Blaster
 *                                        so inherited chrome keeps its
 *                                        styling until the header/footer are
 *                                        redesigned.
 *
 * Type scale (--wp--custom--font--size--aw--*)
 *   Fluid, interpolated between 430 and 1440 from the two comp widths:
 *   section-heading 44->84, row-title 40->64, sub-head 20->24,
 *   faq-question 20->28. Body copy and button labels are a flat 18px/28px.
 *
 * Colors (--wp--custom--color--aw--*)
 *   button-primary  #FFD03F on #000 text. The comp has no red button.
 *   brand-green     #008737. Header and footer.
 *   faq-answer-text #707070.
 *   ramp--*         Section fill stops. See the ramp chain documented in
 *                   aw-page-publisher/assets/aw-patterns.css.
 *
 * GOTCHA: WordPress emits every key under settings.custom as a real CSS
 * custom property on :root, including keys named _comment. Prose there is
 * NOT a comment. An apostrophe in such a value opens a CSS string that never
 * closes and silently kills every declaration after it in the block — which
 * is how the whole token set went dead once already. Document tokens here,
 * in a file where comments are actually comments.
 */

/*
 * --- Body typography: Anybody ---
 * theme.json sets styles.typography to the AW body font, but that lands in
 * the `global-styles` inline block, and cec-baseline.css ships its own
 * `body{font-family:var(--wp--preset--font-family--montserrat);...}` rule.
 * Identical specificity, and the baseline is enqueued afterwards, so the
 * baseline wins and every page renders in Montserrat regardless of what
 * theme.json says. Restating it here — after the baseline — is what actually
 * makes Anybody apply.
 *
 * Font sizes/line-heights come from the tokens in theme.json rather than
 * literals so the fluid 430->1440 scale stays in one place.
 */
body {
	font-family: var( --wp--custom--font--family--body );
	font-size: var( --wp--custom--font--size--aw--body );
	font-weight: 400;
	line-height: 1.5556;
}

/*
 * --- Reset bare <article> grid on singular pages/posts ---
 * CEC's baseline ships a bare `article{}` selector configured for archive
 * cards: 2-col grid, padding, border-bottom. WordPress page.php wraps
 * content in <article class="post-X page type-page hentry">, so that
 * styling matches the singular-page article too — constraining the hero
 * and content sections to one grid column. The homepage barely shows it
 * because every block is .alignfull, but other pages (e.g. /menu) end up
 * with a half-width hero on desktop.
 */
body.page article.hentry,
body.single article.hentry {
	display: block;
	grid-template-columns: none;
	grid-template-rows: none;
	border-bottom: 0;
	padding: 0;
}

/*
 * --- Contain decorative bleed ---
 * [aw_decor] art and [aw_split] character images intentionally hang past the
 * viewport edge (the comp does this constantly — planet-3 sits at x=-421 of
 * 1440). Left uncontained that widens the scroll area and produces a
 * horizontal scrollbar on every page carrying decor.
 *
 * `overflow-x: clip` rather than `hidden` on purpose: `hidden` would make
 * .site-main a scroll container, which breaks `position: sticky` for anything
 * inside it and changes how anchor links scroll. `clip` just clips. The sticky
 * <header> is a sibling of <main>, so it is unaffected either way.
 *
 * overflow-y is set back to `visible` explicitly: cec-baseline.css carries
 * its own `.site-main { overflow: hidden }` (both axes), and this rule's
 * overflow-x longhand only ever overrode the X component — Y stayed hidden,
 * silently clipping anything meant to bleed past the bottom of the page's
 * last section (e.g. [aw_band]'s tree/mushrooms on the homepage).
 *
 * Deliberately NOT also giving .site-main its own z-index to win against
 * <footer> (tried and reverted): `.site-main` has `isolation: isolate`
 * (also from cec-baseline.css), which makes it a stacking context on its
 * own — giving it a positive z-index makes the ENTIRE element outrank the
 * entire footer as one unit, which means decor bleeding past the seam
 * covers the footer's own logo/address/nav text too, not just its
 * background. That question is moot now: the comp does not carry any decor
 * across the footer seam at all — the band's art is cut flat at the seam and
 * the footer below it is unbroken green (Figma nodes 250:1290 / 237:390). So
 * [aw_band] clips its own art at its bottom edge instead of anything trying
 * to escape <main>. See .aw-flow-section--band in aw-patterns.css.
 */
.site-main {
	overflow-x: clip;
	overflow-y: visible;
}

/*
 * --- Footer seam ---
 * position:relative is load-bearing: cec-baseline.css carries
 * `#back-to-top{position:absolute;right:0}`, which needs the footer as its
 * containing block or the button flies to the page corner.
 *
 * Nothing decorative crosses this seam. An earlier build rendered a second,
 * cropped copy of the homepage band's tree/mushroom art inside <footer>
 * (partials/footer-tree-bleed.php, now removed) on the assumption that the
 * comp continued the illustration behind the footer. It does not — in the
 * comp the band's art is cut flat at the seam and the footer is unbroken
 * green (Figma 250:1290 band vs 237:390 footer; measured: zero art pixels
 * below the seam). Two things made that overlay visibly wrong rather than
 * merely redundant: its 100px window was shorter than the art actually
 * overhanging it, so the tree was sliced off mid-root, and its hard-coded
 * offsets had drifted out of sync with the [aw_decor] values in post 7,
 * so the two copies no longer met at the seam. [aw_band] now clips its own
 * art instead — one copy, no seam to keep in sync.
 */
#site-footer {
	position: relative;
}
#site-footer-inner {
	position: relative;
}

/*
 * --- Full-bleed breakouts inside the constrained article ---
 * CEC's :where(.site-main) > * rule constrains every direct child (incl.
 * our <article>) to --wp--custom--layout--content. So inside the article,
 * .alignfull blocks and is-style-hero covers need explicit viewport-width
 * breakout — baseline's margin-inline:-var(--layout-padding-inline) only
 * undoes the padding, not the content constraint.
 */
#main .alignfull,
#main .wp-block-cover.is-style-hero {
	margin-left: calc( 50% - 50vw );
	margin-right: calc( 50% - 50vw );
	max-width: 100vw;
	width: 100vw;
}

/*
 * --- .alignwide breakout, same problem as .alignfull above ---
 *
 * The baseline ships a whole width ladder for wide blocks —
 * `.alignwide` (886) plus `.alignwide--963/1000/1114/1187/1340` modifiers — but
 * every one of those selectors is `:where(.site-main) > …`, i.e. DIRECT children
 * of <main>. Our page templates put the content inside an <article>, so nothing
 * an editor writes ever matches them: `alignwide` and its modifiers have been
 * completely inert, silently rendering at the 41.25rem content width.
 *
 * That is not a hypothetical. The Menu page carries `alignwide--1114` and the
 * Privacy page carries `alignwide`, and both drew at 660px — which is what
 * "the privacy page content is very narrow" was.
 *
 * Same fix as .alignfull directly above, capped instead of full-bleed: break out
 * of the article's clamp with a negative inline margin, but only as far as the
 * requested ladder step. `50%` resolves against the 660px article, so
 * `calc(50% - W/2)` centres a W-wide box on the article's own centre line, which
 * is also the page's. min() against the viewport minus its gutters is what keeps
 * it from overflowing on anything narrower than the step — at 390px the box
 * lands at exactly the article's own width, so mobile is unchanged.
 *
 * Scoped to `> article >` deliberately, NOT `#main .alignwide`: the percentage
 * in that margin is relative to the parent, so a nested .alignwide (inside a
 * column, or inside one of the ported legal pages' own .aw-*-wrap sections)
 * would compute its breakout against the wrong box. Direct children only, which
 * is the same contract the baseline rules were written for.
 */
#main > article > .alignwide {
	--aw-wide-step: var( --wp--custom--layout--wide--886, 55.375rem );
	--aw-wide-w: min(
		var( --aw-wide-step ),
		100vw - 2 * var( --layout-padding-inline, 1.625rem )
	);
	width: var( --aw-wide-w );
	max-width: none;
	margin-inline: calc( 50% - var( --aw-wide-w ) / 2 );
}
#main > article > .alignwide.alignwide--963  { --aw-wide-step: var( --wp--custom--layout--wide--963,  60.1875rem ); }
#main > article > .alignwide.alignwide--1000 { --aw-wide-step: var( --wp--custom--layout--wide--1000, 62.5rem ); }
#main > article > .alignwide.alignwide--1114 { --aw-wide-step: var( --wp--custom--layout--wide--1114, 69.625rem ); }
#main > article > .alignwide.alignwide--1187 { --aw-wide-step: var( --wp--custom--layout--wide--1187, 74.1875rem ); }
#main > article > .alignwide.alignwide--1340 { --aw-wide-step: var( --wp--custom--layout--wide--1340, 83.75rem ); }

/*
 * --- Adventurewave color extensions ---
 * CEC's baseline ships .bg-blue/.bg-red/.bg-purple/.bg-violet/.bg-white for
 * .adventurewave:before, but not orange or green — both of which we need for
 * the AW homepage. Match CEC's gradient style (vertical, two-to-five stops).
 */
.adventurewave.bg-orange:before {
	background: linear-gradient( 180deg, #ffb347 0, #ff8a00 50%, #ff6a00 );
}
.adventurewave.bg-green:before {
	background: linear-gradient( 180deg, #5fd068 0, #3fb142 50%, #2e7d32 );
}

/*
 * --- Stacked adventurewave inner ---
 * CEC's .adventurewave__inner becomes a flex row at >=768px, intended for
 * image-beside-text sections. The intro section is centered/stacked content
 * (logo + heading + paragraph), so it uses this variant instead.
 */
.adventurewave__inner.is-stacked {
	display: block;
	text-align: center;
}

/*
 * --- Full-Width Section (franchise-friendly editor pattern) ---
 * Lets editors build edge-to-edge coloured sections in Gutenberg without
 * touching alignfull / layout toggles. Workflow: insert a Group (or
 * Columns) → Styles sidebar → pick "Full-Width Section" → set a background
 * colour → drop inner blocks. The wrapper breaks out to the viewport via
 * calc(50% - 50vw) so the background spans edge-to-edge; direct children
 * are clamped back to the theme's contentSize so copy stays readable.
 * .alignwide / .alignfull inside still work — explicit children opt out
 * of the clamp.
 */
.wp-block-group.is-style-full-section,
.wp-block-columns.is-style-full-section {
	/* !important needed to defeat the editor's runtime-injected
	 * .is-layout-constrained > * { max-width: ... } rule which loads
	 * after this stylesheet and would otherwise clamp the section
	 * back to contentSize inside the block editor canvas. */
	margin-left: calc( 50% - 50vw ) !important;
	margin-right: calc( 50% - 50vw ) !important;
	max-width: 100vw !important;
	width: 100vw !important;
	padding-block: 4rem;
	padding-inline: var( --wp--custom--layout--gutter--sm, 1.625rem );
	box-sizing: border-box;
}
.wp-block-group.is-style-full-section > :where( :not( .alignwide ):not( .alignfull ) ),
.wp-block-columns.is-style-full-section > :where( :not( .alignwide ):not( .alignfull ) ) {
	max-width: var( --wp--custom--layout--content, 41.25rem );
	margin-left: auto;
	margin-right: auto;
}
.wp-block-group.is-style-full-section > .alignwide,
.wp-block-columns.is-style-full-section > .alignwide {
	max-width: var( --wp--custom--layout--wide--886, 55.375rem );
	margin-left: auto;
	margin-right: auto;
}

/*
 * --- Brand-variable wiring ---
 * Routes high-visibility colour decisions through the --aw-brand-* custom
 * properties set by mu-plugins/adventureworld-plugin's BrandSettings module.
 * Each var() has a fallback to the existing CEC palette so the site looks
 * identical until a franchise actually sets a value in AW Settings →
 * Brand Settings. Editor-picked button colours (has-X-background-color
 * classes) still win by specificity, so per-block overrides keep working.
 */
a:where( :not( .wp-element-button ):not( .wp-block-button__link ) ) {
	color: var( --aw-brand-accent, var( --wp--custom--color--red--100 ) );
	text-decoration-color: var( --aw-brand-accent, var( --wp--custom--color--red--100 ) );
}
.wp-element-button:where( :not( [class*="has-background"] ) ),
.wp-block-button > .wp-block-button__link:where( :not( [class*="has-background"] ) ) {
	background-color: var( --aw-brand-primary, var( --wp--custom--color--aw--button-primary ) );
	color: var( --aw-brand-primary-text, var( --wp--custom--color--aw--button-primary-text ) );
}
::selection {
	background-color: var( --aw-brand-primary, var( --wp--custom--color--aw--button-primary ) );
	color: var( --aw-brand-primary-text, var( --wp--custom--color--aw--button-primary-text ) );
}
/* Keyboard / tab focus ring on anything natively focusable. Uses
 * outline-only so it doesn't disturb layout. */
a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
.wp-element-button:focus-visible {
	outline: 2px solid var( --aw-brand-accent, var( --wp--custom--color--red--100 ) );
	outline-offset: 2px;
}

/* --- Block style variations registered in includes/block-styles.php --- */
.wp-block-button.is-style-pill .wp-block-button__link {
	border-radius: 999px;
}
.wp-block-group.is-style-sand-section {
	background: #f5ebd6;
	padding: 4rem 1rem;
}
.wp-block-heading.is-style-underlined {
	position: relative;
	padding-bottom: 0.5rem;
}
.wp-block-heading.is-style-underlined::after {
	content: "";
	display: block;
	width: 3rem;
	height: 4px;
	background: var( --aw-brand-primary, var( --wp--custom--color--purple--300, #910DC2 ) );
	margin-top: 0.5rem;
}

/*
 * ===========================================================================
 * Header and footer chrome — Adventure World green
 * ===========================================================================
 * The CEC baseline paints all of this purple, because it was lifted from
 * chuckecheese.com. Adventure World's comp (Figma nodes 250:1244 and 237:390)
 * is green: a flat yellow promo bar, a green nav that darkens left-to-right,
 * a black location strip, and a green footer that lightens top-to-bottom.
 * Gradient stops below are sampled from those two nodes.
 *
 * The markup already supports all of it — header.php emits .alert-banner from
 * the alert_banner post meta, plus .current-location / #location-selection-toggle
 * / .open-until, and footer.php emits the location, hours and menu blocks. This
 * is a restyle, not a rebuild.
 */

/* --- Promo bar (alert_banner post meta) --- */
header .alert-banner {
	background-color: #FFCC00;
	color: #000;
	/* display:block, not the baseline's flex. As a flex container every child
	 * — the <strong>, the <a>, and each run of text — becomes a flex item, and
	 * whitespace BETWEEN flex items is discarded, so "NEW! Birthday" rendered
	 * as "NEW!Birthday" and "$100! BOOK NOW" as "$100!BOOK NOW". Going back to
	 * normal inline flow preserves the spaces; text-align replaces
	 * justify-content for the centring. */
	display: block;
	text-align: center;
	/* Baseline pins this to a 1.875rem strip sized for a thin red alert; the
	 * comp's promo bar is taller and carries real sentence-length copy. */
	height: auto;
	min-height: 2.75rem;
	padding: 0.625rem 1.5rem;
	font-family: var( --wp--custom--font--family--body );
	font-weight: 700;
	font-size: 1rem;
	line-height: 1.35;
}
header .alert-banner a,
header .alert-banner strong {
	color: #000;
}
header .alert-banner a {
	text-decoration: underline;
}
/* Mobile: the desktop 16px/2.75rem strip wraps to two lines on a phone and
 * takes ~63px off the top of the viewport before the hero even starts. The copy
 * is the same length either way, so the size is the only lever (web feedback
 * 2.0: "reduce the banner size slightly in mobile — I think we just need to
 * adjust text size"). */
@media ( max-width: 47.9375em ) {
	header .alert-banner {
		min-height: 2.25rem;
		padding: 0.5rem 1rem;
		font-size: 0.875rem;
		line-height: 1.3;
	}
}

/* --- Nav bar --- */
.nav-container {
	background: linear-gradient( 90deg, #41A750 0%, #158F37 55%, #008737 100% );
}

/* The Adventure World lockup is a 400x163 raster with no intrinsic sizing in
 * CSS, so it rendered at full height inside a 100px nav and was clipped top
 * and bottom. Comp has it about 80px tall on desktop (Figma node 250:1244). */
#site-logo img {
	display: block;
	height: 56px;
	width: auto;
}
@media ( min-width: 64em ) {
	#site-logo img {
		height: 80px;
	}
}

/*
 * Keep the hamburger up to the desktop breakpoint.
 *
 * NOT in web feedback 2.0 — found while checking the header changes above, and
 * fixed because the symptom is that the site has NO navigation at all between
 * 768px and 1023px on a mouse device. Two breakpoints disagreed:
 *
 *   · cec-baseline.css hides .site-menu-toggle from `min-width: 48em` (768),
 *     because on CEC the horizontal nav takes over there;
 *   · frontend.js uses `min-width: 64em` (1024) as DESKTOP_QUERY and so still
 *     sets aria-hidden="true" on #primary-nav below it, which the baseline's
 *     `#primary-nav.primary-menu.is-visible[aria-hidden=true]{display:none}`
 *     honours.
 *
 * So in that 256px band the menu was hidden and the button that opens it was
 * hidden too. 64em is the intended AW breakpoint — the desktop nav's own type
 * styling below starts there, and .nav-container/#site-logo switch there — so
 * the toggle is what moves, not the JS.
 */
@media ( min-width: 48em ) and ( max-width: 63.9375em ) {
	.site-menu-toggle {
		display: flex;
		visibility: visible;
	}
}

@media ( min-width: 64em ) {
	#primary-nav.primary-menu > .menu-item > a {
		color: #fff;
		font-family: var( --wp--custom--font--family--body );
		font-weight: 700;
		font-size: 0.9375rem;
		letter-spacing: 0.02em;
		text-transform: uppercase;
		text-decoration: none;
	}
	#primary-nav.primary-menu > .menu-item > a:hover,
	#primary-nav.primary-menu > .menu-item > a:focus-visible {
		text-decoration: underline;
	}
}

/* Header CTA — solid white pill with green label. The baseline styles this as
 * a transparent 3px-outlined pill, which is the footer's treatment. */
#menu-header-cta-menu > .menu-item > a {
	background-color: #fff;
	color: #008737;
	border: 3px solid #fff;
	border-radius: 999px;
	padding: 0.6em 1.5em;
	font-family: var( --wp--custom--font--family--body );
	font-weight: 800;
	font-size: 0.9375rem;
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}
#menu-header-cta-menu > .menu-item > a:hover,
#menu-header-cta-menu > .menu-item > a:focus-visible {
	background-color: transparent;
	color: #fff;
}

/* --- Location strip --- */
#location-selector-nav {
	background-color: #000;
	gap: 1.25rem;
}
#location-selector-nav,
#location-selector-nav a,
#location-selector-nav p {
	color: #fff;
}
#location-selector-nav a {
	text-decoration: none;
}
#location-selector-nav a:hover,
#location-selector-nav a:focus-visible {
	text-decoration: underline;
}
/* Store name in the display face, per the comp. The baseline's per-breakpoint
 * `zoom` rules on this element are left alone above 767px — they are how CEC
 * scales it. */
#location-selector-nav .current-location {
	font-family: var( --wp--custom--font--family--display );
	text-transform: uppercase;
}

/*
 * Mobile location strip — the store name was getting its top sliced off.
 *
 * Two independent causes, both only visible below 768px:
 *
 * 1. The baseline sets `.current-location { line-height: 1 }`. Summer Blaster's
 *    caps overshoot a 1.0 line box by ~7px at 20px, so the glyph box (34px)
 *    stood taller than its own line box (20px) and poked out of
 *    #location-selector-nav's fixed 3.75rem height — the part above the strip
 *    landed on the green nav behind it and read as a flat cut at the seam.
 *
 * 2. The baseline's `zoom` ladder for this element is gated on
 *    `(pointer:fine) and (hover:hover)`, so a phone never gets it but a DESKTOP
 *    browser dragged narrow does — paired with `#location-selector-nav
 *    { height: .8rem }` under 26.8125em, which is a 12.8px strip holding 8px
 *    type. Reviewing "mobile" in a resized desktop window therefore showed a
 *    different, more broken strip than a real phone.
 *
 * Fixing both together is what makes the two agree: one mobile treatment,
 * whatever the pointer type. `height: auto` + min-height lets the strip grow
 * for the taller line box instead of clipping it. Scoped to the site's own
 * 767px mobile breakpoint so the desktop strip (2.375rem, zoom:1) is untouched.
 */
@media ( max-width: 47.9375em ) {
	#location-selector-nav {
		height: auto;
		min-height: 3.75rem;
		padding-block: 0.5rem;
		row-gap: 0.5rem;
	}
	#location-selector-nav .current-location {
		zoom: 1;
		line-height: 1.7;
	}
	/*
	 * The other half of the same ladder. CEC pairs the `zoom` steps above with
	 * `.nav-container { height: 1.75rem/2.25rem }` at the same
	 * `(pointer:fine)` widths — a 28px green bar. That works on CEC because
	 * everything inside it is type that zooms with it; AW's header holds a
	 * raster lockup pinned to `height: 56px` (below), which does not, so the
	 * logo overflowed UP out of the bar and printed across the promo banner.
	 * Restored to the baseline's own sub-64em default so a narrow desktop
	 * window renders the same header a phone does — which is also what makes
	 * a resized-browser review trustworthy.
	 */
	.nav-container {
		height: 5.625rem;
	}
}
#location-selector-nav .current-location strong {
	font-weight: 400;
}
#location-selector-nav .open-until {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin: 0;
	font-size: var( --wp--custom--font--size--12 );
}

/* --- Footer --- */
#site-footer {
	background: linear-gradient( 180deg, #008737 0%, #2A9C36 40%, #6EB339 100% );
	/* The last [aw_band] on a page ends flush against the footer, so the AW
	 * lockup started immediately under the band's cut line with no breathing
	 * room at all (web feedback 2.0, home + About). The band cannot supply the
	 * gap itself: it clips its own overhanging art at its bottom edge, so any
	 * padding added there would show as empty gradient inside the band. */
	padding-top: 40px;
}
/*
 * Footer links: white underline, not the brand red.
 *
 * The site-wide `a:where(...)` rule up in the brand-variable block paints both
 * the link colour AND its underline with --aw-brand-accent (red-100). In the
 * footer that colour is overridden to white by the baseline, but
 * text-decoration-color is a separate property and kept the red — so the
 * address block rendered as white text sitting on red rules. currentColor ties
 * the underline to whatever the link colour resolves to, here and if the
 * footer's palette ever changes.
 *
 * text-decoration-line is set explicitly for the same reason: the underline was
 * present on some address lines and absent on others depending on how the
 * <br>-separated line boxes fell, which read as an inconsistent bug rather than
 * a style.
 */
#site-footer a:where( :not( .wp-element-button ):not( .wp-block-button__link ) ) {
	text-decoration-line: underline;
	text-decoration-color: currentColor;
	text-underline-offset: 0.18em;
}
/* Pre-opening locations have no hours to list; see footer.php. Same muted
 * weight the address lines carry so it reads as pending data, not as a link. */
.site-footer__hours-pending {
	margin: 0;
	font-weight: 400;
}

/*
 * --- Footer legal row ---
 * The `footer-legal` menu rendered inside #footer-copyright (see footer.php).
 * The baseline styles #menu-footer-cta-menu and the primary footer menu but has
 * nothing for this one, so it inherited plain <ul> defaults and rendered as a
 * bulleted vertical stack — wrong for a legal row, and on mobile it turned four
 * links into four lines under the copyright.
 *
 * An inline wrapping row instead, centred so it reads correctly in both of
 * #footer-copyright's states: opposite the copyright line on desktop (the
 * baseline flips that row to `row` + `space-between` at the wide breakpoint) and
 * centred beneath it on mobile, where the row is `column`. Type is pinned to the
 * same 12px the copyright uses so the two halves of the row match.
 */
#footer-copyright .footer-legal-nav ul {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: center;
	/* Row gap first: it only applies once the links wrap. */
	gap: 0.35rem 1.25rem;
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer-copyright .footer-legal-nav li {
	margin: 0;
	padding: 0;
	list-style: none;
}
#footer-copyright .footer-legal-nav a {
	font-size: var( --wp--custom--font--size--12 );
	/* Each label is short and reads as one unit; wrapping "Copyright &
	 * Trademarks" mid-phrase would make the row look broken rather than wrapped. */
	white-space: nowrap;
}
@media ( max-width: 47.9375em ) {
	/* Stacked under the copyright, so give the two some separation. */
	#footer-copyright .footer-legal-nav {
		margin-top: 0.5rem;
	}
}
/* Match the 1240px content width the rest of the page uses rather than the
 * baseline's 1340px. */
#site-footer-inner {
	max-width: 1240px;
}
#site-footer h4 {
	font-family: var( --wp--custom--font--family--body );
	font-weight: 800;
	text-transform: uppercase;
}

/* Footer CTA pills. The comp shows the first as a solid white pill with green
 * text ("Book a Birthday") and any subsequent one outlined ("Contact Us"),
 * which is what the baseline already does — so only the first is overridden.
 *
 * Selector deliberately mirrors the baseline's own
 * `#menu-footer-cta-menu li.menu-item:nth-child(2n+1) > a` (which paints the
 * odd items purple). A shorter `#menu-footer-cta-menu > .menu-item:first-child
 * > a` loses to it on specificity and the label stayed purple; matching the
 * li.menu-item shape ties the specificity so source order decides, and this
 * file loads after the baseline. */
#menu-footer-cta-menu li.menu-item:first-child > a {
	background-color: #fff;
	color: #008737;
	text-decoration: none;
}
#menu-footer-cta-menu li.menu-item:first-child > a:hover,
#menu-footer-cta-menu li.menu-item:first-child > a:focus-visible {
	background-color: transparent;
	color: #fff;
}

/* Back-to-top sits on the green footer; the baseline gives it a purple
 * chevron on yellow. */
#site-footer #back-to-top svg,
#site-footer #back-to-top svg path {
	fill: #008737;
}
/* #footer-secondary is `justify-content: space-between` with the social row and
 * the app badges as its other two children. Both are held back pre-launch (see
 * footer.php), which left the button as the row's only item and space-between
 * with nothing to space — so it snapped to the left edge. An auto left margin
 * keeps it right-aligned at any child count, so restoring either row later puts
 * it back without another change here. */
#footer-secondary #back-to-top {
	margin-left: auto;
}

/* --- Location list shortcode ([list-locations-by-feature]) --- */
.aw-location-list {
	max-width: 720px;
	margin: 0 auto;
	padding: 2rem 1rem;
}
.aw-location-list__state {
	border-bottom: 1px solid #e5e5e5;
	padding: 0.75rem 0;
}
.aw-location-list__state summary {
	cursor: pointer;
	font-weight: 700;
	font-size: 1.125rem;
}
.aw-location-list__count {
	color: #777;
	font-weight: 400;
	font-size: 0.875rem;
}
.aw-location-list__state ul {
	list-style: none;
	padding: 0.75rem 0 0 0;
	margin: 0;
}
.aw-location-list__state li {
	padding: 0.5rem 0;
	display: flex;
	flex-direction: column;
	gap: 0.125rem;
}
.aw-location-list__address {
	color: #555;
	font-size: 0.875rem;
}

/*
 * ===========================================================================
 * Location picker modal (partials/location-picker-modal.php)
 * ===========================================================================
 * Replaces the header's old "Select Location" link-out to
 * locations.adventureworld.com. assets/js/location-picker.js toggles
 * [hidden]; everything else here is just modal chrome plus the two card
 * states (the visitor's current location vs. every other one).
 */
.aw-location-modal {
	position: fixed;
	inset: 0;
	z-index: 200;
	overflow-y: auto;
	padding: 4rem 1rem;
}
/* display:flex lives on :not([hidden]), not on the bare class above, because
   `[hidden]` (an attribute selector) and `.aw-location-modal` (a class
   selector) carry the exact same specificity, 0-1-0 — an unconditional
   `display:flex` on the class sits later in the cascade than the browser's
   own `[hidden]{display:none}` UA rule and always wins, which made the JS's
   hidden-attribute toggle (assets/js/location-picker.js) completely
   invisible: the modal rendered regardless of the attribute, open on every
   page load. Adding :not([hidden]) raises this selector's specificity past
   the attribute selector alone, so `[hidden]` wins when present. */
.aw-location-modal:not([hidden]) {
	display: flex;
	align-items: flex-start;
	justify-content: center;
}
/* Prevents the page behind the modal from also scrolling — the modal's own
   backdrop covers the viewport, but without this the body underneath can
   still scroll on touch devices ("scroll-through"). */
body.aw-location-modal-open {
	overflow: hidden;
}
.aw-location-modal__backdrop {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, 0.5);
	z-index: 0;
}
.aw-location-modal__dialog {
	position: relative;
	z-index: 1;
	width: 100%;
	max-width: 34rem;
	margin: 0 auto;
	background: #fff;
	border-radius: 20px;
	padding: 2rem 1.75rem 1.75rem;
	box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
	box-sizing: border-box;
}
.aw-location-modal__close {
	position: absolute;
	top: 1rem;
	right: 1rem;
	width: 2rem;
	height: 2rem;
	display: flex;
	align-items: center;
	justify-content: center;
	background: none;
	border: 0;
	border-radius: 999px;
	color: #666;
	font-size: 1.75rem;
	line-height: 1;
	cursor: pointer;
}
.aw-location-modal__close:hover,
.aw-location-modal__close:focus-visible {
	background: #f0f0f0;
	color: #111;
}
.aw-location-modal__logo {
	display: block;
	height: 49px;
	width: auto;
	/* Only the logo centers — heading/subhead/list below stay left-aligned,
	   so this is margin:auto on the logo itself, not text-align on the
	   dialog. */
	margin: 0 auto 1rem;
}
.aw-location-modal__heading {
	margin: 0;
	font-family: var(--wp--custom--font--family--body, "Anybody", sans-serif);
	font-weight: 900;
	font-size: 1.75rem;
	line-height: 1.15;
	text-transform: uppercase;
	color: #111;
}
.aw-location-modal__subhead {
	margin: 0.5rem 0 1.5rem;
	font-size: 0.9375rem;
	color: #666;
}
.aw-location-modal__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: grid;
	gap: 1rem;
}
.aw-location-modal__item {
	border: 1px solid #e2e2e2;
	border-radius: 14px;
	padding: 1.125rem 1.25rem;
}
/* The visitor's current location gets the same green tint/border treatment
   the comp uses to distinguish it from every other card. */
.aw-location-modal__item--current {
	border-color: var(--wp--custom--color--aw--brand-green, #008737);
	background: color-mix(in srgb, var(--wp--custom--color--aw--brand-green, #008737) 6%, #fff);
}
.aw-location-modal__name {
	margin: 0;
	font-size: 1.0625rem;
	font-weight: 800;
	color: #111;
}
.aw-location-modal__address {
	margin: 0.2rem 0 0;
	font-size: 0.875rem;
	color: #666;
}
.aw-location-modal__meta {
	margin: 0.4rem 0 0;
	display: flex;
	align-items: center;
	gap: 0.75rem;
	font-size: 0.875rem;
}
.aw-location-modal__phone { color: #111; }
.aw-location-modal__hours { color: var(--wp--custom--color--aw--brand-green, #008737); font-weight: 700; }
/* The label is what makes an unfamiliar value ("Coming soon", "Open today
 * until 8:00 PM") legible as HOURS rather than as an unexplained status line.
 * Muted so the value still reads first. */
.aw-location-modal__hours-label {
	color: #666;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	font-size: 0.8125rem;
}
/* Pre-opening locations. Listed deliberately — guests want to know a location
 * is on the way — but the card has to say so, or an address with no hours reads
 * as an open store whose data is broken. */
.aw-location-modal__name {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 0.5rem;
}
.aw-location-modal__badge {
	flex: none;
	padding: 0.15em 0.6em;
	border-radius: 999px;
	background: var(--wp--custom--color--aw--button-primary, #FFD03F);
	color: #111;
	font-size: 0.6875rem;
	font-weight: 800;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
}
.aw-location-modal__button {
	display: inline-flex;
	align-items: center;
	gap: 0.4rem;
	margin-top: 0.9rem;
	padding: 0.55rem 1.1rem;
	border-radius: 999px;
	font-family: var(--wp--custom--font--family--body, "Anybody", sans-serif);
	font-weight: 800;
	font-size: 0.8125rem;
	letter-spacing: 0.02em;
	text-transform: uppercase;
	text-decoration: none;
	border: 0;
}
/* Current location: green, checkmark, not a link — there's nowhere to send
   the visitor, they're already here. */
.aw-location-modal__button--current {
	background: var(--wp--custom--color--aw--brand-green, #008737);
	color: #fff;
}
.aw-location-modal__button--current svg { flex: none; }
/* Every other location: red, per explicit request — the comp's own design
   used the same green as --current for this button. Red-200 is the theme's
   original CEC brand red — still declared in theme.json even though the
   site's primary button elsewhere is now yellow (see aw-page-publisher's
   aw-patterns.css) — reused here rather than introducing a third red into
   the token set. */
.aw-location-modal__button--select {
	background: var(--wp--custom--color--red--200, #E80016);
	color: #fff;
}
.aw-location-modal__button--select:hover,
.aw-location-modal__button--select:focus-visible {
	filter: brightness(0.92);
}
.aw-location-modal__more {
	margin: 1.25rem 0 0;
	text-align: center;
	font-size: 0.8125rem;
	color: #999;
}

/*
 * ===========================================================================
 * Chromium lazy-image stale-compositor-layer bug (site-wide)
 * ===========================================================================
 * A `loading="lazy"` image — every content image on this site uses it,
 * combined with `decoding="async"` — can finish decoding, well after the
 * page's initial paint, without Chromium actually repainting it into the
 * already-composited frame. `img.complete` and `img.naturalWidth` both
 * report fully loaded and the element's box has the correct size in every
 * case checked, but the pixels never appear — until something UNRELATED
 * forces a repaint of that area (scrolling past it again, a resize, dev
 * tools nudging a style). That's why it presents as "intermittent": it's
 * not the load failing, it's the paint being skipped, and any later
 * incidental repaint fixes it retroactively. Confirmed directly: manually
 * setting `transform: translateZ(0)` on a stuck image made it appear
 * instantly, with no other change.
 *
 * The fix is the standard workaround for this class of bug — promote every
 * lazy image to its own GPU compositing layer up front, so Chromium
 * rebuilds that layer's content the moment the image data is ready instead
 * of leaving a stale empty layer from the initial paint. There's no visible
 * side effect for a static image; this isn't a hack scoped to one photo, it
 * applies to every `loading="lazy"` image site-wide since any of them can
 * hit this.
 *
 * will-change:transform, not transform:translateZ(0) — several .aw-char
 * corner variants (aw-page-publisher's aw-patterns.css) already carry a real
 * `transform` for positioning (e.g. --bottom-center's translateX(-50%)), and
 * that stylesheet loads AFTER this one, so at equal selector specificity its
 * transform would silently win and this fix would never apply to exactly
 * the images most likely to need it. will-change doesn't touch the
 * transform property at all, so it can't be clobbered by — or clobber —
 * any positioning transform.
 *
 * `.aw-decor img` is included explicitly, not just `img[loading="lazy"]`:
 * these render eager (see aw-shortcodes.php — lazy never reliably fires on
 * them, a separate bug), so they'd otherwise fall outside this selector and
 * be just as exposed to the same stale-layer bug — confirmed directly, a
 * decor image can report complete:true/opacity:1/correct pixel data via
 * canvas sampling while still never appearing in the actual composited
 * screenshot until this promotion is added.
 */
img[loading="lazy"],
.aw-decor img {
	will-change: transform;
}

/*
 * --- Footer: Adventure World logo, social row, app badges ---
 * Matching the footer comp (Figma node 821:3240).
 *
 * The CEC baseline caps `.footer-logo` at 55px / 71px, which suits CEC's wide,
 * short wordmark. The Adventure World lockup is a 400x159 stacked mark (aspect
 * 2.5 vs CEC's ~4.6), so that height crushes it to ~179px wide against the
 * comp's 400. Override on a #id-scoped selector so it beats the baseline's
 * plain `.footer-logo` without !important.
 */
#footer-logo img.footer-logo--aw {
	height: auto;
	width: 324px;   /* comp, mobile (Figma node 821:3919) */
	max-width: 100%;
}

@media (min-width: 64em) {
	#footer-logo img.footer-logo--aw {
		width: 400px;   /* comp, desktop (Figma node 821:3887) */
	}
}

/*
 * The social marks are inlined SVGs using fill="currentColor", so they take the
 * footer's white text colour and need no per-icon fill. Only the hover state
 * and the flex alignment of the icon inside its link are ours; the row layout
 * itself already comes from the baseline's #menu-footer-social-menu rules.
 */
#menu-footer-social-menu li a {
	align-items: center;
	color: #fff;
	display: inline-flex;
	transition: opacity 0.15s ease-in-out;
}

#menu-footer-social-menu li a:hover,
#menu-footer-social-menu li a:focus-visible {
	opacity: 0.7;
}

@media (prefers-reduced-motion: reduce) {
	#menu-footer-social-menu li a {
		transition: none;
	}
}

/*
 * #footer-apps itself is already styled by the baseline (flex, .5rem gap,
 * 2.688rem tall badges — which is the comp's 43px). It only needs to stop
 * stretching to the flex row's `align-items: end` baseline on mobile, where
 * #footer-secondary stacks into a column.
 */
#footer-apps {
	flex: 0 0 auto;
}