/* site-header, nav-dropdown, mobile-drawer — README §1, §2, §"Interactions" */

.site-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background: var(--color-white);
	border-bottom: 1px solid var(--color-line);
}

.site-header__inner {
	/* Stays at the same 1200px column as every other section — widening
	   just the header looked wrong (logo ended up 100px+ left of the hero
	   content directly below it). Fits via trimmed gaps + hiding the phone
	   number until a genuinely spacious width instead (see below). */
	max-width: var(--container-max);
	margin-inline: auto;
	padding-inline: var(--gutter-desktop);
	height: 92px;
	display: flex;
	align-items: center;
	gap: 24px;
	transition: height var(--transition-fast);
}
.site-header.is-compact .site-header__inner { height: 64px; }

.site-header__logo {
	/* Flex items shrink by default; nowrap text inside a shrunk box just
	   overflows into whatever's next — that's the collision bug. Logo never
	   shrinks; the nav (flex:1, already flex:none on its own items) absorbs
	   the space pressure instead. */
	flex: none;
}
.site-header__logo a {
	display: flex;
	align-items: center;
	gap: 10px;
	text-decoration: none;
}
.site-header__logo img {
	height: 60px;
	width: auto;
	flex: none;
	transition: height var(--transition-fast);
}
.site-header.is-compact .site-header__logo img { height: 44px; }
.site-header__wordmark {
	/* Icon-only at true mobile — logo + wordmark + Request a Bid + hamburger
	   is too much for 375px; the wordmark still lives in the footer/title. */
	display: none;
	font-family: var(--font-heading);
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.01em;
	color: var(--color-ink);
	white-space: nowrap;
}
@media (min-width: 768px) {
	.site-header__wordmark { display: inline-block; }
}

.primary-nav {
	flex: 1;
	display: flex;
	align-items: center;
	gap: 22px;
}
.primary-nav__list {
	display: flex;
	align-items: center;
	gap: 22px;
}
.primary-nav__item { position: relative; flex: none; }
.primary-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 4px;
	font-family: var(--font-body);
	font-weight: 600;
	font-size: 15px;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
	padding-bottom: 3px;
	border-bottom: 2px solid transparent;
	transition: var(--transition-fast);
	transition-property: color;
}
.primary-nav__link:hover,
.primary-nav__link:focus-visible { color: var(--color-accent); }
.primary-nav__item.current-menu-item > .primary-nav__link,
.primary-nav__item.current-menu-ancestor > .primary-nav__link {
	border-bottom-color: var(--color-primary);
}
.primary-nav__chevron { width: 10px; height: 10px; flex: none; }

.site-header__right {
	display: flex;
	align-items: center;
	gap: 16px;
	flex: none;
}
.site-header__phone {
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 15px;
	color: var(--color-ink);
	text-decoration: none;
	white-space: nowrap;
}
.site-header__phone:hover,
.site-header__phone:focus-visible { color: var(--color-accent); }
.site-header .btn-primary { font-size: 15px; padding: 15px 24px; white-space: nowrap; }

/* Dropdown */
.nav-dropdown {
	position: absolute;
	left: -20px;
	top: 100%;
	min-width: 300px;
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-top: 3px solid var(--color-primary);
	box-shadow: 0 20px 44px rgba(0, 0, 0, 0.16);
	padding: var(--space-8);
	margin: 0;
	display: none;
}
.primary-nav__item.is-open .nav-dropdown,
.primary-nav__item:hover .nav-dropdown,
.primary-nav__item:focus-within .nav-dropdown { display: block; }

.nav-dropdown__item + .nav-dropdown__item { margin-top: 2px; }
.nav-dropdown__link {
	display: block;
	padding: 12px 14px;
	font-family: var(--font-body);
	font-weight: 500;
	font-size: 15px;
	color: var(--color-ink);
	text-decoration: none;
	border-radius: var(--radius);
	transition: var(--transition-fast);
	transition-property: color, background-color;
}
.nav-dropdown__link:hover,
.nav-dropdown__link:focus-visible {
	background: var(--color-tint);
	color: var(--color-accent);
}

/* Hamburger (mobile only) */
.menu-toggle {
	display: none;
	width: 48px;
	height: 48px;
	align-items: center;
	justify-content: center;
	background: var(--color-white);
	border: 1px solid var(--color-line);
	border-radius: var(--radius);
	cursor: pointer;
	padding: 0;
}
.menu-toggle__bars {
	display: flex;
	flex-direction: column;
	gap: 6px;
}
.menu-toggle__bars span {
	display: block;
	width: 20px;
	height: 2px;
	background: var(--color-ink);
}

/* Mobile drawer */
.mobile-drawer {
	display: none;
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--color-white);
	box-shadow: 0 20px 40px rgba(0, 0, 0, 0.14);
	z-index: 99;
}
.mobile-drawer.is-open { display: block; }
.mobile-drawer__list { margin: 0; }
.mobile-drawer__item { border-bottom: 1px solid var(--color-line); }
.mobile-drawer__link {
	display: block;
	padding: 16px 20px;
	font-family: var(--font-heading);
	font-weight: 700;
	font-size: 17px;
	color: var(--color-ink);
	text-decoration: none;
}
.mobile-drawer__sublist { margin: 0 0 12px; }
.mobile-drawer__sublink {
	display: flex;
	align-items: center;
	min-height: 52px;
	padding: 10px 20px 10px 38px;
	font-family: var(--font-body);
	font-weight: 400;
	font-size: 16px;
	color: #3D3D3D;
	text-decoration: none;
}

/*
 * README's own breakpoints say the full desktop nav holds down to 768px
 * and only <768 switches to the hamburger. Measured in a real browser, it
 * doesn't: 6 nav items + phone + button don't fit below ~1200px and cause
 * real horizontal page overflow, not just visual crowding — first found at
 * <1024 (fixed then), and measured again at exactly 176px short at 1024px
 * once the logo grew a wordmark. Rather than keep chasing the exact pixel
 * floor, the hamburger breakpoint now matches 1279 — the same tablet-tier
 * boundary already used everywhere else in this file — with real margin
 * above the measured ~1200px requirement. The phone number drops from this
 * tier; Request a Bid stays so there's still a primary CTA.
 */
@media (max-width: 1279px) {
	.site-header__inner { padding-inline: var(--gutter-tablet); }
	.primary-nav,
	.site-header__phone { display: none; }
	.menu-toggle { display: flex; }
}

/*
 * Even with the nav visible again (≥1280) and gaps trimmed, logo+wordmark
 * + 6 nav items + phone + button still doesn't fit within the 1200px
 * column's 960px content area — measured short. Phone stays hidden a bit
 * further; it's still reachable via the button, the bid-CTA band, and the
 * footer on every page. Reappears once there's genuine room for it.
 */
@media (min-width: 1280px) and (max-width: 1399px) {
	.site-header__phone { display: none; }
}

@media (max-width: 767px) {
	.site-header__inner,
	.site-header.is-compact .site-header__inner {
		height: 68px;
		padding-inline: var(--gutter-mobile);
	}
	.site-header__logo img,
	.site-header.is-compact .site-header__logo img { height: 44px; }
}