/*
 * core/post-terms — `Chips`, the dark pills above a product's name.
 *
 * Figma node 15863:19696: near-black pills 8px apart, each 15px/10px of inset around 14px
 * semi-bold white type, a 5px corner and a 1px rim of white at 8%.
 *
 * Layered on top of `core-post-terms.php`, the theme's default Post Terms style, which is
 * still in force: the links are not underlined and the block is trimmed to its cap height.
 *
 * Scoped to `.is-style-chips`, which is where `register_block_style()` puts the class.
 * That puts every rule below at 0-2-0 or better, which clears both core's own block CSS
 * and theme.json's `:root :where(a:where(:not(.wp-element-button)))` (0-1-0) without an
 * `!important` and without depending on stylesheet order.
 */

/*
 * The block becomes a wrapping row.
 *
 * `inline-flex` and not `flex`, so a terms list narrower than its column does not take the
 * whole width and cannot be mistaken for a full-width band. Wrapping matters more here
 * than the design suggests: the frame shows a product with one Application / Industry
 * term, and the catalogue has products with **five** — so a row that could not wrap would
 * push the last pills out of the column.
 *
 * `text-box: normal` undoes the default style's trim. The trim is right for a line of type
 * whose baseline has to line up with something; here each term is a box with its own
 * padding, and trimming the *block* would take 4px off the row's height and leave the
 * pills sitting proud of it.
 */
.wp-block-post-terms.is-style-chips {
	align-items: center;
	display: inline-flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--xs);
	text-box: normal;
}

/*
 * One pill.
 *
 * `neutral-900` is the design's `#1C1C1C` — the same token the theme's headings are set in
 * — and `chip` is the 5px corner, which exists as a token precisely so the Product card's
 * badge and this one cannot drift apart.
 *
 * The rim is white at 8%, which is Figma's own value and is not one of the four
 * `settings.custom` overlays (10% and 70% white, 10% and 20% black). It is written out
 * rather than rounded to `overlay-white-10` because at this size the difference is
 * invisible either way and inventing a fifth overlay token for one component's hairline
 * would be the wrong trade — the four that exist are each used by more than one thing.
 * `box-shadow: inset` and not a `border`, which is silent failure 41: Figma draws the
 * stroke inside the 30px pill, and a border would make it 32 and push the row taller than
 * the design's chip line.
 *
 * The type is the design's SH3 — Nure Text, 14px, weight 600, no tracking — trimmed to its
 * cap height, which is what makes the 10px of block padding the design's 10px rather than
 * 10 plus two half-leadings. Safe here: the pill has no `overflow` to clip the descenders
 * against (silent failure 39).
 *
 * `box-sizing: border-box` is stated for the theme's usual reason (silent failures 33 and
 * 52): the UA gives one to `<button>` and not to `<a>`, and this box has padding on both
 * axes.
 *
 * `color` has to be *written*, not inherited: theme.json's element styles are real
 * declarations and an explicit declaration beats inheritance whatever its specificity
 * (silent failure 36), so a link inside this block keeps the global link colour until this
 * rule says otherwise.
 */
.wp-block-post-terms.is-style-chips a,
.wp-block-post-terms.is-style-chips .wp-block-post-terms__term {
	background-color: var(--wp--preset--color--neutral-900);
	border-radius: var(--wp--preset--border-radius--chip);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
	box-sizing: border-box;
	color: var(--wp--preset--color--white);

	/*
	 * `block`, and it has to be — this is the one declaration the pill's height depends on.
	 *
	 * `text-box: trim-both` below works on the line boxes of a **block container**, and an
	 * `inline-flex` box establishes a flex formatting context instead: its text becomes an
	 * anonymous flex item and there is no line box on the element itself for the trim to
	 * act on. So the pill kept its full 21px line box and came out **41px tall against the
	 * design's 30** — a 37% error, on a rule that is present, matches, and is silently
	 * inert. The row still looked like a row of pills, which is what made it survive a
	 * first read.
	 *
	 * `block` rather than `inline-block` because these are flex items already (the block
	 * wrapper is the flex row), and an `inline-block` flex item is blockified anyway —
	 * writing what actually computes. Centring is the parent's `align-items`, not this
	 * element's, so nothing is lost by dropping the flex.
	 *
	 * `product-card`'s chip is the same recipe from the other end: a plain `<li>`, never
	 * given a `display`, trimmed, and 30px.
	 */
	display: block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sh-3);
	font-variation-settings: var(--wp--custom--optical-size--text);
	font-weight: 600;
	line-height: 1.5;
	padding: 0.625rem 0.9375rem;
	text-box: trim-both cap alphabetic;
	text-decoration: none;
}

