/**
 * Gradient Highlight — rendered output.
 * Loaded on the front end and inside the editor canvas.
 *
 * Selectors are doubled (.ghl-text.ghl-text) to outrank theme rules like
 * Kadence's `body .entry-content h2` without reaching for !important.
 */

/* ------------------------------------------------------------------ *
 * Gradient as the text colour
 * ------------------------------------------------------------------ */

/* Painted first, so the text is never invisible if the gradient fails
   to parse or the browser cannot clip a background to glyphs. */
.ghl-text.ghl-text {
	color: var(--ghl-f, currentColor);
}

@supports ((-webkit-background-clip: text) or (background-clip: text)) {

	.ghl-text.ghl-text {
		background-image: var(--ghl-g);
		background-repeat: no-repeat;
		background-size: 100% 100%;
		-webkit-background-clip: text;
		background-clip: text;
		color: transparent;
		-webkit-text-fill-color: transparent;

		/* Every wrapped line gets the full gradient. Without this the
		   second line only shows the tail of the ramp. */
		-webkit-box-decoration-break: clone;
		box-decoration-break: clone;

		/* Underlines and the caret need a colour of their own once the
		   glyphs themselves are transparent. */
		text-decoration-color: var(--ghl-f, currentColor);
		caret-color: var(--ghl-f, currentColor);
	}
}

/* Selected text would be unreadable otherwise: the highlight paints
   behind glyphs that have no fill. */
.ghl-text::selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-color: #2271b1;
}

.ghl-text::-moz-selection {
	color: #fff;
	-webkit-text-fill-color: #fff;
	background-color: #2271b1;
}

/* ------------------------------------------------------------------ *
 * Gradient as the highlight behind the text
 * ------------------------------------------------------------------ */

.ghl-bg.ghl-bg {
	background-image: var(--ghl-g);
	background-repeat: no-repeat;
	background-size: 100% 100%;
	color: var(--ghl-t, inherit);
	padding: 0.08em 0.3em;
	border-radius: 0.25em;
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

/* ------------------------------------------------------------------ *
 * Print and forced colors
 * ------------------------------------------------------------------ */

@media print {

	.ghl-text.ghl-text {
		background-image: none;
		color: var(--ghl-f, #000);
		-webkit-text-fill-color: currentColor;
	}

	.ghl-bg.ghl-bg {
		background-image: none;
		color: inherit;
		padding: 0;
		text-decoration: underline;
	}
}

@media (forced-colors: active) {

	.ghl-text.ghl-text {
		background-image: none;
		color: CanvasText;
		-webkit-text-fill-color: CanvasText;
		forced-color-adjust: none;
	}

	.ghl-bg.ghl-bg {
		background-image: none;
		background-color: Highlight;
		color: HighlightText;
		forced-color-adjust: none;
	}
}