/**
 * Wedwebs Emboss / Deboss Heading — effect engine.
 *
 * The widget controls only set CSS custom properties (via Elementor
 * `selectors`) and toggle effect classes. The actual text-shadow / foil
 * composition lives here so there is zero per-instance inline CSS.
 *
 * No animation, no JS. Pure CSS letterpress.
 */

.ww-ed-title {
	/* Tunable via widget controls. */
	--ed-depth: 1.5px;          /* offset magnitude of the relief */
	--ed-blur: 0px;             /* shadow blur / softness */
	--ed-highlight: rgba(255, 255, 255, 0.7);
	--ed-shadow: rgba(0, 0, 0, 0.4);

	/* Light direction multipliers (set by .ww-ed--dir-* classes). */
	--ed-x: -1;
	--ed-y: -1;

	margin: 0;
}

/* Light-direction presets — where the highlight (lit edge) sits. */
.ww-ed--dir-tl { --ed-x: -1; --ed-y: -1; }
.ww-ed--dir-t  { --ed-x:  0; --ed-y: -1; }
.ww-ed--dir-tr { --ed-x:  1; --ed-y: -1; }
.ww-ed--dir-r  { --ed-x:  1; --ed-y:  0; }
.ww-ed--dir-br { --ed-x:  1; --ed-y:  1; }
.ww-ed--dir-b  { --ed-x:  0; --ed-y:  1; }
.ww-ed--dir-bl { --ed-x: -1; --ed-y:  1; }
.ww-ed--dir-l  { --ed-x: -1; --ed-y:  0; }

/*
 * EMBOSS (raised): highlight on the lit side, shadow on the opposite side.
 */
.ww-ed--emboss {
	text-shadow:
		calc(var(--ed-x) * var(--ed-depth)) calc(var(--ed-y) * var(--ed-depth)) var(--ed-blur) var(--ed-highlight),
		calc(var(--ed-x) * var(--ed-depth) * -1) calc(var(--ed-y) * var(--ed-depth) * -1) var(--ed-blur) var(--ed-shadow);
}

/*
 * DEBOSS (pressed in): swap the layers so the shadow falls on the lit side,
 * giving the carved-into-the-paper illusion.
 */
.ww-ed--deboss {
	text-shadow:
		calc(var(--ed-x) * var(--ed-depth)) calc(var(--ed-y) * var(--ed-depth)) var(--ed-blur) var(--ed-shadow),
		calc(var(--ed-x) * var(--ed-depth) * -1) calc(var(--ed-y) * var(--ed-depth) * -1) var(--ed-blur) var(--ed-highlight);
}

/*
 * METALLIC FOIL: clip a metallic gradient to the glyph shapes. A default gold
 * fill is provided; presets and the custom Background control override
 * `background-image` at higher specificity. Text-shadow (if the relief class
 * is also present) still renders from the glyph outline.
 */
.ww-ed--foil {
	color: transparent;
	-webkit-background-clip: text;
	background-clip: text;
	-webkit-text-fill-color: transparent;
	/* Fallback gold so the effect looks right before any preset resolves. */
	background-image: linear-gradient(120deg, #b8860b 0%, #f9e29c 45%, #fff6d5 50%, #d4af37 60%, #8a6d1b 100%);
}

.ww-ed--foil-gold {
	background-image: linear-gradient(120deg, #b8860b 0%, #f9e29c 45%, #fff6d5 50%, #d4af37 60%, #8a6d1b 100%);
}

.ww-ed--foil-silver {
	background-image: linear-gradient(120deg, #8c8c8c 0%, #e8e8e8 45%, #ffffff 50%, #cfcfcf 60%, #777777 100%);
}

.ww-ed--foil-rose {
	background-image: linear-gradient(120deg, #b76e79 0%, #f7c5c0 45%, #ffe6e0 50%, #e8b4a0 60%, #a85d63 100%);
}

.ww-ed--foil-copper {
	background-image: linear-gradient(120deg, #7a3b1d 0%, #d98452 45%, #f6c39a 50%, #b5652f 60%, #5c2c14 100%);
}