/*
 * Guanjie final header fixes.
 * This file intentionally affects the header only.
 */

.gj-site-header {
	width: 100%;
	background: #fff;
}

.gj-site-header .gj-container {
	width: min(calc(100% - 32px), 1440px);
}

.gj-header-inner {
	display: grid;
	grid-template-columns: minmax(170px, 220px) minmax(0, 1fr) auto;
	align-items: center;
	gap: clamp(12px, 1.5vw, 24px);
	min-height: 96px;
}

.gj-brand,
.gj-brand-link {
	min-width: 0;
}

.gj-brand-link {
	display: inline-flex;
	align-items: center;
	height: 100%;
}

.gj-brand-logo,
.gj-brand .gsbp-managed-image {
	display: block;
	width: auto;
	max-width: 220px;
	height: 72px;
	object-fit: contain;
	object-position: left center;
}

.gj-primary-nav {
	min-width: 0;
}

.gj-primary-menu {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: clamp(9px, 1vw, 18px);
}

.gj-primary-menu > li > a {
	min-height: 96px;
	font-size: clamp(9px, .72vw, 12px);
}

/* The menu importer contains the same RFQ destination as the dedicated
 * right-side CTA. Hide only that duplicate menu item in the header. */
.gj-primary-menu .menu-item-rfq {
	display: none !important;
}

.gj-button--header {
	display: inline-flex;
	flex: 0 0 auto;
	white-space: nowrap;
}

/* Desktop: one row, no mobile toggle. */
@media (min-width: 1025px) {
	.gj-menu-toggle {
		display: none !important;
	}

	.gj-primary-nav {
		position: static;
		display: block !important;
		max-height: none;
		overflow: visible;
		border: 0;
		background: transparent;
		box-shadow: none;
	}
}

/* Tablet and mobile: navigation is controlled by the hamburger. */
@media (max-width: 1024px) {
	.gj-header-inner {
		grid-template-columns: minmax(150px, 1fr) auto auto;
		min-height: 84px;
	}

	.gj-brand-logo,
	.gj-brand .gsbp-managed-image {
		max-width: 190px;
		height: 60px;
	}

	.gj-menu-toggle {
		display: block !important;
	}

	.gj-primary-nav {
		position: absolute;
		top: 100%;
		right: 16px;
		left: 16px;
		display: none;
		max-height: calc(100vh - 100px);
		overflow: auto;
		border-top: 3px solid #f97316;
		background: #fff;
		box-shadow: 0 12px 32px rgba(8, 53, 40, .12);
	}

	.gj-primary-nav.is-open {
		display: block;
	}

	.gj-primary-menu {
		display: block;
		padding: 12px 20px 20px;
	}

	.gj-primary-menu > li > a {
		min-height: 44px;
		font-size: 12px;
	}
}

@media (max-width: 768px) {
	.gj-header-inner {
		grid-template-columns: minmax(110px, 1fr) auto;
		min-height: 72px;
		gap: 10px;
	}

	.gj-brand-logo,
	.gj-brand .gsbp-managed-image {
		max-width: 155px;
		height: 48px;
	}

	.gj-menu-toggle {
		grid-column: 2;
	}

	.gj-button--header {
		display: none;
	}
}