/*
 * wakefly/pricing-tables -- the one scoped stylesheet this block needs.
 *
 * Loaded through block.json's `style`/`editorStyle`, so it is enqueued only on a page that
 * renders the block and it is unaffected by the SCRIPT_DEBUG style.css/style.min.css split
 * in functions.php.
 *
 * TWO FIELDS CARRY THEIR FONT SIZES HERE RATHER THAN IN theme.json, AND THE CONTRACT SAYS
 * WHY. The price measures 45/35/30/22px and the period 22/20/18/16px across the four captured
 * viewports. Only the period's lower three land on this theme's ladder (x-large, large,
 * medium); the price lands on none of it at any step, and check-cross-artifact's
 * `type-off-the-ladder` refuses a literal in a definition for exactly that reason. So the
 * four numbers live in the unit's `why` and the block's own stylesheet, which is
 * wp-theme-scaffold's one-stylesheet-per-block convention rather than a new theme token.
 */

/*
 * BORDER-BOX, SCOPED TO THIS BLOCK. Neither WordPress core nor this theme sets a global
 * box-sizing reset, and core's own `* { box-sizing: border-box }` ships inside the block
 * library stylesheet, which is only enqueued for blocks core knows are on the page -- this
 * block's markup is written by hand, so none of it applies.
 */
.wp-block-wakefly-pricing-tables,
.wp-block-wakefly-pricing-tables *,
.wp-block-wakefly-pricing-tables *::before,
.wp-block-wakefly-pricing-tables *::after {
	box-sizing: border-box;
}

/*
 * THE ROOT. MEASURED 1296x457 (1440x900), 936x511 (1024x768), 696x647 (768x1024, cards
 * stacked) and 366x1295 (390x844). backgroundColor rgb(255,255,255) at all four -- unlike
 * cards and video, whose roots measure transparent -- carried as the preset utility pair on
 * the wrapper rather than a declaration here, because it is a real measured paint over a page
 * that is not white.
 *
 * padding 24px top and bottom and NOTHING left or right: `_pricing-tables.scss`'s own rule is
 * `padding: 0` and the shared `py-4` VerticalPadding class overrides that one axis. Two of
 * this widget's siblings add horizontal padding of their own; this one does not.
 */
.wp-block-wakefly-pricing-tables {
	padding-block: 1.5rem;
}

/* --------------------------------------------------------------------------- the intro */

/*
 * UNINSTANTIATED -- the captured instance sets Intro blank and it is the only placement of
 * this widget in the crawl, so no box for this element exists anywhere. This is the field's
 * own default rich-text spacing and nothing more.
 */
.wp-block-wakefly-pricing-tables__intro {
	margin-block-end: 1rem;
}

.wp-block-wakefly-pricing-tables__intro > :first-child {
	margin-block-start: 0;
}

.wp-block-wakefly-pricing-tables__intro > :last-child {
	margin-block-end: 0;
}

/* ----------------------------------------------------------------------------- the row */

/*
 * MEASURED flexDirection row at 1440x900 / 1024x768 / 768x1024 (boxes 1296x409, 936x463,
 * 696x599) and COLUMN at 390x844 (366x1247). THE BREAKPOINT IS md = 768px, which the
 * measurement pins exactly: 768 is a row and 390 is a column.
 *
 * THAT DIFFERS FROM units.product-comparison's identical-looking switch, which breaks at lg
 * (992) one viewport earlier -- the two widgets use different Bootstrap mixins even though
 * both "stack on mobile", and the contract calls the difference out so a build does not
 * borrow one for the other.
 *
 * GAP 23.1008px (1.4438rem) -- an odd, non-round value, MEASURED at every viewport and
 * recorded as measured rather than rounded to 23 or 24. It is written in rem here because
 * that is the unit the source's own declaration is in.
 *
 * align-items: center at the row viewports, so the featured card's extra 14px of top and
 * bottom padding extends above and below its neighbours rather than pushing them down.
 */
.wp-block-wakefly-pricing-tables__cards {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 1.4438rem;
}

@media (min-width: 768px) {
	.wp-block-wakefly-pricing-tables__cards {
		flex-direction: row;
		flex-wrap: wrap;
	}
}

/* ---------------------------------------------------------------------------- the card */

