/*
Theme Name: More Within Reach
Theme URI:
Author: Mvestor Media
Author URI: https://mvestormedia.com
Description: Block theme for the Pierce Transit More Within Reach ballot site: the landing page plus its plan-specifics subpages.
Requires at least: 7.0
Tested up to: 7.0
Requires PHP: 5.7
Version: 0.3.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: morewithinreach
Tags:
*/

/* Marker underline under headlines ("fast.", "Everyone.", "stuff."). Documented
   utility — one of the few allowed outside theme.json. The XD draws the marker
   in its heading's own fill, so the colour tracks currentColor; weight stays a
   custom property so a variant is a class that overrides it, not a second copy
   of the rule. */
.has-accent-underline {
	--mwr-accent-underline: currentColor;
	--mwr-accent-underline-weight: 0.06em;

	background-image: linear-gradient(
		var(--mwr-accent-underline),
		var(--mwr-accent-underline)
	);
	background-repeat: no-repeat;
	background-size: 100% var(--mwr-accent-underline-weight);
	background-position: 0 94%;
}

.has-accent-underline-orange {
	--mwr-accent-underline: var(--wp--preset--color--orange);
	--mwr-accent-underline-weight: 0.08em;
}

/* FAQ accordion skin (documented utility). Three things theme.json and block
   supports can't reach: the toggle title is centred inside the pill, the "+"
   glyph core prints in a bare span becomes the mock's outlined blue disc, and
   the tray/pill padding has to shrink on narrow screens — a 999px pill radius
   round a wrapped three-line question is a blob, and the mock's 40px insets
   leave a phone about 80px of text column. Padding lives here rather than on the
   blocks so the media query can reach it; the pattern is contentOnly-locked, so
   no editor affordance is lost. */
.is-faq-accordion {
	padding: var(--wp--preset--spacing--40);
}

.is-faq-accordion .wp-block-accordion-heading__toggle {
	gap: 1rem;
	padding: 0.375rem 2rem;
	text-align: center;
}

.is-faq-accordion .wp-block-accordion-heading__toggle-icon {
	border: 2px solid var(--wp--preset--color--brand-blue);
	border-radius: 50%;
	color: var(--wp--preset--color--brand-blue);
	flex: 0 0 auto;
	font-size: 1.75em;
	font-weight: 400;
	height: 1.2em;
	line-height: 1;
	width: 1.2em;
}

.is-faq-accordion .wp-block-accordion-panel {
	padding: var(--wp--preset--spacing--30) var(--wp--preset--spacing--50)
		var(--wp--preset--spacing--40);
}

@media (max-width: 781px) {
	.is-faq-accordion {
		padding: var(--wp--preset--spacing--30);
	}

	.is-faq-accordion .wp-block-accordion-heading {
		border-radius: 1.5rem;
		font-size: 16px;
	}

	.is-faq-accordion .wp-block-accordion-heading__toggle {
		gap: 0.75rem;
		padding: var(--wp--preset--spacing--30);
	}

	.is-faq-accordion .wp-block-accordion-heading__toggle-icon {
		font-size: 1.5em;
		height: 1.15em;
		width: 1.15em;
	}

	.is-faq-accordion .wp-block-accordion-panel {
		padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30)
			var(--wp--preset--spacing--30);
	}
}

/* Closed panels carry core's `hidden` (and `inert`); zero their insets so a
   closed tray adds no height between pills. */
.is-faq-accordion .wp-block-accordion-panel[hidden],
.is-faq-accordion .wp-block-accordion-panel[inert] {
	height: 0;
	padding-bottom: 0;
	padding-top: 0;
}

/* FAQ accordion open/close easing (documented utility). Core hides the panel
   with display:none on [hidden]/[inert], so the height has to animate out of a discrete
   property change: allow-discrete keeps the panel painted for the duration and
   interpolate-size makes height:auto a real transition endpoint. Both are
   feature-gated, and browsers without them get core's instant toggle. Padding
   animates too — it lives on the panel, and border-box means height:0 alone
   would still leave the tray open by its own insets. */
