/* =============================================================================
   Sustainable Ply — Buttons
   Post-impeccable polish: monochrome system. Primary = ink-on-cream (on light
   surfaces) or cream-on-ink (on dark surfaces). Warm-clay is reserved for
   editorial accent only (eyebrows, chapter numerals, link underlines) and
   never used as a button fill. Border-radius 0 — sharp engineering edge.
   ============================================================================= */

/* --------------------------------------------------------------------------- */
/* Primary button — ink-on-cream default (light surface)                        */
/* --------------------------------------------------------------------------- */

.sp-btn,
.sp-btn--primary,
.wp-element-button,
.wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--sp-sm);
	background: var(--color-text);
	color: var(--color-bg);
	font-family: var(--wp--preset--font-family--inter);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
	line-height: 1.2;
	letter-spacing: -0.005em;
	padding: var(--sp-md) var(--sp-xl);
	border: 1px solid var(--color-text);
	border-radius: var(--radius-md, 12px);
	text-decoration: none;
	cursor: pointer;
	position: relative;
}

/* Trailing arrow glyph hint — buttons that include an arrow get a hover slide. */
@media (prefers-reduced-motion: no-preference) {
	.sp-btn,
	.sp-btn--primary,
	.wp-element-button,
	.wp-block-button__link {
		transition:
			background 200ms cubic-bezier(0.22, 1, 0.36, 1),
			color 200ms cubic-bezier(0.22, 1, 0.36, 1),
			border-color 200ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.sp-btn:hover,
	.sp-btn--primary:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover,
	.sp-btn:focus-visible,
	.sp-btn--primary:focus-visible,
	.wp-element-button:focus-visible,
	.wp-block-button__link:focus-visible {
		background: var(--color-bg);
		color: var(--color-text);
		border-color: var(--color-text);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-btn:hover,
	.sp-btn--primary:hover,
	.wp-element-button:hover,
	.wp-block-button__link:hover {
		background: var(--color-bg);
		color: var(--color-text);
	}
}

/* Focus ring — visible for keyboard users.                                     */
.sp-btn:focus-visible,
.sp-btn--primary:focus-visible,
.wp-element-button:focus-visible,
.wp-block-button__link:focus-visible {
	outline: 1px solid var(--color-accent);
	outline-offset: 3px;
}

/* --------------------------------------------------------------------------- */
/* Secondary / outline button — transparent fill, ink border                   */
/* --------------------------------------------------------------------------- */

.sp-btn--secondary,
.wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-text);
	border: 1px solid var(--color-text);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-btn--secondary,
	.wp-block-button.is-style-outline .wp-block-button__link {
		transition:
			background 200ms cubic-bezier(0.22, 1, 0.36, 1),
			color 200ms cubic-bezier(0.22, 1, 0.36, 1);
	}

	.sp-btn--secondary:hover,
	.sp-btn--secondary:focus-visible,
	.wp-block-button.is-style-outline .wp-block-button__link:hover,
	.wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
		background: var(--color-text);
		color: var(--color-bg);
	}
}

@media (prefers-reduced-motion: reduce) {
	.sp-btn--secondary:hover,
	.wp-block-button.is-style-outline .wp-block-button__link:hover {
		background: var(--color-text);
		color: var(--color-bg);
	}
}

/* --------------------------------------------------------------------------- */
/* --------------------------------------------------------------------------- */
/* Peach variant — pastel-peach primary used on the final conversion CTA       */
/* ("Request a quote" in quote-cta). Sits warm against the dark ink section.   */
/* --------------------------------------------------------------------------- */

.sp-btn-peach .wp-block-button__link,
.sp-btn-peach.wp-element-button {
	background: var(--color-peach);
	color: var(--color-text);
	border-color: var(--color-peach);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-btn-peach .wp-block-button__link:hover,
	.sp-btn-peach .wp-block-button__link:focus-visible,
	.sp-btn-peach.wp-element-button:hover,
	.sp-btn-peach.wp-element-button:focus-visible {
		background: var(--color-bg);
		color: var(--color-text);
		border-color: var(--color-bg);
	}
}

/* Outline buttons sitting on a DARK section need cream stroke instead of ink. */
.sp-quote-cta .wp-block-button.is-style-outline .wp-block-button__link,
.sp-sustainability-page__closing .wp-block-button.is-style-outline .wp-block-button__link {
	background: transparent;
	color: var(--color-bg);
	border: 1px solid var(--color-bg);
}

@media (prefers-reduced-motion: no-preference) {
	.sp-quote-cta .wp-block-button.is-style-outline .wp-block-button__link:hover,
	.sp-quote-cta .wp-block-button.is-style-outline .wp-block-button__link:focus-visible,
	.sp-sustainability-page__closing .wp-block-button.is-style-outline .wp-block-button__link:hover,
	.sp-sustainability-page__closing .wp-block-button.is-style-outline .wp-block-button__link:focus-visible {
		background: var(--color-bg);
		color: var(--color-text);
	}
}

/* --------------------------------------------------------------------------- */
/* Saffron "FREE" chip — single use per page, attached to the primary CTA       */
/* on the hero. Marked via .sp-btn-chip-free class on the native core/button     */
/* wrapper; the chip renders inside the inline-flex link so it sits within the   */
/* button border, before the label.                                             */
/*                                                                              */
/* Flex layout on the link keeps the chip + label locked to one row, prevents   */
/* the wrap-collision that squashed the button on mobile (reported 2026-06-29). */
/* --------------------------------------------------------------------------- */

.sp-btn-chip-free .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-sm);
	padding-block: 12px;
	padding-inline: 18px 20px;
	min-height: 48px;
	white-space: nowrap;
}

.sp-btn-chip-free .wp-block-button__link::before {
	content: 'FREE';
	font-size: 11px;
	font-weight: 600;
	letter-spacing: 0.14em;
	line-height: 1;
	background: var(--wp--preset--color--saffron);
	color: var(--color-text);
	padding: 4px 8px;
	border-radius: var(--radius-md, 12px);
	flex: 0 0 auto;
}