/**
 * Button variants — single source of truth.
 *
 * The five design-system button looks (sketches/css/components.css `.btn--*`),
 * mapped onto the core Button block style variations registered in
 * avss-core/includes/block-styles.php. Picking a variant in the editor adds
 * `is-style-avss-{slug}` to the .wp-block-button wrapper; these rules style the
 * inner `.wp-element-button`.
 *
 * Loaded on the front end (avss_enqueue_styles) AND in the editor canvas
 * (add_editor_style) so the Styles-panel preview matches the published page.
 *
 * Variant rules key on `.wp-block-button.is-style-avss-* > .wp-element-button`
 * (specificity 0,3,0) so they outrank theme.json's element button styles
 * (`:root :where(.wp-element-button)`, 0,1,0; its :hover 0,2,0).
 *
 * Custom blocks (avss/hero, avss/trust-banner) render a `.avss-btn__label` span
 * so the gradient-clipped-text variants keep full fidelity, and add
 * `.avss-btn--arrow` to force the trailing arrow regardless of variant. A plain
 * core/button has no label span, so the dark-gradient/mint variants there show
 * solid text — the pill, padding, arrow and hover all still apply.
 */

:root {
	/* Right-arrow glyph as a CSS mask — defined once (the sketch repeated this
	   data-URI in three places). currentColor or a gradient shows through. */
	--avss-arrow-mask: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 6'><path fill='black' d='M13.707 2.293L11 0l-.707.707L12.586 3H0v1h12.586l-2.293 2.293L11 7l2.707-2.707a1 1 0 0 0 0-1.414z'/></svg>");
}

/* --- Shared geometry + hover lift (every avss variant) -------------------- */
/* The [class*="is-style-avss-"] attribute selector keeps the shared rules DRY;
   no core or third-party style uses that prefix, so it can't over-match. */
.wp-block-button[class*="is-style-avss-"] > .wp-element-button {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	line-height: 1.25;
	text-decoration: none;
	transition:
		transform 150ms cubic-bezier(0.2, 0, 0.2, 1),
		box-shadow 150ms cubic-bezier(0.2, 0, 0.2, 1),
		background-color 150ms cubic-bezier(0.2, 0, 0.2, 1);
}

.wp-block-button[class*="is-style-avss-"] > .wp-element-button:hover,
.wp-block-button[class*="is-style-avss-"] > .wp-element-button:focus-visible {
	transform: translateY(-1px);
	box-shadow: 0 6px 16px rgba(0, 0, 0, 0.15);
}

.wp-block-button[class*="is-style-avss-"] > .wp-element-button:active {
	transform: translateY(0);
}

/* --- Arrow geometry ------------------------------------------------------- */
/* Carried by the three "arrow" variants, plus an explicit opt-in
   (`.avss-btn--arrow`) for the variants that don't (the trust banner pairs the
   solid variant with an arrow). Fixed size + reserved by the flex gap → no CLS,
   no JS, no extra request (data-URI mask). */
.wp-block-button.is-style-avss-gradient > .wp-element-button::after,
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button::after,
.wp-block-button.is-style-avss-mint > .wp-element-button::after,
.wp-element-button.avss-btn--arrow::after {
	content: "";
	flex-shrink: 0;
	width: 14px;
	height: 6px;
	background: currentColor;
	-webkit-mask: var(--avss-arrow-mask) no-repeat;
	mask: var(--avss-arrow-mask) no-repeat;
	-webkit-mask-size: 100% 100%;
	mask-size: 100% 100%;
	transition:
		transform 240ms cubic-bezier(0.2, 0.8, 0.2, 1),
		background-position 500ms cubic-bezier(0.2, 0, 0.2, 1);
}

/* --- Variant: solid (orange pill, hover → red) ---------------------------- */
.wp-block-button.is-style-avss-solid > .wp-element-button {
	background: var(--wp--preset--color--orange);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--cta, 39px);
	padding: 14px 21px;
}

.wp-block-button.is-style-avss-solid > .wp-element-button:hover,
.wp-block-button.is-style-avss-solid > .wp-element-button:focus-visible {
	background: var(--wp--preset--color--red);
	color: var(--wp--preset--color--white);
}

/* --- Variant: gradient (brand gradient pill) ------------------------------ */
.wp-block-button.is-style-avss-gradient > .wp-element-button {
	background: var(--wp--preset--gradient--brand);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 35px);
	padding: 15px 26px;
}

.wp-block-button.is-style-avss-gradient > .wp-element-button:hover,
.wp-block-button.is-style-avss-gradient > .wp-element-button:focus-visible {
	color: var(--wp--preset--color--white);
}