@supports (interpolate-size: allow-keywords) and (transition-behavior: allow-discrete) {
	html {
		interpolate-size: allow-keywords;
	}

	.is-faq-accordion .wp-block-accordion-panel {
		height: auto;
		overflow: hidden;
		transition:
			height 0.3s ease,
			padding-top 0.3s ease,
			padding-bottom 0.3s ease,
			opacity 0.3s ease,
			display 0.3s allow-discrete;
	}

	.is-faq-accordion .wp-block-accordion-panel[hidden],
	.is-faq-accordion .wp-block-accordion-panel[inert] {
		height: 0;
		opacity: 0;
		padding-bottom: 0;
		padding-top: 0;
	}

	/* Without this the panel would pop open on first paint instead of easing. */
	@starting-style {
		.is-faq-accordion .wp-block-accordion-panel {
			height: 0;
			opacity: 0;
			padding-bottom: 0;
			padding-top: 0;
		}
	}

	@media (prefers-reduced-motion: reduce) {
		.is-faq-accordion .wp-block-accordion-panel {
			transition: none;
		}
	}
}

/* Scroll nav skin + active state (documented utility). Sticky is set on the
   block too; this fallback covers editors where the toggle is unavailable. */
.is-scroll-nav {
	position: sticky;
	top: 0;
	z-index: 30;
}

/* On narrow screens the bar stays sticky but compacts: smaller pills on one
   nowrap row, tighter bar padding, so it costs the viewport as little as
   possible. Double selector beats the block's generated .wp-container gap
   rule regardless of stylesheet order. */
@media (max-width: 781px) {
	.is-scroll-nav .wp-block-buttons.wp-block-buttons {
		flex-wrap: nowrap;
		gap: var(--wp--preset--spacing--20);
	}

	.is-scroll-nav .wp-block-button__link {
		font-size: 0.85rem;
		padding: 0.5em 0.9em;
		white-space: nowrap;
	}
}

/* Below ~480px the three pills plus the global side padding outgrow the
   viewport, so they tighten one more step. */
@media (max-width: 480px) {
	.is-scroll-nav .wp-block-button__link {
		font-size: 0.8rem;
		padding: 0.5em 0.7em;
	}
}

.is-scroll-nav .wp-block-button__link {
	background: transparent;
	color: var(--wp--preset--color--white);
}

.is-scroll-nav .wp-block-button__link:hover {
	background: rgba(255, 255, 255, 0.15);
	color: var(--wp--preset--color--white);
}

.is-scroll-nav .wp-block-button.is-active .wp-block-button__link {
	background: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--brand-blue);
}

/* Who-benefits tiles: the label sits on the photo, the description slides in on
   hover (documented utility — the "optional card hover" case). Bottom-anchored
   content grows upward inside the tile, so nothing below it shifts.
   Pointer-less devices get the description permanently, and lose the hint. */
.is-benefit-tile .benefit-tile__reveal {
	max-height: 0;
	opacity: 0;
	overflow: hidden;
	transition:
		max-height 0.3s ease,
		opacity 0.3s ease,
		padding-top 0.3s ease;
}

.is-benefit-tile:hover .benefit-tile__reveal,
.is-benefit-tile:focus-within .benefit-tile__reveal {
	max-height: 8em;
	opacity: 1;
	padding-top: 0.5rem;
}

/* Deeper scrim while the description shows, so the copy stays legible over the
   brighter photos. Sits above the image, below the text. */
.is-benefit-tile::after {
	background: linear-gradient(180deg, rgba(0, 0, 0, 0) 5%, rgba(0, 0, 0, 0.8) 70%);
	border-radius: inherit;
	content: "";
	inset: 0;
	opacity: 0;
	pointer-events: none;
	position: absolute;
	transition: opacity 0.3s ease;
	z-index: 0;
}

.is-benefit-tile:hover::after,
.is-benefit-tile:focus-within::after {
	opacity: 1;
}

.is-benefit-tile .wp-block-cover__inner-container {
	z-index: 1;
}

@media (hover: none) {
	.is-benefit-tile .benefit-tile__reveal {
		max-height: none;
		opacity: 1;
		padding-top: 0.5rem;
	}

	.is-benefit-tile::after {
		opacity: 1;
	}

	.is-hover-hint {
		display: none;
	}
}

@media (prefers-reduced-motion: reduce) {
	.is-benefit-tile .benefit-tile__reveal {
		transition: none;
	}
}

