/**
 * Background and surface utilities.
 */

.hbn-bg-alt {
	background-color: var(--hbn-color-bg-alt);
}

.hbn-bg-navy {
	background-color: var(--hbn-color-navy);
	color: var(--hbn-color-cream);
}

.hbn-bg-dark {
	background-color: var(--hbn-color-dark);
	color: var(--hbn-color-cream);
}

.hbn-on-dark {
	color: var(--hbn-color-cream);
}

.hbn-bg-navy a,
.hbn-bg-dark a,
.hbn-on-dark a {
	color: var(--hbn-color-cream);
}

.hbn-muted-on-dark,
.hbn-bg-navy .hbn-muted,
.hbn-bg-dark .hbn-muted,
.hbn-on-dark .hbn-muted {
	color: var(--hbn-color-cream);
	opacity: var(--hbn-muted-on-dark);
}

/*
 * Frosted glass panel (hero wrap around title + lead + buttons).
 * Class goes on the Elementor container (.e-con).
 *
 * !important: same reason as outline buttons — Elementor page CSS
 * (`.elementor-N .elementor-element-ID`, ~0,3,0) sets background-color /
 * background-image on containers and beats a normal theme rule. Clear
 * Style → Background in the editor as well so editor chrome matches.
 */
.e-con.hbn-glass,
.elementor-element.hbn-glass {
	background-color: rgba(3, 40, 68, 0.15) !important;
	background-image: radial-gradient(46.79% 50.08% at 50% 50%, #01111c 0%, rgba(1, 17, 28, 0.08) 100%) !important;
	border-radius: var(--hbn-radius-card);
	-webkit-backdrop-filter: blur(8px);
	backdrop-filter: blur(8px);
	overflow: hidden;
}

/*
 * Navy frost panel: glass on desktop, solid navy on mobile.
 * Class goes on the Elementor container (.e-con). Combine with hbn-on-dark
 * for cream text. Clear Style → Background in the editor.
 *
 * !important: same Elementor container Background exception as .hbn-glass.
 */
.e-con.hbn-glass-navy,
.elementor-element.hbn-glass-navy {
	background: var(--hbn-color-navy-frost) !important;
	background-color: var(--hbn-color-navy-frost) !important;
	background-image: none !important;
	-webkit-backdrop-filter: blur(var(--hbn-blur-frost));
	backdrop-filter: blur(var(--hbn-blur-frost));
}

@media (max-width: 767px) {
	.e-con.hbn-glass-navy,
	.elementor-element.hbn-glass-navy {
		background: var(--hbn-color-navy) !important;
		background-color: var(--hbn-color-navy) !important;
		-webkit-backdrop-filter: none;
		backdrop-filter: none;
	}
}