/*
 * Touchstar desktop navigation
 * -----------------------------------------------------------------------------
 * Everything is scoped to min-width: 1200px. Below that nothing here applies and
 * the theme's existing burger panel behaves exactly as it does today.
 *
 * 1200px rather than the theme's own 992px lg breakpoint: at 992px the container
 * is 960px and the logo takes 200px, leaving too little for eight items.
 *
 * Selectors mirror the theme's own (#header #navigation > .menu-inner ...) so they
 * carry equal specificity. !important is used on layout properties the theme sets
 * for its slide-in panel, where matching specificity alone would leave the result
 * dependent on stylesheet order.
 */

@media (min-width: 1200px) {

	/* --- Logo -------------------------------------------------------------- */
	/* 270px down to 200px, freeing 70px for the bar. SVG, so no loss of quality. */
	#header .logo img {
		width: 200px !important;
		height: auto !important;
	}

	/* --- Burger ------------------------------------------------------------ */
	#header #burger {
		display: none !important;
	}

	/* --- Panel becomes an inline bar --------------------------------------- */
	#header #navigation {
		height: auto !important;
	}

	#header #navigation > .menu-inner {
		/* 4px solid #005288 top edge belongs to the slide-in panel. The theme's
		   scrim is offset by top: -4px to cover it. An inline bar does not want it. */
		border-top: 0 !important;
		position: static !important;
		width: auto !important;
		height: auto !important;
		padding: 0 !important;
		background-color: transparent !important;
		opacity: 1 !important;
		pointer-events: auto !important;
		overflow: visible !important;
		display: block !important;
	}

	/* Full-screen dimming scrim, not wanted for an inline bar. */
	#header #navigation > .menu-inner::before {
		display: none !important;
	}

	/* The panel nests its own Bootstrap container. Neutralise it. */
	#header #navigation > .menu-inner > .container,
	#header #navigation > .menu-inner > .container > .row,
	#header #navigation > .menu-inner > .container > .row > [class*="col-"] {
		max-width: none !important;
		height: auto !important;
		margin: 0 !important;
		padding: 0 !important;
	}

	#header #navigation > .menu-inner > .container,
	#header #navigation > .menu-inner > .container > .row {
		width: auto !important;
	}

	/* Width is deliberately not touched on the column. Bootstrap's own .col-12
	   already supplies width: 100%, which keeps the bar flush with the container's
	   right edge. Overriding it to auto shrink-wraps the bar; overriding the flex
	   basis to 100% over-constrains the outer header row and wraps the bar onto a
	   second line under the logo. */

	/* --- The bar ----------------------------------------------------------- */
	#header #navigation > .menu-inner ul.nav {
		flex-direction: row !important;
		flex-wrap: nowrap !important;
		align-items: center !important;
		justify-content: flex-end !important;
		width: auto !important;
		gap: 24px;
	}

	#header #navigation > .menu-inner li {
		opacity: 1 !important;      /* theme hides items until .open is set */
		width: auto !important;
		text-align: left !important;
		position: relative !important;
		transform: none !important;
	}

	#header #navigation > .menu-inner li a {
		font-size: 14px !important;
		white-space: nowrap;
	}

	/* Top-level items only. Gotham is loaded at 100/200/300/400/500/700/900, so 500
	   is a real face. 600 is not loaded and would be synthesised. Dropdown items are
	   deliberately left at the inherited 400 to keep the two levels distinct. */
	#header #navigation > .menu-inner > .container > .row > [class*="col-"] > ul.nav > li > a {
		font-weight: 500 !important;
	}

	/* Chevrons and the panel's back button belong to the mobile pattern. */
	#header #navigation .toggle,
	#header #navigation > .menu-inner li .submenu-toggle,
	#header #navigation > .menu-inner li .submenu .back-btn,
	#header #navigation > .menu-inner li .submenu > div > p {
		display: none !important;
	}

	/* --- Two overrides that need extra specificity -------------------------- */
	/* The theme's bundle sets `top: 83px !important` on .submenu and `padding: 0 0
	   16px` on the items, using selectors of identical specificity to the ones
	   above. It is enqueued after this file, so it wins those ties. Both rules add
	   classes to the chain to take precedence. Both theme values are left over from
	   the slide-in panel: 83px positioned it below the old header, and the padding
	   being all on the bottom is why the links sat 8px above the logo's centre.

	   Making the padding symmetric does double duty. It centres the link, and it
	   extends the item's box down to where the dropdown begins, so `top: 100%`
	   lands flush and there is no gap for the pointer to cross. */
	#header #navigation > .menu-inner > .container > .row > [class*="col-"] > ul.nav > li {
		padding-top: 8px !important;
		padding-bottom: 8px !important;
	}

	#header #navigation > .menu-inner > .container li .submenu {
		top: 100% !important;
	}

	/* --- Dropdowns --------------------------------------------------------- */
	#header #navigation > .menu-inner li .submenu {
		position: absolute !important;
		left: 0 !important;
		right: auto !important;
		width: max-content !important;
		min-width: 240px;
		max-width: 320px;
		height: auto !important;
		padding: 16px 20px !important;
		background-color: #fff !important;
		border-radius: 6px;
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.16);
		opacity: 0 !important;
		pointer-events: none !important;
		overflow: visible !important;
		transition: opacity 0.15s ease !important;
		z-index: 20 !important;
	}

	#header #navigation > .menu-inner li .submenu::before {
		display: none !important;
	}

	#header #navigation > .menu-inner li:hover > .submenu,
	#header #navigation > .menu-inner li:focus-within > .submenu {
		opacity: 1 !important;
		pointer-events: auto !important;
	}

	/* Keeps the pointer inside the item while travelling to the dropdown. */
	#header #navigation > .menu-inner li .submenu::after {
		content: "";
		position: absolute;
		top: -10px;
		left: 0;
		width: 100%;
		height: 10px;
	}

	#header #navigation > .menu-inner li .submenu ul.nav {
		flex-direction: column !important;
		align-items: flex-start !important;
		gap: 10px;
	}

	#header #navigation > .menu-inner li .submenu li a {
		font-size: 14px !important;
		white-space: normal;
	}

	/* Right-hand items open leftwards so a dropdown cannot leave the viewport. */
	#header #navigation > .menu-inner > .container ul.nav > li:nth-last-child(-n+3) .submenu {
		left: auto !important;
		right: 0 !important;
	}

	/* --- Keyboard ---------------------------------------------------------- */
	#header #navigation a:focus-visible {
		outline: 2px solid #005288;
		outline-offset: 3px;
	}

	@media (prefers-reduced-motion: reduce) {
		#header #navigation > .menu-inner li .submenu {
			transition: none !important;
		}
	}
}

/* Above 1400px the container widens to 1320px, so the bar can breathe. */
@media (min-width: 1400px) {
	#header #navigation > .menu-inner ul.nav {
		gap: 32px;
	}

	#header #navigation > .menu-inner li a {
		font-size: 15px !important;
	}
}