/* Man With A Pram — Sticky Header
   .mwap-header = CSS Class on your Elementor header's outermost container
   #hero-section = CSS ID on your Elementor hero container

   The main header is never modified. A fixed clone (#mwap-sticky) slides
   in once you scroll past the hero, and slides out when you return to it.
*/

/* Hide sticky header on tablet and mobile — MadHeader handles those breakpoints */
@media (max-width: 1024px) {
	#mwap-sticky { display: none !important; }
}

#mwap-sticky {
	position: fixed;
	top: 0;
	left: 0;
	right: 0;
	z-index: 9999;
	background-color: #000000;
	box-shadow: 0 2px 16px rgba(0, 0, 0, 0.4);
	transform: translateY(-100%);
	will-change: transform;
}

/* Slide down into view */
#mwap-sticky.mwap-visible {
	animation: mwap-slide-down 0.4s ease-in-out forwards;
}

/* Slide back up out of view */
#mwap-sticky.mwap-hiding {
	animation: mwap-slide-up 0.35s ease-in-out forwards;
}

@keyframes mwap-slide-down {
	from { transform: translateY(-100%); }
	to   { transform: translateY(0); }
}

@keyframes mwap-slide-up {
	from { transform: translateY(0); }
	to   { transform: translateY(-100%); }
}

/* Fixed compact bar */
#mwap-sticky {
	height: 70px;
	display: flex;
	align-items: center;
}

/* Kill any min-height / forced height the cloned sections carry */
#mwap-sticky * {
	min-height: 0 !important;
}

/* Force the WHOLE cloned header into a single horizontal row,
   logo pushed left and nav pushed right, vertically centered. */
#mwap-sticky > *,
#mwap-sticky .elementor-section,
#mwap-sticky .elementor-container,
#mwap-sticky .e-con,
#mwap-sticky .e-con-inner,
#mwap-sticky .elementor-row,
#mwap-sticky .elementor-column-wrap,
#mwap-sticky .elementor-widget-wrap {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
	align-items: center !important;
	justify-content: space-between !important;
	width: 100% !important;
	gap: 24px;
}

/* Columns shrink to their content so logo and nav sit side by side */
#mwap-sticky .elementor-column,
#mwap-sticky .elementor-widget {
	width: auto !important;
	flex: 0 0 auto !important;
}

/* Strip the big vertical padding the original header rows use */
#mwap-sticky .elementor-section,
#mwap-sticky .elementor-container,
#mwap-sticky .e-con,
#mwap-sticky .e-con-inner,
#mwap-sticky .elementor-column-wrap,
#mwap-sticky .elementor-widget-wrap,
#mwap-sticky .elementor-widget {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	margin-top: 0 !important;
	margin-bottom: 0 !important;
}

/* Add side breathing room on the bar edges */
#mwap-sticky > * {
	padding-left: 40px !important;
	padding-right: 40px !important;
}

/* Keep the nav menu items themselves in a horizontal row */
#mwap-sticky .elementor-nav-menu {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: nowrap !important;
}

/* Logo: cap height so it fits the 70px bar (covers img, svg, and bg-image logos) */
#mwap-sticky .elementor-widget-theme-site-logo img,
#mwap-sticky .elementor-widget-site-logo img,
#mwap-sticky .elementor-widget-image img,
#mwap-sticky .elementor-widget-image svg,
#mwap-sticky img,
#mwap-sticky svg {
	max-height: 50px !important;
	width: auto !important;
}

/* White nav links on the black bar */
#mwap-sticky .elementor-nav-menu a,
#mwap-sticky .elementor-nav-menu .elementor-item,
#mwap-sticky a {
	color: #ffffff !important;
}