/**
 * Reusable button component — formalizes the CTA styling already proven in
 * the header (.ed-nav-cta) into a general-purpose `.ed-button` set of
 * variants for any page. Targets core's own button-block markup
 * (`.wp-block-button > .wp-block-button__link`) so it works with native
 * `wp:button` blocks — no custom block needed.
 *
 * See project-docs/02-design-system.md for the token rationale (in
 * particular: why primary-on-background buttons use --ed-color-heading
 * text, never white — raw --ed-color-primary fails AA with white text).
 */

.ed-button .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 44px;
	padding: var(--ed-space-xs) 1.75rem;
	border-radius: var(--ed-radius-full);
	font-family: var(--ed-font-body);
	font-size: var(--ed-font-size-sm);
	font-weight: 600;
	letter-spacing: var(--ed-letter-spacing-button);
	text-decoration: none;
	text-align: center;
	transition: background-color var(--ed-transition-fast), color var(--ed-transition-fast), border-color var(--ed-transition-fast), transform var(--ed-transition-fast), box-shadow var(--ed-transition-fast);
}

.ed-button .wp-block-button__link:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
}

/*
 * Some CTAs are a real <button type="submit"> — Contacto and Muestras
 * gratis's form submit, and the header "Mis muestras" panel CTA (see
 * assets/js/header-samples.js) — reusing this same .ed-button /
 * .wp-block-button__link pair instead of the wp:button block's plain
 * <div>/<a>. A <div> carries no native UA chrome, but a real <button>
 * does (border, background, padding, font) and it was never reset, so it
 * rendered as a rectangular native button box around the pill-styled
 * .wp-block-button__link span sitting inside it. :where() keeps this at
 * the same specificity as a single class so page-specific overrides
 * (e.g. .ed-header-samples__cta's display: block) still win.
 */
:where(button).ed-button {
	display: inline-flex;
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	font: inherit;
	color: inherit;
	appearance: none;
	cursor: pointer;
}

/*
 * Focus lands on the real <button> here, not the inner span (a span isn't
 * a focusable element) — so this needs its own :focus-visible, separate
 * from the .wp-block-button__link one above which only fires for the
 * wp:button block's <a>.
 */
:where(button).ed-button:focus-visible {
	outline: var(--ed-focus-outline);
	outline-offset: 2px;
	border-radius: var(--ed-radius-full);
}

/* Primary — solid brand accent, works on any background */

.ed-button--primary .wp-block-button__link {
	background-color: var(--ed-color-primary);
	/*
	 * --ed-color-heading, not white: white-on-#00B7B7 measures ~2.48:1,
	 * failing WCAG 2.2 AA's 4.5:1 text-contrast minimum. --ed-color-heading
	 * measures ~7.3:1 — see 02-design-system.md.
	 */
	color: var(--ed-color-heading);
	box-shadow: var(--ed-shadow-sm);
}

.ed-button--primary .wp-block-button__link:hover {
	background-color: var(--ed-color-primary-hover);
	color: var(--ed-color-heading);
	transform: translateY(-1px);
	box-shadow: var(--ed-shadow-md);
}

/* Outline-dark — for use on a dark/graphite section background */

.ed-button--outline-dark .wp-block-button__link {
	background-color: transparent;
	color: #ffffff;
	border: 1px solid rgba(255, 255, 255, 0.55);
}

.ed-button--outline-dark .wp-block-button__link:hover {
	background-color: #ffffff;
	color: var(--ed-color-heading);
	border-color: #ffffff;
}

/* Outline — for use on a light/white section background */

.ed-button--outline .wp-block-button__link {
	background-color: transparent;
	color: var(--ed-color-heading);
	border: 1px solid var(--ed-color-muted);
}

.ed-button--outline .wp-block-button__link:hover {
	background-color: var(--ed-color-heading);
	color: #ffffff;
	border-color: var(--ed-color-heading);
}

/*
 * WhatsApp — reuses the existing --ed-color-success token rather than
 * introducing a new brand color, for CTAs that specifically link out to
 * WhatsApp contact. --ed-color-heading text, not white: white-on-#2E9E5B
 * measures ~3.4:1, failing WCAG 2.2 AA's 4.5:1 normal-text minimum — same
 * issue and same fix already applied to .ed-button--primary above.
 * --ed-color-heading measures ~5.5:1.
 */
.ed-button--whatsapp .wp-block-button__link {
	background-color: var(--ed-color-success);
	color: var(--ed-color-heading);
}

.ed-button--whatsapp .wp-block-button__link:hover {
	background-color: #26824c;
	color: var(--ed-color-heading);
}

/* Text — link-style CTA with a trailing arrow, no button chrome */

.ed-button--text .wp-block-button__link {
	min-height: auto;
	padding: 0;
	background: none;
	color: var(--ed-color-link);
	border-radius: 0;
}

.ed-button--text .wp-block-button__link:hover {
	color: var(--ed-color-link-hover);
	text-decoration: underline;
	text-underline-offset: 3px;
}

@media (prefers-reduced-motion: reduce) {
	.ed-button--primary .wp-block-button__link:hover {
		transform: none;
	}
}