:root{
	--hth-highlight-pad: 6px;       /* extra width before/after text */
	--hth-highlight-height: 0.55em; /* thickness */
	--hth-highlight-lift: 0.06em;   /* how far up behind glyphs */
}

/* Paint the highlight on the inner wrapper so multi-line + centering is consistent */
.has-highlight-underline .hth-highlight-inner,
.has-highlight-underline .hth-highlight-inner .kb-adv-text-inner {
	display: inline;
	line-height: 1.2;

	padding-inline: var(--hth-highlight-pad);
	margin-inline: calc(var(--hth-highlight-pad) * -1);

	background-image: linear-gradient(
		rgba(var(--title-highlight-rgb), 0.3),
		rgba(var(--title-highlight-rgb), 0.3)
	);
	background-repeat: no-repeat;
	background-size: 100% var(--hth-highlight-height);
	background-position: 0 calc(100% - var(--hth-highlight-lift));

	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;
}

.has-highlight-overlap {
	background: #fff;
}

/* Neutralize the wrapper when Advanced Text exists so it doesn't double-apply: */
.has-highlight-underline .hth-highlight-inner:has(.kb-adv-text-inner) {
	background:none;
	padding:0;
	margin:0;
}

/* Alternate color */
.has-highlight-underline.highlight-alt .hth-highlight-inner .kb-adv-text-inner,
.has-highlight-underline.highlight-alt .hth-highlight-inner {
	background-image: linear-gradient(
		rgba(var(--title-highlight-alt-rgb), 0.4),
		rgba(var(--title-highlight-alt-rgb), 0.4)
	);	
}