/**
 * Sticky header.
 *
 * The Elementor "Main Header" template has two top-level containers
 * (Desktop and Mobile/Tablet) that sit "absolute" over the hero section.
 * Making them "fixed" keeps the same overlay layout but holds the header
 * at the top of the viewport while scrolling.
 */

.elementor-location-header > .e-con.e-parent {
	position: fixed !important;
	z-index: 999;
	transition: top 0.25s ease, padding 0.25s ease;
}

/* Keep the header below the WordPress admin bar when logged in. */
.admin-bar .elementor-location-header > .e-con.e-parent {
	margin-top: var(--wp-admin--admin-bar--height, 32px);
}

/* On small screens the admin bar scrolls away, so drop the offset after scrolling. */
@media (max-width: 600px) {
	.admin-bar .elementor-location-header.is-scrolled > .e-con.e-parent {
		margin-top: 0;
	}
}

/* Compact state once the page has been scrolled (class added by sticky-header.js). */
.elementor-location-header.is-scrolled > .e-con.e-parent {
	top: 0 !important;
	--padding-top: 10px !important;
	--padding-bottom: 10px !important;
}

/* Inner white "Header Wrapper" card gets a shadow so it stands out over content. */
.elementor-location-header > .e-con.e-parent > .e-con:first-child {
	transition: box-shadow 0.25s ease;
}

.elementor-location-header.is-scrolled > .e-con.e-parent > .e-con:first-child {
	box-shadow: 0 8px 24px rgba(16, 24, 40, 0.12);
}

@media (prefers-reduced-motion: reduce) {
	.elementor-location-header > .e-con.e-parent,
	.elementor-location-header > .e-con.e-parent > .e-con:first-child {
		transition: none;
	}
}