/* header.css — one row: mark, navigation, contact.

   REBUILT 2026-09-09. It used to be two tiers — a mark and utility row, then a
   separate centred navigation row on a tinted ground. That cost about 145px of
   vertical space before any content, put the navigation in the middle of a 1440px
   field where it aligned with nothing, and made the mark look incidental.

   header.php was restructured to match: the nav now sits inside the bar's container
   between the mark and the utility group, so this is a single flex row.

   Sticky, because the pages are long and the only conversion on the site is a phone
   call or a form. */

.gnt-header {
	position: sticky;
	top: 0;
	z-index: 100;
	background-color: var(--color-surface-page);
	border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
}

.gnt-header__bar .gnt-container {
	display: flex;
	align-items: center;
	gap: var(--space-8);
	min-height: 5rem;
	padding-block: var(--space-3);
}

/* ------------------------------------------------------------------- the mark */

/* The supplied logo is a 1.14:1 circular monogram. There is still no horizontal
   lockup and no SVG — both are outstanding in docs/MISSING-CONTENT.md — so it is
   sized by height and left to find its own width. At 52px the "GNT" reads and the
   smaller "ASSOCIATES" beneath it does not; a proper lockup would fix that and
   nothing in CSS can. */
.gnt-header__logo {
	flex: 0 0 auto;
	display: block;
}

.gnt-header__logo img {
	display: block;
	height: 3.25rem;
	width: auto;
}

/* ------------------------------------------------------------- navigation */

.gnt-header__nav {
	flex: 1 1 auto;
	min-width: 0;
}

.gnt-header__menu {
	display: flex;
	align-items: center;
	/* Column gap is the row's rhythm; row gap only applies once it wraps, and 28px of
	   vertical space between two nav lines reads as two separate rows rather than one
	   wrapped one. */
	gap: var(--space-3) var(--space-7);
	margin: 0;
	padding: 0;
	list-style: none;

	/* WRAP RATHER THAN COLLIDE. Added 2026-09-11 with the seventh top-level item.
	   MEASURED on staging, not reasoned about: the seven labels need 808px of row, and
	   the nav's flex-assigned box is capped at 739px because .gnt-container maxes out at
	   1200px. Without this the <li>s overflowed their own <ul> and printed straight over
	   the phone number between 1025px and about 1105px — 78px of overlap at 1025px,
	   which is just above the 1024px collapse and squarely in laptop territory.

	   bin/check-responsive.mjs did NOT catch it and could not: the overflow is contained
	   inside the header and never widens the document, so scrollWidth stayed equal to
	   innerWidth at every width it tests. It took measuring the last item's right edge
	   against the phone link's left edge to see it at all.

	   On its own this was NOT enough, and the first attempt at it was wrong: wrapping
	   inside a 739px box put "Insights" alone on a second line at 1440px too, which
	   looked broken at the width most visitors use. The row only actually fits once the
	   utility group stops claiming width it does not use -- see the media query below
	   .gnt-header__utility, which is the real fix.

	   This stays as the degradation guard beneath it. Seven items sit on ONE line from
	   1200px up; between 1025px and 1199px the row becomes two lines instead of
	   unreadable overlap, and an eighth item will wrap rather than collide. */
	flex-wrap: wrap;
}

.gnt-header__menu > li {
	position: relative;
	margin: 0;
}

.gnt-header__menu a {
	display: inline-block;
	padding-block: var(--space-2);
	font-size: var(--text-nav);
	line-height: var(--text-nav-lh);
	font-weight: var(--font-weight-medium);
	color: var(--ink-700);
	text-decoration: none;
	white-space: nowrap;
	border-bottom: var(--border-width-thick) solid transparent;
	transition:
		color var(--duration-base) var(--easing-standard),
		border-color var(--duration-base) var(--easing-standard);
}

.gnt-header__menu a:hover {
	color: var(--blue-600);
	border-bottom-color: var(--color-accent-rule);
}

/* The page you are on. WordPress supplies these classes on a real assigned menu. */
.gnt-header__menu .current-menu-item > a,
.gnt-header__menu .current_page_item > a {
	color: var(--blue-600);
	border-bottom-color: var(--blue-600);
}

/* Second-level items. depth is 2 in header.php, and the content plan collapses ten
   pages into six slots, so the dropdowns are load-bearing rather than decorative. */
.gnt-header__menu .sub-menu {
	position: absolute;
	top: 100%;
	left: calc(var(--space-4) * -1);
	z-index: 10;
	min-width: 14rem;
	margin: 0;
	padding: var(--space-3) 0;
	list-style: none;
	background-color: var(--color-surface-page);
	border: var(--border-width-thin) solid var(--color-border-subtle);
	border-radius: var(--radius-sm);
	box-shadow: var(--shadow-lg);
	opacity: 0;
	visibility: hidden;
	transition: opacity var(--duration-fast) var(--easing-standard);
}

.gnt-header__menu > li:hover > .sub-menu,
.gnt-header__menu > li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
}

.gnt-header__menu .sub-menu a {
	display: block;
	padding: var(--space-2) var(--space-4);
	border-bottom: 0;
	white-space: normal;
}

