/* =============================================================================
 * Custom block style variations.
 * ===========================================================================*/

/* -----------------------------------------------------------------------------
 * Button › "Arrow Link"  (is-style-jk-arrow-link)
 *
 * A text-only, uppercase, bold link with a trailing arrow that nudges right on
 * hover. No fill, no border. Defaults to a bronze-gold; override it any time
 * with the block's Text color setting.
 * ---------------------------------------------------------------------------*/
.wp-block-button.is-style-jk-arrow-link {
	/* Kadence palette color 1 (fallback to bronze-gold). Override per-button via Text color. */
	--jk-link-color: var( --wp--preset--color--theme-palette-1, #9a7c34 );
}

.wp-block-button.is-style-jk-arrow-link .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 0.55em;
	padding: 0;
	border: 0;
	border-radius: 0;
	background: transparent;
	box-shadow: none !important;
	color: var(--jk-link-color);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	line-height: 1.2;
	text-decoration: none;
	transition: opacity 0.2s ease;
}

/* Trailing arrow icon (assets/images/arrow.svg).
   Rendered as a mask so it takes the link's color (palette / Text color). */
.wp-block-button.is-style-jk-arrow-link .wp-block-button__link::after {
	content: "";
	flex: 0 0 auto;
	width: 1.4em;
	height: 1.4em;
	background-color: currentColor;
	-webkit-mask: url( "../images/arrow.svg" ) no-repeat center / contain;
	mask: url( "../images/arrow.svg" ) no-repeat center / contain;
	transition: transform 0.25s ease;
}

/* Hover / focus: keep the chosen color, just nudge the arrow + slight fade. */
.wp-block-button.is-style-jk-arrow-link .wp-block-button__link:hover,
.wp-block-button.is-style-jk-arrow-link .wp-block-button__link:focus {
	background: transparent;
	box-shadow: none !important;
	color: var(--jk-link-color);
	text-decoration: none;
	opacity: 0.8;
}

.wp-block-button.is-style-jk-arrow-link .wp-block-button__link:hover::after,
.wp-block-button.is-style-jk-arrow-link .wp-block-button__link:focus::after {
	transform: translateX(6px);
}

/* When the user sets a Text color, let it win over the default gold. */
.wp-block-button.is-style-jk-arrow-link .wp-block-button__link.has-text-color {
	color: currentColor;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button.is-style-jk-arrow-link .wp-block-button__link::after {
		transition: none;
	}
}