/* Static citrus material: shared by full CTAs and explicitly opted-in accent cells. */
:root {
	--sj-citrus-noise: url("../../images/citrus-grain.svg");
	--sj-citrus-gradient: linear-gradient(125deg, var(--color-lime), var(--color-yellow));
	--sj-citrus-material: var(--sj-citrus-noise), var(--sj-citrus-gradient);
	--sj-citrus-background-size: 128px 128px, 100% 100%;
	--sj-citrus-background-repeat: repeat, no-repeat;
	--sj-citrus-background-blend: soft-light, normal;
	--sj-primary-button-background: var(--color-navy);
	--sj-primary-button-material: var(--sj-citrus-noise), linear-gradient(var(--color-navy), var(--color-navy));
	--sj-primary-button-text: var(--color-white);
	--sj-secondary-link-color: var(--color-navy);
}

/* Repeated or paired actions are quiet outlines until they are used.
 * Add sj-button-outline to a native Elementor button widget to opt in. */
body .elementor .elementor-widget.sj-button-outline .elementor-button,
body .elementor .elementor-widget.sj-button-outline .elementor-button:visited {
	border: 1px solid var(--sj-primary-button-background);
	background: transparent;
	color: var(--sj-primary-button-background);
	text-decoration: none;
}
@media (hover: hover) {
	body .elementor .elementor-widget.sj-button-outline .elementor-button:hover {
		border: 1px solid var(--sj-primary-button-background);
		background-color: var(--sj-primary-button-background);
		background-image: var(--sj-primary-button-material);
		background-size: var(--sj-citrus-background-size);
		background-repeat: var(--sj-citrus-background-repeat);
		background-blend-mode: var(--sj-citrus-background-blend);
		color: var(--sj-primary-button-text);
	}
}
body .elementor .elementor-widget.sj-button-outline .elementor-button:is(:focus-visible, :active) {
	border: 1px solid var(--sj-primary-button-background);
	background-color: var(--sj-primary-button-background);
	background-image: var(--sj-primary-button-material);
	background-size: var(--sj-citrus-background-size);
	background-repeat: var(--sj-citrus-background-repeat);
	background-blend-mode: var(--sj-citrus-background-blend);
	color: var(--sj-primary-button-text);
}

:where(.sj-dark-section, .sj-header, .sj-home-surface, .sj-home-hero, .sj-page-hero, .sj-pricing-hero, .sj-footer) {
	--sj-primary-button-background: var(--color-yellow);
	--sj-primary-button-material: var(--sj-citrus-material);
	--sj-primary-button-text: var(--color-navy);
	--sj-secondary-link-color: var(--color-offwhite);
}
.sj-header { --sj-citrus-min-height: 36px; }

/* Reset nested light panels as well as green/yellow panels to navy actions.
 * Surface classes also let future editable sections use the same rule. */
:where(.sj-light-section, .sj-page-body, .sj-citrus-surface, .sj-pricing-retainer-figure, .sj-home-story-heading, .sj-green-surface) {
	--sj-primary-button-background: var(--color-navy);
	--sj-primary-button-material: var(--sj-citrus-noise), linear-gradient(var(--color-navy), var(--color-navy));
	--sj-primary-button-text: var(--color-white);
	--sj-secondary-link-color: var(--color-navy);
}

/* Native form actions use the same surface palette as filled link buttons. */
body :is(button, input[type="button"], input[type="reset"], input[type="submit"], .button, .wp-element-button, .wp-block-button__link, .elementor-button):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))) {
	--color-button-background: var(--sj-primary-button-background);
	--color-button-text: var(--sj-primary-button-text);
	--color-button-hover-background: var(--sj-primary-button-background);
	--color-button-focus-background: var(--sj-primary-button-background);
	--color-button-hover-text: var(--sj-primary-button-text);
	--color-button-active-background: var(--sj-primary-button-background);
	--color-button-active-text: var(--sj-primary-button-text);
	--color-button-disabled-background: var(--sj-primary-button-background);
	--color-button-disabled-text: var(--sj-primary-button-text);
}