.gnt-header__caret {
	margin-left: var(--space-1);
}

/* ---------------------------------------------------------------- utility */

.gnt-header__utility {
	/* min-width:0 and wrap together are what stop this group forcing the document
	   wider than the viewport. It holds three controls and cannot be allowed to
	   establish the page's minimum width. */
	flex: 1 1 auto;
	min-width: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: var(--space-3) var(--space-5);
}

/* THE NAV ROW'S REAL CONSTRAINT, found by measurement 2026-09-11.

   Above the collapse breakpoint this group renders as phone-above-button, but it was
   only doing that by ACCIDENT: flex-wrap let it wrap once flex had shrunk it. Its
   intrinsic width was still max-content — phone and button side by side, 316px — and
   flex sizes siblings from their intrinsic widths before any wrapping happens. So the
   group claimed 316px, was shrunk to 289px, and used 156px of it. The 133px it was
   sitting on is the space the seven-item nav needed: the nav wanted 808px, got 739px,
   and its items overflowed their own <ul> to print over the phone number.

   Declaring the stack explicitly drops the group's intrinsic width to the phone's
   156px and hands the difference to the nav, which is the element that actually has
   something to put there. MEASURED after the change: nav 817px at 1440px and 840px at
   1280px, seven items on one line, +178px and +97px clearance.

   Scoped above 1024px on purpose. Below it the group holds phone, toggle and button in
   a row and stacking them would make the mobile header three rows tall for no reason;
   verified unchanged at 81px at both 1024px and 767px. */
@media (min-width: 1025px) {
	.gnt-header__utility {
		flex-direction: column;
		align-items: flex-end;
		justify-content: center;
	}
}

.gnt-header__phone {
	display: inline-flex;
	align-items: center;
	/* Measured at 320 and 390px on 2026-09-10: 143x23, one pixel under the 24px
	   WCAG 2.2 SC 2.5.8 floor. On a phone this is the tap that places the call, so it
	   gets the floor rather than an argument about the exemptions. Hit area only --
	   the text does not move, because the row is centred either way. */
	min-height: 24px;
	gap: var(--space-2);
	color: var(--color-text-body);
	font-size: var(--text-body);
	line-height: var(--text-body-lh);
	font-weight: var(--font-weight-medium);
	text-decoration: none;
	white-space: nowrap;
}

.gnt-header__phone:hover { color: var(--blue-600); }

.gnt-header__phone svg {
	width: 1.125rem;
	height: 1.125rem;
	flex: 0 0 auto;
}

/* Desktop hides the toggle; the nav is a plain row until the breakpoint. */
.gnt-header__toggle { display: none; }

/* -------------------------------------------------------------- responsive */
/* 1024 and 767 are Elementor's kit breakpoints, written by bin/apply-content.php, so
   the builder's responsive preview agrees with this file. This was 980 until
   2026-09-09 — Divi's nav collapse, inherited with no design authority of its own.
   Do not change one without the other. */

@media (max-width: 1024px) {
	.gnt-header__bar .gnt-container {
		gap: var(--space-4);
		flex-wrap: wrap;
	}

	.gnt-header__toggle {
		display: inline-flex;
		align-items: center;
		gap: var(--space-2);
		min-height: 2.75rem;
		padding: var(--space-2) var(--space-4);
		font-family: var(--font-body);
		font-size: var(--text-body);
		font-weight: var(--font-weight-semibold);
		color: var(--color-text-body);
		background-color: transparent;
		border: var(--border-width-thin) solid var(--color-border-strong);
		border-radius: var(--radius-sm);
		cursor: pointer;
	}

	/* The nav leaves the row and becomes a panel below it. order:3 puts it after the
	   utility group, which stays on the first line beside the mark. */
	.gnt-header__nav {
		order: 3;
		flex: 1 0 100%;
		display: none;
		padding-block: var(--space-2) var(--space-4);
		border-top: var(--border-width-thin) solid var(--color-border-subtle);
	}

	.gnt-header__nav.is-open { display: block; }

	.gnt-header__menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	.gnt-header__menu a {
		padding-block: var(--space-3);
		border-bottom: var(--border-width-thin) solid var(--color-border-subtle);
	}

	.gnt-header__menu a:hover { border-bottom-color: var(--color-border-subtle); }

	/* No hover dropdowns on touch: sub-items are always shown, indented. */
	.gnt-header__menu .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		min-width: 0;
		margin: 0;
		padding: 0 0 0 var(--space-5);
		border: 0;
		border-radius: 0;
		box-shadow: none;
	}

	.gnt-header__caret { display: none; }
}

@media (max-width: 600px) {
	/* The phone number is the most valuable control on the page for this audience, so
	   the Contact button gives way first — the nav still reaches /contact/, and the
	   page's own calls to action are a few hundred pixels below. Measured at 390px:
	   phone + toggle + button is about 410px of content in a 350px container. */
	.gnt-header__utility .gnt-btn { display: none; }
}

@media (max-width: 479px) {
	.gnt-header__logo img { height: 2.5rem; }

	.gnt-header__phone span {
		/* Keep the number, drop nothing else. */
		font-size: var(--text-body-sm);
	}
}