/* ==================================================================
   Button — kwizzbit/button (SHARED component)
   Spec: STYLEGUIDE.md §3. Used by every segment that renders .btn.
   Enqueued globally (front-end + editor iframe) via functions.php glob,
   so any pattern referencing .btn / .btn--primary / .btn--secondary
   inherits the full coral/dark gradient treatment without re-declaring it.
   ================================================================== */

.btn{
	display: inline-flex;
	align-items: center;
	gap: 7px;
	min-height: 44px;
	font-family: var(--wp--preset--font-family--body);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 700;
	letter-spacing: 0;
	line-height: 1;
	border-radius: 0;
	border: none;
	cursor: pointer;
	text-decoration: none;
	transition:
		transform  var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out),
		background var(--wp--custom--motion--dur-fast) var(--wp--custom--motion--ease-out),
		box-shadow var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}

.btn__arrow{
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	transition: transform var(--wp--custom--motion--dur-base) var(--wp--custom--motion--ease-out);
}
/* ════════════════════════════════════════════════════════════════════════
   THE brand arrow — one definition, every button, zero drift.
   Every primary/secondary CTA on the site (whatever its class — .btn,
   .learn-more, .features__cta, .features-trio__cta, .ah-hero__cta, .mode-cta,
   .plan-card__cta, .hero__cta …) embeds the SAME polygon: the "See all
   features" arrow on How it Works. We target it by its OWN geometry, not by
   button class, so no CTA — present or future — can opt out or drift. Glyph
   rendering, size, and the anti-jitter compositor layer ALL live right here.
   ════════════════════════════════════════════════════════════════════════ */
polygon[points^="82.391 9.65"]{          /* attribute selector → works in every browser */
	fill: #fff;
	stroke: #fff;
	stroke-width: 1;
	paint-order: stroke fill;            /* crisp silhouette, byte-identical everywhere */
}
svg:has(> polygon[points^="82.391 9.65"]){
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	display: block;
	transform: translateZ(0);            /* own GPU layer → never re-rasterises during a button's hover-lift → no shimmer */
	backface-visibility: hidden;
}
.btn:hover .btn__arrow{ transform: translateZ(0); } /* no 2D nudge; keeps the icon's compositor layer (see ICON STABILITY below) */

/* Primary — coral gradient */
.btn--primary{
	background: var(--wp--preset--gradient--btn-primary);
	color: var(--wp--preset--color--white);
	height: 42px;
	padding: 0 2.5rem;
}
@media (hover: hover){
	.btn--primary:hover{
		background: var(--wp--preset--gradient--btn-primary-hover);
		transform: translateY(-1px);
	}
}
/* Touch press — hover gradient + a tactile push-DOWN (fires on finger-down) */
.btn--primary:active{
	background: var(--wp--preset--gradient--btn-primary-hover);
	transform: translateY(1px);
}

/* Secondary — dark warm gradient */
.btn--secondary{
	background: var(--wp--preset--gradient--btn-secondary);
	color: var(--wp--preset--color--white);
	height: 42px;
	padding: 0 1.0625rem;
}
@media (hover: hover){
	.btn--secondary:hover{
		background: var(--wp--preset--gradient--btn-secondary-hover);
		transform: translateY(-1px);
	}
}
.btn--secondary:active{
	background: var(--wp--preset--gradient--btn-secondary-hover);
	transform: translateY(1px);
}

/* ==================================================================
   CTA CONSISTENCY — enforced across every button variant in every pattern
   (.btn, .mode-cta, .learn-more). Single source of truth; overrides any
   per-segment button styling that loads later.
   1. Arrow is always 10x10 (the modes reference).
   2. The arrow NEVER moves on hover.
   3. A button container NEVER carries a glow/shadow.
   ================================================================== */
.btn__arrow,
.mode-cta__arrow{
	width: 10px;
	height: 10px;
	flex-shrink: 0;
}
/* Some patterns wrap the SVG in a <span class="btn__arrow"> — an inline span ignores
   width/height, so the nested SVG would render at its natural (bigger) size. Size the
   inner SVG directly so every arrow is 10x10 regardless of span-vs-direct markup. */
.btn__arrow svg,
.mode-cta__arrow svg{
	width: 10px;
	height: 10px;
	display: block;
}
/* Some patterns (e.g. flow) put a BARE <svg> straight inside the button with no
   .btn__arrow wrapper and its own larger width/height attrs. Size those directly too
   so every CTA arrow is the 10x10 modes reference regardless of markup shape. */