/*
 * MEASURED 417x381 at 1440x900, 297x435 at 1024x768, 217x571 at 768x1024 and 366x391 at
 * 390x844. The three widths are exactly (root - 2 gaps) / 3 at each row viewport, so the
 * cards share the row equally and no width is written down -- `flex: 1 1 0` produces all
 * three, and the column viewport gets the full 366 from `width: 100%`.
 *
 * MEASURED border 1px solid rgb(51,51,51), which is this theme's `body-text` slug exactly.
 * Padding 40px on all four sides, gap 10px, flexDirection column.
 *
 * THE WHITE IS A PAINT, NOT AN ABSENCE. This rule declared no background until 2026-09-10, so
 * the card computed rgba(0,0,0,0) and the root's own white showed through it -- identical on
 * the captured instance and NOT identical in general, the same shape of invisible difference
 * blocks/cards' background-keyword comment records. The measurement pass measured the source
 * card painting white, so it is painted here. The contract carries the white on the ROOT and
 * records no background on this element, which is the second half of the same hand-back as
 * the features list below.
 */
.wp-block-wakefly-pricing-tables__card {
	display: flex;
	flex-direction: column;
	gap: 10px;
	width: 100%;
	padding: 40px;
	border: 1px solid var(--wp--preset--color--body-text);
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--body-text);
}

@media (min-width: 768px) {
	.wp-block-wakefly-pricing-tables__card {
		flex: 1 1 0;
		width: auto;
		min-width: 0;
	}
}

/*
 * THE FEATURED CARD. MEASURED backgroundColor AND borderColor both rgb(51,51,51) -- a dark
 * card on a dark border, so no border line is visible -- and every descendant text colour
 * forced white by `.pricing-card-featured` cascading `color: $white`.
 *
 * THE PRICE IS THE ONE THAT MATTERS, because it is a genuine measured DIFFERENCE from the
 * default card rather than a consequence of the cascade: the default card's price is
 * `secondary` orange and the featured card's is WHITE, from
 * `.pricing-card-featured .pricing-card-price { color: $white }` overriding the base rule.
 * A build that only set a colour on the card would leave it orange on black.
 *
 * Padding 54px top and bottom, left and right unchanged at 40 --
 * `_pricing-tables.scss`'s `padding-top/-bottom: 3.375rem` override touches one axis only,
 * which is why this is padding-block and not padding.
 *
 * THE BOX-SHADOW, AND WHY IT IS A DECLARATION HERE RATHER THAN A BLOCK ATTRIBUTE. The
 * contract records it as `style.shadow: "rgba(0, 0, 0, 0.25) 0px 25px 50px -12px"` on this
 * node, MEASURED on `div.pricing-tables-cards > div.pricing-card.pricing-card-featured`,
 * IDENTICAL at all four captured viewports and the ONLY non-`none` boxShadow anywhere in the
 * unit -- the root and every other descendant compute `none`. It is SINGLE-layer and is
 * deliberately NOT units.product-comparison's two-layer value, which belongs to a different
 * widget.
 *
 * The attribute cannot render on this element and that is measurable, not a preference:
 * `wp_apply_shadow_support()` (wp-includes/block-supports/shadow.php:52-75) takes a
 * `WP_Block_Type` and that block's own `$block_attributes`, and returns a `style` string that
 * `get_block_wrapper_attributes()` puts on the BLOCK'S OWN WRAPPER. This unit is an ACF Block
 * whose card is a plain `<div>` written by render.php -- there is no registered block type
 * and no attributes bag for it, so there is nothing for `style.shadow` to serialize onto. The
 * only wrapper this block has is its ROOT, and the root's measured shadow is `none`; putting
 * the attribute there would paint the shadow on the wrong box. Every other attribute the
 * contract records on this same node -- border, colours, padding, blockGap -- is already a
 * declaration in this file for exactly the same reason.
 *
 * A shadow changes NO geometry, so nothing a build measures recovers it and no box delta
 * would have caught its absence. That is why the contract had to carry the value and why the
 * first build shipped this card with none.
 */
.wp-block-wakefly-pricing-tables__card.is-featured {
	padding-block: 54px;
	background-color: var(--wp--preset--color--body-text);
	color: var(--wp--preset--color--white);
	box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
}

.wp-block-wakefly-pricing-tables__card.is-featured .wp-block-wakefly-pricing-tables__price,
.wp-block-wakefly-pricing-tables__card.is-featured .wp-block-wakefly-pricing-tables__period {
	color: var(--wp--preset--color--white);
}

/* ----------------------------------------------------------------------- the plan name */

/*
 * MEASURED colour rgb(51,51,51) (body-text, inherited from the card), fontWeight 800,
 * uppercase, letterSpacing 1.5px.
 *
 * BASE SIZE 16px -- this theme's `medium` -- MEASURED ON LADDER at 1024x768, 768x1024 and
 * 390x844. The 1440x900 step to 18px (`large`) is `_pricing-tables.scss`'s own
 * `media-breakpoint-up(xxl)` = 1400px, and 1440 is the only captured viewport above it.
 */
