/*
 * Shared action feedback. Layout and native click/submit stay with each component.
 * Plugin styles remain usable independently; this final theme layer unifies them.
 * FAQ rows, tabs, navigation links and ordinary text links are deliberately absent.
 */
@property --okm-action-scale {
	syntax: "<number>";
	inherits: true;
	initial-value: 1;
}

:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
) {
	--okm-action-feedback: 1;
	--okm-action-scale: 1;
	color: var(--okm-action-ink, var(--okm-ink));
	background-color: var(--okm-action-bg, var(--okm-yellow));
	border-color: var(--okm-action-border, var(--okm-action-bg, var(--okm-yellow)));
	transform: none;
	scale: var(--okm-action-scale);
	transition: color 150ms ease-out, background-color 150ms ease-out,
		border-color 150ms ease-out, box-shadow 150ms ease-out, --okm-action-scale 150ms ease-out;
}

/* These controls are in flow; retain absolute positioning on dialog controls. */
:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):not(.okm-modal__close, .okm-gallery-dialog__close, .okm-gallery-dialog__nav) {
	position: relative;
}

/*
 * Transparent counter-scaled hit surface restores the original border box,
 * with 1px extra tolerance for fractional-coordinate browser hit testing.
 * One interpolated value drives both scales, keeping every intermediate hit area.
 * Without @property support, press/release is immediate with the same hit area.
 * The pseudo-element belongs to the native control, including clicks on its edge.
 */
:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
)::after {
	position: absolute;
	inset: -2px;
	border-radius: inherit;
	content: "";
	pointer-events: auto;
	scale: calc(1 / var(--okm-action-scale));
}

:where(.okm-lead-form__submit, .okm-mobile-actions__button--phone) {
	--okm-action-ink: var(--okm-white);
	--okm-action-bg: var(--okm-blue);
	--okm-action-hover-bg: var(--okm-blue-dark);
}

:where(.okm-modal__action, .site-navigation__drawer-channels a, .site-navigation__close) {
	--okm-action-bg: var(--okm-white);
	--okm-action-border: var(--okm-border);
	--okm-action-hover-bg: var(--okm-surface);
	--okm-action-hover-border: var(--okm-blue);
}

:where(.okm-modal__close, .site-navigation__close) {
	--okm-action-ink: var(--okm-blue);
	--okm-action-hover-ink: var(--okm-white);
	--okm-action-hover-bg: var(--okm-blue);
	--okm-action-hover-border: var(--okm-blue);
}

:where(.okm-modal__close) {
	--okm-action-bg: var(--okm-surface);
	--okm-action-border: var(--okm-border);
}

:where(.site-navigation__drawer-channels a) {
	--okm-action-border: var(--okm-border-soft);
}

/* Keep the repair hero's approved secondary white button / mobile text link. */
:root .okm-window-repair .okm-hero__button[href="#okm-repair-services"] {
	--okm-action-ink: var(--okm-blue);
	--okm-action-bg: var(--okm-white);
	--okm-action-border: var(--okm-white);
	--okm-action-hover-ink: var(--okm-white);
	--okm-action-hover-bg: var(--okm-blue);
	--okm-action-hover-border: var(--okm-blue);
	color: var(--okm-action-ink);
	background-color: var(--okm-action-bg);
	border-color: var(--okm-action-border);
}

:where(.site-navigation__toggle) {
	--okm-action-ink: var(--okm-blue);
	--okm-action-bg: transparent;
	--okm-action-border: var(--okm-blue);
	--okm-action-hover-bg: var(--okm-surface);
	--okm-action-hover-border: var(--okm-blue);
}

:where(.okm-gallery-dialog__close, .okm-gallery-dialog__nav) {
	--okm-action-ink: var(--okm-white);
	--okm-action-bg: oklch(0 0 0 / 0.68);
	--okm-action-border: oklch(1 0 0 / 0.28);
	--okm-action-hover-bg: var(--okm-blue);
	--okm-action-hover-border: oklch(1 0 0 / 0.46);
	--okm-action-focus: var(--okm-yellow);
}

:root .okm-gallery-dialog .okm-gallery-dialog__nav {
	/* Keep the viewer's vertical positioning independent of press feedback. */
	translate: 0 -50%;
}

:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):is(:active, [data-okm-pressed], :focus-visible):not(:disabled, [aria-disabled="true"]) {
	color: var(--okm-action-hover-ink, var(--okm-action-ink, var(--okm-ink)));
	background-color: var(--okm-action-hover-bg, var(--okm-yellow-hover));
	border-color: var(--okm-action-hover-border, var(--okm-action-hover-bg, var(--okm-yellow-hover)));
}

:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):is(:active, [data-okm-pressed]):not(:disabled, [aria-disabled="true"]) {
	--okm-action-scale: 0.96;
}

:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):focus-visible {
	outline: 2px solid var(--okm-action-focus, var(--okm-blue));
	outline-offset: 3px;
}

/* any-hover also covers a connected mouse; touch does not retain sticky hover. */
@media (any-hover: hover) {
	:root:not([data-okm-input="touch"]) :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):hover:not(:disabled, [aria-disabled="true"]) {
		color: var(--okm-action-hover-ink, var(--okm-action-ink, var(--okm-ink)));
		background-color: var(--okm-action-hover-bg, var(--okm-yellow-hover));
		border-color: var(--okm-action-hover-border, var(--okm-action-hover-bg, var(--okm-yellow-hover)));
	}
}

:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):is(:disabled, [aria-disabled="true"]) {
	--okm-action-scale: 1;
}

@media (max-width: 767px) {
	:root .okm-window-repair .okm-hero__button[href="#okm-repair-services"],
	:root .okm-window-repair .okm-hero__button[href="#okm-repair-services"]:is(:active, [data-okm-pressed]) {
		--okm-action-scale: 1;
		--okm-action-bg: transparent;
		--okm-action-border: transparent;
		--okm-action-hover-ink: var(--okm-blue-dark);
		--okm-action-hover-bg: transparent;
		--okm-action-hover-border: transparent;
	}
}

/* No geometry change with reduced motion; color and focus still signal action. */
@media (prefers-reduced-motion: reduce) {
	:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-product-catalog__button,
	.okm-post-card__more,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
),
	:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-post-card__more,
	.okm-product-catalog__button,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
):is(:active, [data-okm-pressed]):not(:disabled, [aria-disabled="true"]) {
		--okm-action-scale: 1;
		transition: none;
	}

	:root :is(
	.okm-button,
	.okm-hero__button,
	.okm-cta__button,
	.okm-service-catalog__button,
	.okm-post-card__more,
	.okm-product-catalog__button,
	.okm-article__content .wp-block-button__link,
	.okm-mobile-actions__button,
	.site-navigation__toggle,
	.site-navigation__close,
	.site-navigation__drawer-channels a,
	.okm-modal__close,
	.okm-modal__action,
	.okm-lead-form__submit,
	.okm-gallery-dialog__close,
	.okm-gallery-dialog__nav
)::after {
		transition: none;
	}
}