/**
 * Giant Truss — button styling matched to the Dlyft reference.
 *
 * Measured off dlyftglobal.com at a 1440px viewport, all Inter Tight:
 *   every button  16px / lh 1 / w500 / padding 14px 20px / 44px tall
 *
 * Dlyft's CTAs measure 54px, but that is a 26px arrow glyph stretching the
 * line box — the button's own line-height is 1 throughout, so 44px is the
 * real height and what we match.
 *
 * Dlyft has exactly one button size and sets no letter-spacing or
 * text-transform — the capitals in its labels are typed into the copy. The
 * two things that actually separate its buttons from ours were the lighter
 * weight (500, not 600) and the tighter horizontal padding (20px, not 28px).
 *
 * Colour is deliberately untouched: the Giant Truss purple stays, along with
 * the dark and translucent variants. Only size, weight and padding move.
 *
 * Dlyft has no small or pill button, so the small dark tier below is scaled
 * from the primary spec rather than copied from anything.
 *
 * The tripled `.elementor-element` mirrors the specificity of the CSS
 * Elementor generates per element, which is what lets these win without
 * !important. The homepage buttons live in the database, so these belong in
 * the Elementor editor eventually.
 */

:root {
	--gt-btn-size: 16px;
	--gt-btn-weight: 500;
	--gt-btn-pad: 14px 20px;
	--gt-btn-lh: 1;

	--gt-btn-size-sm: 14px;
	--gt-btn-pad-sm: 10px 16px;

	/* Same easing the homepage hover animations already use, so buttons on the
	   inner pages move in the same language rather than a second dialect. */
	--gt-btn-ease: cubic-bezier(.2, .8, .2, 1);
}

/* Primary CTAs ---------------------------------------------------------
 * gt00004 Explore Products · gt0001b Our Solutions · gt0002e View All
 * Products · gt00039 Get Custom Solutions · gt00048 View All News
 */

body.home .elementor-element.elementor-element-gt00004 .elementor-button,
body.home .elementor-element.elementor-element-gt0001b .elementor-button,
body.home .elementor-element.elementor-element-gt0002e .elementor-button,
body.home .elementor-element.elementor-element-gt00039 .elementor-button,
body.home .elementor-element.elementor-element-gt00048 .elementor-button {
	font-size: var(--gt-btn-size);
	font-weight: var(--gt-btn-weight);
	line-height: var(--gt-btn-lh);
	padding: var(--gt-btn-pad);
}

/* Small dark buttons ---------------------------------------------------
 * The "View all →" link on each category card.
 */

body.home .elementor-element.elementor-element-gt00008 .elementor-button,
body.home .elementor-element.elementor-element-gt0000c .elementor-button,
body.home .elementor-element.elementor-element-gt00010 .elementor-button,
body.home .elementor-element.elementor-element-gt00014 .elementor-button {
	font-size: var(--gt-btn-size-sm);
	font-weight: var(--gt-btn-weight);
	line-height: var(--gt-btn-lh);
	padding: var(--gt-btn-pad-sm);
}

/* Header button --------------------------------------------------------
 * Scoped with .gt-header for the same reason the original rule is: it has to
 * outrank WoodMart's :is(.btn, .button, button, …) sizing. The explicit
 * line-height matters here — without it the button inherits the body's 1.6
 * and stands 10px taller than every other button on the page.
 */

.gt-header .gt-quote,
.gt-quote-mobile {
	font-size: var(--gt-btn-size);
	font-weight: var(--gt-btn-weight);
	line-height: var(--gt-btn-lh);
	padding: var(--gt-btn-pad);
}

/* Hover ----------------------------------------------------------------
 * Every CTA lifts on hover, site-wide — the homepage already animated its
 * cards and its own `.gt-btn` variants, but Elementor's buttons and the
 * header CTA sat still, and nothing moved at all on the inner pages.
 *
 * Motion only: no button changes colour, so the palette is untouched. The
 * shadow is neutral rather than purple-tinted because the same rule covers
 * the dark and translucent variants.
 */

.elementor-button,
.gt-header .gt-quote,
.gt-quote-mobile {
	transition:
		transform .26s var(--gt-btn-ease),
		box-shadow .26s var(--gt-btn-ease),
		background-color .26s var(--gt-btn-ease);
}

.elementor-button:hover,
.elementor-button:focus-visible,
.gt-header .gt-quote:hover,
.gt-header .gt-quote:focus-visible,
.gt-quote-mobile:hover,
.gt-quote-mobile:focus-visible {
	transform: translateY(-3px);
	box-shadow: 0 14px 26px -12px rgba(0, 0, 0, .45);
}

/* Pressing takes the lift back off, so the button feels like it goes down. */
.elementor-button:active,
.gt-header .gt-quote:active,
.gt-quote-mobile:active {
	transform: translateY(-1px);
	transition-duration: .08s;
}

@media (prefers-reduced-motion: reduce) {
	.elementor-button,
	.gt-header .gt-quote,
	.gt-quote-mobile {
		transition: none;
	}
	.elementor-button:hover,
	.elementor-button:focus-visible,
	.gt-header .gt-quote:hover,
	.gt-quote-mobile:hover {
		transform: none;
	}
}