/* Button component — variants driven entirely by theme variables. */

.btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-2xs);
	font-family: var(--font-body);
	font-weight: var(--btn-font-weight);
	font-size: var(--fs-body);
	line-height: 1;
	padding: var(--btn-padding-y) var(--btn-padding-x);
	border-radius: var(--btn-radius);
	border: 1px solid transparent;
	cursor: pointer;
	text-decoration: none;
	transition: background-color var(--btn-transition), border-color var(--btn-transition), color var(--btn-transition), transform var(--btn-transition);
	white-space: nowrap;
}

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

.btn--primary {
	background: var(--btn-primary-bg);
	color: var(--btn-primary-text);
}

.btn--primary:hover {
	background: var(--btn-primary-bg-hover);
	color: var(--btn-primary-text);
}

.btn--secondary {
	background: var(--btn-secondary-bg);
	color: var(--btn-secondary-text);
}

.btn--secondary:hover {
	background: var(--btn-secondary-bg-hover);
	color: var(--btn-secondary-text);
}

.btn--outline {
	background: transparent;
	border-color: var(--btn-outline-border);
	color: var(--btn-outline-text);
}

.btn--outline:hover {
	background: var(--btn-outline-bg-hover);
}

.btn--ghost {
	background: transparent;
	color: var(--btn-ghost-text);
}

.btn--ghost:hover {
	background: var(--btn-ghost-bg-hover);
}

.btn--lg {
	padding: 1em 2em;
	font-size: 1.0625rem;
}

.btn--sm {
	padding: 0.55em 1.1em;
	font-size: var(--fs-small);
}

.btn--block {
	display: flex;
	width: 100%;
}

.btn .icon {
	flex-shrink: 0;
	width: 1.1em;
	height: 1.1em;
}

/* Phone / text quick-action buttons used in the header and hero */
.btn-phone {
	color: var(--btn-outline-text);
}