/**
 * Perfamix glass header
 *
 * Supported surfaces:
 * 1. Goldsmith's default desktop header.
 * 2. Goldsmith's default mobile header.
 * 3. An Elementor outer container with class `perfamix-glass-surface`.
 *
 * The selectors are deliberately scoped. This module does not change menu,
 * icon, logo, or text colors; Goldsmith remains responsible for contrast.
 */

body.perfamix-glass-header {
	--pfmx-glass-bg-top: rgba(255, 255, 255, 0.44);
	--pfmx-glass-bg-scrolled: rgba(255, 255, 255, 0.72);
	--pfmx-glass-border: rgba(17, 24, 39, 0.09);
	--pfmx-glass-shadow: 0 12px 36px rgba(17, 24, 39, 0.10);
	--pfmx-glass-blur: 16px;
	--pfmx-glass-saturation: 145%;

	--pfmx-glass-dark-bg-top: rgba(12, 14, 18, 0.44);
	--pfmx-glass-dark-bg-scrolled: rgba(12, 14, 18, 0.72);
	--pfmx-glass-dark-border: rgba(255, 255, 255, 0.12);
	--pfmx-glass-dark-shadow: 0 12px 36px rgba(0, 0, 0, 0.24);
}

body.perfamix-glass-header header.goldsmith-header-default,
body.perfamix-glass-header .goldsmith-header-mobile-top,
body.perfamix-glass-header .perfamix-glass-surface {
	background: var(--pfmx-glass-bg-top);
	border-bottom-color: var(--pfmx-glass-border);
	box-shadow: none;
	-webkit-backdrop-filter: saturate(var(--pfmx-glass-saturation)) blur(var(--pfmx-glass-blur));
	backdrop-filter: saturate(var(--pfmx-glass-saturation)) blur(var(--pfmx-glass-blur));
	transition: background-color 180ms ease, border-color 180ms ease, box-shadow 180ms ease;
}

body.perfamix-glass-header.scroll-start header.goldsmith-header-default,
body.perfamix-glass-header.scroll-start .goldsmith-header-mobile-top,
body.perfamix-glass-header.scroll-start .perfamix-glass-surface {
	background: var(--pfmx-glass-bg-scrolled);
	border-bottom-color: var(--pfmx-glass-border);
	box-shadow: var(--pfmx-glass-shadow);
}

/* Goldsmith's dark header keeps its own light text and icon colors. */
body.perfamix-glass-header.has-default-header-type-dark {
	--pfmx-glass-bg-top: var(--pfmx-glass-dark-bg-top);
	--pfmx-glass-bg-scrolled: var(--pfmx-glass-dark-bg-scrolled);
	--pfmx-glass-border: var(--pfmx-glass-dark-border);
	--pfmx-glass-shadow: var(--pfmx-glass-dark-shadow);
}

/* A transparent desktop header with light content needs a dark glass surface. */
body.perfamix-glass-header.has-default-header-type-trans.header-trans-light:not(.scroll-start) header.goldsmith-header-default {
	background: var(--pfmx-glass-dark-bg-top);
	border-bottom-color: var(--pfmx-glass-dark-border);
}

/* Mobile background types live on the header element rather than the body. */
body.perfamix-glass-header .goldsmith-header-mobile-top.mobile-header-bg-type-dark,
body.perfamix-glass-header .goldsmith-header-mobile-top.mobile-header-bg-type-trans-light,
body.perfamix-glass-header .perfamix-glass-surface.perfamix-glass-surface--dark {
	background: var(--pfmx-glass-dark-bg-top);
	border-bottom-color: var(--pfmx-glass-dark-border);
}

body.perfamix-glass-header.scroll-start .goldsmith-header-mobile-top.mobile-header-bg-type-dark,
body.perfamix-glass-header.scroll-start .goldsmith-header-mobile-top.mobile-header-bg-type-trans-light,
body.perfamix-glass-header.scroll-start .perfamix-glass-surface.perfamix-glass-surface--dark {
	background: var(--pfmx-glass-dark-bg-scrolled);
	border-bottom-color: var(--pfmx-glass-dark-border);
	box-shadow: var(--pfmx-glass-dark-shadow);
}

/* Solid fallback for browsers that cannot render backdrop blur. */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
	body.perfamix-glass-header header.goldsmith-header-default,
	body.perfamix-glass-header .goldsmith-header-mobile-top,
	body.perfamix-glass-header .perfamix-glass-surface {
		background: rgba(255, 255, 255, 0.96);
	}

	body.perfamix-glass-header.has-default-header-type-dark header.goldsmith-header-default,
	body.perfamix-glass-header .goldsmith-header-mobile-top.mobile-header-bg-type-dark,
	body.perfamix-glass-header .goldsmith-header-mobile-top.mobile-header-bg-type-trans-light,
	body.perfamix-glass-header .perfamix-glass-surface.perfamix-glass-surface--dark,
	body.perfamix-glass-header.has-default-header-type-trans.header-trans-light:not(.scroll-start) header.goldsmith-header-default {
		background: rgba(12, 14, 18, 0.96);
	}
}

@media (prefers-reduced-motion: reduce) {
	body.perfamix-glass-header header.goldsmith-header-default,
	body.perfamix-glass-header .goldsmith-header-mobile-top,
	body.perfamix-glass-header .perfamix-glass-surface {
		transition: none;
	}
}