/*
 * The editor's placeholder, drawn as a pill.
 *
 * `core/post-terms`' `edit` has nothing to render in a *template* — there is no post
 * queried — so it prints the taxonomy's label as a bare text node inside the wrapper.
 * With the pill styling on the `<a>`, that placeholder came out as two runs of unstyled
 * grey text where the design has two near-black chips, which reads as a broken block
 * rather than as a block with nothing to show yet.
 *
 * The wrapper is the row and the anchor is the pill, so when there is no anchor the
 * wrapper becomes the pill.
 *
 * **`.wp-block-post-terms__term` has to be in the test, and leaving it out drew two pills
 * inside each other.** The rule started as `:not(:has(a))` on the reasoning that a wrapper
 * with no anchor could only be core's placeholder — true until
 * `includes/product/type-archive.php` began unlinking equipment categories, whose archives
 * 404. That term is a `<span class="wp-block-post-terms__term">`, which the rule above
 * already paints as a pill; the wrapper around it then had no `<a>` either, so it painted
 * itself as a second pill around the first. Visible as a doubled rim, and the sort of thing
 * that reads as a border-radius bug rather than as one selector too broad.
 *
 * So the test is "core is drawing its placeholder" spelled out properly: no anchor *and* no
 * term span. It still cannot misfire on the front end for the original reason —
 * `render_block_core_post_terms()` returns an empty string for a post with no terms in that
 * taxonomy, so a wrapper with neither is never printed there.
 *
 * `inline-flex` is already on the wrapper from the rule above and is right for a single
 * pill; only the fill, the corner, the inset and the type are added.
 */
.wp-block-post-terms.is-style-chips:not(:has(a, .wp-block-post-terms__term)) {
	background-color: var(--wp--preset--color--neutral-900);
	border-radius: var(--wp--preset--border-radius--chip);
	box-shadow: inset 0 0 0 1px rgb(255 255 255 / 8%);
	box-sizing: border-box;
	color: var(--wp--preset--color--white);

	/*
	 * `inline-block` overrides the row's `inline-flex` for the same reason the anchor
	 * above is `block`: `text-box: trim-both` acts on a **block container**'s line boxes,
	 * and a flex container has none of its own — so the placeholder came out 41px against
	 * the pill's 30, sitting a row taller than the chips it stands in for.
	 */
	display: inline-block;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sh-3);
	font-variation-settings: var(--wp--custom--optical-size--text);
	font-weight: 600;
	line-height: 1.5;
	padding: 0.625rem 0.9375rem;
	text-box: trim-both cap alphabetic;
}

/*
 * The separator is hidden from the eye and kept for the ear.
 *
 * `core/post-terms` prints its `separator` attribute — a comma and a space by default —
 * between the terms as a `<span class="wp-block-post-terms__separator">`, and the flex row
 * above turns each one into a flex item sitting between two pills. `display: none` is the
 * obvious fix and it is the wrong one: the separator is what makes a screen reader read
 * "Marine, Offshore" as two things rather than as one run-on name, and removing it from
 * the accessibility tree takes that away.
 *
 * `position: absolute` with a 1px clip is the `screen-reader-text` recipe — the element
 * stays in the tree and in the reading order, and stops taking part in the layout. The
 * theme has a `.screen-reader-text` class from core, but it cannot be added here: the
 * separator's markup is core's and there is no filter for it.
 *
 * Setting the separator to an empty string in the editor instead would look identical and
 * cost the same thing, which is why this is CSS rather than an instruction in the pattern.
 */
.wp-block-post-terms.is-style-chips .wp-block-post-terms__separator {
	block-size: 1px;
	clip-path: inset(50%);
	inline-size: 1px;
	overflow: hidden;
	position: absolute;
	white-space: nowrap;
}

/*
 * The states, which the design does not draw.
 *
 * A pill lightens rather than changing hue, which is the shift theme.json makes for the
 * dark-green button and the same direction: 10% toward white on hover and focus, and
 * `:active` presses back past the resting fill. `color-mix(… in oklab)` so the step is
 * perceptually even, and mixed from the *token* so the pills follow the palette.
 *
 * Only where the term is a link. `core/post-terms` renders a plain `<span>` for a taxonomy
 * with no archive — which is four of this theme's five, all of them `public => false` — so
 * most of these chips have no state at all and should not pretend to.
 *
 * `:hover` inside `@media (hover: hover)`, `:focus-visible` outside it, and the ring is
 * theme.json's own at a positive offset, which the 8px gap between pills leaves room for.
 */
.wp-block-post-terms.is-style-chips a:focus-visible {
	background-color: color-mix(
		in oklab,
		var(--wp--preset--color--neutral-900),
		white 10%
	);
	outline: 2px solid var(--wp--preset--color--neutral-900);
	outline-offset: 2px;
	text-decoration: none;
}

.wp-block-post-terms.is-style-chips a:active {
	background-color: color-mix(
		in oklab,
		var(--wp--preset--color--neutral-900),
		black 15%
	);
}

@media (hover: hover) {
	.wp-block-post-terms.is-style-chips a:hover {
		background-color: color-mix(
			in oklab,
			var(--wp--preset--color--neutral-900),
			white 10%
		);
		text-decoration: none;
	}
}