/**
 * Site header / primary navigation.
 *
 * Geometry is the comps' (docs/qa/comp-spec/SPEC-*.md, section S00 --
 * identical on all five pages, 1 unit = 1 CSS px at 1440):
 *
 *   lockup   137.2 x 33.8 at (29.9, 26.2)
 *   links    12px Montserrat Regular, uppercase, on the CTA label's line
 *   CTA box  168.7 x 37.6 at (1241.2, 26.2), 1.5px stroke, arrow after
 *   rule     0.75px from x=29.3 to 1409.8 at y=78.3
 *
 * So the bar is 78px tall: a 26px top offset, a 38px row the lockup and
 * the CTA box share (the lockup sits at the row's top, the links centre
 * on the CTA's label), 14px of air, then the rule. Those four numbers
 * are comp coordinates, not rhythm values, so they are named as custom
 * properties on .site-header rather than borrowed from the spacing
 * scale, and a reviewer can check each against the spec line above.
 *
 * Two looks from one markup. body.has-hero (inc/menus.php: the page's
 * first block is sigma/hero) takes the bar out of flow and lays it over
 * the hero photograph, transparent, in white -- every comp draws the nav
 * inside the hero band, and blocks/hero/style.css reserves the top 78px
 * for it (--hero-nav-reserve). Without that class the bar stays in flow:
 * white, navy type, the navy lockup, the same geometry.
 *
 * Breakpoint: the links fold into the hamburger below 1280px. Measured,
 * not chosen. It was 1810 while the bar carried NINE top-level items,
 * which is what made a 1440 laptop show the mobile header -- the thing
 * Scot was asked about on 19 September.
 *
 * He answered by restructuring the menu rather than by shortening it:
 * five top-level items, with Request a Business Valuation, Exit
 * Readiness and The Sigma Sales Process moved under Sell Your Business,
 * and Contact Us under About Us. No label is reworded and the CTA keeps
 * its full 321px box -- the shorter label in his own mockup was retired
 * on purpose, so the mockup is not a safe source for it.
 *
 * Re-measured at 1920 with the five items in place: branding 156, nav
 * 592, CTA 321, two 24px column gaps and 2x30px gutters, so the row
 * needs 1177px. 1280 is the next standard step above that and leaves
 * about a hundred pixels of slack for a longer label later; 1200 would
 * fit today and have almost none. Nowrap is still deliberate, and the
 * density finding below still stands (the comp has six links). From
 * 768 up the CTA box stays in the bar next to the hamburger so the
 * comp's right-hand box survives the fold; below 768 it moves into the
 * panel as a full-width row.
 *
 * Grid, not flex: the nav element is a row item at >= 1750 and a
 * full-width panel under the rule below it, and grid-template-areas lets
 * one element move between the two without a second copy of the menu.
 *
 * Uses the CONVENTIONS.md custom-property names throughout; this file is
 * enqueued by inc/assets.php's glob after tokens.css and base.css.
 */

.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.site-header {
	/* Comp coordinates -- see the header comment. */
	--nav-top: 26px;
	--nav-row: 38px;
	--nav-rule-gap: 14px;
	--nav-gutter: 30px;
	--nav-rule-weight: 0.75px;
	--nav-lockup-width: 137px;
	--nav-cta-min-width: 169px;

	position: relative;
	z-index: 30;
	background-color: var(--color-white);
	color: var(--color-navy);
}

/* Over the hero: out of flow, transparent, white. The hero band starts
   at y=0 underneath and the bar adds no height above it. */
.has-hero .site-header {
	position: absolute;
	top: 0;
	right: 0;
	left: 0;
	background-color: transparent;
	color: var(--color-white);
}

.site-header__inner {
	display: grid;
	grid-template-columns: auto 1fr auto auto;
	grid-template-rows: var(--nav-row) auto auto;
	grid-template-areas:
		"brand nav toggle cta"
		"rule  rule rule  rule"
		"panel panel panel panel";
	align-items: center;
	column-gap: var(--space-md);
	padding: var(--nav-top) var(--nav-gutter) 0;
}

/* The comp's rule: its own grid row, so the panel below 1750 opens
   underneath it rather than pushing it down. currentColor makes it
   white over the hero and navy on a white bar without a second rule. */
