/**
 * Header layout + responsive fixes — CollabX 446.
 *
 * Companion to scripts/fix-header-template.php, which fixed the *structural*
 * problems in the Betheme header-builder data (which menu the burger opens, the
 * burger/menu breakpoints, and the full-bleed top section). This file handles the
 * parts that are genuinely presentational.
 *
 * Betheme breakpoints, for reference — these are the theme's own, do not invent
 * others: desktop >=1441, laptop 960-1440, tablet 768-959, mobile <=767.
 *
 * Element handles are Betheme builder uids, which are stable for the life of the
 * template but WILL change if the header is rebuilt from scratch in the builder:
 *   .mcb-section-inner-03a36a30c  top header section (logo / menu / icons / search)
 *   .mcb-wrap-aa536218a           burger + logo + main menu
 *   .mcb-wrap-ec3b2cd23           account + cart + search
 *   .mcb-item-5kfn02rcn           the search element
 *   .mcb-wrap-liava77             the category bar (Secondary Menu)
 */

/* ------------------------------------------------------ mobile: no overflow --
 *
 * THE BUG: at 390px the icons/search wrap ran from x=255 to x=605 — 215px past
 * the right edge of a 390px viewport. It was not scrollable, just silently
 * clipped, because something up the tree sets overflow-x:hidden. So the search
 * box was simply cut in half and the cart was pushed to the edge.
 *
 * CAUSE: the two top-row wraps are `one-third` flex items that never wrap, while
 * the logo is a fixed 200px and the search has a ~254px floor:
 * 200 + 35 + 104 + 254 = 593px of content in a 390px viewport.
 *
 * FIX: let the top section wrap, and give each wrap its own full-width row —
 * row 1 burger + logo, row 2 cart + search. Nothing is clipped and nothing needs
 * a horizontal scrollbar.
 */
@media only screen and ( max-width: 767px ) {

	#mfn-header-template .mcb-section-inner-03a36a30c {
		flex-wrap: wrap;
	}

	/*
	 * Mobile gutter, so the logo lines up with the page text below it as it now
	 * does at every other width.
	 *
	 * This has to go on the SECTION, not the section_wrapper: Betheme's own
	 * be.min.css carries `.mfn-header-tmpl .section_wrapper { padding: 0
	 * !important }` below 767px, which no amount of specificity will beat. The
	 * theme's model is "gutter on the section" (it sets 20px there), so we follow
	 * that rather than fight it with a second !important.
	 *
	 * Betheme's mobile content column is `max-width: 550px` centred, with 33px of
	 * inner padding. This reproduces that box exactly, without hardcoding a value
	 * per breakpoint: below 550px it resolves to a flat 33px, and above it adds
	 * the centring offset (e.g. 58px at a 600px viewport, matching the content).
	 *
	 * The 550px below is Betheme's mobile content width. If the client ever
	 * changes the site width in Theme Options, this is the one number to revisit.
	 */
	#mfn-header-template .mcb-section-03a36a30c {
		padding-left: max( 33px, calc( ( 100% - 550px ) / 2 + 33px ) );
		padding-right: max( 33px, calc( ( 100% - 550px ) / 2 + 33px ) );
	}

	#mfn-header-template .mcb-section-inner-03a36a30c > .mcb-wrap-aa536218a,
	#mfn-header-template .mcb-section-inner-03a36a30c > .mcb-wrap-ec3b2cd23 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	/* Row 2: cart sits left, search takes the remaining width. min-width:0 is
	   required or the search's intrinsic width would push the row wide again. */
	#mfn-header-template .mcb-wrap-ec3b2cd23 .mcb-wrap-inner {
		justify-content: flex-start;
	}

	#mfn-header-template .mcb-item-5kfn02rcn {
		flex: 1 1 auto;
		min-width: 0;
		width: auto;
	}

	#mfn-header-template .mcb-item-5kfn02rcn .dgwt-wcas-search-wrapp,
	#mfn-header-template .mcb-item-5kfn02rcn form {
		width: 100%;
		max-width: 100%;
		min-width: 0;
	}

	/* 200px of logo in a 390px viewport leaves no room for anything else. */
	#mfn-header-template .column_header_logo,
	#mfn-header-template .mcb-item-f06159a1e {
		width: 150px !important;
		max-width: 150px !important;
	}

	#mfn-header-template .column_header_logo img {
		width: 100%;
		height: auto;
	}
}

/* ------------------------------------------- category bar: never stack rows --
 *
 * THE BUG: the 9 top-level categories need ~1320px. Below that they wrapped —
 * two rows at 1024px, three at 600px, four at 390px, which inflated the header
 * from 180px to 302px tall and pushed the actual page content off the screen.
 *
 * FIX (tablet and mobile only): one row that scrolls horizontally. Wrapping is
 * left alone at >=960px, where two tidy rows are a reasonable outcome and
 * hiding desktop navigation behind a scroll would be worse.
 */
@media only screen and ( max-width: 959px ) {

	#mfn-header-template .mcb-wrap-liava77 .mfn-header-menu {
		flex-wrap: nowrap;
		justify-content: flex-start;
		overflow-x: auto;
		overflow-y: hidden;
		-webkit-overflow-scrolling: touch;
		/* Hide the scrollbar itself; the strip is obviously scrollable from the
		   clipped item at the edge, and a visible bar under the nav looks broken. */
		scrollbar-width: none;
		-ms-overflow-style: none;
		padding-left: 33px;
		padding-right: 33px;
	}

	#mfn-header-template .mcb-wrap-liava77 .mfn-header-menu::-webkit-scrollbar {
		display: none;
	}

	/* Items must not shrink, or they compress into unreadable slivers instead of
	   overflowing into the scroll area. */
	#mfn-header-template .mcb-wrap-liava77 .mfn-header-menu > li.mfn-menu-li {
		flex: 0 0 auto;
		white-space: nowrap;
	}

	/* A hover-triggered mega submenu is unusable on a touch device inside a
	   horizontally scrolling strip — it would open off-screen and trap the scroll.
	   Top-level categories remain tappable; the full tree is in the burger menu. */
	#mfn-header-template .mcb-wrap-liava77 .mfn-header-menu li.mfn-menu-li ul.mfn-submenu {
		display: none !important;
	}
}