/* ==========================================================================
   All Access pricing panel

   Loaded only where [f32_all_access_pricing] renders. See inc/all-access-page.php.

   NO HOVER SHADOW, NO HOVER TRANSFORM IN THIS FILE. A pricing card is the most
   obvious thing in the theme to make lift on hover, and assets/css/surface.css
   is where every lift, shadow and hover state on this site is declared -
   verify.ps1's `surfaces` gate exists to stop a fifth card answering the pointer
   on its own. The buttons below change opacity and colour only.

   THE PRICE LOCKUP IS BRICOLAGE GROTESQUE ON PURPOSE. It was the display face of
   the homepage's All Access band, and that band is now a one-line rail with no
   big number in it. A large price is where that face belongs; without this rule
   the family would be registered in theme.json and in the database font library
   with nothing on the site using it.
   ========================================================================== */

.f32-aa {
	--f32-aa-gap: var(--wp--preset--spacing--30);
	--f32-aa-width: 25rem;

	display: flex;
	flex-direction: column;
	align-items: center;
	/* 26px, the mockup's `.pricing` gap. The spacing scale has no step there -
	   40 is 16px and 50 is 24px - and this file already carries the mockup's
	   own numbers for the button, the chip and the feature gaps. */
	gap: 26px;
	margin-inline: auto;
	/*
	 * NO max-width HERE, AND THAT IS THE FIX. It used to carry `max-width: 34rem`
	 * and that rule had never once applied: WordPress's constrained layout emits
	 *
	 *   .is-layout-constrained > :where(:not(.alignleft):not(.alignright):not(.alignfull))
	 *     { max-width: var(--wp--style--global--content-size) }
	 *
	 * which is 0,1,0 - `:where()` contributes nothing - exactly like `.f32-aa`,
	 * and it is printed inline after this stylesheet, so it won on source order.
	 * The panel had been sitting at the 696px content width the whole time.
	 *
	 * Raising the specificity would have worked and would have been the wrong
	 * shape anyway: this box holds three things of three natural widths - a
	 * track, a card and a sentence - and only the CARD wants to be 400px. So the
	 * width moves down to `.f32-aa__plans`, which is not a direct child of the
	 * constrained layout and therefore never enters the fight.
	 */
}

/* --------------------------------------------------------------------------
   The switch
   -------------------------------------------------------------------------- */

/*
 * THE SAVING CHIP MUST NOT MOVE THE TOGGLE. It used to be a flex sibling of the
 * track inside a centred row, so the row centred TRACK PLUS CHIP and the two
 * pills sat visibly left of the page's centre line - under a centred heading and
 * above a centred card, which is exactly where a few pixels of drift are
 * legible. Taking the chip out of flow puts the track back on the axis
 * everything else on this page shares, and the chip hangs off its right edge
 * where it reads as an annotation rather than a third control.
 *
 * `inline-flex` is what makes that work: the switch shrinks to the track, so
 * `inset-inline-start: 100%` on the chip means "just past the track" without a
 * measurement.
 */
.f32-aa__switch {
	position: relative;
	display: inline-flex;
	align-items: center;
}

.f32-aa__toggle {
	position: relative;
	display: inline-flex;
	padding: 4px;
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--border-radius--full);
}

/* The moving highlight. Two options only, so its width is half the track and
   its position is a single translate - no measuring, no resize listener. */
.f32-aa__thumb {
	position: absolute;
	inset-block: 4px;
	inset-inline-start: 4px;
	inline-size: calc(50% - 4px);
	border-radius: var(--wp--custom--border-radius--full);
	background: var(--wp--preset--color--primary);
	transition: transform 340ms cubic-bezier(0.65, 0.03, 0.28, 1);
}

.f32-aa[data-plan="year"] .f32-aa__thumb {
	transform: translateX(100%);
}

.f32-aa__tab {
	position: relative;
	z-index: 1;
	appearance: none;
	border: 0;
	background: none;
	cursor: pointer;
	white-space: nowrap;
	padding: 10px 24px;
	border-radius: var(--wp--custom--border-radius--full);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	transition: color 220ms ease;
}

.f32-aa__tab[aria-pressed="true"] {
	color: var(--wp--preset--color--contrast);
}

/*
 * It is a claim about the ANNUAL plan, so it appears when the annual plan does
 * and not before. Sitting there while Monthly is selected, it reads as a saving
 * on the thing currently on screen, which is the one thing it is not.
 */