/* Signup form skin (documented utility — the standing "form skin" case).
   Gravity Forms' Orbital theme is driven by custom properties, so the skin is a
   remap onto theme.json presets rather than a pile of overrides. Field size and
   border colour are NOT here: GF's own inline <style> sets those at ID
   specificity, so they ride on block attributes in the pattern instead. */
.is-signup-form .gform_wrapper {
	--gf-ctrl-bg-color: var(--wp--preset--color--ice);
	--gf-ctrl-bg-color-focus: var(--wp--preset--color--white);
	--gf-ctrl-border-color-focus: var(--wp--preset--color--brand-blue);
	--gf-ctrl-border-width: 2px;
	--gf-ctrl-btn-bg-color-hover-primary: var(--wp--preset--color--blue-deep);
	--gf-ctrl-btn-bg-color-primary: var(--wp--preset--color--brand-blue);
	--gf-ctrl-btn-color-primary: var(--wp--preset--color--white);
	/* -lg token, not --gf-ctrl-btn-font-size: GF's per-form inline <style> re-points
	   the resolved var at the -lg token at ID specificity, so only the token wins. */
	--gf-ctrl-btn-font-size-lg: 0.875rem;
	--gf-ctrl-btn-font-weight: 700;
	--gf-ctrl-btn-radius: 999px;
	--gf-ctrl-color: var(--wp--preset--color--charcoal);
	--gf-ctrl-font-family: var(--wp--preset--font-family--sans);
	--gf-ctrl-font-size: 1.0625rem;
	--gf-ctrl-placeholder-color: var(--wp--preset--color--charcoal);
	--gf-ctrl-placeholder-opacity: 1;
	--gf-ctrl-radius: 999px;
	--gf-form-gap-y: 0.75rem;
}

/* The mock centres Submit under the fields; GF left-aligns it by default. */
.is-signup-form .gform_footer {
	justify-content: center;
}

/* Blue rule across the top of every blue gradient band (the lime quote band has none) (documented utility). The V3
   mock draws it so a section change still reads when the band's first inch is
   sitting under the sticky scroll nav and the gradient itself is still near
   white. border-top rather than a pseudo-element: the bands are full-width
   groups whose backgrounds come from a theme.json gradient preset, and a border
   is the one edge treatment block supports can't put on a preset background. */
.has-fade-blue-gradient-background {
	border-top: 4px solid var(--wp--preset--color--brand-blue);
}

/* Plan feature row dividers (documented utility). The mock's hairline between
   the four feature columns only reads as a divider while they sit side by side;
   stacked on a phone it is a stray tick beside each icon. The columns carry
   .is-plan-divider from the pattern rather than a border in block attributes,
   which no media query could reach. 782px is where wp-block-columns stops
   stacking. */
@media (min-width: 782px) {
	.wp-block-column.is-plan-divider {
		border-left: 2px solid #d5e9f8;
	}
}

/* Stacked, the row takes the mock's larger vertical rhythm and no column gap. */
@media (max-width: 781px) {
	.wp-block-columns:has( > .is-plan-divider ) {
		gap: var(--wp--preset--spacing--40) 0;
	}
}

/* Plan feature hover cards (documented utility). Each feature column carries
   .is-plan-card from the pattern and links to its plan subpage; the image and
   the heading hold the real <a>, and the heading link's ::after is stretched
   over the column so the whole face is one click target. The treatment is the
   client's CodePen reference (research/card-hover-codepen.md): pale card that
   lifts 4px, whitens and gains a shadow on hover, with a green Courier arrow
   underneath. The card supersedes the hairline divider, so that is dropped. */
.wp-block-column.is-plan-card {
	position: relative;
	display: flex;
	flex-direction: column;
	padding-top: var(--wp--preset--spacing--30);
	padding-bottom: var(--wp--preset--spacing--30);
	background-color: var(--wp--preset--color--ice);
	border: 1px solid var(--wp--preset--color--light-blue);
	border-radius: 4px;
	transition: all 0.3s ease-out;
}

.wp-block-column.is-plan-card.is-plan-divider {
	border-left: 1px solid var(--wp--preset--color--light-blue);
}