.site-header__inner::after {
	content: "";
	grid-area: rule;
	height: 0;
	margin-top: var(--nav-rule-gap);
	border-top: var(--nav-rule-weight) solid currentColor;
}

.site-branding {
	grid-area: brand;
	/* The lockup's top edge is the row's top edge in the comp (both at
	   y=26.2); the CTA box is 3.8px taller and the links centre on it. */
	align-self: start;
}

.site-branding__link {
	position: relative;
	display: block;
	color: inherit;
	text-decoration: none;
}

/*
 * The lockup is 38px tall, so the "go home" tap target was 6px under the
 * 44px floor on every page at every touch width. The hit area grows with
 * a pseudo-element rather than with padding or flex centring: the comp
 * puts this lockup at y=26.2 (SPEC-home S00 IMAGE) and we are on it to
 * within a pixel, and min-height plus align-items pushed it to 29 -- a
 * 3px drift from the drawing bought for 6px of thumb. Same technique the
 * office card already uses on its tel: link.
 */
.site-branding__link::after {
	content: '';
	position: absolute;
	inset: -4px 0;
}

.site-branding__logo {
	display: block;
	width: var(--nav-lockup-width);
	height: auto;
}

/* The comp's lockup ships as two PNGs with real alpha (extracted from the
   PDFs with their soft masks applied): logo-white.png over the hero
   photograph, logo-navy.png on white. Sized by height so the 500x122
   artwork keeps its ratio at any bar height. Scoped under .site-header so a
   plugin's "img:not([draggable]) { height: auto }" (0,1,1) on the Elementor-built
   listing pages cannot blow the logo up to its 913px artwork. */
.site-header .site-branding__logo {
	display: block;
	width: auto;
	height: var(--nav-row, 38px);
}

/* Hamburger toggle -- hidden from 1280 up, a real <button> at every
   width. 44px square for the tap target; it overflows the 38px row by
   3px each side, well inside the 78px bar. No border: the comp has no
   such control, and a boxed one read as a second CTA next to the real
   one. */
.nav-toggle {
	grid-area: toggle;
	display: none;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 2.75rem;
	height: 2.75rem;
	padding: 0;
	background: transparent;
	border: 0;
	border-radius: var(--radius-none);
	color: inherit;
	cursor: pointer;
}

.nav-toggle__bars,
.nav-toggle__bars::before,
.nav-toggle__bars::after {
	display: block;
	width: 1.375rem;
	height: 1.5px;
	background-color: currentColor;
}

.nav-toggle__bars {
	position: relative;
}

.nav-toggle__bars::before,
.nav-toggle__bars::after {
	content: '';
	position: absolute;
	left: 0;
}

.nav-toggle__bars::before {
	top: -7px;
}

.nav-toggle__bars::after {
	top: 7px;
}

.nav-toggle:focus-visible,
.nav-link:focus-visible,
.nav-link--toggle:focus-visible,
.nav-caret:focus-visible,
.nav-cta:focus-visible,
.site-branding__link:focus-visible {
	outline: none;
	box-shadow: var(--shadow-focus);
}

/* Over the photograph the navy focus ring is invisible; a white one is
   the same ring in the bar's own colour. */
.has-hero .site-header :focus-visible {
	box-shadow: 0 0 0 3px rgba(255, 255, 255, 0.6);
}

.primary-navigation {
	grid-area: nav;
	justify-self: end;
}

.primary-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: var(--space-sm);
}

.menu-item {
	position: relative;
}

.nav-link,
.nav-link--toggle {
	display: inline-block;
	background: transparent;
	border: none;
	padding: var(--space-xs) 0;
	font-family: var(--font-sans);
	font-size: var(--text-nav-label);
	font-weight: var(--weight-sans-regular);
	line-height: var(--leading-ui);
	letter-spacing: var(--tracking-nav-label);
	text-transform: uppercase;
	text-decoration: none;
	text-align: left;
	white-space: nowrap;
	color: inherit;
	cursor: pointer;
}

.nav-link:hover,
.nav-link--toggle:hover {
	text-decoration: underline;
	text-underline-offset: 0.35em;
}

