/* =========================================================================
   HNZ Constructions — components

   Reusable pieces shared across sections: buttons, social links and arrow links.

   Enqueued by hnz_enqueue_assets() in inc/enqueue.php, which fixes the load
   order. Design tokens live in tokens.css.
   ========================================================================= */

/* Buttons -------------------------------------------------------------- */

.button {
	--button-hover-fill: var(--c-ink);
	--button-hover-color: #fff;

	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 18px 26px;
	border: 1px solid currentcolor;
	background: linear-gradient(var(--button-hover-fill), var(--button-hover-fill)) bottom / 100% 0 no-repeat;
	font-family: var(--font-display);
	font-size: 14px;
	font-weight: var(--fw-display);
	line-height: 1;
	letter-spacing: 0.17em;
	text-align: center;
	text-transform: uppercase;
	transition:
		background-size 460ms cubic-bezier(0.22, 1, 0.36, 1),
		color 280ms ease,
		transform 280ms cubic-bezier(0.22, 1, 0.36, 1),
		box-shadow 280ms ease;
}

.button:hover,
.button:focus-visible {
	background-size: 100% 100%;
	color: var(--button-hover-color);
	box-shadow: 0 0.75rem 1.75rem rgb(51 49 50 / 14%);
	transform: translateY(-2px);
}

.button:active {
	box-shadow: none;
	transform: translateY(0) scale(0.98);
}

.section--cta-banner.has-background .button {
	--button-hover-fill: #fff;
	--button-hover-color: var(--c-ink);
}

/* Socials --------------------------------------------------------------
   The supplied icons are solid badges with the glyph knocked out by the path
   winding, so one file works on any background: the badge takes currentColor
   and the glyph shows whatever is behind it. 18px matches the source artwork. */

.socials {
	display: flex;
}

.socials__link {
	display: grid;
	place-items: center;
	width: 38px;
	height: 38px;
	transition: opacity var(--transition);
}

.socials__link:hover {
	opacity: 0.65;
}

.socials .icon,
.socials .icon svg {
	width: 18px;
	height: 18px;
}

/* Arrow link ---------------------------------------------------------- */

/* Measured off the Home hero CTA: "Learn More" is 24px (--fs-500) with a 16px
   cap height, the arrow is 32 x 22, and the gap between them is 24px. */
.arrow-link {
	display: inline-flex;
	align-items: center;
	gap: var(--sp-5);
	font-family: var(--font-display);
	font-size: var(--fs-500); /* 20px–24px */
	font-weight: var(--fw-display);
	line-height: var(--lh-tight);
	letter-spacing: var(--ls-tight);
}

.arrow-link .arrow {
	flex: none;
	width: 32px;
	height: 22px;
	transition: transform var(--transition);
}

.arrow-link:hover .arrow {
	transform: translateX(5px);
}

.arrow-link--light {
	color: #fff;
}