.wp-block-column.is-plan-card:hover,
.wp-block-column.is-plan-card:focus-within {
	transform: translateY(-4px);
	box-shadow: 0 4px 8px rgba(38, 38, 38, 0.2);
	border-color: #ccc;
	background-color: var(--wp--preset--color--white);
	transition: all 0.2s ease-out;
}

.wp-block-column.is-plan-card h3 a {
	color: inherit;
	text-decoration: none;
}

.wp-block-column.is-plan-card h3 a::after {
	content: "";
	position: absolute;
	inset: 0;
	z-index: 1;
}

.wp-block-column.is-plan-card::after {
	content: "";
	display: block;
	flex-shrink: 0;
	width: 48px;
	height: 26px;
	margin: auto auto 0;
	padding-top: var(--wp--preset--spacing--20);
	box-sizing: content-box;
	background: url(assets/images/card-arrow.svg) no-repeat center bottom / 48px 26px;
}

/* Side by side the cards need air between them; the columns block ships with
   a zero column gap for the divider layout, so the gap lives on the cards. */
@media (min-width: 782px) {
	.wp-block-column.is-plan-card {
		margin: 0 0.75rem;
	}
}

/* Route connectors slide in from the edge their lines run off (documented
   utility). Both wrappers are built by assets/js/route-lines.js, which is also
   what puts the ready class on <html> — the offset is deliberately unreachable
   without JS so the art never goes missing. The clip stays still and the slide
   moves inside it; the movement can't sit on the <svg> because individual
   transform properties are ignored on SVG elements. */
.mwr-route-connector-clip {
	overflow: clip;
	overflow-clip-margin: 0;
	position: relative;
	z-index: 1;
}

/* The footer connector's overlap onto the blue band lives on the <svg> as a
   negative margin-bottom. Inside the clip that margin shrinks the clip's own
   box instead of overlapping, so the orange stripe's bottom gets clipped off.
   Undo it on the clip so the overlap happens at the wrapper level. */
.mwr-route-connector-clip:has(> .mwr-route-connector-slide > .has-band-overlap) {
	margin-bottom: calc((var(--mwr-route-node) - var(--mwr-route-line)) / -2);
}
.mwr-route-connector-clip .has-band-overlap {
	margin-bottom: 0 !important;
}

.mwr-route-lines-ready .mwr-route-connector-slide {
	transition: translate 0.9s cubic-bezier(0.22, 1, 0.36, 1);
	translate: -100% 0;
}

/* Flipped art runs off the right edge, so it arrives from the right. */
.mwr-route-lines-ready .mwr-route-connector-slide.is-flipped {
	translate: 100% 0;
}

.mwr-route-lines-ready .mwr-route-connector-clip.is-in-view
	.mwr-route-connector-slide {
	translate: 0 0;
}

@media (prefers-reduced-motion: reduce) {
	.mwr-route-lines-ready .mwr-route-connector-slide,
	.mwr-route-lines-ready .mwr-route-connector-slide.is-flipped {
		transition: none;
		translate: 0 0;
	}
}

/* Header on small screens (documented utility). Three moves theme.json can't
   make: the 240px logo shrinks so it shares a row with the hamburger, the
   header's own "Learn the Plan" button hides below the nav's overlay
   breakpoint (600px — it reappears as the last overlay menu item instead,
   see .is-mobile-cta), and the header padding tightens. !important beats the
   pattern's inline padding and the site-logo block's inline width. */
.is-site-header .wp-block-navigation .is-mobile-cta {
	display: none;
}

@media (max-width: 781px) {
	.is-site-header {
		padding-top: var(--wp--preset--spacing--30) !important;
		padding-bottom: var(--wp--preset--spacing--30) !important;
	}

	.is-site-header .wp-block-site-logo img {
		height: auto;
		width: 170px !important;
	}
}

