/*
 * Combra desktop header layout.
 * Replaces the former generic #header .widget positioning without changing
 * Enfold's content containers or its mobile header.
 */

@media only screen and (min-width: 769px) {
	:root {
		--combra-header-gutter: max(50px, calc((100vw - 1310px) / 2 + 50px));
	}

	/* Search occupies only the free space between logo and account navigation. */
	#header #dgwt_wcas_ajax_search-2 {
		display: flex;
		top: 15px;
		left: calc(var(--combra-header-gutter) + 315px);
		right: calc(var(--combra-header-gutter) + 363px);
		width: auto;
		max-width: 500px;
		height: 60px;
		margin: 0 auto;
		transform: none;
	}

	#header #dgwt_wcas_ajax_search-2 .dgwt-wcas-search-wrapp {
		width: 100%;
		min-width: 0;
	}

	#header #dgwt_wcas_ajax_search-2 input[type="search"] {
		width: 100% !important;
	}

	/* Top links end at the same inner edge as content and breadcrumbs. */
	#header #nav_menu-6 {
		display: flex;
		top: 0;
		left: auto;
		right: var(--combra-header-gutter);
		width: auto;
		max-width: none;
		height: 90px;
		margin: 0;
		transform: none;
		align-items: center;
		justify-content: flex-end;
	}

	#header #nav_menu-6 > div,
	#header #nav_menu-6 ul {
		position: static;
		width: auto;
		transform: none;
	}

	#header #nav_menu-6 ul {
		display: flex;
		align-items: center;
		gap: 20px;
	}

	#header #nav_menu-6 ul li {
		margin: 0;
	}

	/* Keep WooCommerce's live cart control as the final header item. */
	#header .cart_dropdown {
		display: block !important;
		top: 50%;
		left: auto;
		right: -2px !important;
		transform: none;
	}

	/* Secondary navigation uses the same right edge. */
	#header #nav_menu-5 {
		display: flex;
		top: 0 !important;
		left: var(--combra-header-gutter) !important;
		right: var(--combra-header-gutter) !important;
		width: auto;
		max-width: none;
		height: 50px;
		margin: 0;
		transform: none;
		align-items: center;
		justify-content: flex-end;
	}

	#header #nav_menu-5 > div,
	#header #nav_menu-5 ul {
		position: static;
		width: auto;
		transform: none;
	}

	#header #nav_menu-5 > div {
		margin-left: auto;
	}

	#header #nav_menu-5 ul {
		display: flex;
		align-items: center;
		gap: 28px;
	}

	#header #nav_menu-5 ul li {
		margin: 0;
	}

	#header #nav_menu-5 ul li a {
		font-size: 15px;
		line-height: 1.2;
		white-space: nowrap;
	}

	#header #nav_menu-5 a:focus-visible,
	#header #nav_menu-6 a:focus-visible,
	#header #dgwt_wcas_ajax_search-2 input[type="search"]:focus-visible {
		outline: 3px solid rgba(0, 145, 211, 0.35);
		outline-offset: 3px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 1099px) {
	#header #dgwt_wcas_ajax_search-2 {
		left: calc(var(--combra-header-gutter) + 305px);
		right: calc(var(--combra-header-gutter) + 350px);
	}

	#header #nav_menu-6 ul {
		gap: 14px;
	}

	#header #nav_menu-6 ul li a {
		font-size: 14px;
	}

	#header #nav_menu-5 ul {
		gap: 18px;
	}

	#header #nav_menu-5 ul li a {
		font-size: 14px;
	}
}

@media only screen and (min-width: 769px) and (max-width: 949px) {
	#header #dgwt_wcas_ajax_search-2 {
		display: none;
	}
}

/*
 * Keep this final rule outside the desktop breakpoint. Enfold calculates its
 * header breakpoint differently in some cached/zoomed views; the menu itself
 * must nevertheless use the same inner edge as the breadcrumb container.
 */
#header #nav_menu-5 {
	display: flex !important;
	top: 0 !important;
	left: max(50px, calc((100vw - 1310px) / 2 + 50px)) !important;
	right: max(50px, calc((100vw - 1310px) / 2 + 50px)) !important;
	width: auto !important;
	max-width: none !important;
	margin: 0 !important;
	transform: none !important;
	align-items: center !important;
	justify-content: flex-end !important;
}

#header #nav_menu-5 > div {
	position: static !important;
	width: auto !important;
	margin-left: auto !important;
	transform: none !important;
}

#header #nav_menu-5 ul {
	position: static !important;
	display: flex !important;
	align-items: center !important;
	justify-content: flex-end !important;
	width: auto !important;
	margin: 0 !important;
	transform: none !important;
}

@media only screen and (max-width: 768px) {
	#header #nav_menu-5 {
		display: none !important;
	}
}