/**
 * Force webpopular header/topbar to match YATA black bar (overrides theme settings + Elementor).
 */

:root {
	--header-background-color: var(--yata-header-bg, #000000) !important;
	--topbar-background-color: var(--yata-header-bg, #000000) !important;
	--sub-menu-background-color: var(--yata-header-bg, #000000) !important;
}

#header,
#header.header-custom,
#header[data-background="default"],
#header[data-background="transparent"],
#header.sticky,
header#header {
	background-color: var(--yata-header-bg, #000000) !important;
	background: var(--yata-header-bg, #000000) !important;
}

.topbar {
	background-color: var(--yata-header-bg, #000000) !important;
	background: var(--yata-header-bg, #000000) !important;
}

#header .sub-menu,
#header .menu ul {
	background-color: var(--yata-bg-elevated, #161616) !important;
}

/*
 * webpopular .menu ul:not(.navigation > .menu > ul) beats .menu li:hover ul on specificity.
 * JS (yata-header-nav.js) sets inline display for reliability; these rules back it up.
 */
@media screen and (min-width: 1281px) {
	body.yata #header.header-custom .navigation .menu li.menu-item-has-children:hover > .sub-menu,
	body.yata #header.header-custom .navigation .menu li.menu-item-has-children:focus-within > .sub-menu,
	body.yata #header.header-custom .navigation .menu li li.menu-item-has-children:hover > .sub-menu,
	body.yata #header.header-custom .navigation .menu li li li.menu-item-has-children:hover > .sub-menu {
		display: block !important;
		position: absolute !important;
		z-index: 99999 !important;
	}
}

@media screen and (max-width: 1280px) {
	/*
	 * Parent .menu li:has(.sub-menu) uses inline-flex + flex-wrap; sub-menus get
	 * flex: 1 0 100% (style.css ≤580px), which reorders label/chevron below children.
	 * JS wraps label + chevrons in .yata-menu-item-row; sub-menu stays a sibling below.
	 */
	#header .menu li:has(> .sub-menu),
	#header .menu li.menu-item-has-children {
		display: block !important;
	}

	#header .yata-menu-item-row {
		display: flex !important;
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: space-between !important;
		width: 100% !important;
		gap: 0.5rem;
	}

	#header .yata-menu-item-row > a {
		display: block !important;
		flex: 1 1 auto !important;
		float: none !important;
		max-width: none !important;
	}

	#header .yata-menu-item-row > i {
		flex: 0 0 auto !important;
		float: none !important;
		margin-left: 0 !important;
	}

	#header .menu li.menu-item-has-children > .sub-menu,
	header#header.header-custom ul.sub-menu,
	header#header.header-custom li:hover ul.sub-menu {
		flex: none !important;
		clear: both;
		position: static !important;
		inline-size: auto !important;
		width: 100% !important;
		box-shadow: none !important;
		top: auto !important;
		right: auto !important;
		left: auto !important;
	}

	#header .menu li.menu-item-has-children:not(.is-open) > .sub-menu {
		display: none !important;
	}

	#header .menu li.menu-item-has-children.is-open > .sub-menu {
		display: block !important;
	}

	#header .menu li.menu-item-has-children.is-open .yata-menu-item-row > .fa-chevron-down {
		display: none !important;
	}

	#header .menu li.menu-item-has-children.is-open .yata-menu-item-row > .fa-chevron-up {
		display: inline-block !important;
	}

	#header .menu li.menu-item-has-children:not(.is-open) .yata-menu-item-row > .fa-chevron-up {
		display: none !important;
	}

	/* Full-screen mobile drawer: solid background so page text does not bleed through. */
	#header .navigation > .menus,
	#header .navigation > div:first-of-type,
	#header .navigation .menu-main-menu-container,
	#header .navigation .menu-main-container,
	#header .navigation .menu-menu-container,
	#header .navigation:has(.button) > div:first-of-type,
	#header .navigation div[class*="menu-"][class*="-container"],
	#header[data-background="transparent"] .navigation > .menus,
	#header[data-background="transparent"] .navigation > div:first-of-type,
	#header[data-background="transparent"] .navigation .menu-main-menu-container,
	#header[data-background="transparent"] .navigation .menu-main-container {
		background-color: var(--yata-header-bg, #000000) !important;
		background: var(--yata-header-bg, #000000) !important;
	}

	#header .navigation .menu,
	#header .navigation .menu > li,
	#header .navigation .menu a,
	#header .yata-menu-item-row {
		background-color: var(--yata-header-bg, #000000) !important;
	}

	/* ul.menu is shorter than its wp_nav_menu wrapper — fill the wrapper. */
	#header .navigation .menu-main-container .menu,
	#header .navigation .menu-main-menu-container .menu,
	#header .navigation .menu-menu-container .menu,
	#header .navigation > .menus .menu {
		min-height: calc(100dvh - var(--header-h, 88px));
		box-sizing: border-box;
	}

	#header .navigation .menu .sub-menu,
	#header .navigation .menu .sub-menu > li,
	#header .navigation .menu .sub-menu a {
		background-color: var(--yata-bg-elevated, #161616) !important;
	}

	/* Hamburger must stay above the drawer and remain visible on black header. */
	body.yata #header .navigation {
		position: relative;
		z-index: 100003;
	}

	body.yata #header .show-menu {
		position: relative;
		z-index: 100004;
		color: var(--yata-gold, #fcefce) !important;
		cursor: pointer;
		line-height: 1;
	}
}

