/**
 * Gradient Headline – widget styles.
 *
 * No media queries for layout: every responsive value comes from Elementor's
 * own responsive controls, which write CSS custom properties per breakpoint.
 *
 * The gradient itself is not defined here. It comes from Elementor's own
 * background control, which writes background-image to .wfgh__gradient – that
 * way the angle, colours and colour stops are the panel everyone already knows,
 * and they are responsive out of the box.
 */

.wfgh {
	--wfgh-text-color: inherit;
	--wfgh-fallback: #2b7fff;
	--wfgh-break: slice;

	/* Animation */
	--wfgh-anim-time: 6s;
	--wfgh-anim-size: 220%;
	--wfgh-anim-play: running;

	margin: 0;
	padding: 0;
	color: var(--wfgh-text-color);
	overflow-wrap: break-word;
}

.wfgh *,
.wfgh *::before,
.wfgh *::after {
	box-sizing: border-box;
}

/* The heading may be a link; it must not pick up the theme's link styling. */
.wfgh .wfgh__link {
	color: inherit;
	text-decoration: none;
}

.wfgh .wfgh__text {
	color: inherit;
}

/* ==========================================================================
   GRADIENT PART
   ========================================================================== */

/*
 * Outside the @supports below this is a plain, visible colour. That matters:
 * clipping the background to the text needs color: transparent, so in a browser
 * that cannot clip, an unguarded rule would leave the heading invisible rather
 * than merely unstyled.
 *
 * box-decoration-break decides what happens when the gradient text wraps:
 * "slice" (the default) runs one gradient across the whole wrapped block, while
 * "clone" gives every line its own full gradient.
 */
.wfgh__gradient {
	color: var(--wfgh-fallback);
	-webkit-box-decoration-break: var(--wfgh-break);
	box-decoration-break: var(--wfgh-break);
}

@supports (background-clip: text) or (-webkit-background-clip: text) {
	.wfgh .wfgh__gradient {
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
	}
}

/* ==========================================================================
   ANIMATION
   ========================================================================== */

/*
 * Driven entirely from the Animate control, which writes background-size and
 * the animation shorthand onto .wfgh__gradient – so nothing at all is output
 * while the animation is off.
 *
 * It runs with direction: alternate on purpose. A one-way sweep would have to
 * jump back to the start of the gradient on every loop, because a single
 * linear-gradient does not tile seamlessly; sweeping back and forth never
 * shows that seam.
 */
@keyframes wfgh-pan {
	from {
		background-position: 0% 50%;
	}

	to {
		background-position: 100% 50%;
	}
}

/*
 * Pausing through a variable rather than "animation: none !important". The
 * animation shorthand lives in Elementor's generated CSS, which always has
 * higher specificity than anything in this file, so overriding it here would
 * need !important. Setting play-state from a variable the generated rule reads
 * avoids that entirely.
 */
@media (prefers-reduced-motion: reduce) {
	.wfgh {
		--wfgh-anim-play: paused;
	}
}