/* MT single-line desktop header.
 *
 * mt-header.php renders .header-bottom (the menu row) INSIDE .header-middle > .container,
 * which is already display:flex; justify-content:space-between; flex-wrap:wrap.
 * That container therefore becomes: [ logo ][ menu ][ account + cart ].
 *
 * >= 1100px : one row. Menu grows into the gap and centres itself there.
 *             Stays expanded when the header sticks; the hamburger never appears.
 * 768-1099px: menu wraps onto its own row -> reproduces the stock two-row header,
 *             including the stock collapse-to-hamburger behaviour on scroll.
 * < 768px   : nothing here applies. .header-bottom is display:none via .hidden-phone
 *             and phones use the separate #group-icon-header slide-out menu.
 *
 * Measured on 2026-07-13: logo 150px + menu 829px + icons 90px = 1069px,
 * container inner width 1230px at desktop. Margins tighten from 35px to 20px
 * between 1100-1279px, where the container is narrower.
 */

/* ---------- >= 1100px: logo, menu and icons share one row ---------- */
@media only screen and (min-width: 1100px) {

	.ts-header .header-middle > .container > .header-bottom {
		flex: 1 1 auto;
		min-width: 0;
		margin: 0;
		padding: 0;
		border: 0;
		background: none;
	}

	/* Neutralise the nested .container: it is a flex item now, not a page column.
	   The single divider under the merged row comes from .header-middle's own border. */
	.ts-header .header-middle > .container > .header-bottom > .container {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 0;
		justify-content: center;
	}

	/* The theme gives .menu-wrapper flex:1 1 0%, so it would swallow the whole gap and
	   leave the menu left-aligned inside it. Shrink it to its content so the rule above
	   can actually centre it. */
	.ts-header .header-middle > .container > .header-bottom .menu-wrapper {
		flex: 0 1 auto;
	}

	/* Sticky: keep the full menu, never collapse to the hamburger.
	   Overrides .ts-header .is-sticky .header-bottom{display:none} (3 classes) with 5. */
	.ts-header .is-sticky .header-middle > .container > .header-bottom {
		display: block;
	}

	.ts-header .icon-menu-sticky-header,
	.sticky-wrapper.is-sticky .icon-menu-sticky-header {
		display: none !important;
	}
}

/* ---------- 1100-1279px: reclaim the theme's two-row gutters ----------
 * Below 1280px the theme adds 60px of logo padding-right and 60px of header-right
 * margin-left. That was sized for the stock TWO-ROW header, where the logo row is
 * mostly empty. On the merged one-line row those 120px are what push the menu over
 * the edge: the content itself is only ~1038px inside a 1084px container, but the
 * gutters take it to ~1158px, so .header-bottom wraps and the header jumps 97 -> 132px
 * (worse with the fallback font, which is ~40px wider than Outfit).
 * Dropping the gutters keeps the full 15px menu at 20px spacing and holds one row at
 * 1100/1200/1279 with the font loaded AND blocked.
 */
