/*
 * CTA button.
 *
 * Tune this file freely — it is hand-written CSS with no build step.
 *
 * Rules:
 *   - Values come from the design system's own `--btx-*` tokens. The full list
 *     is on Design System -> Components (and the Tokens tab). Never write a
 *     literal colour.
 *   - Every var() carries a fallback. A var() with no fallback is silent: the
 *     declaration is dropped at computed-value time with no console error.
 *
 * The layer is what makes overriding predictable. `bertex-components` sits
 * after the theme's own `components` layer, so these rules beat the theme's
 * generic button base — and an unlayered theme rule still beats these.
 */

@layer bertex-components {
	.btxc-cta {
		/*
		 * Appearance travels through --bertex-btn-*, not through the properties
		 * themselves. The button carries `wp-element-button`, and WordPress
		 * prints an UNLAYERED rule from theme.json that owns background,
		 * border, padding and all typography on that class — unlayered beats
		 * every @layer, so declaring those here would lose silently. Setting
		 * the property instead feeds the rule that actually wins.
		 *
		 * Each one is then also consumed below. That is what keeps the
		 * component correct in the admin gallery, which renders it without the
		 * front end's global styles, so the rule reading these is absent.
		 */
		--bertex-btn-bg: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-bg-hover: var(--btx-color-primary-1-dark-20, #08173b);
		--bertex-btn-text: var(--btx-color-text-bg-1, #f6f3ee);
		--bertex-btn-radius: var(--btx-border-radius-m, 0.375rem);
		--bertex-btn-border-width: 1px;
		--bertex-btn-border-color: transparent;
		--bertex-btn-family: var(--btx-font-body-family, system-ui, sans-serif);
		--bertex-btn-size: var(--btx-font-body-m, 1rem);
		--bertex-btn-weight: 600;
		--bertex-btn-leading: 1.2;
		--bertex-btn-padding-block: var(--btx-button-spacing, 0.45rem);
		--bertex-btn-padding-inline: calc(var(--btx-button-spacing, 0.45rem) * 2.5);

		display: inline-flex;
		align-items: center;
		justify-content: center;
		gap: var(--btx-spacing-xs, 0.45rem);

		box-sizing: border-box;
		padding: var(--bertex-btn-padding-block) var(--bertex-btn-padding-inline);
		border: var(--bertex-btn-border-width) solid var(--bertex-btn-border-color);
		border-radius: var(--bertex-btn-radius);

		background-color: var(--bertex-btn-bg);
		color: var(--bertex-btn-text);

		font-family: var(--bertex-btn-family);
		font-size: var(--bertex-btn-size);
		font-weight: var(--bertex-btn-weight);
		line-height: var(--bertex-btn-leading);
		text-align: center;
		text-decoration: none;

		cursor: pointer;
		transition:
			background-color 0.15s ease,
			border-color 0.15s ease,
			color 0.15s ease;
	}

	.btxc-cta:hover,
	.btxc-cta:focus-visible {
		background-color: var(--bertex-btn-bg-hover);
		color: var(--bertex-btn-text);
	}

	.btxc-cta:focus-visible {
		outline: 2px solid var(--btx-color-primary-1, #1a2744);
		outline-offset: 2px;
	}

	/* Variants ------------------------------------------------------------ */

	/*
	 * Variants redefine the properties only. The base block above consumes
	 * them, and so does the unlayered rule on the front end, so one declaration
	 * covers both surfaces — including the :hover swap, which reads the
	 * property from whatever state is current.
	 */

	.btxc-cta--secondary {
		--bertex-btn-bg: transparent;
		--bertex-btn-bg-hover: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-border-color: currentcolor;
		--bertex-btn-text: var(--btx-color-primary-1, #1a2744);
	}

	.btxc-cta--secondary:hover,
	.btxc-cta--secondary:focus-visible {
		--bertex-btn-border-color: transparent;
		--bertex-btn-text: var(--btx-color-text-bg-1, #f6f3ee);
	}

	.btxc-cta--ghost {
		--bertex-btn-bg: transparent;
		--bertex-btn-bg-hover: var(--btx-color-primary-1-light-40, #2e4578);
		--bertex-btn-border-color: transparent;
		--bertex-btn-text: var(--btx-color-primary-1, #1a2744);
		--bertex-btn-padding-inline: calc(var(--btx-button-spacing, 0.45rem) * 1.5);
	}

	.btxc-cta--ghost:hover,
	.btxc-cta--ghost:focus-visible {
		--bertex-btn-text: var(--btx-color-primary-1-dark-20, #08173b);
	}

	/* Sizes --------------------------------------------------------------- */

	.btxc-cta--s {
		--bertex-btn-padding-block: calc(var(--btx-button-spacing, 0.45rem) * 0.7);
		--bertex-btn-padding-inline: calc(var(--btx-button-spacing, 0.45rem) * 1.8);
		--bertex-btn-size: var(--btx-font-body-s, 0.875rem);
	}

	.btxc-cta--lg {
		--bertex-btn-padding-block: calc(var(--btx-button-spacing, 0.45rem) * 1.5);
		--bertex-btn-padding-inline: calc(var(--btx-button-spacing, 0.45rem) * 3.2);
		--bertex-btn-size: var(--btx-font-body-lg, 1.125rem);
	}

	.btxc-cta--full {
		display: flex;
		width: 100%;
	}

	/* Parts --------------------------------------------------------------- */

	.btxc-cta__arrow {
		flex: none;
		transition: transform 0.15s ease;
	}

	.btxc-cta:hover .btxc-cta__arrow {
		transform: translateX(0.15em);
	}

	.btxc-cta__sr-only {
		position: absolute;
		width: 1px;
		height: 1px;
		margin: -1px;
		padding: 0;
		overflow: hidden;
		clip-path: inset(50%);
		white-space: nowrap;
		border: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	@layer bertex-components {
		.btxc-cta,
		.btxc-cta__arrow {
			transition-duration: 0.01ms;
		}

		.btxc-cta:hover .btxc-cta__arrow {
			transform: none;
		}
	}
}