/* Text Highlight Pro - Frontend styles (v1.1) */

.thp-highlight {
	/* Defaults (overridden inline by shortcode attributes) */
	--thp-color-rgb: 255, 255, 0;
	--thp-opacity: 0.5;
	--thp-duration: 0.8s;

	display: inline;
	border-radius: 0.12em;

	/* Important for multiline inline highlights */
	-webkit-box-decoration-break: clone;
	box-decoration-break: clone;

	background-repeat: no-repeat;
	background-position: 0 0;
	background-size: 0% 100%;

	transition: background-size var(--thp-duration) linear;
}

.thp-highlight.thp-inview {
	background-size: 100% 100%;
}

/* -----------------------
 * Style 1 — Clinical (selection-like, full line height)
 * ---------------------*/
.thp-highlight.thp-style-1 {
	padding: 0 0.06em;
	margin: 0;
	border-radius: 0.10em;

	background-image: linear-gradient(
		90deg,
		rgba(var(--thp-color-rgb), var(--thp-opacity)) 0%,
		rgba(var(--thp-color-rgb), var(--thp-opacity)) 100%
	);
	background-position: 0 0;
	background-size: 0% 100%;
}

.thp-highlight.thp-style-1.thp-inview {
	background-size: 100% 100%;
}

/* -----------------------
 * Style 2 — Marker (clean start at beginning)
 * ---------------------*/
.thp-highlight.thp-style-2 {
	padding: 0 0.08em;
	margin: 0;
	border-radius: 0.12em;

	/* Two layered strokes, but no transparent "delay" at the beginning */
	background-image:
		linear-gradient(
			102deg,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.95)) 0%,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.95)) 78%,
			rgba(var(--thp-color-rgb), 0) 100%
		),
		linear-gradient(
			98deg,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.35)) 0%,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.62)) 55%,
			rgba(var(--thp-color-rgb), 0) 100%
		);

	background-repeat: no-repeat, no-repeat;
	background-position: 0 78%, 0 72%;
	background-size: 0% 0.72em, 0% 0.48em;

	transition: background-size var(--thp-duration) linear;
}

.thp-highlight.thp-style-2.thp-inview {
	background-size: 100% 0.72em, 100% 0.48em;
}

/* -----------------------
 * Style 3 — Marker (random stroke variation)
 * Randomness is applied via CSS variables set by JS:
 * --thp-angle, --thp-y1, --thp-y2, --thp-h1, --thp-h2
 * ---------------------*/
.thp-highlight.thp-style-3 {
	padding: 0 0.08em;
	margin: 0;
	border-radius: 0.14em;

	--thp-angle: 101deg;
	--thp-y1: 78%;
	--thp-y2: 72%;
	--thp-h1: 0.72em;
	--thp-h2: 0.48em;

	background-image:
		linear-gradient(
			var(--thp-angle),
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.95)) 0%,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.90)) 70%,
			rgba(var(--thp-color-rgb), 0) 100%
		),
		linear-gradient(
			calc(var(--thp-angle) - 6deg),
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.25)) 0%,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.60)) 45%,
			rgba(var(--thp-color-rgb), 0) 100%
		);

	background-repeat: no-repeat, no-repeat;
	background-position: 0 var(--thp-y1), 0 var(--thp-y2);
	background-size: 0% var(--thp-h1), 0% var(--thp-h2);

	transition: background-size var(--thp-duration) linear;
}

.thp-highlight.thp-style-3.thp-inview {
	background-size: 100% var(--thp-h1), 100% var(--thp-h2);
}

/* -----------------------
 * Style 4 — Underline
 * ---------------------*/
.thp-highlight.thp-style-4 {
	padding: 0 0.02em;
	margin: 0;
	border-radius: 0.2em;

	background-image:
		linear-gradient(
			90deg,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.90)) 0%,
			rgba(var(--thp-color-rgb), calc(var(--thp-opacity) * 0.90)) 85%,
			rgba(var(--thp-color-rgb), 0) 100%
		);

	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 0% 0.22em;

	transition: background-size var(--thp-duration) linear;
}

.thp-highlight.thp-style-4.thp-inview {
	background-size: 100% 0.22em;
}

/* -----------------------
 * Style 5 — Underline (clinical)
 * Clean edges, thinner than style 4
 * ---------------------*/
.thp-highlight.thp-style-5 {
	padding: 0 0.02em;
	margin: 0;
	border-radius: 0.2em;

	background-image:
		linear-gradient(
			90deg,
			rgba(var(--thp-color-rgb), var(--thp-opacity)) 0%,
			rgba(var(--thp-color-rgb), var(--thp-opacity)) 100%
		);

	background-repeat: no-repeat;
	background-position: 0 92%;
	background-size: 0% 0.14em;

	transition: background-size var(--thp-duration) linear;
}

.thp-highlight.thp-style-5.thp-inview {
	background-size: 100% 0.14em;
}

/* Slightly thicker stroke on small screens for readability */
@media (max-width: 767px) {
	.thp-highlight.thp-style-2 {
		background-position: 0 80%, 0 73%;
		background-size: 0% 0.78em, 0% 0.52em;
	}

	.thp-highlight.thp-style-2.thp-inview {
		background-size: 100% 0.78em, 100% 0.52em;
	}

	.thp-highlight.thp-style-3 {
		--thp-h1: 0.78em;
		--thp-h2: 0.52em;
		--thp-y1: 80%;
		--thp-y2: 73%;
	}

	.thp-highlight.thp-style-5 {
		background-size: 0% 0.16em;
	}

	.thp-highlight.thp-style-5.thp-inview {
		background-size: 100% 0.16em;
	}
}

/* Accessibility: reduce motion */
@media (prefers-reduced-motion: reduce) {
	.thp-highlight {
		transition: none;
	}

	.thp-highlight:not(.thp-inview) {
		background-size: 100% 100%;
	}

	.thp-highlight.thp-style-2:not(.thp-inview) {
		background-size: 100% 0.72em, 100% 0.48em;
	}

	.thp-highlight.thp-style-3:not(.thp-inview) {
		background-size: 100% var(--thp-h1), 100% var(--thp-h2);
	}

	.thp-highlight.thp-style-4:not(.thp-inview) {
		background-size: 100% 0.22em;
	}

	.thp-highlight.thp-style-5:not(.thp-inview) {
		background-size: 100% 0.14em;
	}

	@media (max-width: 767px) {
		.thp-highlight.thp-style-2:not(.thp-inview) {
			background-size: 100% 0.78em, 100% 0.52em;
		}

		.thp-highlight.thp-style-5:not(.thp-inview) {
			background-size: 100% 0.16em;
		}
	}
}