/*
 * Phase 2 site-interactions stylesheet.
 *
 * This file owns the two visual effects `site-interactions.js` cannot express through
 * Bricks' native Style Manager alone: the sticky-header scroll-shadow rule. Every colour
 * this stylesheet needs is a `var(--color-…)` reference into the Bricks-emitted Global
 * Variables (Style Manager -> Variables -> PCG Global Theme Style, see
 * `.planning/phases/02-core-pages-homepage-services-about/02-01-BUILD-SHEET.md`) - this
 * file declares no colour value of its own. It DOES declare its own two elevation tokens
 * below, because elevation (box-shadow) has no Bricks Global Variable equivalent in this
 * project - `02-STYLE-GUIDE.md` records these two tokens' source of truth as this file,
 * not Style Manager, so a future reader does not go looking for them there.
 *
 * Structural convention mirrored from `price-calculator.css`: a `:root` token block at
 * the top of the file, every hex/rgba literal confined to that block, nothing outside it.
 */

:root {
	--shadow-sm: 0 10px 30px rgba(20,36,64,.10);
	--shadow-lg: 0 24px 60px rgba(20,36,64,.18);
}

header.scrolled {
	box-shadow: var(--shadow-sm);
	transition: box-shadow 200ms ease;
}

/*
 * Homepage stat-numeral styles (02-04-PLAN.md Task 1). Applied via these class names on
 * the Bricks elements holding the count-up numeral, its accent "+" prefix and the label
 * beneath - see 02-04-BUILD-SHEET.md for exactly which element gets which class. Sizes/
 * weights/colours below are the Display and Label type roles from 02-UI-SPEC.md
 * Typography and Color - every colour resolves through a var(--color-...) reference, no
 * hex/rgba literal outside the :root block above.
 */

.pcg-stat-numeral {
	font-family: 'Inter', sans-serif;
	font-size: 48px;
	font-weight: 600;
	line-height: 1.15;
	color: var(--color-navy);
	font-variant-numeric: tabular-nums;
}

.pcg-stat-numeral__prefix {
	color: var(--color-accent);
}

.pcg-stat-label {
	font-family: 'Inter', sans-serif;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.4;
	color: var(--color-muted);
}