.wp-block-wakefly-pricing-tables__plan-name {
	margin-block: 0;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 800;
	letter-spacing: 1.5px;
	text-transform: uppercase;
}

@media (min-width: 1400px) {
	.wp-block-wakefly-pricing-tables__plan-name {
		font-size: var(--wp--preset--font-size--large);
	}
}

/* ---------------------------------------------------------------------- the price line */

/*
 * MEASURED alignItems: flex-end -- the numeral and the period sit on the number's BOTTOM
 * edge, not its centre, which is what keeps "/Month" on the baseline of a 45px figure.
 */
.wp-block-wakefly-pricing-tables__price-line {
	display: flex;
	flex-direction: row;
	align-items: flex-end;
}

/*
 * MEASURED colour rgb(240,100,0) -- this theme's `secondary` slug exactly -- and fontWeight
 * 800. THE FOUR SIZES: 45px at 1440x900, 35px at 1024x768, 30px at 768x1024, 22px at 390x844.
 * NONE of the four is on this theme's ladder (14/16/18/20/40), which is why they are literals
 * here and not preset slugs.
 *
 * The ladder is written mobile-first from those four measurements, which puts the sm band
 * (576-767) at the 390 value. Nothing measured that band; it is the only step below that is
 * not a captured viewport, and it is named here rather than left to look measured.
 *
 * THERE IS NO line-height HERE, AND ITS ABSENCE IS THE MEASUREMENT. A `line-height: 1.1` stood
 * on this rule until 2026-09-10, giving 49.5px against a 45px figure. NOTHING IN THE CONTRACT
 * ASKED FOR IT -- the price field's `why` records the colour, the weight and the four sizes
 * and says nothing about leading -- and a fidelity measurement pass then measured the SOURCE
 * at 67.5px, which is 45 x 1.5: the page's own body line-height, inherited, with no rule of
 * its own. That is 18 of the 70px this unit was short. theme.json's line-height is a UNITLESS
 * 1.5, so it inherits as a ratio and re-resolves against each font size rather than arriving
 * as a 24px length -- which is why deleting one declaration is the whole of the fix.
 */
.wp-block-wakefly-pricing-tables__price {
	font-size: 22px;
	font-weight: 800;
	color: var(--wp--preset--color--secondary);
}

/*
 * MEASURED colour rgb(51,51,51) (body-text). Sizes 22px at 1440x900 -- the one viewport of
 * the four where this field is OFF the ladder -- then 20px (`x-large`), 18px (`large`) and
 * 16px (`medium`), each an exact preset. The three on-ladder steps are written as the presets
 * they are and only the 1440 step is a literal.
 *
 * NO line-height HERE EITHER, AND THE SAME MEASUREMENT SAYS SO. A `line-height: 1.2` stood on
 * this rule and computed 26.4 / 24 / 21.6 / 19.2px across the four viewports; the node's own
 * `why` records the SOURCE at 33 / 30 / 27 / 24px -- 1.5x the font size at every step, which
 * is theme.json's UNITLESS root ratio inherited with no rule of its own. Nothing in the
 * contract asked for a leading on this field. This is the price rule's deleted `line-height:
 * 1.1` a second time, one element over, and it survived that fix because THIS NODE CANNOT
 * PAIR: pairing.js's `sigOf()` keys on the leaf tag, the source renders `span` and the build
 * renders `span` inside a `<p>`-shaped contract node, so no comparison reports a computed row
 * for it at all. PROBED 2026-09-10, both cards, all four viewports.
 *
 * GEOMETRY IS UNCHANGED BY THE FIX, and that is measured rather than assumed: the price line
 * is `align-items: flex-end` and the price's own line box is 67.5 / 52.5 / 45 / 33px, taller
 * than the period's at every viewport, so the flex line's height comes from the price either
 * way. Only the period's own box grows into space the line already had.
 */
.wp-block-wakefly-pricing-tables__period {
	font-size: var(--wp--preset--font-size--medium);
}

@media (min-width: 768px) {
	.wp-block-wakefly-pricing-tables__price {
		font-size: 30px;
	}

	.wp-block-wakefly-pricing-tables__period {
		font-size: var(--wp--preset--font-size--large);
	}
}

@media (min-width: 992px) {
	.wp-block-wakefly-pricing-tables__price {
		font-size: 35px;
	}

	.wp-block-wakefly-pricing-tables__period {
		font-size: var(--wp--preset--font-size--x-large);
	}
}

