/*
 * Header, compact desktop band (801-1200px).
 *
 * The desktop header is a nowrap flex row with no gap: logo (238px fixed),
 * nav links, the Ajax Search Pro pill (div.top-header-search, width:100%),
 * then the icon row. The pill's widget is float:right with min-width:200px,
 * and .top-header-search has no min-width:0 to let it shrink, so once the
 * row runs out of room the floated widget spills rightward and paints over
 * the account and cart icons.
 *
 * Rather than shrink the pill into something unusable, collapse search to
 * the icon that already exists in the icon row and reuse the slide-down
 * .searchform panel the mobile header uses. Below 801px the existing mobile
 * header takes over and this band no longer applies.
 *
 * The matching JS lives in js/regroup20.js (isCompactSearch) - it stops the
 * widget being moved into .top-header-search and stops #search being hidden.
 *
 * Kept out of style.css on purpose: style.css goes through the LiteSpeed CSS
 * optimizer, which reuses the same URL when the content changes, so edits can
 * sit stale in browsers. This file is excluded from that and versioned by
 * filemtime.
 */

@media screen and (min-width: 801px) and (max-width: 1200px) {

	/* The pill is replaced by the icon in this band. */
	div.top-header-search {
		display: none;
	}

	/* JS leaves #search alone here; make sure nothing else hides it. */
	div.iconmenu #search {
		display: flex;
		visibility: visible;
		width: 24px;
	}

	/*
	 * Deliberately NO gap on div.menu-container here. It reads as the obvious
	 * safety net, but the row is already tight in this band - adding a gap cost
	 * 48px across the remaining three children and pushed the cart icon past
	 * the viewport edge. justify-content:space-between already separates them.
	 */

	div.menu-container div.logo {
		flex: 0 0 auto;
	}

	div.iconmenu {
		flex: 0 0 auto;
	}

	/*
	 * The icon row uses a 32px gap at full desktop width. In this band that
	 * generosity is what pushes the row into the nav - at 900px the gap between
	 * CONNECT and the search icon measured 0px. Tightening to 16px narrows the
	 * icon block by 32px, which both restores clearance and clears the residual
	 * horizontal overflow on div.menu-container.
	 */
	div.iconmenu div.icons {
		gap: 16px;
	}
}