/**
 * Heading Widget — Picklemall Widgets
 *
 * Section heading in A Love of Thunder with an optional graffiti span and a
 * brush stroke painted behind the text.
 *
 * The brush is a CSS mask (not an <img>) so its colour stays controllable from
 * the Elementor Style tab — the SVG's own fill is discarded, only its shape is
 * used. Geometry and colour are driven by --pm-hd-* custom properties set on
 * the widget root.
 */

/* ── Wrapper ──────────────────────────────────────────────────────────────── */

.pm-hd {
	width: 100%;
	text-align: center;
}

/* ── Title ────────────────────────────────────────────────────────────────── */

.pm-hd-title {
	font-family: var(--pm-font-header, 'A Love of Thunder', serif);
	font-size: var(--pm-hd-size, var(--pm-text-large, clamp(1.75rem, 1.203rem + 2.247vw, 3rem)));
	font-weight: 400;
	line-height: var(--pm-hd-line-height, 1.15);
	letter-spacing: var(--pm-hd-letter-spacing, 0.04em);
	color: var(--pm-hd-color, var(--pm-color-dark, #1F2121));
	text-transform: uppercase;
	margin: 0;
	padding: 0;
}

/* Opt-out of the uppercase house style */
.pm-hd--no-caps .pm-hd-title {
	text-transform: none;
}

/* Hugs the text so the brush behind it can be sized as a % of the text box */
.pm-hd-inner {
	position: relative;
	display: inline-block;
	max-width: var(--pm-hd-max-width, 100%);
}

.pm-hd-text {
	position: relative;
	z-index: 1;
}

/* ── Graffiti accent span ─────────────────────────────────────────────────── */

.pm-hd-graffiti {
	font-family: var(--pm-font-graffiti, 'TheGraffitiFont', cursive);
	font-size: var(--pm-hd-graffiti-scale, 1em);
	color: var(--pm-hd-graffiti-color, var(--pm-color-orange, #E85D22));
	letter-spacing: 0.01em;
	text-transform: none;
}

/* ── Brush stroke ─────────────────────────────────────────────────────────── */

.pm-hd-brush {
	position: absolute;
	top: 50%;
	left: 50%;
	z-index: 0;
	width: var(--pm-hd-brush-width, 108%);
	height: var(--pm-hd-brush-height, 78%);
	transform:
		translate(
			calc(-50% + var(--pm-hd-brush-x, 0%)),
			calc(-50% + var(--pm-hd-brush-y, 0%))
		)
		rotate(var(--pm-hd-brush-rotate, 0deg));
	background-color: var(--pm-hd-brush-color, #04BAB5);
	opacity: var(--pm-hd-brush-opacity, 1);
	-webkit-mask-image: var(--pm-hd-brush-src);
	mask-image: var(--pm-hd-brush-src);
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	/* Stretched, not letterboxed — the stroke tracks the width of the text */
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	pointer-events: none;
}

/* ── Mobile ───────────────────────────────────────────────────────────────── */

@media (max-width: 600px) {
	.pm-hd-inner {
		max-width: 100%;
	}
}