.menu-item--has-dropdown {
	display: flex;
	align-items: center;
	gap: var(--space-xs);
}

.nav-caret {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--space-md);
	height: var(--space-md);
	padding: 0;
	background: transparent;
	border: none;
	color: inherit;
	cursor: pointer;
}

.nav-caret__icon {
	width: 0.625rem;
	height: var(--space-xs);
}

.menu-item--has-dropdown.is-open .nav-caret__icon {
	transform: rotate(180deg);
}

/*
 * The CTA box. The comp's is 168.7 x 37.6 around an 18-character label;
 * the approved label here is 31 characters, so the box keeps the comp's
 * height, padding and minimum width and grows to fit -- the alternative
 * is a two-line label in a 38px box. Border and text share one colour:
 * white over the hero, navy on a white bar, with the comp's bright gold
 * stroke on light backgrounds (S02 BOX stroke #eb9213).
 */
.nav-cta {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--space-xs);
	box-sizing: border-box;
	min-width: var(--nav-cta-min-width);
	height: var(--nav-row);
	padding: 0 1.125rem;
	background-color: transparent;
	color: var(--color-navy);
	border: 1.5px solid var(--color-gold-bright);
	border-radius: var(--radius-none);
	font-family: var(--font-sans);
	font-size: var(--text-nav-label);
	font-weight: var(--weight-sans-regular);
	letter-spacing: var(--tracking-nav-label);
	line-height: var(--leading-ui);
	text-transform: uppercase;
	text-decoration: none;
	white-space: nowrap;
}

.nav-cta:hover {
	background-color: var(--color-gold-bright);
	color: var(--color-white);
}

.has-hero .nav-cta {
	color: inherit;
	border-color: currentColor;
}

.has-hero .nav-cta:hover {
	background-color: var(--color-white);
	color: var(--color-navy);
}

.nav-cta--bar {
	grid-area: cta;
}

/* The comp's arrow: 10px shaft, 3 x 4.5 open head, 1.5px stroke. */
.nav-cta__arrow {
	flex: none;
	width: 0.75rem;
	height: 0.375rem;
}

/* The panel's copy of the CTA exists for phones only (see header.php). */
.nav-cta--panel {
	display: none;
}

/* Sub-menus: closed by default at every width, opened by nav.js toggling
   aria-expanded + .is-open on click (mouse or touch -- both fire
   'click', so this is not a hover-only pattern). */
.sub-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
}

.menu-item.is-open > .sub-menu {
	display: block;
}

@media (min-width: 1280px) {
	.nav-toggle {
		display: none !important;
	}

	.primary-navigation {
		display: flex;
		align-items: center;
		gap: var(--space-sm);
	}

	.menu-item--has-dropdown {
		position: relative;
	}

	/* A white card on either bar -- over the photograph it is the one
	   thing that keeps twelve-pixel labels legible, so its own navy text
	   colour is set here rather than inherited from the white bar. */
	.menu-item--has-dropdown .sub-menu {
		position: absolute;
		top: 100%;
		left: 0;
		z-index: 20;
		min-width: 15rem;
		margin-top: var(--space-xs);
		padding: var(--space-xs) 0;
		background-color: var(--color-white);
		color: var(--color-navy);
		border: 1px solid var(--color-border);
	}

	.sub-menu .menu-item {
		display: block;
	}

	.sub-menu .nav-link {
		display: block;
		padding: var(--space-xs) var(--space-sm);
		white-space: nowrap;
	}
}