@media (max-width: 599px) {
	.is-site-header > .wp-block-group > .wp-block-buttons {
		display: none;
	}

	.is-site-header .wp-block-navigation .is-mobile-cta {
		display: list-item;
	}

	/* The nav's spacing|70 gap suits the horizontal desktop row; in the
	   overlay it scatters five links across the whole screen. */
	.is-site-header
		.wp-block-navigation__responsive-container.is-menu-open
		.wp-block-navigation__container {
		gap: var(--wp--preset--spacing--40);
	}

	/* In the overlay the CTA reads as a button, matching the header button
	   it replaces. Same padding as the real button blocks (theme.json).
	   The is-menu-open leg of the selector outweighs core's
	   ".is-menu-open … .wp-block-navigation-item__content { padding: 0 }",
	   which otherwise strips the pill's padding and lets the text hit the
	   rounded edges. */
	.is-site-header .wp-block-navigation__responsive-container.is-menu-open .is-mobile-cta > a.wp-block-navigation-item__content,
	.is-site-header .is-mobile-cta > a.wp-block-navigation-item__content {
		background: var(--wp--preset--color--brand-blue);
		border-radius: 999px;
		color: var(--wp--preset--color--white);
		padding: 0.5rem 1.25rem;
	}
}

/* Header dropdown ("Plan Specifics +") on the white header (documented utility).
   Core's submenu container ships a white panel with a 15% black hairline;
   this gives it the site's rounded corners, a soft shadow, and room around
   the page links so the list reads as a menu and not a stack of bare words.
   Desktop only — in the mobile overlay core flattens submenus inline. */
.is-site-header .wp-block-navigation .wp-block-navigation__submenu-container {
	border: 1px solid #d5e9f8;
	border-radius: 12px;
	box-shadow: 0 8px 24px rgba(0, 62, 126, 0.12);
	min-width: 220px;
	padding: var(--wp--preset--spacing--20) 0;
}

.is-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--40);
}

.is-site-header .wp-block-navigation .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
	background: var(--wp--preset--color--ice);
	color: var(--wp--preset--color--brand-blue);
}

/* Subpage prose (documented utility). The XD sets every line of subpage body
   copy — lead-ins, paragraphs and bullets — at one size (34px in the mock), so
   the wrapper carries the large preset and blocks inside inherit it. Lists
   take the mock's open 1.8 leading (62px pitch on 34px type) with no extra row
   gap; .is-list-spaced is the variant for title + body items separated by a
   blank line (More Connections). The list block has no theme.json styles, so
   the indent lives here too, scoped so the FAQ and footer lists are untouched.
   margin-bottom only: margin-top is the parent's blockGap. */
.is-subpage-text {
	font-size: 16px;
}

.is-subpage-text .wp-block-list {
	line-height: 1.8;
	margin-bottom: 0;
	padding-left: 1.5em;
}

.is-subpage-text .wp-block-list li + li {
	margin-top: 0;
}

.is-subpage-text .wp-block-list.is-list-spaced li + li {
	margin-top: 1.8em;
}

.is-subpage-text .wp-block-list li::marker {
	color: var(--wp--preset--color--brand-blue);
}

/* .is-plain-list: centered, marker-less list for pages whose mock sets the
   items as stacked centered text (More Connections). */
.is-subpage-text .wp-block-list.is-plain-list {
	list-style: none;
	padding-left: 0;
	text-align: center;
}

/* In-page anchor targets land below the sticky bar. Desktop fallback only —
   scroll-nav.js measures the real bar height and overrides this at
   runtime. */
:root {
	scroll-padding-top: 4rem;
}

html {
	scroll-behavior: smooth;
}

/* Subpage callout card (documented utility). The card's spacing|60 (4rem)
   inset reads right at 1000px but leaves a 182px text column on a 390px
   phone; spacing presets are fixed, so the inset steps down here. !important
   beats the pattern's inline padding. */
@media (max-width: 781px) {
	.is-subpage-callout {
		padding-left: var(--wp--preset--spacing--40) !important;
		padding-right: var(--wp--preset--spacing--40) !important;
	}
}

/* Lists inside the callout card are set tight in the XD (40px pitch on 34px
   type), unlike the open prose lists above. */
.is-subpage-callout .wp-block-list {
	font-size: 16px;
	line-height: 1.2;
}

.is-subpage-callout .wp-block-list li + li {
	margin-top: 0;
}

/* Information Sessions card (documented utility). The mock stacks the event and
   presentation links as equal-width pills (~570px at 1920) centred in the green
   card; core buttons size to their label, and block attributes can't set a
   shared width on the wrapper. Full-width on a phone. */
.is-info-card .wp-block-button {
	width: min(100%, 570px);
}

.is-info-card .wp-block-button__link {
	width: 100%;
	padding-top: 0.75rem;
	padding-bottom: 0.75rem;
}

