/**
 * Button Styles — hover consistency system
 *
 * WordPress emits author-picked button colors as !important preset classes
 * (or inline styles) with no hover variants, while theme hovers live in
 * low-specificity theme.json rules — so any explicitly colored button
 * "freezes" through hover. This file + assets/js/button-hover.js make
 * hovers work for every color combination:
 *
 * 1. Outline buttons: border follows an explicitly-set text color unless a
 *    border color is also set.
 * 2. Outline hover fills with the button's BORDER color. CSS cannot
 *    reference "the border color" as a background, so button-hover.js reads
 *    the rendered border color into --lp-btn-hover-bg and picks
 *    --lp-btn-hover-text by luminance (white on dark fills, contrast on
 *    light fills). Fallbacks match the theme.json outline variation
 *    (primary / surface), which remains the no-JS behavior.
 *    The hover color/border are !important on purpose: it is the only way
 *    to out-rank the !important preset text classes ("red text stays red
 *    on a red fill" otherwise).
 * 3. Solid buttons with author-set backgrounds darken via filter — a filter
 *    needs no specificity war with the !important background.
 */

/* 1. Border follows explicitly-set text color (unless border color set) */
.is-style-outline .wp-block-button__link.has-text-color:not(.has-border-color) {
	border-color: currentColor;
}

/* 2. Outline hover: tint-fill from the button's own color — a light wash
   of currentColor (the brand guide's pale-aqua-on-teal), text and border
   unchanged. Works for any outline color on any surface: a white ghost on
   a photo gains a soft white veil, a teal outline on white gains pale
   aqua. Replaces the old solid border-color fill (button-hover.js's
   --lp-btn-hover-* vars are no longer consumed here). */
.is-style-outline .wp-block-button__link:hover,
.is-style-outline .wp-block-button__link:focus-visible {
	background-color: color-mix(in srgb, currentColor 14%, transparent);
}

/* 3. Solid buttons with author-set backgrounds: generic darken.
   (Outline buttons given an explicit background keep it on hover — the
   preset !important wins over rule 2's background — and darken here too.) */
.wp-block-button__link.has-background:hover,
.wp-block-button__link.has-background:focus-visible {
	filter: brightness(0.85);
}

/* Brand-guide hover motion: every pill lifts slightly on hover/focus.
   Motion-safe: transform and its transition drop under reduced motion. */
.wp-block-button__link {
	transition: transform 0.15s ease, filter 0.15s ease, background-color 0.15s ease, color 0.15s ease;
}

.wp-block-button__link:hover,
.wp-block-button__link:focus-visible {
	transform: translateY(-2px);
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-button__link {
		transition: none;
	}

	.wp-block-button__link:hover,
	.wp-block-button__link:focus-visible {
		transform: none;
	}
}

/**
 * Named button variations — Light, Brand, Secondary
 *
 * Used by ~a dozen patterns since the theme's first release but never
 * registered or styled (they silently rendered as default buttons).
 * Registration lives in inc/block-styles.php; everything below is preset
 * tokens, so child themes restyle them via theme.json for free.
 *
 * User-set colors win over these resting rules the same way they win over
 * theme.json button styles: preset classes carry !important and custom
 * colors are inline — both beat these plain selectors.
 */

/* Light — for buttons sitting on dark banners/heroes. */
.is-style-button-light .wp-block-button__link {
	background-color: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
}

.is-style-button-light .wp-block-button__link:hover,
.is-style-button-light .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

/* Brand — the primary brand color, for contexts where the default
   button has been recolored by a section style. */
.is-style-button-brand .wp-block-button__link {
	background-color: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
}

.is-style-button-brand .wp-block-button__link:hover,
.is-style-button-brand .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--primary-dark);
	color: var(--wp--preset--color--base);
}

/* Secondary — the secondary palette color. Hover darkens without a
   dedicated token via brightness, so it stays brand-correct per child. */
.is-style-secondary-button .wp-block-button__link {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
}

.is-style-secondary-button .wp-block-button__link:hover,
.is-style-secondary-button .wp-block-button__link:focus-visible {
	background-color: var(--wp--preset--color--secondary);
	color: var(--wp--preset--color--base);
	filter: brightness(0.88);
}