@media (min-width: 1400px) {
	.wp-block-wakefly-pricing-tables__price {
		font-size: 45px;
	}

	.wp-block-wakefly-pricing-tables__period {
		font-size: 22px;
	}
}

/* ------------------------------------------------------------------------ the features */

/*
 * MEASURED 4 rows on each captured plan, fontSize 16px (`medium` -- ON the ladder at every
 * viewport, unlike the price and period above), colour body-text inherited from the card,
 * each row preceded by a 16x16 checkmark.
 *
 * THE PADDING AND THE GAP DISAGREE WITH THE CONTRACT, AND THE PIXEL IS WHY THEY ARE WRITTEN
 * THIS WAY. The unit's `structure` records this element as `gap 12px` and records no padding
 * at all; this build carried both faithfully and came out 52px short on the list -- which,
 * with the 18px of price leading above, is exactly the 70px the card and the root were each
 * missing. A fidelity measurement pass on 2026-09-10 attributed that 52px here: 16px of top
 * padding and 24px of bottom padding, absent, plus three gaps at 16px rather than 12px
 * (3 x 4 = 12). 40 + 12 = 52, and 52 + 18 = 70 = the card delta = the root delta, which is
 * what makes the attribution an arithmetic identity rather than a plausible story.
 *
 * SO THE CONTRACT'S `gap 12px` IS HANDED BACK AS WRONG rather than edited (CLAUDE.md
 * §11.5 -- a recorded decision is not re-opened by whoever finds it). The build follows the
 * measurement; the contract needs its owner.
 *
 * `list-style: none` because the glyph IS the marker here: the source draws an inline sprite
 * symbol per row rather than using a list marker, so a bullet would be a second one.
 */
.wp-block-wakefly-pricing-tables__features {
	display: flex;
	flex-direction: column;
	gap: 16px;
	margin-block: 0;
	padding-block: 16px 24px;
	padding-inline-start: 0;
	list-style: none;
	font-size: var(--wp--preset--font-size--medium);
}

/*
 * `center` AND 12px, BOTH MEASURED ON THE SOURCE. This rule was `align-items: flex-start;
 * gap: 8px`, with a 4px top margin on the glyph below faking the centring for the
 * single-line case -- which is indistinguishable from real centring at 1440, where every
 * feature is one line, and wrong by 24px per row the moment one wraps. A fidelity
 * measurement pass on 2026-09-10 measured a 72px wrapped feature at 768: the source's icon
 * sits at +28 from the item's top, genuinely centred ((72 - 16) / 2), and this build's sat
 * at +4, pinned to the top by the fake margin. Four features on the featured card and three
 * cards deep is where the 768 and 390 root deltas were coming from.
 *
 * The 12px is the gap between the glyph and its text, and is not to be confused with the
 * list's own 16px ROW gap above, which a different measurement pass established against a
 * contract that records 12px there. Two different distances, two different elements.
 */
.wp-block-wakefly-pricing-tables__feature {
	display: flex;
	align-items: center;
	gap: 12px;
}

/*
 * MEASURED 16x16 at every occurrence. `flex-shrink: 0` so a two-line feature keeps a square
 * glyph, and `currentColor` so the featured card's white cascade reaches it without a second
 * rule -- the source's `.pricing-card-featured` colour cascade does the same thing.
 *
 * NO TOP MARGIN. `margin-block-start: 0.25rem` stood here until 2026-09-10 to push the glyph
 * onto the text's optical centre while the item above was `align-items: flex-start`. With
 * the item genuinely centred the margin is a second, contradictory offset, so it goes with
 * the rule that needed it.
 */
.wp-block-wakefly-pricing-tables__check {
	flex-shrink: 0;
	width: 16px;
	height: 16px;
	fill: currentColor;
	color: currentColor;
}

/* ----------------------------------------------------------------------------- the CTA */

/*
 * UNINSTANTIATED, so nothing here is measured. render.php's own comment explains why the
 * source's `btn-brown`/`btn-white-brown` classes are not reproduced: the unit's
 * `disagreements` records both as having no effect, and carrying a dead class forward would
 * make the button unstyled here as well. theme.json's button element supplies the rest, and
 * only the border lives here -- the same two declarations, and the same two-class selector,
 * as blocks/cards, because global styles emit `border-width: 0` for `.wp-element-button` at
 * a specificity a single class ties with and loses to on order.
 */
.wp-block-wakefly-pricing-tables__cta.wp-element-button {
	align-self: flex-start;
	border: 1px solid transparent;
	text-decoration: none;
}