/* The card itself is ~840px wide and centred in the mock; a constrained group
   only narrows its children, so the width lives here. */
.is-info-card {
	max-width: 840px;
	margin-left: auto;
	margin-right: auto;
}

/* Fixed type scale breakpoints. Desktop values live in theme.json (elements +
   presets); these scale headings and the >=40px presets down. Body stays 16px,
   nav/buttons/fine print stay 14px. Presets are re-declared on :root via
   the WP var so has-*-font-size classes cascade. */
@media (max-width: 1023px) {
	:root {
		--wp--preset--font-size--kicker: 30px;
		--wp--preset--font-size--subhead: 42px;
		--wp--preset--font-size--statement: 57px;
		--wp--preset--font-size--banner: 63px;
		--wp--preset--font-size--jumbo: 84px;
	}
	h1, h2 { font-size: 54px; }
	h3 { font-size: 42px; }
}

@media (max-width: 781px) {
	:root {
		--wp--preset--font-size--kicker: 22px;
		--wp--preset--font-size--subhead: 31px;
		--wp--preset--font-size--statement: 42px;
		--wp--preset--font-size--banner: 46px;
		--wp--preset--font-size--jumbo: 62px;
		--wp--preset--font-size--lead: 20px;
	}
	h1, h2 { font-size: 48px; }
	h3 { font-size: 36px; }
	h3.has-reel-font-family { font-size: 42px; }
	h4 { font-size: 20px; }
	h4.has-reel-font-family.has-kicker-font-size { font-size: 32px !important; }
}

/* Reel stacks very tall: tighten leading on Reel headlines so 2-line wraps don't gap,
   and give back a little space below since the shorter line box eats into it.
   !important needed to beat per-block inline line-height (1 / 1.1 / 1.05). */
h1.wp-block-heading,
h2.wp-block-heading,
h3.has-reel-font-family,
p.has-reel-font-family.has-statement-font-size {
	line-height: 0.7 !important;
	margin-bottom: 0.15em;
}
.is-plan-card h3.has-reel-font-family { line-height: 0.57 !important; margin-bottom: 0; }

/* Subpage hero backgrounds (moved out of inline styles so blocks validate in the editor) */
.subpage-hero.hero-more-places {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 20vw, #ffffff 32.3vw), url(/wp-content/uploads/2026/08/hero2-more-places.jpg) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: top, top !important;
	background-size: auto, 100% auto !important;
}
.subpage-hero.hero-shorter-waits {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 20vw, #ffffff 32.3vw), url(/wp-content/uploads/2026/08/hero2-shorter-waits.jpg) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: top, top !important;
	background-size: auto, 100% auto !important;
}
.subpage-hero.hero-more-connections {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 15vw, #ffffff 24vw), url(/wp-content/uploads/2026/08/Banner-Roads-Gradient-5.png) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: top, top !important;
	background-size: auto, 100% auto !important;
}
.subpage-hero.hero-more-options {
	background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 20vw, #ffffff 32.3vw), url(/wp-content/uploads/2026/08/hero2-more-options.jpg) !important;
	background-repeat: no-repeat, no-repeat !important;
	background-position: top, top !important;
	background-size: auto, 100% auto !important;
}

/* Centered lists (was inline style; moved here so the block validates in the editor) */
.is-subpage-text .wp-block-list.has-text-align-center {
	list-style-position: inside;
	padding-left: 0;
}

/* Receipt card rows: core gives figure.wp-block-image a 1em bottom margin,
   which pushes the icon above the vertically-centred labels. */
.has-peach-background-color .is-layout-flex > figure.wp-block-image {
	margin: 0;
}
.has-peach-background-color .is-layout-flex > figure.wp-block-image img {
	display: block;
}
.has-peach-background-color .is-layout-flex > p {
	line-height: 1;
}
.has-peach-background-color .is-layout-flex > p + p {
	transform: translateY(0.35em);
}

/* Info sessions card: cap width to match other stat cards. */
.is-info-card {
	max-width: 600px;
	margin-left: auto;
	margin-right: auto;
}

/* Route connector art: CSS bars instead of a full-bleed SVG so node/line size
   is fixed per breakpoint (sized to match the lockup's nodes) while the reach
   into the page stays proportional to the viewport. */