.sj-citrus-surface {
	background-color: var(--color-yellow);
	background-image: var(--sj-citrus-material);
	background-size: var(--sj-citrus-background-size);
	background-repeat: var(--sj-citrus-background-repeat);
	background-blend-mode: var(--sj-citrus-background-blend);
	color: var(--color-navy);
}

/* Header CTA is explicit; bare navigation/search controls and the game stay out.
   A low-alpha static image supplies grain without generated overlays or timers. */
body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))),
body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):is(:visited, :hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
	min-height: var(--sj-citrus-min-height, 44px);
	border: 0;
	border-radius: 0;
	background-color: var(--sj-primary-button-background);
	background-image: var(--sj-primary-button-material);
	background-size: var(--sj-citrus-background-size);
	background-repeat: var(--sj-citrus-background-repeat);
	background-blend-mode: var(--sj-citrus-background-blend);
	color: var(--sj-primary-button-text);
	text-decoration: none;
	box-shadow: none;
	transform: none;
	filter: none;
	transition: filter var(--duration-short) var(--ease-standard);
}

@media (hover: hover) and (pointer: fine) {
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta), :disabled, [aria-disabled="true"])):hover {
		filter: brightness(1.04);
	}
}

body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta), :disabled, [aria-disabled="true"])):active {
	filter: brightness(0.98);
	transition-duration: 80ms;
}

/* The focus halo is separate from the otherwise flat button surface. */
body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):focus-visible {
	outline: 2px solid var(--color-focus-inner);
	outline-offset: 3px;
	box-shadow: 0 0 0 5px var(--color-focus-outer);
}

body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):is(:disabled, [aria-disabled="true"]) {
	opacity: 1;
	cursor: default;
	transform: none;
	transition: none;
}

/* Add sj-button-secondary to an Elementor button widget. The single rule
 * under its complete content spans both label and icon, including their gap. */
body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)),
body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)):is(:visited, :hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
	justify-content: flex-start;
	width: fit-content;
	max-width: 100%;
	min-height: 44px;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: none;
	color: var(--sj-secondary-link-color);
	text-decoration: none;
	box-shadow: none;
	transform: none;
	filter: none;
	transition: none;
}

body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)) .elementor-button-content-wrapper {
	padding-block: 0.2em;
	border: 0;
	background-image: linear-gradient(currentColor, currentColor);
	background-position: left bottom;
	background-size: 100% 1px;
	background-repeat: no-repeat;
	text-decoration: none;
	box-shadow: none;
}

body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)):focus-visible {
	outline: 2px solid currentColor;
	outline-offset: 4px;
	box-shadow: none;
}

@media (prefers-reduced-motion: reduce) {
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))),
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):is(:visited, :hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
		transform: none;
		transition: none;
	}
}

@media (forced-colors: active) {
	.sj-citrus-surface,
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))),
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):is(:visited, :hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
		forced-color-adjust: auto;
		border: 0;
		background: ButtonFace;
		color: ButtonText;
		box-shadow: none;
		transform: none;
		transition: none;
	}
	body :is(.elementor-button, .wp-element-button, .wp-block-button__link, .button, input[type="submit"], .sj-header .sj-header-cta, .sj-header button.sj-header-cta:disabled):where(:not(.sj-game *, #wpadminbar *, .sj-header :not(.sj-header-cta))):focus-visible {
		outline: 2px solid Highlight;
		box-shadow: none;
	}
	body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)),
	body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)):is(:visited, :hover, :focus, :focus-visible, :active, :disabled, [aria-disabled="true"]) {
		background: none;
		color: LinkText;
		box-shadow: none;
	}
	body .elementor .elementor-widget.sj-button-secondary .elementor-button:where(:not(.sj-game *, .sj-header *)) .elementor-button-content-wrapper {
		background: none;
		text-decoration: underline;
		text-decoration-thickness: 1px;
		text-underline-offset: 0.2em;
	}
}