/*
 * Canter Power service funnel.
 *
 * Written fresh rather than lifted from the legacy page, because that stylesheet cannot be
 * scoped by prefixing alone. It styles `*`, `html, body`, `a`, `svg`, `header`, `footer`,
 * `main.wrap`, `button.cta` and `button.ghost` as bare element selectors and defines its
 * palette on `:root` -- including `body { min-height: 100vh; display: flex }`, which on a
 * WordPress page would turn the whole document into a flex container. Every one of those
 * rules is deleted here and re-homed inside the block.
 *
 * SPECIFICITY LADDER, three tiers, deliberately. Print order is not usable as a tiebreak
 * because CSS-combining and defer plugins reorder stylesheets, so each tier has to win on
 * specificity alone:
 *
 *   floor       .cps-funnel p            0-1-1  beats a theme's single-class rules and
 *                                                Global Styles' `:root :where(...)` at 0-1-0
 *   components  .cps-funnel .cps-pick    0-2-0
 *   states      .cps-funnel .cps-tier.cps-tier--pop  0-3-0
 *
 * A theme with ID-based rules (`#page .entry-content button`) still wins, because
 * specificity counts ids before classes. That is not fixable with classes and is what
 * assets/armored.css exists for, per site, opt-in.
 *
 * Constraints .github/tools/css-scope-check.mjs enforces: every selector's first compound begins
 * `.cps-`; no `:root`; no bare element selectors; `@keyframes` prefixed; no `100vh`; no
 * viewport `@media` (container queries instead, so the funnel responds to the column it is
 * placed in rather than the window -- a 620px theme column is the common case); and exactly
 * one allowlisted global rule.
 */