/* solid + gradient arrows nudge right on hover (flat currentColor fill) */
.wp-block-button.is-style-avss-solid > .wp-element-button:hover::after,
.wp-block-button.is-style-avss-solid > .wp-element-button:focus-visible::after,
.wp-block-button.is-style-avss-gradient > .wp-element-button:hover::after,
.wp-block-button.is-style-avss-gradient > .wp-element-button:focus-visible::after {
	transform: translateX(3px);
}

/* --- Variant: dark gradient (dark pill, white→peach clipped label) -------- */
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button {
	background: var(--wp--preset--color--black-olive);
	color: var(--wp--preset--color--white);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 35px);
	padding: 15px 26px;
}

/* theme.json flips buttons to orange on hover; keep the dark pill so the
   slide-to-white label/arrow stays legible (the lift comes from the shared rule). */
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:hover,
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:focus-visible {
	background: var(--wp--preset--color--black-olive);
	color: var(--wp--preset--color--white);
}

/* The gradients are sized at 200% and parked on their right half: at rest the
   label reads white→peach and the arrow white→orange→red; on hover both slide
   left to flat white. #f48b52 is the sketch's light-orange stop. */
.wp-block-button.is-style-avss-dark-gradient .avss-btn__label {
	background-image: linear-gradient(90deg, #fff 0%, #fff 50%, #f48b52 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position 500ms cubic-bezier(0.2, 0, 0.2, 1);
}

.wp-block-button.is-style-avss-dark-gradient > .wp-element-button::after {
	background: linear-gradient(
		90deg,
		#fff 0%,
		#fff 25%,
		#f48b52 50%,
		var(--wp--preset--color--red) 100%
	);
	background-size: 200% 100%;
	background-position: 100% 0;
}

.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:hover .avss-btn__label,
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:focus-visible .avss-btn__label,
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:hover::after,
.wp-block-button.is-style-avss-dark-gradient > .wp-element-button:focus-visible::after {
	background-position: 0 0;
}

/* --- Variant: mint (sage pill, dark clipped label) ------------------------ */
.wp-block-button.is-style-avss-mint > .wp-element-button {
	background: var(--wp--preset--color--light-green);
	color: var(--wp--preset--color--black-olive);
	border: 0;
	border-radius: var(--wp--custom--radius--pill, 35px);
	padding: 15px 26px;
}

.wp-block-button.is-style-avss-mint > .wp-element-button:hover,
.wp-block-button.is-style-avss-mint > .wp-element-button:focus-visible {
	background: var(--wp--preset--color--light-green);
	color: var(--wp--preset--color--black-olive);
}

.wp-block-button.is-style-avss-mint .avss-btn__label {
	background-image: linear-gradient(90deg, #1f211d 0%, #1f211d 50%, #68634b 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
	-webkit-background-clip: text;
	background-clip: text;
	color: transparent;
	transition: background-position 500ms cubic-bezier(0.2, 0, 0.2, 1);
}

.wp-block-button.is-style-avss-mint > .wp-element-button::after {
	background: linear-gradient(90deg, #1f211d 0%, #1f211d 50%, #68634b 50%, #68634b 100%);
	background-size: 200% 100%;
	background-position: 100% 0;
}

.wp-block-button.is-style-avss-mint > .wp-element-button:hover .avss-btn__label,
.wp-block-button.is-style-avss-mint > .wp-element-button:focus-visible .avss-btn__label,
.wp-block-button.is-style-avss-mint > .wp-element-button:hover::after,
.wp-block-button.is-style-avss-mint > .wp-element-button:focus-visible::after {
	background-position: 0 0;
}

/* --- Variant: outline (transparent, hairline border, 15px radius) --------- */
.wp-block-button.is-style-avss-outline > .wp-element-button {
	background: transparent;
	color: var(--wp--preset--color--black-olive);
	border: 1px solid var(--wp--preset--color--black-olive);
	border-radius: 15px;
	padding: 7px 22px;
}

.wp-block-button.is-style-avss-outline > .wp-element-button:hover,
.wp-block-button.is-style-avss-outline > .wp-element-button:focus-visible {
	background: transparent;
	color: var(--wp--preset--color--black-olive);
}

/* --- Reduced motion ------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.wp-block-button[class*="is-style-avss-"] > .wp-element-button,
	.wp-block-button[class*="is-style-avss-"] > .wp-element-button::after,
	.wp-block-button[class*="is-style-avss-"] .avss-btn__label {
		transition: none;
	}

	.wp-block-button[class*="is-style-avss-"] > .wp-element-button:hover,
	.wp-block-button[class*="is-style-avss-"] > .wp-element-button:focus-visible {
		transform: none;
	}
}