/*
 * MHG button component.
 * Three variants: primary (solid teal), outline teal, outline white (for dark backgrounds).
 * Used across the header and every page CTA.
 */

.mhg-btn {
	display: inline-block;
	padding: 0.85rem 1.5rem;
	font-family: var(--mhg-font-body);
	font-size: var(--mhg-font-size-button);
	font-weight: 600;
	line-height: 1;
	text-transform: uppercase;
	letter-spacing: var(--mhg-letter-spacing-button);
	text-decoration: none;
	border: 1px solid transparent;
	border-radius: var(--mhg-radius-sm);
	cursor: pointer;
	transition: background-color var(--mhg-transition-fast),
		color var(--mhg-transition-fast),
		border-color var(--mhg-transition-fast);
	white-space: nowrap;
}

.mhg-btn:focus-visible {
	outline: 2px solid var(--mhg-color-gold);
	outline-offset: 2px;
}

/* Primary — solid teal, white text */
.mhg-btn--primary {
	background-color: var(--mhg-color-teal);
	color: var(--mhg-color-white);
	border-color: var(--mhg-color-teal);
}

.mhg-btn--primary:hover,
.mhg-btn--primary:focus {
	background-color: var(--mhg-color-teal-dark);
	border-color: var(--mhg-color-teal-dark);
	color: var(--mhg-color-white);
}

/* Outline teal — fills on hover */
.mhg-btn--outline-teal {
	background-color: transparent;
	color: var(--mhg-color-teal);
	border-color: var(--mhg-color-teal);
}

.mhg-btn--outline-teal:hover,
.mhg-btn--outline-teal:focus {
	background-color: var(--mhg-color-teal);
	color: var(--mhg-color-white);
}

/* Solid white — for dark section backgrounds (paired with outline-white) */
.mhg-btn--white {
	background-color: var(--mhg-color-white);
	color: var(--mhg-color-charcoal);
	border-color: var(--mhg-color-white);
}

.mhg-btn--white:hover,
.mhg-btn--white:focus {
	background-color: rgba(255, 255, 255, 0.88);
	border-color: rgba(255, 255, 255, 0.88);
	color: var(--mhg-color-charcoal);
}

/* Outline white — for dark section backgrounds */
.mhg-btn--outline-white {
	background-color: transparent;
	color: var(--mhg-color-white);
	border-color: var(--mhg-color-white);
}

.mhg-btn--outline-white:hover,
.mhg-btn--outline-white:focus {
	background-color: var(--mhg-color-white);
	color: var(--mhg-color-charcoal);
}