/**
 * Site header (Astra header builder, desktop layout from 922px).
 *
 * Loaded on every front-end page (inc/enqueue.php → hengrui_enqueue_site_header).
 * Goal: the primary menu stays on one line from 1024px up and the WhatsApp button
 * (Header Button 1) is never squeezed. Astra's own grid gives the right column only
 * what is left over, so with 7–8 menu items the button collapsed to ~32px and the
 * menu wrapped to two lines.
 *
 * Content changes that live in Astra / WordPress settings, not here (DEPLOY-RUNBOOK step 5):
 * button text "WhatsApp". With Home back as the first item (2026-11-06) the eight top-level items
 * still fit on one line from 1024px.
 */

@media (min-width: 922px) {
	/* Logo and button take their natural width; the menu column gets the rest. */
	#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row {
		grid-template-columns: auto minmax(0, 1fr) auto;
		column-gap: 24px;
	}

	#ast-desktop-header .site-header-primary-section-center {
		justify-content: center;
		min-width: 0;
	}

	#ast-desktop-header .main-header-menu {
		flex-wrap: nowrap;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 14px;
		padding-right: 14px;
		font-size: 15px;
		white-space: nowrap;
	}

	#ast-desktop-header .site-header-primary-section-right,
	#ast-desktop-header .ast-header-button-1,
	#ast-desktop-header .ast-header-button-1 .ast-custom-button {
		flex-shrink: 0;
		white-space: nowrap;
	}

	#ast-desktop-header .ast-header-button-1 .ast-custom-button {
		padding: 10px 18px;
	}
}

/* Widths below are tuned so the eight top-level items fit their column with at least 16px to the
   logo and to the button (tools/playwright/menufit.js): 1440+ 15px type / 10px padding. */
@media (min-width: 922px) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 10px;
		padding-right: 10px;
	}
}

/* 1200–1439px: side gutter, smaller logo, 14px type. */
@media (min-width: 922px) and (max-width: 1439px) {
	#ast-desktop-header .site-primary-header-wrap {
		padding-left: 20px;
		padding-right: 20px;
	}

	#ast-desktop-header .custom-logo {
		max-width: 240px;
		height: auto;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 9px;
		padding-right: 9px;
		font-size: 14px;
	}
}

@media (min-width: 922px) and (max-width: 1279px) {
	#ast-desktop-header .custom-logo {
		max-width: 200px;
	}
}

/* 1024–1199px: smallest logo, 13px type, tighter gaps and button. */
@media (min-width: 922px) and (max-width: 1199px) {
	#ast-desktop-header .custom-logo {
		max-width: 160px;
	}

	#ast-desktop-header .ast-primary-header-bar .ast-builder-grid-row {
		column-gap: 16px;
	}

	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 6px;
		padding-right: 6px;
		font-size: 13px;
	}

	#ast-desktop-header .ast-header-button-1 .ast-custom-button {
		padding: 8px 12px;
	}
}

@media (min-width: 922px) and (max-width: 1099px) {
	#ast-desktop-header .main-header-menu > .menu-item > .menu-link {
		padding-left: 5px;
		padding-right: 5px;
	}
}

/* 922–1023px (small laptops, tablets in landscape): let the menu wrap rather than overflow. */
@media (min-width: 922px) and (max-width: 1023px) {
	#ast-desktop-header .main-header-menu {
		flex-wrap: wrap;
		justify-content: center;
	}
}