.f32-aa__saving {
	position: absolute;
	inset-inline-start: 100%;
	inset-block-start: 50%;
	margin-inline-start: 12px;
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--primary);
	font-family: var(--wp--preset--font-family--inter);
	font-size: 11.5px;
	font-weight: 700;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	white-space: nowrap;
	padding: 5px 10px;
	border-radius: var(--wp--custom--border-radius--md);
	transform-origin: left center;
	transform: translateY(-50%) scale(0.9);
	opacity: 0;
	transition: opacity 260ms ease 60ms, transform 260ms cubic-bezier(0.2, 1.4, 0.4, 1) 60ms;
}

.f32-aa[data-plan="year"] .f32-aa__saving {
	opacity: 1;
	transform: translateY(-50%) rotate(-2deg) scale(1);
}

/*
 * Below the width where the chip would hang off the screen it goes back into
 * flow, under the track, still centred. It is NOT hidden: "Save 42%" is the
 * reason the annual plan is the default, and a phone is where most people will
 * read this page.
 */
@media (max-width: 30rem) {
	.f32-aa__switch {
		flex-direction: column;
		gap: 0.625rem;
	}

	.f32-aa__saving {
		position: static;
		margin-inline-start: 0;
		transform: rotate(-2deg) scale(0.9);
	}

	.f32-aa[data-plan="year"] .f32-aa__saving {
		transform: rotate(-2deg) scale(1);
	}
}

/* --------------------------------------------------------------------------
   The card
   -------------------------------------------------------------------------- */

/*
 * BOTH CARDS OCCUPY ONE CELL. They used to be siblings in a column with the
 * inactive one carrying `hidden`, which is display:none - so the swap was
 * instant, there was nothing on screen to animate, and the panel's height
 * jumped by whatever the two cards differed by. Stacked in a single grid cell
 * they overlap exactly, the row is sized to the taller of the two so nothing
 * below ever moves, and the outgoing card is still in the layout long enough to
 * be animated out.
 */
.f32-aa__plans {
	display: grid;
	inline-size: 100%;
	/*
	 * 400px, the width the approved mockup was drawn at. A pricing card is a TALL
	 * object; at the 696px content width the same content spread sideways into a
	 * wide flat box that read like a notice rather than a plan, and the price
	 * lockup lost the middle of the eye's span it is sized for.
	 */
	max-width: var(--f32-aa-width);
}

.f32-aa__plan {
	grid-area: 1 / 1;
	inline-size: 100%;
	background: var(--wp--preset--color--contrast);
	border: 1px solid var(--wp--preset--color--border-subtle);
	border-radius: var(--wp--custom--border-radius--lg);
	/* 30px, not the 16 that `--spacing--40` gave it. The card was wearing half
	   the padding the approved mockup has, which is why the rule, the ticks and
	   the fine print all sat too near its edges. */
	padding: 30px 30px 28px;
	text-align: center;
	/*
	 * A RESTING shadow, and it is not the thing verify.ps1's `surfaces` gate is
	 * about: that gate stops a card growing its own HOVER lift outside
	 * assets/css/surface.css. This one never changes, and it is the theme's own
	 * `lg` preset rather than a hand-mixed value, so the card sits off the page
	 * the way the approved mockup had it without inventing a shadow the rest of
	 * the site does not own.
	 */
	box-shadow: var(--wp--preset--shadow--lg);
	transition: opacity 220ms ease;
}

/*
 * `aria-hidden` AND `inert` DO THE HIDING, not `hidden` and not `display: none`.
 * A transparent card would still be read aloud and still be tabbable, and two
 * prices for one product in the accessibility tree is worse than the layout
 * problem stacking them solved. inc/all-access-page.php writes both attributes
 * server-side onto the card that is not selected, so this is correct on arrival
 * and correct without JavaScript.
 */
.f32-aa__plan[aria-hidden="true"] {
	opacity: 0;
	pointer-events: none;
}

/*
 * The page's h1, read and not seen. The standard clip, written here rather than
 * leaning on core's `.screen-reader-text`, which no rule guarantees is on the
 * page - the same call assets/css/order-receipt.css and the downloads library
 * make. It is never focusable, so no focus-reveal rule is needed with it.
 */
