/**
 * Novacom button interaction states (hover / active).
 *
 * The default/static button appearance (including each variant's border)
 * lives entirely in theme.json (styles.blocks["core/button"].variations)
 * -- theme.json has no mechanism for :hover/:active pseudo-classes, so
 * those live here instead. This file is additive only for hover/active: it
 * does not restate or touch any default-state property.
 *
 * Border width is constant (3px) across every state for every variant --
 * there is no width transition to manage here. An earlier version of this
 * file thickened borders from 3px to 5px on hover/active; that mechanic
 * has been replaced entirely with a constant 3px border plus an inset
 * "ring" box-shadow for hover, per design revision. Do not reintroduce a
 * border-width change without checking with design first.
 *
 * Selectors target the STABLE "is-style-*" class (present on every instance
 * of a given style) rather than the numbered instance class WordPress also
 * adds per render (e.g. "is-style-primary-fill--4"), since that numbered
 * suffix is generated per-render and can't be targeted from a static
 * stylesheet.
 *
 * Hover and active rules are intentionally ordered hover-then-active for
 * each variant below. Where a real click means the pointer is both over the
 * button AND pressed, :hover and :active match simultaneously; since both
 * rules share the same selector specificity, the LATER rule wins for any
 * overlapping property. That ordering is what makes the active/click
 * treatment take visual precedence over the mere-hover treatment during an
 * actual press, rather than the two fighting unpredictably. Do not reorder
 * without accounting for this.
 */

.wp-block-button.is-style-primary-fill .wp-block-button__link,
.wp-block-button.is-style-primary-outline .wp-block-button__link,
.wp-block-button.is-style-secondary-fill .wp-block-button__link,
.wp-block-button.is-style-secondary-outline .wp-block-button__link {
	transition: background 0.15s ease, background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

/*
 * Primary Fill and Secondary Fill flatten their gradient to a solid color on
 * :active. CSS cannot smoothly interpolate a background-image (gradient) to
 * a solid color via transition -- browsers just snap instantly, regardless
 * of what's listed in a transition property. To get a genuine fade to the
 * exact target color, both variants get a ::before overlay instead: a solid
 * -color layer sitting on top of the gradient, invisible (opacity: 0) by
 * default, faded fully in (opacity: 1) on :active. opacity does animate
 * smoothly, so this is a real fade, not an approximation.
 *
 * z-index: -1 (with position: relative on the link itself, establishing a
 * stacking context) is load-bearing, not decorative: per the CSS stacking
 * order, a negative-z-index child paints after the parent's own background
 * but before the parent's in-flow inline content -- i.e. above the gradient,
 * below the button's text label. Without it, an auto/positive z-index
 * overlay would paint above the text and hide the label entirely.
 *
 * border-radius: inherit keeps the overlay's corners matching the button's
 * own pill shape (border-radius: 9999px, set in theme.json) rather than
 * showing square corners poking out past the rounded edges.
 */

.wp-block-button.is-style-primary-fill .wp-block-button__link,
.wp-block-button.is-style-secondary-fill .wp-block-button__link {
	position: relative;
}

.wp-block-button.is-style-primary-fill .wp-block-button__link::before,
.wp-block-button.is-style-secondary-fill .wp-block-button__link::before {
	content: "";
	position: absolute;
	inset: 0;
	z-index: -1;
	border-radius: inherit;
	opacity: 0;
	transition: opacity 0.15s ease;
	pointer-events: none;
}

.wp-block-button.is-style-primary-fill .wp-block-button__link::before {
	background-color: var(--wp--preset--color--green);
}

.wp-block-button.is-style-secondary-fill .wp-block-button__link::before {
	background-color: #C6C6C6;
}

.wp-block-button.is-style-primary-fill .wp-block-button__link:active::before,
.wp-block-button.is-style-secondary-fill .wp-block-button__link:active::before {
	opacity: 1;
}

/* Primary CTA - Fill */

.wp-block-button.is-style-primary-fill .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 5px #FFFFFF;
}

/* Primary CTA - Outline */

.wp-block-button.is-style-primary-outline .wp-block-button__link:hover {
	background-color: #FFFFFF;
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--green);
}

.wp-block-button.is-style-primary-outline .wp-block-button__link:active {
	background-color: rgba(97, 178, 18, 0.05);
	color: var(--wp--preset--color--green);
}

/* Secondary CTA - Fill */

.wp-block-button.is-style-secondary-fill .wp-block-button__link:hover {
	box-shadow: inset 0 0 0 5px #FFFFFF;
}

/* Secondary CTA - Outline */

.wp-block-button.is-style-secondary-outline .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--base-light);
	box-shadow: inset 0 0 0 5px var(--wp--preset--color--dark-60);
}

.wp-block-button.is-style-secondary-outline .wp-block-button__link:active {
	background-color: rgba(198, 198, 198, 0.15);
	color: var(--wp--preset--color--secondary-blue);
}