/* In-flow header. After ~100px JS moves it onto <html> as a floating bar. */

html.admin-bar {
	margin-top: 0 !important;
}

/*
 * Creatium core/normalize can fight WP admin-bar.css (or a plugin may dequeue it).
 * Keep the toolbar fixed and readable so it does not dump as a raw <ul> list.
 */
html.admin-bar #wpadminbar {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 999999 !important;
	height: 32px !important;
	min-height: 32px !important;
	overflow: hidden !important;
	color: #fff !important;
	background: #1d2327 !important;
	font: 400 13px/32px -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell, "Helvetica Neue", sans-serif !important;
}

html.admin-bar #wpadminbar * {
	box-sizing: border-box !important;
}

html.admin-bar #wpadminbar .ab-item,
html.admin-bar #wpadminbar a.ab-item,
html.admin-bar #wpadminbar > .ab-top-menu > li > .ab-item {
	display: block !important;
	height: 32px !important;
	line-height: 32px !important;
	padding: 0 10px !important;
	margin: 0 !important;
	color: #fff !important;
	text-decoration: none !important;
	background: transparent !important;
}

html.admin-bar #wpadminbar ul,
html.admin-bar #wpadminbar li {
	list-style: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

html.admin-bar #wpadminbar > .ab-top-menu {
	display: flex !important;
	flex-wrap: nowrap !important;
	align-items: stretch !important;
	height: 32px !important;
	overflow: hidden !important;
}

html.admin-bar #wpadminbar .ab-sub-wrapper,
html.admin-bar #wpadminbar .ab-submenu {
	display: none !important;
}

html.admin-bar #wpadminbar .menupop:hover > .ab-sub-wrapper,
html.admin-bar #wpadminbar .menupop.hover > .ab-sub-wrapper {
	display: block !important;
	position: absolute !important;
	top: 32px !important;
	background: #1d2327 !important;
	z-index: 999999 !important;
	min-width: 160px !important;
	box-shadow: 0 4px 16px rgba(0, 0, 0, 0.25) !important;
	overflow: visible !important;
	height: auto !important;
}

@media screen and (max-width: 782px) {
	html.admin-bar #wpadminbar {
		height: 46px !important;
		min-height: 46px !important;
	}

	html.admin-bar #wpadminbar .ab-item,
	html.admin-bar #wpadminbar a.ab-item,
	html.admin-bar #wpadminbar > .ab-top-menu > li > .ab-item {
		height: 46px !important;
		line-height: 46px !important;
	}

	html.admin-bar #wpadminbar > .ab-top-menu {
		height: 46px !important;
	}

	html.admin-bar #wpadminbar .menupop:hover > .ab-sub-wrapper,
	html.admin-bar #wpadminbar .menupop.hover > .ab-sub-wrapper {
		top: 46px !important;
	}
}

body.admin-bar.area,
body.admin-bar.mkl-site,
body.admin-bar.creatium-legacy {
	--mkl-admin-bar-offset: 32px;
}

@media screen and (max-width: 782px) {
	body.admin-bar.area,
	body.admin-bar.mkl-site,
	body.admin-bar.creatium-legacy {
		--mkl-admin-bar-offset: 46px;
	}
}

.mkl-header-wrap,
.creatium-migr-header-wrap {
	position: relative;
	z-index: 100000;
	width: 100%;
}

.mkl-header-spacer {
	display: block;
	width: 100%;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.mkl-header-wrap > .mkl-nav,
.creatium-migr-header-wrap > .mkl-nav {
	position: relative;
	width: 100%;
	background: linear-gradient(180deg, #ffffff 0%, #fcfbff 100%);
	box-shadow: 0 4px 24px rgba(99, 16, 128, 0.12);
}

.mkl-header-wrap .mkl-nav__bar,
.creatium-migr-header-wrap .mkl-nav__bar {
	min-height: 72px;
}

@keyframes mkl-header-drop {
	from {
		transform: translateY(-110%);
	}
	to {
		transform: translateY(0);
	}
}

html > .mkl-header-wrap.mkl-header-is-floating,
html > .creatium-migr-header-wrap.mkl-header-is-floating {
	position: fixed !important;
	top: 0 !important;
	left: 0 !important;
	right: 0 !important;
	width: 100% !important;
	z-index: 100000 !important;
	box-shadow: 0 10px 32px rgba(99, 16, 128, 0.18);
}

html.admin-bar > .mkl-header-wrap.mkl-header-is-floating {
	top: var(--mkl-admin-bar-offset, 32px) !important;
}

.mkl-header-wrap.mkl-header-wrap--in {
	animation: mkl-header-drop 0.38s cubic-bezier(0.22, 1, 0.36, 1) backwards;
}

html.mkl-header-stuck .mkl-topbar {
	display: none;
}

body.mkl-site .mkl-main,
body.creatium-legacy .mkl-main {
	box-sizing: border-box;
	padding-top: 0 !important;
	overflow-x: clip;
}

body.mkl-nav-mobile-open {
	overflow: hidden;
}