.f32-aa__sr {
	position: absolute;
	inline-size: 1px;
	block-size: 1px;
	margin: -1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.f32-aa__name {
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 700;
	letter-spacing: -0.01em;
	margin: 0;
}

/*
 * The one descriptive line on the page. It was a centred paragraph above the
 * toggle, at `medium`, saying what the card says an inch below it; inside the
 * card, small and grey, it does the same job without being read twice.
 */
.f32-aa__sub {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
	color: var(--wp--preset--color--muted);
	text-wrap: balance;
	margin: 4px 0 0;
}

.f32-aa__price {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 2px;
	margin-block: 22px 4px;
}

/*
 * THE ROLL. The three lines of the price lockup travel while the cards
 * cross-fade, so the number reads as having CHANGED rather than as having been
 * replaced. Direction is the whole trick and it needs two states, not one: a
 * card that is waiting sits below the line and rises into place, and a card that
 * is leaving goes up and out. One rest position for both would send the
 * outgoing price downwards into the incoming one.
 *
 * `is-leaving` is added by assets/js/all-access-toggle.js for the length of the
 * transition and then dropped, which returns the card to the waiting position
 * underneath, ready for its next turn.
 *
 * The features and the button are deliberately NOT animated. Sliding a list of
 * ticks says the plan changed twice; the price saying it once is enough, and
 * the button has to stay a still target while the pointer is on its way to it.
 */
.f32-aa__was,
.f32-aa__now,
.f32-aa__billed {
	transition: transform 340ms cubic-bezier(0.65, 0.03, 0.28, 1), opacity 220ms ease;
}

.f32-aa__plan[aria-hidden="true"] .f32-aa__was,
.f32-aa__plan[aria-hidden="true"] .f32-aa__now,
.f32-aa__plan[aria-hidden="true"] .f32-aa__billed {
	transform: translateY(16px);
}

.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__was,
.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__now,
.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__billed {
	transform: translateY(-16px);
}

/*
 * The strike through the monthly rate DRAWS ITSELF, left to right, once the
 * annual card has arrived. It is the one moment on the page that says "this is
 * what you are not paying", and a line that is simply already there says it
 * much more quietly. Drawn as a pseudo-element rather than `text-decoration`
 * because a text decoration cannot be animated.
 */
.f32-aa__was::after {
	content: "";
	position: absolute;
	inset-inline: -3px;
	inset-block-start: 52%;
	block-size: 2px;
	background: var(--wp--preset--color--coral);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 420ms cubic-bezier(0.65, 0.03, 0.28, 1) 160ms;
}

.f32-aa__plan:not([aria-hidden="true"]) .f32-aa__was::after {
	transform: scaleX(1);
}

/* The struck monthly rate above the annual one. Coral is the theme's own
   "something has been taken off" colour - the same one the cart uses. */
.f32-aa__was {
	position: relative;
	display: inline-block;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	font-variant-numeric: tabular-nums;
	/* A fixed line box, so `top: 52%` on the drawn strike lands on the digits
	   rather than wherever the font's own leading happens to put it. */
	block-size: 26px;
	line-height: 26px;
	/* The <s> element's own line is turned off; the drawn one below replaces it,
	   because a text-decoration cannot be animated. */
	text-decoration: none;
}

/*
 * A FLEX ROW, NOT vertical-align. The dollar sign and the "/month" hang at two
 * different heights against a 68px digit, and `vertical-align` sets both of
 * them relative to a baseline that moves with the font size - so the lockup
 * drifted every time the digit changed. Three items on a shared flex-start
 * edge, each dropped by its own margin, is what the mockup does and it holds
 * whatever the number is. The digit itself is an anonymous flex item; it needs
 * no rule because it is the tallest thing in the row.
 */
.f32-aa__now {
	display: flex;
	align-items: flex-start;
	justify-content: center;
	gap: 3px;
	font-family: var(--wp--preset--font-family--bricolage-grotesque);
	font-size: 68px;
	font-weight: 800;
	line-height: 1;
	letter-spacing: -0.03em;
	font-variant-numeric: tabular-nums;
	color: var(--wp--preset--color--primary);
	margin: 0;
}

.f32-aa__currency {
	font-size: 28px;
	font-weight: 700;
	letter-spacing: 0;
	margin-block-start: 9px;
}

.f32-aa__per {
	font-size: 21px;
	font-weight: 600;
	color: var(--wp--preset--color--muted);
	letter-spacing: 0;
	margin-block-start: 38px;
}

.f32-aa__billed {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	color: var(--wp--preset--color--muted);
	margin: 0;
}

/* --------------------------------------------------------------------------
   What you get
   -------------------------------------------------------------------------- */

.f32-aa__features {
	list-style: none;
	padding: 0;
	margin: 22px 0;
	text-align: start;
	border-top: 1px solid var(--wp--preset--color--border-subtle);
	padding-top: 18px;
	display: flex;
	flex-direction: column;
	gap: 11px;
}

.f32-aa__feature {
	display: flex;
	align-items: flex-start;
	gap: 9px;
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.45;
}

.f32-aa__feature::before {
	flex: none;
	inline-size: 17px;
	block-size: 17px;
	margin-block-start: 2px;
	border-radius: 5px;
	font-size: 11px;
	font-weight: 700;
	display: flex;
	align-items: center;
	justify-content: center;
}

.f32-aa__feature.is-yes::before {
	content: "\2713";
	background: var(--wp--preset--color--price);
	color: var(--wp--preset--color--primary);
}

/* The cap is not a tick. It is the one line that differs between the plans and
   the reason there are two of them, so it is marked as a limit rather than
   dressed up as another benefit. */
.f32-aa__feature.is-cap::before {
	content: "\2192";
	background: var(--wp--preset--color--gold);
	color: var(--wp--preset--color--primary);
}

.f32-aa__feature.is-cap {
	font-weight: 600;
}

/* --------------------------------------------------------------------------
   The button and the terms under it
   -------------------------------------------------------------------------- */

/*
 * TWO CLASSES, NOT ONE, AND IT IS NOT DECORATION. theme.json styles every link
 * as `:root :where(a:where(:not(.wp-element-button)))` - specificity 0,1,0,
 * because :where() contributes nothing. A single `.f32-aa__cta` ties with that
 * and loses on source order, which paints the label in `action` blue on an
 * `action` blue button: the text is there, occupies its line, and is invisible.
 * Naming the panel as well makes it 0,2,0 and settles it outright.
 */
.f32-aa .f32-aa__cta {
	display: flex;
	align-items: center;
	justify-content: center;
	inline-size: 100%;
	background: var(--wp--preset--color--action);
	color: var(--wp--preset--color--contrast);
	text-decoration: none;
	font-family: var(--wp--preset--font-family--inter);
	font-size: 16px;
	font-weight: 600;
	padding: 15px 22px;
	border-radius: var(--wp--custom--border-radius--full);
	transition: opacity 180ms ease;
}

.f32-aa .f32-aa__cta:hover,
.f32-aa .f32-aa__cta:focus-visible {
	opacity: 0.9;
	color: var(--wp--preset--color--contrast);
}

.f32-aa .f32-aa__cta.is-secondary {
	background: var(--wp--preset--color--subtle);
	color: var(--wp--preset--color--primary);
	border: 1px solid var(--wp--preset--color--border-subtle);
}

.f32-aa__holding {
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.5;
	color: var(--wp--preset--color--primary);
	background: var(--wp--preset--color--gold-light);
	border-radius: var(--wp--custom--border-radius--md);
	padding: 12px 14px;
	margin: 0 0 var(--wp--preset--spacing--20);
	text-align: start;
}

/* The renewal terms. Small, but never hidden and never behind a disclosure:
   the amount and the frequency have to be readable before the button is
   pressed, not after. */
/*
 * CENTRED, like everything else in this card. It was `text-align: start` on the
 * argument that a legal sentence reads better ranged left - which is true of a
 * paragraph and false of two lines under a centred button, where it just looks
 * like it belongs to something else. The mockup centres it; so does the card.
 */
.f32-aa__terms {
	font-family: var(--wp--preset--font-family--inter);
	font-size: 12px;
	line-height: 1.5;
	color: var(--wp--preset--color--muted);
	margin: 12px 0 0;
	text-align: center;
}

@media (max-width: 30rem) {
	.f32-aa__plan {
		padding: 22px 20px 20px;
	}

	.f32-aa__now {
		font-size: 56px;
	}
}

/*
 * Everything above that moves, stopped. The panel still works exactly the same:
 * the cards still swap, the strike is still there, the chip still appears. They
 * simply arrive rather than travel.
 */
@media (prefers-reduced-motion: reduce) {
	.f32-aa__thumb,
	.f32-aa__tab,
	.f32-aa__saving,
	.f32-aa__plan,
	.f32-aa__was,
	.f32-aa__was::after,
	.f32-aa__now,
	.f32-aa__billed,
	.f32-aa .f32-aa__cta {
		transition-duration: 1ms;
	}

	.f32-aa__plan[aria-hidden="true"] .f32-aa__was,
	.f32-aa__plan[aria-hidden="true"] .f32-aa__now,
	.f32-aa__plan[aria-hidden="true"] .f32-aa__billed,
	.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__was,
	.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__now,
	.f32-aa__plan[aria-hidden="true"].is-leaving .f32-aa__billed {
		transform: none;
	}
}