@media only screen and (min-width: 1100px) and (max-width: 1279px) {

	.ts-header .header-middle .logo-wrapper {
		padding-right: 0;
	}

	.ts-header .header-middle > .container > .header-right {
		margin-left: 0;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li,
	.ts-header .header-middle nav.main-menu > ul > li {
		margin-right: 20px;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li:last-child,
	.ts-header .header-middle nav.main-menu > ul > li:last-child {
		margin-right: 0;
	}
}

/* ---------- 768-1099px: wrap back to the stock two-row header ---------- */
@media only screen and (min-width: 768px) and (max-width: 1099px) {

	/* The menu row supplies its own bottom spacing below the wrap. */
	.ts-header .header-middle > .container {
		padding-bottom: 0;
	}

	/* ...but a stuck header has no menu row (it collapses), so it keeps its padding. */
	.ts-header .is-sticky .header-middle > .container {
		padding-bottom: 10px;
	}

	/* order:10 puts the menu after .header-right, so the icons stay on line 1
	   and only the menu wraps to line 2. */
	.ts-header .header-middle > .container > .header-bottom {
		flex: 1 0 100%;
		order: 10;
		margin: 26px 0 0;
		padding: 0;
		border: 0;
	}

	.ts-header .header-middle > .container > .header-bottom > .container {
		width: auto;
		max-width: none;
		margin: 0;
		padding: 13px 0;
	}
}

/* ---------- Phones (<768px): the burger opens the slide-out menu, not this row ----------
 * The theme's burger handler (druco/js/main.js:32) calls jQuery fadeIn() on .header-bottom,
 * which sets an inline display:block — only !important beats that. It was revealing the
 * DESKTOP menu row, which renders ~117px tall inside a 68px header, overflowing and
 * overlapping the page as a ragged 2-column grid.
 * mt-header.php redirects the tap to the bottom app bar's button, which opens
 * #group-icon-header — the real mobile menu (full sub-nav + Login/Register).
 */
@media only screen and (max-width: 767px) {

	.ts-header .header-middle > .container > .header-bottom {
		display: none !important;
	}
}

/* The burger is a phone-only control: from 768px up the menu row itself is on screen.
 * Customizer > Additional CSS forces it visible up to 768px; >=1100px is handled above. */
@media only screen and (min-width: 768px) and (max-width: 1099px) {

	/* Customizer > Additional CSS forces this visible up to 768px with !important and is
	   printed after this file, so a same-specificity rule would lose the tie. .ts-header is
	   an ancestor of .header-container, so this out-specifies it (4 classes vs 3). */
	.ts-header .header-container .icon-menu-sticky-header.hidden-phone {
		display: none !important;
	}
}

/* ---------- 768-1099px: taper the menu so it stays on ONE row ----------
 * Sizes chosen so the row survives the WORST case: the fallback font. Outfit loads with
 * font-display:swap, so first paint uses the fallback, whose glyphs are wider (the menu
 * measures 645px instead of 609px at 768px). Tuning against Outfit alone left the row one
 * or two pixels from wrapping, so it painted as two rows (183px) and snapped to one (153px)
 * once the font arrived — a visible header jump. Every value below was verified to hold at
 * one row both with the font loaded AND with it blocked.
 */
@media only screen and (min-width: 1000px) and (max-width: 1099px) {

	.ts-header .header-middle nav.main-menu > ul.menu > li,
	.ts-header .header-middle nav.main-menu > ul > li {
		margin-right: 25px;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li:last-child,
	.ts-header .header-middle nav.main-menu > ul > li:last-child {
		margin-right: 0;
	}
}

@media only screen and (min-width: 860px) and (max-width: 999px) {

	.ts-header .header-middle nav.main-menu > ul.menu > li,
	.ts-header .header-middle nav.main-menu > ul > li {
		margin-right: 20px;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li:last-child,
	.ts-header .header-middle nav.main-menu > ul > li:last-child {
		margin-right: 0;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li > a,
	.ts-header .header-middle nav.main-menu > ul > li > a {
		font-size: 14px;
	}
}

@media only screen and (min-width: 820px) and (max-width: 859px) {

	.ts-header .header-middle nav.main-menu > ul.menu > li,
	.ts-header .header-middle nav.main-menu > ul > li {
		margin-right: 16px;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li:last-child,
	.ts-header .header-middle nav.main-menu > ul > li:last-child {
		margin-right: 0;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li > a,
	.ts-header .header-middle nav.main-menu > ul > li > a {
		font-size: 13px;
	}
}

@media only screen and (min-width: 768px) and (max-width: 819px) {

	.ts-header .header-middle nav.main-menu > ul.menu > li,
	.ts-header .header-middle nav.main-menu > ul > li {
		margin-right: 12px;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li:last-child,
	.ts-header .header-middle nav.main-menu > ul > li:last-child {
		margin-right: 0;
	}

	.ts-header .header-middle nav.main-menu > ul.menu > li > a,
	.ts-header .header-middle nav.main-menu > ul > li > a {
		font-size: 13px;
	}
}