.btn > svg,
.mode-cta > svg,
.learn-more > svg{
	width: 10px;
	height: 10px;
	flex-shrink: 0;
	display: block;
}
/* Kill any per-pattern 2D arrow-nudge on hover. translateZ(0) (not `none`)
   so the icon's compositor layer survives the hover — see ICON STABILITY. */
.btn:hover .btn__arrow,
.mode-cta:hover .mode-cta__arrow,
.learn-more:hover .btn__arrow{
	transform: translateZ(0) !important;
}
.btn,
.btn--primary,
.btn--secondary,
.mode-cta,
.learn-more{
	box-shadow: none !important;
}

/* ==================================================================
   ICON STABILITY — eliminate the sub-pixel "wiggle" on hover.
   When a button lifts (translateY) and/or cross-fades its gradient,
   the browser re-rasterises the whole button — SVG included — at
   fractional pixel offsets on every frame of the transition, so the
   icon's crisp edges shimmer. Promoting each icon to its own compositor
   layer (translateZ + backface-visibility) means it's painted ONCE and
   merely composited (moved/faded) with the button — never repainted —
   so it sits perfectly still. Pure rendering hint: no layout, colour,
   size or motion of the button itself changes. Covers every lift-button
   family sitewide (this file is enqueued globally).
   ================================================================== */
.btn svg,
.mode-cta svg,
.learn-more svg,
.impact-2__btn svg,
.footer-nav__social-link svg,
.plan-card__cta svg,
.anthem-trigger svg,
.gateway__cta svg,
.gateway__google svg,
.features__cta svg,
.features-trio__cta svg,
.ah-hero__cta svg,
.hero__cta svg,
.modes__cta svg,
.blog-post__quiz-cta svg,
.arrow-btn svg{
	display: block;
	transform: translateZ(0);
	backface-visibility: hidden;
}

@media (prefers-reduced-motion: reduce){
	.btn:hover,
	.btn:active,
	.btn:hover .btn__arrow{ transform: none !important; }
}

/* ==================================================================
   TOUCH SIZING — mobile & tablet (≤1023px) only; desktop untouched.
   Unifies every rectangular CTA family to a 48px touch target
   (the comfortable standard, vs the 44px legal minimum) with 15px
   label text so the type holds its proportion in the taller box.
   Before this block the families were uneven: .btn 44, .mode-cta 42,
   .learn-more ~38, .plan-card__cta ~36.
   !important because the per-segment files that set these families'
   heights/font-sizes load AFTER button.css alphabetically — same
   enforcement trick as the CTA CONSISTENCY block above.
   ================================================================== */
@media (max-width: 1023px){
	.btn,
	.mode-cta,
	.learn-more,
	.features__cta,
	.features-trio__cta,
	.mobile-menu__cta,
	.mobile-menu__login, /* sits flex-paired beside .mobile-menu__cta — must grow with it or the pair mismatches */
	.impact-2__btn,
	.plan-card__cta{
		min-height: 48px !important;
		font-size: 0.9375rem !important;
	}
	/* .plan-card__cta is inline-block (text-only label, text-align centring),
	   so min-height alone would leave its label pinned to the top — flex it
	   so the taller box still centres vertically. !important because
	   pricing.css loads after this file and would win the display battle. */
	.plan-card__cta{
		display: inline-flex !important;
		align-items: center !important;
		justify-content: center !important;
	}
}

/* ==================================================================
   TOUCH PRESS FEEDBACK — reduced-motion guard for every CTA family.
   The per-family :active push-down is suppressed for users who asked
   for reduced motion; the gradient/colour shift still confirms the tap.
   ================================================================== */
@media (prefers-reduced-motion: reduce){
	.btn--primary:active, .btn--secondary:active, .mode-cta:active, .learn-more:active,
	.impact-2__btn:active, .features__cta:active, .features-trio__cta:active,
	.anthem-trigger:active, .plan-card__cta:active, .btn--pay:active,
	.gateway__google:active, .gateway__cta.is-visible:active, .gateway__forgot-cta.is-active:active,
	.mobile-menu__cta:active, .blog-newsletter__btn:active, .blog-post__share-btn:active,
	.cookie-modal__btn--ghost:active, .cookie-modal__btn--outline:active{
		transform: none !important;
	}
}