/**
 * Inline text formats — the RichText options the theme adds to the toolbar.
 *
 * One format, registered in `src/editor/formats/`: gradient-filled text — plus a
 * default for core's own Highlight format, below. Its CSS
 * lives here rather than in `includes/styles/blocks/` because a format can be
 * applied inside *any* rich-text block — a paragraph, a heading, a list item, a
 * button, a table cell — so there is no block to hang it off. Global CSS is also
 * the only layer that reaches the editor canvas and the front end with one file,
 * which is what keeps what the author sees identical to what ships.
 *
 * Everything tunable is a custom property with a fallback, so a site overrides
 * the result without touching this file or the editor bundle. The toolbar writes
 * the same seams per instance — gradient text sets `--kg-text-gradient` inline
 * on the span. A site default and an author's override are therefore the same
 * mechanism at different specificities, rather than two systems that have to be
 * kept from fighting.
 */

/* -------------------------------------------------------------------------- *
 * Gradient text — kg-product/gradient-text
 * -------------------------------------------------------------------------- */

/**
 * The gradient itself arrives as a custom property in the span's style
 * attribute, not as `background-image`, so that one code path serves both a
 * preset (`var(--wp--preset--gradient--brand)`) and a custom gradient — there is
 * no `has-<slug>-gradient-background` class to parse back out of the markup
 * before the picker can show what is active. It also inherits, so a nested
 * element can pick the gradient up if one is ever added.
 *
 * `box-decoration-break: clone` is what makes a wrapped gradient restart on each
 * line. Without it the span is one box with one background, so line two carries
 * on from where line one left off instead of beginning again.
 *
 * The class name stays `has-gradient-color` for continuity with content already
 * written against the klingit-core plugin's version of this format.
 */
.has-gradient-color {
	background-image: var(--kg-text-gradient);
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* --------------------------------------------------------------------------
 * Highlight — core's text-colour format, which writes a <mark>
 * -------------------------------------------------------------------------- */

/**
 * Core's Highlight format colours text by wrapping it in a `<mark>`, and cancels the
 * element's user-agent yellow with an inline `background-color: rgba(0, 0, 0, 0)` — the
 * only thing standing between a green word in a heading and a highlighter stroke behind it.
 *
 * That inline style does not survive every save. KSES's `safecss_filter_attr()` drops it
 * when the content is written without `unfiltered_html` — a script, an import, an editor
 * role on multisite — and keeps the `has-inline-color` class, so the page renders green on
 * yellow. The References heading and the distributor toolbox headings were saved that way.
 *
 * So the transparent background is the theme's default for the class instead of something
 * each `<mark>` has to carry. An author who does pick a background still gets it: core
 * writes that colour inline (beats this selector) or as a `has-<slug>-background-color`
 * preset class (which core marks `!important`).
 */
mark.has-inline-color {
	background-color: transparent;
}

/* --------------------------------------------------------------------------
 * Product category — the marker whose text is swapped for the viewed product's own
 * -------------------------------------------------------------------------- */

/**
 * On the site this span has **no styling at all**, and that is the whole design: by the time a
 * visitor sees it, `includes/blocks/heading-product-category.php` has replaced its text with the
 * product's category and it is simply part of the sentence. A cue there would be a rendering
 * artefact.
 *
 * In the canvas it needs one, because what is showing is the *fallback* — the words an editor typed
 * — and nothing else says they are going to be replaced. So the rule is scoped to
 * `.editor-styles-wrapper`, the class the block editor puts on its canvas root and the front end
 * never has. One selector, inert on the site, no second stylesheet to enqueue and no
 * `add_editor_style()` to keep in step.
 *
 * A dashed underline rather than a fill or a chip: the marker sits inside display type at 56px,
 * where a background would read as a highlight somebody applied on purpose, and it has to survive
 * being marked across a line break. `text-decoration` does both, and `text-underline-offset` keeps
 * it clear of the descenders at that size.
 *
 * `currentColor` at 40%, so it follows the heading's own ink rather than naming a grey that only
 * works on white.
 */
.editor-styles-wrapper .kg-product-category {
	text-decoration: underline dashed
		color-mix(in srgb, currentcolor 40%, transparent);
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}