/**
 * JWolfe global button system (v1.13.0).
 *
 * SOURCE OF TRUTH: Elementor -> Site Settings.
 *   - Typography: Site Settings -> Buttons -> Typography, linked to the
 *     Global ACCENT font (18px).
 *   - Colours, padding, radius, border: Site Settings -> Buttons.
 * This file deliberately does NOT redeclare any of those. Every rule is
 * wrapped in :where() (zero specificity) so the kit's button rules always
 * win; this layer only adds what Elementor cannot:
 *   - the animated hover blob (driven by jwolfe-buttons.js / GSAP),
 *   - variants (outline, text) expressed with Global Colour tokens,
 *   - focus-visible / active / disabled states.
 *
 * Every Elementor Button widget (.elementor-button) is a global button
 * automatically. Custom markup opts in with .jw-button. Opt a button out
 * of the hover animation with the CSS class jw-button--static.
 *
 * Variants (add the class in the widget's Advanced -> CSS Classes, or on
 * the <a> for custom markup):
 *   (default)          Primary  - filled (kit button colours)
 *   jw-button--outline Outline  - transparent, 1px border in text colour
 *   jw-button--text    Text     - no box, just label (+ arrow)
 *
 * Tokens (override per variant; all fall back to Elementor globals):
 *   --jw-btn-blob       hover blob colour
 *   --jw-btn-blob-ink   label colour while the blob covers it
 *   --jw-btn-ring       focus ring colour
 * ------------------------------------------------------------------ */

:where(.elementor-button, .jw-button) {
	--jw-btn-blob: var(--e-global-color-text, #141515);
	--jw-btn-blob-ink: #FFFFFF;
	--jw-btn-ring: var(--e-global-color-secondary, #0F5C63);
	position: relative;
	isolation: isolate;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	-webkit-tap-highlight-color: transparent;
	transition: transform 0.2s ease;
}

/* The blob sits behind the label; JS sizes it with clip-path only
 * (paint + composite, no layout). Hidden until hovered/focused. */
:where(.elementor-button, .jw-button) > .jw-button__blob {
	position: absolute;
	inset: 0;
	z-index: 0;
	border-radius: inherit;
	background: var(--jw-btn-blob);
	clip-path: inset(50% 100% 50% 0 round 999px);
	pointer-events: none;
}

:where(.elementor-button, .jw-button) > :not(.jw-button__blob):not(.jwolfe-work__pill) {
	position: relative;
	z-index: 1;
}

:where(.elementor-button, .jw-button) .jw-button__arrow {
	display: inline-block;
	margin-left: 0.8em;
}

/* ---- Variants ----------------------------------------------------
 * Variants must beat the kit's own button colours (.elementor-kit-N
 * .elementor-button = 0,2,0), so these use `body` + class (0,2,1)
 * rather than :where(). Colours are Global Colour tokens only. The class
 * can sit on the widget wrapper (Advanced -> CSS Classes) or the button. */
body .jw-button--outline .elementor-button,
body .elementor-button.jw-button--outline,
body .jw-button.jw-button--outline {
	--jw-btn-blob: var(--e-global-color-secondary, #0F5C63);
	background-color: transparent;
	color: var(--e-global-color-text, #141515);
	box-shadow: inset 0 0 0 1px currentColor;
}

body .jw-button--text .elementor-button,
body .elementor-button.jw-button--text,
body .jw-button.jw-button--text {
	--jw-btn-blob: var(--e-global-color-secondary, #0F5C63);
	background-color: transparent;
	color: var(--e-global-color-text, #141515);
	box-shadow: none;
	padding-left: 0.2em;
	padding-right: 0.2em;
}

/* ---- States ------------------------------------------------------ */
:where(.elementor-button, .jw-button):focus-visible {
	outline: 2px solid var(--jw-btn-ring);
	outline-offset: 4px;
}

:where(.elementor-button, .jw-button):active {
	transform: scale(0.97);
}

:where(.elementor-button, .jw-button):is([disabled], [aria-disabled="true"], .is-disabled) {
	opacity: 0.45;
	pointer-events: none;
	cursor: not-allowed;
}

/* No-JS / reduced motion: a plain, instant hover fill - the visual
 * state is kept, the motion is not. */
@media (prefers-reduced-motion: reduce) {
	:where(.elementor-button, .jw-button) {
		transition: none;
	}

	:where(.elementor-button, .jw-button):is(:hover, :focus-visible) > .jw-button__blob {
		clip-path: inset(0 0 0 0 round 999px);
	}

	body :is(.jw-button--outline .elementor-button, .jw-button--text .elementor-button, .jw-button--outline.jw-button, .jw-button--text.jw-button):is(:hover, :focus-visible) {
		color: var(--jw-btn-blob-ink);
	}

	:where(.elementor-button, .jw-button):active {
		transform: none;
	}
}