/* Button looks: Button group. Every option sets the same core properties, and the
   order soft < gold < gold-wide < quiet < phone lets a modifier win on old double classes. */

:is(.hmf-button--soft, .hmf-button--gold, .hmf-button--gold-wide, .hmf-button--quiet, .hmf-button--phone) .elementor-button {
	display: flex;
	align-items: center;
	justify-content: center;
	min-block-size: 48px;
	padding: 14px 20px;
	border: 1px solid var(--hc-line);
	border-radius: 14px;
	font-size: 16px;
	font-weight: 800;
	line-height: 1.8;
	text-decoration: none;
}

:is(.hmf-button--soft, .hmf-button--gold, .hmf-button--gold-wide, .hmf-button--quiet, .hmf-button--phone) .elementor-button:focus-visible {
	outline: 3px solid var(--hc-blue);
	outline-offset: 4px;
}

.hmf-button--soft .elementor-button {
	background: var(--hc-sky);
	color: var(--hc-blue-deep);
}

.hmf-button--gold .elementor-button {
	display: inline-flex;
	padding: 15px 24px;
	border-color: transparent;
	background: var(--hc-gold);
	color: var(--hc-ink);
}

.hmf-button--gold-wide .elementor-button {
	inline-size: 100%;
	min-block-size: 52px;
	padding: 14px 18px;
	border-color: var(--hc-gold);
	border-radius: 16px;
	background: linear-gradient(135deg, var(--hc-gold), var(--hc-gold-deep));
	color: var(--hc-ink);
	transition: transform 0.2s, box-shadow 0.2s;
}

.hmf-button--quiet .elementor-button {
	background: var(--hc-white);
	color: var(--hc-blue-deep);
}

.hmf-button--phone .elementor-button {
	inline-size: 100%;
	min-block-size: 72px;
	padding: 12px 24px;
	border-radius: 20px;
	background: var(--hc-white);
	box-shadow: var(--hc-shadow-card);
	color: var(--hc-blue-deep);
	font-size: 23px;
	direction: ltr;
}

:is(.hmf-button--soft, .hmf-button--quiet, .hmf-button--phone) .elementor-button:hover {
	border-color: var(--hc-blue);
	background: var(--hc-blue-soft);
	color: var(--hc-blue-deep);
}

:is(.hmf-button--gold, .hmf-button--gold-wide) .elementor-button:hover {
	background: var(--hc-gold-deep);
	color: var(--hc-ink);
}

@media (hover: hover) {
	.hmf-button--gold-wide .elementor-button:hover {
		transform: translateY(-2px);
		box-shadow: 0 14px 30px -12px rgb(251 172 2 / 0.8);
	}
}

@media (prefers-reduced-motion: reduce) {
	.hmf-button--gold-wide .elementor-button {
		transition: none;
	}
}

/* On navy surfaces: the phone number becomes a glass tile with a gold phone icon. */
:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-button--phone .elementor-button {
	min-block-size: 56px;
	padding: 14px 20px;
	border-color: rgb(255 255 255 / 0.16);
	border-radius: 16px;
	background: rgb(255 255 255 / 0.06);
	box-shadow: none;
	color: var(--hc-white);
	font-size: 18px;
	line-height: 1.6;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-button--phone .elementor-button::before {
	content: "";
	inline-size: 22px;
	block-size: 22px;
	margin-inline-end: 14px;
	background: var(--hc-gold);
	mask: var(--hc-icon-phone) center / contain no-repeat;
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .hmf-button--phone .elementor-button:hover {
	border-color: var(--hc-gold);
	background: rgb(255 255 255 / 0.1);
	color: var(--hc-white);
}

:is(.hmf-surface--navy, .hmf-surface--navy-panel, .hmf-surface--offer) .elementor-button:focus-visible {
	outline-color: var(--hc-gold);
}