/**
 * Core Paragraph Block - Badge Styles
 *
 * The two badges on a product card, both bound paragraphs sitting in the same
 * flex row under the thumbnail: the price, and what the visitor already owns.
 * Applied via block styles: is-style-price-badge, is-style-entitlement-badge.
 *
 * @package F32
 */

/*
 * Price Badge: mint block with dark green text, matching sparklestock.com.
 *
 * Everything the block system can express — background, text colour, padding,
 * margin, border radius, font size, weight and line height — now lives in
 * theme.json at styles.blocks.core/paragraph.variations.price-badge. WordPress
 * builds the same `p.is-style-price-badge` selector from core/paragraph's own
 * root selector (`p`), so the move is a change of layer, not of target.
 *
 * What is left here is the part no block support covers: the badge is a flex
 * box so the price centres on both axes inside its own pill, it must not wrap,
 * and it must not shrink — every use of it sits in a nowrap flex row beside a
 * post title that is set to fill the remaining space.
 */
p.is-style-price-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	white-space: nowrap;
	flex-shrink: 0;
}

/*
 * Entitlement Badge: "Purchased" or "Included with your pass", bound to
 * sparklestock/edd-entitlement, beside the price in the same 16px row.
 *
 * Quieter than the price on purpose. The price is the call to action for a
 * visitor who does not own this yet; this is reassurance for one who does, and
 * reassurance should not outshout the ask. It is quieter by size rather than by
 * ink — a step down in font size and a shorter pill, against a 14px/700 title —
 * because the ink cannot go pale: see below.
 *
 * The fill is `teal-light`. The account library already badges these two facts
 * with exactly two palette fills, `teal-light` for pass and `price` for
 * purchased, and on this card `price` is spoken for by the price badge one
 * element away. So the pass fill takes both meanings here, and a card badge and
 * a library badge for the same product read as the same badge.
 *
 * The ink is `primary`, the same substitution the library badge documents and
 * for the same reason: the palette carries no dark teal, and `muted` on
 * `teal-light` measures 3.8:1, under the 4.5:1 that 11px text needs.
 *
 * Unlike price-badge, this style has no theme.json variation, so every
 * declaration it needs is here. Stated as `p.is-style-entitlement-badge` —
 * 0,1,1, matching its neighbour above — and not as the bare class: WordPress
 * writes block styles as `:root :where(…)` at 0,1,0, and core's flex layout
 * zeroes a flex child's margin at `.is-layout-flex > :is(*, div)`, which is
 * itself 0,1,1 and beats any single-class rule.
 */
p.is-style-entitlement-badge {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: 0;
	padding: 0.375em 0.625em;
	border-radius: 4px;
	background-color: var(--wp--preset--color--teal-light, #c1f2f2);
	color: var(--wp--preset--color--primary, #000000);
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.02em;
	line-height: 1.5;
	white-space: nowrap;
	flex-shrink: 0;
}

/*
 * Most visitors own nothing, so on a typical archive most of these paragraphs
 * bind to an empty string and core serialises `<p class="…"></p>` with nothing
 * at all between the tags — which is what `:empty` requires, and it is the same
 * shape the price badge already relies on in archive-download.css. Without this
 * every un-owned card in a five-column grid grows by a line and the whole shop
 * reflows around the handful that are owned.
 *
 * Global, not scoped to .archive-download-grid the way the price badge's twin
 * rule is, because this card is also the search result and the homepage
 * section. 0,2,1, so it beats the display:flex above.
 */
p.is-style-entitlement-badge:empty {
	display: none;
}

/*
 * THE TWO OWNERSHIPS ARE DRAWN DIFFERENTLY, AND ONLY ONE OF THEM IS A BADGE.
 *
 * The state arrives as `is-entitlement-purchased` / `is-entitlement-pass`, written
 * onto this paragraph by the plugin's render_block filter (see
 * sparklestock-blocks/inc/entitlement-binding.php) because core offers no bindable
 * className. Matching on the word itself would break in every translation, so this
 * file never looks at the text.
 *
 * Purchased is the rarer and louder fact, so it moves out of the footer row and onto
 * the thumbnail, top-right, at the same 16px the footer's content is inset by. The
 * card group carries `position: relative` for it - that rule lives with the card, in
 * core-post-template.css. `overflow: hidden` on the card was already there for the
 * image's rounded corner and clips this too.
 *
 * Taking it out of flow is also what buys the footer its equal heights: the row is
 * then title + price on every card, owned or not.
 */
p.is-style-entitlement-badge.is-entitlement-purchased {
	position: absolute;
	top: 16px;
	right: 16px;
	z-index: 2;
	box-shadow: 0 1px 2px rgba(0, 0, 0, 0.16);
	/*
	 * The badge paints over the thumbnail's link. It says something, but it is not
	 * FOR anything, and without this the patch of image under it stops navigating.
	 */
	pointer-events: none;
}

/*
 * Pass gets NO badge. "Included" beside a price the customer will not pay is the same
 * sentence twice, so the price says it instead - struck through, in muted ink, below.
 *
 * VISUALLY hidden, not `display: none`. The word is the only thing on the card that
 * says WHY the price is struck through, and a screen reader gets nothing from a line
 * through a number. So the paragraph keeps its place in the accessibility tree and
 * loses only its pixels. The 1px clipped box is why it must not be `position: static`
 * here - it would still take a line in the flex row.
 *
 * 0,3,1 against the base style's 0,1,1, so the padding and fill are overridden rather
 * than fought.
 */
p.is-style-entitlement-badge.is-entitlement-pass {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/*
 * The struck price is the pass badge, said in the place the eye already looks.
 *
 * `:has()` on the footer row rather than a class on the price, because the price
 * paragraph is bound to a different source and nothing server-side knows about
 * entitlement at the moment it renders. The two paragraphs are siblings in the card
 * footer, so the row is the nearest thing that can see both.
 *
 * The green pill goes with it. A price the customer will not pay should not still be
 * wearing the fill that means "this is what it costs", and muted ink on `price` green
 * would not clear 4.5:1 anyway.
 *
 * Browsers without :has() simply show the normal price beside a hidden word - the
 * customer is told again on the product page, and nothing is broken.
 */
.wp-block-group:has(> p.is-style-entitlement-badge.is-entitlement-pass) > p.is-style-price-badge {
	background-color: transparent;
	color: var(--wp--preset--color--muted, #6b7280);
	text-decoration: line-through;
}