:root {
	--mwr-route-line: 11px;
	--mwr-route-node: 31px;
}

@media (min-width: 782px) and (max-width: 1023px) {
	:root {
		--mwr-route-line: 9px;
		--mwr-route-node: 26px;
	}
}

@media (max-width: 781px) {
	:root {
		--mwr-route-line: 7px;
		--mwr-route-node: 20px;
	}
}

.mwr-route-connector {
	display: block;
	padding: calc((var(--mwr-route-node) - var(--mwr-route-line)) / 2) 0;
	position: relative;
	z-index: 1;
}

.mwr-route-connector.is-flipped {
	transform: scaleX(-1);
}

.mwr-route-connector.has-band-overlap {
	margin-bottom: calc((var(--mwr-route-node) - var(--mwr-route-line)) / -2);
}

.mwr-route-line {
	background: var(--mwr-line-color);
	height: var(--mwr-route-line);
	position: relative;
}

.mwr-route-line::after {
	background: #ffffff;
	border: calc(var(--mwr-route-node) * 0.34) solid var(--mwr-line-color);
	border-radius: 50%;
	box-sizing: border-box;
	content: "";
	height: var(--mwr-route-node);
	position: absolute;
	right: calc(var(--mwr-route-node) / -2);
	top: 50%;
	transform: translateY(-50%);
	width: var(--mwr-route-node);
	z-index: 1;
}

/* Receipt card on phones: the 4rem side insets crowd the rows into wrapping,
   and the item lines need one consistent size so each row stays on one line. */
@media (max-width: 781px) {
	.has-peach-background-color.wp-block-group {
		padding-left: var(--wp--preset--spacing--30) !important;
		padding-right: var(--wp--preset--spacing--30) !important;
	}

	.has-peach-background-color .is-layout-flex > p.has-subhead-font-size {
		font-size: 26px;
		white-space: nowrap;
	}

	.has-peach-background-color .is-layout-flex > p.has-lead-font-size {
		font-size: 18px;
		white-space: nowrap;
	}
}

/* Interior hero art: proportional below 1440px, frozen above it so the photo
   never dominates a large window. Stops are the 1440px renderings of the vw
   values; !important matches the base rules and the inline padding clamp. */
@media (min-width: 1440px) {
	.subpage-hero.hero-more-places,
	.subpage-hero.hero-shorter-waits,
	.subpage-hero.hero-more-options {
		padding-top: 465px !important;
	}

	.subpage-hero.hero-more-places {
		background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 288px, #ffffff 465px), url(/wp-content/uploads/2026/08/hero2-more-places.jpg) !important;
	}

	.subpage-hero.hero-shorter-waits {
		background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 288px, #ffffff 465px), url(/wp-content/uploads/2026/08/hero2-shorter-waits.jpg) !important;
	}

	.subpage-hero.hero-more-options {
		background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 288px, #ffffff 465px), url(/wp-content/uploads/2026/08/hero2-more-options.jpg) !important;
	}

	.subpage-hero.hero-more-connections {
		padding-top: 346px !important;
		background-image: linear-gradient(180deg, rgba(255,255,255,0.4) 0, rgba(255,255,255,0.4) 216px, #ffffff 346px), url(/wp-content/uploads/2026/08/Banner-Roads-Gradient-5.png) !important;
	}
}

/* Single-use: keep "without the parking hassles" together on line two of the
   More Places special-events deck (no "hassles" widow). */
.mwr-deck-narrow {
	margin-left: auto;
	margin-right: auto;
	max-width: 560px;
}

/* Floating back-to-top button (footer part). Hidden until the page has been
   scrolled; the toggle lives in the same wp:html block. */
.mwr-to-top {
	align-items: center;
	background: var(--wp--preset--color--brand-blue);
	border-radius: 50%;
	bottom: 1rem;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.25);
	color: #ffffff;
	display: flex;
	font-size: 22px;
	height: 48px;
	justify-content: center;
	opacity: 0;
	pointer-events: none;
	position: fixed;
	right: 1rem;
	text-decoration: none;
	transition: opacity 0.25s, translate 0.25s;
	translate: 0 8px;
	width: 48px;
	z-index: 20;
}

.mwr-to-top.is-visible {
	opacity: 1;
	pointer-events: auto;
	translate: 0 0;
}