/*
 * Floating header: on the transparent-header pages the bar starts fully
 * invisible over the hero, then settles in as a glass "pill" once the user
 * scrolls past the hero — inset from the edges, blurred, gold hairline —
 * rather than snapping into a hard-edged opaque bar.
 */

body.ast-theme-transparent-header #masthead {
	transition: none;
}

body.ast-theme-transparent-header #masthead.exegypt-header-scrolled {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 999;
}

body.ast-theme-transparent-header .main-header-bar {
	transition: background-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		box-shadow 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		border-color 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		border-radius 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		margin 0.4s cubic-bezier(0.16, 1, 0.3, 1),
		max-width 0.4s cubic-bezier(0.16, 1, 0.3, 1);
}

body.ast-theme-transparent-header #masthead.exegypt-header-scrolled .main-header-bar {
	background-color: var(--exegypt-navy-glass, rgba(10, 22, 41, 0.78));
	-webkit-backdrop-filter: blur(16px) saturate(140%);
	backdrop-filter: blur(16px) saturate(140%);
	border: 1px solid var(--exegypt-gold-hairline, rgba(201, 162, 75, 0.25));
	border-radius: 18px;
	box-shadow: 0 16px 40px -18px rgba(3, 8, 17, 0.65);
	margin: 14px auto 0;
	max-width: min(1240px, calc(100% - 32px));
	animation: exegypt-header-settle 0.5s cubic-bezier(0.16, 1, 0.3, 1) both;
}

body.ast-theme-transparent-header.ast-header-break-point #masthead.exegypt-header-scrolled .main-header-bar {
	margin: 10px auto 0;
	max-width: calc(100% - 20px);
	border-radius: 14px;
}

@keyframes exegypt-header-settle {
	from {
		transform: translateY(-14px);
		opacity: 0;
	}
	to {
		transform: translateY(0);
		opacity: 1;
	}
}

/*
 * No custom hover-underline here: Astra's own "Underline" menu hover
 * style (`ast-menu-hover-style-underline`, already applied to the main
 * menu via the Customizer and gold via `currentColor`) already draws
 * this. A second `::after`-based underline used to be added here for the
 * scrolled state, which just doubled up with Astra's own on hover.
 */

@media (prefers-reduced-motion: reduce) {
	body.ast-theme-transparent-header #masthead.exegypt-header-scrolled .main-header-bar {
		animation: none;
	}

	body.ast-theme-transparent-header .main-header-bar {
		transition: none;
	}
}