/**
 * Tattoo Owl button treatments.
 *
 * Primary buttons use Kadence Global Palette 1 as their base so a buyer can
 * recolor the finish through the Customizer. Secondary buttons stay flatter.
 */

:root {
	--tattoo-owl-button-accent: var(--global-palette1);
	--tattoo-owl-button-text: var(--global-palette9);
}

/*
 * Opt-in class plus the established primary button patterns used by Tattoo Owl.
 * Card-directory actions are intentionally excluded to preserve hierarchy.
 */
.tattoo-owl-button-primary,
.wp-block-button__link.has-theme-palette-1-background-color,
.site-header .header-button.button-style-filled,
.tattoo-style-cta__button,
.tattoo-owl-consultation-form .ff-btn-submit,
.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit {
	border-color: var(--tattoo-owl-button-accent) !important;
	color: var(--tattoo-owl-button-text) !important;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.10) 0%,
			rgba(255, 255, 255, 0.02) 40%,
			rgba(0, 0, 0, 0.08) 100%
		),
		var(--tattoo-owl-button-accent) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.14),
		0 4px 12px rgba(0, 0, 0, 0.12);
	transition:
		transform 180ms ease,
		box-shadow 180ms ease,
		filter 180ms ease;
}

.tattoo-owl-button-primary:hover,
.wp-block-button__link.has-theme-palette-1-background-color:hover,
.site-header .header-button.button-style-filled:hover,
.tattoo-style-cta__button:hover,
.tattoo-owl-consultation-form .ff-btn-submit:hover,
.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit:hover {
	color: var(--tattoo-owl-button-text) !important;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.14) 0%,
			rgba(255, 255, 255, 0.035) 42%,
			rgba(0, 0, 0, 0.10) 100%
		),
		var(--tattoo-owl-button-accent) !important;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 6px 16px rgba(0, 0, 0, 0.16);
	transform: translateY(-1px);
}

.tattoo-owl-button-primary:focus-visible,
.wp-block-button__link.has-theme-palette-1-background-color:focus-visible,
.site-header .header-button.button-style-filled:focus-visible,
.tattoo-style-cta__button:focus-visible,
.tattoo-owl-consultation-form .ff-btn-submit:focus-visible,
.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit:focus-visible {
	outline: 3px solid var(--global-palette9);
	outline-offset: 3px;
	box-shadow:
		inset 0 1px 0 rgba(255, 255, 255, 0.18),
		0 0 0 2px var(--global-palette3),
		0 6px 16px rgba(0, 0, 0, 0.16);
}

.tattoo-owl-button-primary:active,
.wp-block-button__link.has-theme-palette-1-background-color:active,
.site-header .header-button.button-style-filled:active,
.tattoo-style-cta__button:active,
.tattoo-owl-consultation-form .ff-btn-submit:active,
.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit:active {
	transform: translateY(0);
}

/* Reusable quiet treatment for intentionally secondary actions. */
.tattoo-owl-button-secondary {
	color: var(--global-palette1);
	background: transparent;
	border: 1px solid currentColor;
	box-shadow: none;
	transition: color 180ms ease, background-color 180ms ease;
}

.tattoo-owl-button-secondary:hover {
	color: var(--global-palette3);
	background: color-mix(in srgb, var(--global-palette8) 90%, transparent);
}

.tattoo-owl-button-secondary:focus-visible {
	outline: 3px solid var(--global-palette1);
	outline-offset: 3px;
}

/* Dark, flat secondary action used on burgundy presentation panels. */
.tattoo-owl-button-secondary--dark {
	border-color: var(--global-palette3) !important;
	color: var(--global-palette9) !important;
	background: var(--global-palette3) !important;
	box-shadow: none !important;
	transform: none !important;
}

.tattoo-owl-button-secondary--dark:hover {
	border-color: var(--global-palette4) !important;
	color: var(--global-palette9) !important;
	background: var(--global-palette4) !important;
}

.tattoo-owl-button-secondary--dark:focus-visible {
	outline: 3px solid var(--global-palette9);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px var(--global-palette3) !important;
}

/* Shared bottom CTA on every individual Tattoo Style archive. */
.tattoo-style-cta__button {
	border-color: var(--global-palette3) !important;
	color: var(--global-palette9) !important;
	background: var(--global-palette3) !important;
	box-shadow: none !important;
	transform: none !important;
}

.tattoo-style-cta__button:hover {
	border-color: var(--global-palette4) !important;
	color: var(--global-palette9) !important;
	background: var(--global-palette4) !important;
	box-shadow: 0 4px 10px color-mix(in srgb, var(--global-palette3) 18%, transparent) !important;
	transform: none !important;
}

.tattoo-style-cta__button:focus-visible {
	outline: 3px solid var(--global-palette9);
	outline-offset: 3px;
	box-shadow: 0 0 0 2px var(--global-palette3) !important;
}

@media (prefers-reduced-motion: reduce) {
	.tattoo-owl-button-primary,
	.wp-block-button__link.has-theme-palette-1-background-color,
	.site-header .header-button.button-style-filled,
	.tattoo-style-cta__button,
	.tattoo-owl-consultation-form .ff-btn-submit,
	.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit {
		transition: none;
	}

	.tattoo-owl-button-primary:hover,
	.wp-block-button__link.has-theme-palette-1-background-color:hover,
	.site-header .header-button.button-style-filled:hover,
	.tattoo-style-cta__button:hover,
	.tattoo-owl-consultation-form .ff-btn-submit:hover,
	.tattoo-owl-contact-form .ff_conv_app .ff-btn-submit:hover {
		transform: none;
	}
}