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

/* Paint the highlight on the inner wrapper so multi-line + centering is consistent */
.has-highlight-underline .hth-highlight-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;
}