/* When webpopular / Elementor header is present, hide the YATA duplicate bar. */
body.yata:has(#header) .yata-header {
	display: none !important;
}

/*
 * webpopular #header is in normal document flow unless data-background="transparent".
 * Child .yata-page-inner must not reserve header height again (was ~120px extra gap).
 */
body.yata:has(#header[data-background="default"]) .yata-main,
body.yata:has(#header.sticky) .yata-main {
	margin-top: 0;
	padding-top: 0;
}

@media screen and (max-width: 1280px) {
	/* Lock page scroll while the drawer is open (iOS-safe). */
	body.yata-mobile-menu-open {
		overflow: hidden !important;
		position: fixed !important;
		width: 100% !important;
		left: 0;
		right: 0;
	}

	body.yata-mobile-menu-open #header {
		z-index: 100000 !important;
	}

	body.yata-mobile-menu-open #header .contain {
		position: relative;
		z-index: 100002;
	}

	/*
	 * Parent theme uses position:absolute + top:99% — page content scrolls underneath.
	 * Fixed full-viewport panel with its own scroll keeps menu text off the page.
	 */
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open,
	body.yata-mobile-menu-open #header .navigation [data-yata-panel-open="true"],
	body.yata #header .navigation .menu-main-container[data-yata-panel-open="true"],
	body.yata #header .navigation .menu-main-menu-container[data-yata-panel-open="true"],
	body.yata #header .navigation .menu-menu-container[data-yata-panel-open="true"],
	body.yata #header .navigation > .menus[data-yata-panel-open="true"] {
		position: fixed !important;
		top: var(--header-h, var(--yata-header-height, 88px)) !important;
		left: 0 !important;
		right: 0 !important;
		bottom: 0 !important;
		width: 100vw !important;
		height: calc(100dvh - var(--header-h, var(--yata-header-height, 88px))) !important;
		max-height: calc(100dvh - var(--header-h, var(--yata-header-height, 88px))) !important;
		padding-top: 0 !important;
		box-sizing: border-box;
		overflow-x: hidden !important;
		overflow-y: auto !important;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		background-color: var(--yata-header-bg, #000000) !important;
		background: var(--yata-header-bg, #000000) !important;
		z-index: 100001 !important;
		box-shadow: none !important;
		display: block !important;
	}

	/*
	 * Parent wp_nav_menu wrapper (e.g. .menu-main-container) shrink-wraps the ul;
	 * page content showed through below the ul inside the full-height panel.
	 */
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open.menu-main-menu-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open.menu-main-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open.menu-menu-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open[class*="menu-"][class*="-container"],
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open > .menu-main-menu-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open > .menu-main-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open .menu-main-menu-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open .menu-main-container,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open > .menus,
	body.yata-mobile-menu-open .yata-mobile-menu-panel--open.menus,
	body.yata #header .navigation [data-yata-panel-open="true"] .menu {
		width: 100% !important;
		min-height: calc(100dvh - var(--header-h, 88px));
		box-sizing: border-box;
		background-color: var(--yata-header-bg, #000000) !important;
		background: var(--yata-header-bg, #000000) !important;
	}

	body.yata-mobile-menu-open .yata-mobile-menu-panel--open .menu,
	body.yata #header .navigation [data-yata-panel-open="true"] .menu {
		min-height: calc(100dvh - var(--header-h, 88px));
		background-color: var(--yata-header-bg, #000000) !important;
	}
}