.cps-funnel {
	/*
	 * Token FALLBACKS. Cps_St_Palette writes the real values onto this element's style
	 * attribute for a tenant that has a palette; a tenant that does not falls through to
	 * these, which are drawn from the theme's own editor palette where it exposes one. That
	 * is why an unknown tenant renders in the site's colours rather than in a guess.
	 */
	--cps-action: var( --wp--preset--color--primary, #1e2a3a );
	--cps-on-action: #fff;
	--cps-action-dk: var( --wp--preset--color--primary, #16202c );
	--cps-decor: var( --cps-action );
	--cps-tint: var( --wp--preset--color--tertiary, #f4f6f8 );
	--cps-hdr: var( --wp--preset--color--foreground, #12141a );
	--cps-ink: var( --wp--preset--color--foreground, #1d2430 );
	--cps-muted: #5d6675;
	--cps-line: #dfe4ea;
	--cps-surface: #fff;
	--cps-radius: 14px;
	--cps-gap: 16px;
	--cps-focus: var( --cps-action );
	--cps-scroll-offset: 1rem;
	--cps-pad-y: 10px;
	--cps-pad-x: 16px;

	/*
	 * A new stacking context, so the funnel's own overlay cannot be trapped underneath a
	 * theme's z-indexed furniture and cannot escape upward over it either.
	 */
	position: relative;
	isolation: isolate;
	container-type: inline-size;
	scroll-margin-top: var( --cps-scroll-offset );
	color: var( --cps-ink );
	text-align: left;

	/*
	 * Breathing room above and below, so the block never sits flush against whatever the
	 * theme places around it. The editor's margin controls add to this rather than replace
	 * it: margin is the page's spacing, this is the block's own.
	 */
	padding-block: var( --cps-pad-y );
}

/* ---- floor: 0-1-1, enough to beat a theme's single-class typography ---- */

.cps-funnel p {
	margin: 0 0 0.5em;
	line-height: 1.5;
}

.cps-funnel h2,
.cps-funnel h3 {
	color: var( --cps-hdr );
	margin: 0 0 0.4em;
	line-height: 1.2;
}

.cps-funnel button {
	font: inherit;
	cursor: pointer;
	color: inherit;
}

.cps-funnel svg {
	width: 1em;
	height: 1em;
	display: inline-block;
	vertical-align: -0.125em;
	flex: none;
}

.cps-funnel img {
	max-width: 100%;
	height: auto;
	display: block;
}

/* ---- components: 0-2-0 ---- */

.cps-funnel .cps-funnel__body {
	display: flex;
	flex-direction: column;
	gap: var( --cps-gap );

	/*
	 * The width the page gives. A block theme's constrained layout sizes the wrapper itself
	 * and this changes nothing; a full-width template or an unconstrained container leaves
	 * the wrapper as wide as the viewport, and the body here holds to the page's content
	 * size instead -- render.php writes --cps-content from theme.json or the classic
	 * $content_width, and WordPress's own variable is the fallback. Where the page declares
	 * nothing there is nothing to inherit, and the column is what it was.
	 */
	max-width: var( --cps-content, var( --wp--style--global--content-size, none ) );
	margin-inline: auto;

	/*
	 * The gutter the page has not given. A full-width template puts the block flush against
	 * the window's edge, and on a phone -- the content size being wider than the window --
	 * the body ran to that edge with it: the first site, 0.1.15. But a constrained column has
	 * already inset the block, and a gutter of ours on top of the theme's would be a double
	 * one. So the padding is what is MISSING: --cps-pad-x less what the window has already
	 * inset the block by on each side, floored at nothing. Flush, the full gutter; inset by
	 * the gutter or more, none; in between, the difference. This is the one viewport unit in
	 * the file, and it measures only the block's distance from the window, which no container
	 * unit can. (A desktop with a classic scrollbar reports a window wider than the page by
	 * the bar, and the gutter that much smaller; the body is centred there in any case.)
	 * content-box, so the content size stays the content size and the gutter sits outside it.
	 */
	box-sizing: content-box;
	padding-inline: clamp( 0px, calc( var( --cps-pad-x ) - ( 100vw - 100cqi ) / 2 ), var( --cps-pad-x ) );
}

.cps-funnel.alignwide .cps-funnel__body {
	max-width: var( --cps-wide, var( --wp--style--global--wide-size, none ) );
}

.cps-funnel.alignfull .cps-funnel__body {
	max-width: none;
}

.cps-funnel [hidden] {
	/*
	 * A bare [hidden] rule is UA-origin display:none and loses to ANY author rule that sets
	 * display -- a theme's `.entry-content section { display: flex }`, or this file's own.
	 *
	 * This used to cover only .cps-screen. The scheduler overlay below is `display: grid`,
	 * had no override, and so was VISIBLE on page load in 0.1.0: it sat over the whole
	 * funnel and swallowed every click, with nothing to show for it but a spinner. The
	 * attribute was in the markup and the render test saw it there; what nobody checked was
	 * what the cascade did with it.
	 *
	 * Blanket now, over everything inside the block. !important is load-bearing: this is
	 * 0-1-1 and the display rules it must beat are our own 0-2-0. Asserted by
	 * .github/tools/css-scope-check.mjs.
	 */
	display: none !important;
}

.cps-funnel .cps-hero__title {
	font-size: clamp( 1.5rem, 1.1rem + 2cqi, 2.1rem );
}

.cps-funnel .cps-hero__sub {
	color: var( --cps-muted );
	max-width: 60ch;
}

.cps-funnel .cps-screen__title {
	font-size: clamp( 1.15rem, 1rem + 1cqi, 1.45rem );
}

/* The legacy `.back` (index.html:93), re-homed. A quiet control: no box, muted, arrow first. */
.cps-funnel .cps-back {
	display: inline-flex;
	align-items: center;
	align-self: flex-start;
	gap: 7px;
	margin: 0 0 14px;
	padding: 6px 0;
	background: none;
	border: 0;
	color: var( --cps-muted );
	font-size: 14px;
	font-weight: 600;
}

.cps-funnel .cps-back:hover {
	color: var( --cps-action );
}

.cps-funnel .cps-back:focus-visible {
	outline: 2px solid var( --cps-focus );
	outline-offset: 2px;
}

.cps-funnel .cps-back__ico {
	display: inline-grid;
	place-items: center;
	font-size: 16px;
}

.cps-funnel .cps-cards,
.cps-funnel .cps-tiers {
	display: grid;
	grid-template-columns: 1fr;
	gap: var( --cps-gap );
	margin: 0;
	padding: 0;
}

.cps-funnel .cps-pick {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	width: 100%;
	padding: 18px;
	text-align: left;
	background: var( --cps-surface );
	border: 1px solid var( --cps-line );
	border-radius: var( --cps-radius );
	transition: border-color 0.15s, box-shadow 0.15s, transform 0.15s;
}

.cps-funnel .cps-pick:hover {
	border-color: var( --cps-action );
	box-shadow: 0 6px 18px rgb( 0 0 0 / 8% );
	transform: translateY( -1px );
}

.cps-funnel .cps-pick:focus-visible,
.cps-funnel .cps-btn:focus-visible {
	outline: 2px solid var( --cps-focus );
	outline-offset: 2px;
}

.cps-funnel .cps-pick__ico {
	display: grid;
	place-items: center;
	width: 44px;
	height: 44px;
	border-radius: 11px;
	background: var( --cps-tint );
	color: var( --cps-action );
	font-size: 22px;
}

.cps-funnel .cps-pick__thumb {
	display: block;
	width: 100%;
	aspect-ratio: 16 / 10;
	overflow: hidden;
	border-radius: 10px;
	background: var( --cps-tint );
}

.cps-funnel .cps-pick__thumb img {
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.cps-funnel .cps-pick__ph {
	display: grid;
	place-items: center;
	width: 100%;
	height: 100%;
	color: var( --cps-action );
	font-size: 34px;
}

.cps-funnel .cps-pick__title {
	font-size: 1.05rem;
	margin: 0;
}

.cps-funnel .cps-pick__blurb {
	color: var( --cps-muted );
	font-size: 0.94rem;
	margin: 0;
}

.cps-funnel .cps-pick__go {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	margin-top: auto;
	padding-top: 4px;
	color: var( --cps-action );
	font-weight: 600;
	font-size: 0.94rem;
}

.cps-funnel .cps-tier {
	position: relative;
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 20px;
	background: var( --cps-surface );
	border: 1px solid var( --cps-line );
	border-radius: var( --cps-radius );
}

.cps-funnel .cps-tier__badge {
	position: absolute;
	top: -10px;
	left: 20px;
	padding: 3px 10px;
	border-radius: 999px;
	background: var( --cps-action );
	color: var( --cps-on-action );
	font-size: 0.72rem;
	font-weight: 700;
	letter-spacing: 0.02em;
	text-transform: uppercase;
}

.cps-funnel .cps-tier__lvl {
	color: var( --cps-action );
	font-size: 0.8rem;
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
}

.cps-funnel .cps-tier__nm {
	color: var( --cps-hdr );
	font-size: 1.1rem;
	font-weight: 700;
}

.cps-funnel .cps-tier__img {
	width: 100%;
	border-radius: 10px;
}

.cps-funnel .cps-tier__price {
	font-size: 1.6rem;
	font-weight: 800;
	color: var( --cps-hdr );
	line-height: 1.1;
}

.cps-funnel .cps-tier__price small,
.cps-funnel .cps-tier__year small {
	font-size: 0.62em;
	font-weight: 600;
	color: var( --cps-muted );
}

.cps-funnel .cps-tier__year {
	font-size: 1.05rem;
	font-weight: 700;
	color: var( --cps-ink );
}

.cps-funnel .cps-tier__desc {
	color: var( --cps-muted );
	font-size: 0.92rem;
}

.cps-funnel .cps-tier .cps-btn {
	margin-top: auto;
}

.cps-funnel .cps-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	padding: 12px 18px;
	border: 1px solid var( --cps-action );
	border-radius: 10px;
	background: var( --cps-action );
	color: var( --cps-on-action );
	font-weight: 700;
	text-decoration: none;
	transition: background 0.15s, border-color 0.15s;
}

.cps-funnel .cps-btn:hover {
	background: var( --cps-action-dk );
	border-color: var( --cps-action-dk );
	color: var( --cps-on-action );
}

.cps-funnel .cps-btn--ghost {
	background: transparent;
	color: var( --cps-action );
}

.cps-funnel .cps-btn--ghost:hover {
	background: var( --cps-tint );
	color: var( --cps-action-dk );
}

.cps-funnel .cps-panel {
	padding: 24px;
	background: var( --cps-tint );
	border-radius: var( --cps-radius );
}

.cps-funnel .cps-panel__blurb {
	color: var( --cps-ink );
	max-width: 60ch;
}

.cps-funnel .cps-actions {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	margin-top: 14px;
}

.cps-funnel .cps-empty,
.cps-funnel .cps-muted {
	color: var( --cps-muted );
	text-align: center;
}

.cps-funnel .cps-funnel__tel {
	text-align: center;
	font-weight: 700;
}

.cps-funnel .cps-sched {
	position: absolute;
	inset: 0;
	z-index: 1;
	display: grid;
	place-items: center;
	gap: 12px;
	padding: 24px;
	background: rgb( 255 255 255 / 92% );
	border-radius: var( --cps-radius );
}

.cps-funnel .cps-sched::before {
	content: "";
	width: 34px;
	height: 34px;
	border: 3px solid var( --cps-line );
	border-top-color: var( --cps-action );
	border-radius: 50%;
	animation: cps-spin 0.8s linear infinite;
}

.cps-funnel .cps-sched__close {
	position: absolute;
	top: 10px;
	right: 12px;
	width: 34px;
	height: 34px;
	background: none;
	border: 0;
	color: var( --cps-muted );
	font-size: 26px;
	line-height: 1;
}

.cps-funnel .cps-sched__err {
	display: grid;
	gap: 10px;
	place-items: center;
	text-align: center;
}

/* ---- states: 0-3-0 ---- */

.cps-funnel .cps-tier.cps-tier--pop {
	border-color: var( --cps-action );
	box-shadow: 0 0 0 3px rgb( from var( --cps-decor ) r g b / 18% );
}

.cps-funnel .cps-tier__year.cps-tier__year--hl {
	display: inline-block;
	padding: 2px 10px;
	border-radius: 8px;
	background: linear-gradient( 180deg, #fff6d6, #ffe27a );
	color: #6b4700;
}

/*
 * The annual-highlight pill's small text. #7a5200 on the gradient's #ffe27a stop is 5.41:1;
 * the value the legacy design used, #8a6300, is 4.25:1 at this size and weight and fails AA.
 */
.cps-funnel .cps-tier__year.cps-tier__year--hl small {
	color: #7a5200;
}

.cps-funnel.is-style-plain {
	/* "Theme colours" variation: drop the brand entirely and inherit. */
	--cps-action: var( --wp--preset--color--primary, currentColor );
	--cps-decor: var( --cps-action );
	--cps-tint: var( --wp--preset--color--tertiary, #f4f6f8 );
}

@keyframes cps-spin {
	to {
		transform: rotate( 360deg );
	}
}

/*
 * Container queries, not viewport ones. The funnel is usually inside a theme's content
 * column -- often around 620px on a 1440px screen -- so a viewport breakpoint would put a
 * three-column grid into a narrow column. Coverage is ~95% of traffic; the rest keep the
 * one-column base layout above, which is a working funnel rather than a broken grid.
 */
@container ( min-width: 34rem ) {
	.cps-funnel .cps-cards,
	.cps-funnel .cps-tiers {
		grid-template-columns: repeat( 2, 1fr );
	}
}

@container ( min-width: 52rem ) {
	.cps-funnel .cps-cards,
	.cps-funnel .cps-tiers {
		grid-template-columns: repeat( 3, 1fr );
	}
}

@media ( prefers-reduced-motion: reduce ) {
	.cps-funnel .cps-pick,
	.cps-funnel .cps-btn {
		transition: none;
	}

	.cps-funnel .cps-sched::before {
		animation-duration: 3s;
	}
}

/*
 * THE ONE ALLOWLISTED GLOBAL RULE. Locks page scroll while the scheduler is open, which
 * cannot be done from inside the block. A site with a sticky header adds one line of its
 * own CSS -- documented in the README -- rather than this plugin shipping a selector for
 * furniture it cannot see:
 *
 *   html.cps-st-scheduler-open .site-header { display: none; }
 */
html.cps-st-scheduler-open {
	overflow: hidden;
}