@media (max-width: 1279px) {
	.nav-toggle {
		display: inline-flex;
	}

	/* The links leave the row and become the panel under the rule. The
	   negative inline margin pulls the panel's background out to the
	   viewport edges (the inner has the 30px gutter), so over the hero it
	   reads as a solid sheet rather than a strip with photo either side. */
	.primary-navigation {
		grid-area: panel;
		justify-self: stretch;
		display: none;
		box-sizing: border-box;
		margin-inline: calc(-1 * var(--nav-gutter));
		padding: var(--space-md) var(--nav-gutter);
		/* Nine rows plus the CTA is ~520px; on a short phone in landscape the
		   panel scrolls inside itself instead of running off the screen. */
		max-height: calc(100vh - var(--nav-top) - var(--nav-row) - var(--nav-rule-gap) - var(--nav-rule-weight));
		overflow-y: auto;
		background-color: var(--color-white);
		color: var(--color-navy);
	}

	.has-hero .primary-navigation {
		background-color: var(--color-navy);
		color: var(--color-white);
	}

	.primary-navigation.is-open {
		display: block;
	}

	.primary-menu {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
	}

	/* Scoped to the header's own list: the footer's link column is also a
	   wp_nav_menu() list of li.menu-item, and an unscoped rule here drew a
	   divider under every footer link (the comp has none) and pushed its
	   row pitch from 31.5 to 32.5px. */
	.primary-navigation .menu-item {
		border-bottom: 1px solid var(--color-border);
	}

	/* Label and caret share a row; the submenu drops below it. About Us has
	   three children - link, caret button, submenu - so without the wrap the
	   submenu joined the row and pushed the caret onto a line of its own,
	   which read as a broken item rather than as the separate control it is. */
	.menu-item--has-dropdown {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: space-between;
	}

	.menu-item--has-dropdown > .sub-menu {
		flex-basis: 100%;
	}

	/* 16px + 12px + 16px = a 44px row: the tap target without a taller font. */
	.nav-link,
	.nav-link--toggle {
		width: 100%;
		padding: var(--space-sm) 0;
	}

	/* An item that also carries a caret button cannot give the label the whole
	   row - the caret wraps under it and the item reads as broken. Let the
	   label take the space that is left instead. */
	.menu-item--has-dropdown > .nav-link {
		width: auto;
		flex: 1 1 auto;
	}

	/* The caret is a 24px square on a pointer screen; in the panel it is a
	   finger's target. */
	.nav-caret {
		width: 2.75rem;
		height: 2.75rem;
	}

	.sub-menu {
		flex-basis: 100%;
		padding-left: var(--space-md);
		padding-bottom: var(--space-sm);
	}
}

@media (max-width: 767px) {
	/* The 31-character box does not fit beside the lockup on a phone: the
	   bar keeps lockup + hamburger, and the CTA becomes the panel's last
	   row, full width, 44px tall, label allowed to wrap. */
	.nav-cta--bar {
		display: none;
	}

	.nav-cta--panel {
		display: flex;
		width: 100%;
		min-height: 2.75rem;
		height: auto;
		margin-top: var(--space-md);
		padding-block: var(--space-xs);
		white-space: normal;
		text-align: center;
	}

	.has-hero .nav-cta--panel {
		color: var(--color-white);
		border-color: var(--color-white);
	}

	.site-header__inner {
		column-gap: var(--space-sm);
	}
}

/**
 * Industries carries its dropdown on the label itself, because there is no
 * standalone Industries page to link to -- About Us is a real page, so it keeps
 * its link and gets a separate caret button. That asymmetry is correct, but it
 * left Industries with no visible sign it opens anything. This restores the
 * affordance without touching the walker's markup.
 */
.nav-link--toggle::after {
	content: "";
	display: inline-block;
	margin-left: calc(var(--space-xs) / 2);
	border-left: calc(var(--space-xs) / 2) solid transparent;
	border-right: calc(var(--space-xs) / 2) solid transparent;
	border-top: calc(var(--space-xs) / 2) solid currentColor;
	vertical-align: middle;
	transition: transform 150ms ease;
}

.nav-link--toggle[aria-expanded="true"]::after {
	transform: rotate(180deg);
}


/*
 * The header's call-to-action is 38px tall, six under the touch floor, on
 * the widths where it is still visible with a finger on the screen. Its
 * height is the nav row's own token above 1024 and that is a comp
 * coordinate, so the floor applies only below it.
 */
@media (max-width: 1024px) {
	.nav-cta {
		height: auto;
		min-height: 2.75rem;
	}
}

/* The Elementor Kit's custom CSS (kit post 126, loaded on Elementor-built pages such as /listings/)
   still carries "#site-header, #site-footer { display: none }" from the old theme. This selector
   outranks that ID-only rule without !important. */
body #site-header {
	display: block;
}