/* Parking storefront base: tokens, liquid glass, springs, room for the rail. Light by default; :root.night is set by the home scene. */
:root {
	--park-accent: #6d52ff; --park-accent-soft: #5a3fe6; --park-bg: #f2f3f6; --park-fg: #14161c; --park-muted: #5f6472;
	--park-card: #ffffff; --park-line: #e1e3ea; --park-ok: #3ee08f; --park-danger: #ff3b5c; --park-star: #ffb400;
	--park-glass: rgba(255, 255, 255, .30); --park-glass-strong: rgba(255, 255, 255, .62);
	--park-rim: rgba(255, 255, 255, .95); --park-rim2: rgba(255, 255, 255, .45); --park-drop: rgba(30, 35, 70, .16);
	--park-spring: linear(0, .009, .035 2.1%, .141, .281 6.7%, .723 12.9%, .938 16.7%, 1.017, 1.077, 1.121, 1.149 24.3%, 1.159, 1.163, 1.161, 1.154 29.9%, 1.129 32.8%, 1.051 39.6%, 1.017 43.1%, .991, .977 51%, .974 53.8%, .975 57.1%, .997 69.8%, 1.003 76.9%, 1.004 83.8%, 1);
	--park-theme: 1.2s ease;
	color-scheme: light;
}
:root.night {
	--park-accent-soft: #b9a8ff; --park-bg: #0b0d12; --park-fg: #f2f3f7; --park-muted: #9aa0ad; --park-card: #161922; --park-line: #262a35;
	--park-glass: rgba(20, 22, 32, .34); --park-glass-strong: rgba(14, 16, 24, .62);
	--park-rim: rgba(255, 255, 255, .55); --park-rim2: rgba(255, 255, 255, .10); --park-drop: rgba(0, 0, 0, .45);
	color-scheme: dark;
}
body { transition: background-color var(--park-theme), color var(--park-theme); }

/* Room for the fixed rail (only where it is rendered: Fluid Checkout swaps the site header for its own).
   At ≤700px the left padding stays the theme's root padding and the rail sits at the bottom. */
@media (min-width: 701px) {
	body:has(nav.rail) { padding-left: 96px; }
}
@media (max-width: 700px) {
	body:has(nav.rail) { padding-bottom: 110px; }
}

/* Liquid glass: tint + specular rim. Refraction comes from @parking/glass (SVG displacement in backdrop-filter, Chromium). */
.glass { position: relative; background: var(--park-glass); border: 0 !important; isolation: isolate;
	box-shadow: inset 0 1px 0 var(--park-rim), inset 0 -1px 0 var(--park-rim2), 0 18px 50px var(--park-drop), 0 2px 8px var(--park-drop);
	-webkit-backdrop-filter: blur(14px) saturate(170%); backdrop-filter: blur(14px) saturate(170%);
	transition: background-color var(--park-theme), box-shadow var(--park-theme); }
.glass::before { content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1.2px; pointer-events: none; z-index: -1;
	background: linear-gradient(150deg, var(--park-rim) 0%, transparent 32%, transparent 62%, var(--park-rim2) 82%, var(--park-rim) 100%);
	-webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; }
.glass::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; z-index: -1;
	background: radial-gradient(120% 60% at 30% -10%, rgba(255, 255, 255, .22), transparent 55%); }
.glass.strong { background: var(--park-glass-strong); }

/* Springs: press to shrink, hover to grow; .bump replays the pop (counters). */
.spring { transition: transform .6s var(--park-spring); }
.spring:hover { transform: scale(1.06); }
.spring:active { transform: scale(.9); transition-duration: .15s; }
@keyframes pop { from { opacity: 0; transform: translateY(10px) scale(.92); } }
.bump { animation: pop .6s var(--park-spring) both; }

@media (prefers-reduced-motion: reduce) {
	.spring, .glass { transition-timing-function: ease !important; }
	.spring:hover, .spring:active { transform: none; }
	.bump { animation: none; }
	body { transition: none; }
}

/* Footer: on the tokens, so it follows the home page from night to light with the theme transition. */
.park-footer { background: var(--park-bg); color: var(--park-fg); border-top: 1px solid var(--park-line);
	transition: background-color var(--park-theme), color var(--park-theme), border-color var(--park-theme); }
.park-footer a:where(:not(.wp-element-button)) { color: var(--park-fg); }
.park-footer .park-footer-note { color: var(--park-muted); transition: color var(--park-theme); }
@media (prefers-reduced-motion: reduce) {
	.park-footer, .park-footer .park-footer-note { transition: none; }
}

/* Legal pages (templates/page.html): the draft marker and the seller's details from [park_seller]. */
.park-page .park-draft { padding: 10px 14px; border-left: 3px solid var(--park-accent); border-radius: 8px; background: var(--park-card); color: var(--park-muted); }
.park-page .park-seller { line-height: 1.6; }

/* Footer columns: brand + three link columns, white space instead of dividers; stacked on a phone.
   The footer is a constrained group, so its children would stop at the content size (1200px) while the home page blocks
   are wide (1320px): on wide screens the footer started 60px right of the content. Wide size here keeps both edges in line;
   the left edge clears the rail through the body padding like the content does. */
.park-footer.is-layout-constrained > :where(:not(.alignfull)) { max-width: var(--wp--style--global--wide-size); }
.park-footer .park-footer-cols { gap: 32px 48px; margin-bottom: 0; }
.park-footer .park-footer-brand { flex-basis: 34%; flex-grow: 1.4; }
.park-footer .park-footer-head { margin: 0 0 12px; font-weight: 600; }
.park-footer .park-footer-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.park-footer .park-footer-list a { text-decoration: none; }
.park-footer .park-footer-list a:hover { text-decoration: underline; }
.park-footer .park-footer-list .park-consent-open { padding: 0; border: 0; background: none; color: inherit; font: inherit; text-align: left; text-decoration: none; cursor: pointer; }
.park-footer .park-footer-list .park-consent-open:hover { text-decoration: underline; }
.park-footer .park-footer-legal { margin: 32px 0 0; }
@media (max-width: 600px) {
	.park-footer .park-footer-cols { flex-direction: column; gap: 28px; }
}