/**
 * Shared UI components: buttons, eyebrow, logo.
 */

.hp-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2);
	min-height: 2.75rem;
	padding: 0.7rem 1.35rem;
	border: 1px solid transparent;
	border-radius: var(--radius-md);
	font-family: var(--font-sans);
	font-size: var(--text-sm);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-btn);
	line-height: 1;
	text-transform: uppercase;
	text-decoration: none;
	cursor: pointer;
	transition:
		background-color var(--duration-fast) var(--ease-out),
		color var(--duration-fast) var(--ease-out),
		border-color var(--duration-fast) var(--ease-out),
		transform var(--duration-fast) var(--ease-out);
}

.hp-btn:hover {
	text-decoration: none;
}

.hp-btn:active {
	transform: translateY(1px);
}

.hp-btn--primary {
	background-color: var(--color-brand-red);
	border-color: var(--color-brand-red);
	color: var(--color-white);
	box-shadow: 0 1px 0 rgb(0 0 0 / 0.08);
}

.hp-btn--primary:hover,
.hp-btn--primary:focus-visible {
	background-color: #8f1b10;
	border-color: #8f1b10;
	color: var(--color-white);
}

.hp-btn--ghost {
	background-color: transparent;
	border-color: currentColor;
	color: inherit;
}

.hp-btn--ghost:hover,
.hp-btn--ghost:focus-visible {
	background-color: rgb(255 255 255 / 0.08);
	color: inherit;
}

.hp-btn--ghost-dark {
	background-color: transparent;
	border-color: var(--color-ink);
	color: var(--color-ink);
}

.hp-btn--ghost-dark:hover,
.hp-btn--ghost-dark:focus-visible {
	background-color: rgb(22 16 12 / 0.06);
	color: var(--color-ink);
}

.hp-btn--pill {
	border-radius: var(--radius-pill);
	padding-inline: 1.5rem;
}

.hp-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--space-3);
	margin: 0 0 var(--space-4);
	font-family: var(--font-sans);
	font-size: var(--text-xs);
	font-weight: var(--font-weight-semibold);
	letter-spacing: var(--tracking-eyebrow);
	line-height: 1;
	text-transform: uppercase;
	color: var(--color-brand-red);
}

.hp-eyebrow::before {
	content: "";
	display: block;
	width: 1.25rem;
	height: 1px;
	background-color: currentColor;
}

.hp-site-logo {
	display: inline-flex;
	align-items: center;
	text-decoration: none;
	color: var(--header-fg);
}

.hp-site-logo:hover,
.hp-site-logo:focus-visible {
	color: var(--header-fg);
	opacity: 0.92;
}

.hp-site-logo__img {
	display: block;
	width: auto;
	height: 3.75rem;
	max-width: min(11.5rem, 46vw);
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 768px) {
	.hp-site-logo__img {
		height: 5.5rem;
		max-width: 18rem;
	}
}

@media (min-width: 1024px) {
	.hp-site-logo__img {
		height: 6rem;
		max-width: 20rem;
	}
}

.hp-footer__logo-img {
	display: block;
	width: auto;
	height: 5rem;
	max-width: 16rem;
	object-fit: contain;
	object-position: left center;
}

@media (min-width: 768px) {
	.hp-footer__logo-img {
		height: 5.75rem;
		max-width: 18rem;
	}
}

.hp-site-logo__text {
	font-family: var(--font-display);
	font-size: var(--text-xl);
	font-weight: var(--font-weight-semibold);
	letter-spacing: 0.02em;
	line-height: 1;
}