/*
 * Site header.
 *
 * The theme ships two stacked dark bands in slightly different darks — a tall
 * centred wordmark row with an oversized search field, then an all-caps menu
 * whose items sit in bordered boxes. Together they cost 115px on a desktop and
 * 142px on a phone before a visitor reads a word, and the two darks read as a
 * seam rather than one surface.
 *
 * This makes it one quiet ink band: wordmark left, compact search right, menu
 * beneath on a hairline. Sentence case rather than all caps — the membership is
 * in its 60s–80s and capitals are measurably slower to read at small sizes.
 * Colours are taken from the homepage palette already in use (deep petrol,
 * warm off-white) so the header belongs to the same site rather than a second
 * design. No sticky positioning: on a phone a pinned bar costs a fifth of the
 * screen for people who are already zoomed in.
 *
 * Layout is flex, not the theme's three-column grid, so the wordmark sits on
 * the content edge instead of floating in the middle of an empty column. The
 * account actions MS_Nav injects keep their place on the right — they are
 * ordered explicitly here rather than relying on the grid column they used to
 * claim.
 */

:root {
	--msh-ink:    #16242b;              /* one ink, replacing #293033 + near-black */
	--msh-ink-2:  #111c22;              /* menu tier: a step down, not a seam */
	--msh-on:     #f2efe8;              /* warm off-white, same family as the homepage */
	--msh-muted:  #a8bac1;
	--msh-accent: #7fb2c4;              /* #0f5568 lifted until it reads on ink */
	--msh-rule:   rgba(255, 255, 255, .09);
}

/* ---------- the band ---------- */

#masthead {
	background: var(--msh-ink);
	border: 0;
}

/*
 * Three columns, so the search is centred on the page rather than merely sitting
 * between its neighbours: the outer columns are equal fractions and the search
 * takes only the width it needs in the middle. It stays centred when the account
 * actions are absent, which is every logged-out visitor.
 */
#masthead > section.row {
	display: grid;
	grid-template-columns: 1fr auto 1fr;
	align-items: center;
	gap: 16px;
	min-height: 46px;
	padding-top: 0;
	padding-bottom: 0;
}

/* ---------- wordmark ---------- */

#masthead #branding {
	grid-column: 1;
	justify-self: start;
	margin: 0;
	min-width: 0;
	text-align: left;
}

#masthead #logo,
#masthead #logo.site-title {
	margin: 0;
	font-size: 19px;
	line-height: 1.2;
	font-weight: 600;
	letter-spacing: -.015em;
}

#masthead #logo a {
	color: var(--msh-on);
	text-decoration: none;
}

#masthead #logo a:hover { color: #fff; }

#masthead #logo a:focus-visible {
	outline: 3px solid var(--msh-accent);
	outline-offset: 4px;
	border-radius: 2px;
}

#masthead #description { display: none; }   /* the tagline lives on the homepage now */

/* ---------- search ---------- */

#masthead form.searchform {
	grid-column: 2;
	justify-self: center;
	height: auto;
	border: 0;
	border-radius: 0;
	background: none;
	box-shadow: none;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 0;
	margin: 0;
	flex: 0 0 auto;
}

#masthead form.searchform input.searchfield {
	width: 200px;
	height: 34px;
	padding: 0 10px;
	border: 1px solid rgba(255, 255, 255, .18);
	border-right: 0;
	border-radius: 8px 0 0 8px;
	background: rgba(255, 255, 255, .06);
	color: var(--msh-on);
	font-size: 15px;
	box-shadow: none;
}

#masthead form.searchform input.searchfield::placeholder { color: var(--msh-muted); opacity: 1; }

#masthead form.searchform input.searchfield:hover,
#masthead form.searchform input.searchfield:focus {
	background: rgba(255, 255, 255, .10);
	outline: 0;
}

#masthead form.searchform input.searchfield:focus {
	border-color: var(--msh-accent);
	box-shadow: 0 0 0 3px rgba(127, 178, 196, .30);
}

#masthead form.searchform button.searchsubmit {
	height: 34px;
	width: 38px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
	border: 1px solid rgba(255, 255, 255, .18);
	border-radius: 0 8px 8px 0;
	background: rgba(255, 255, 255, .06);
	color: var(--msh-on);
	cursor: pointer;
}

#masthead form.searchform button.searchsubmit:hover { background: rgba(255, 255, 255, .14); }

#masthead form.searchform button.searchsubmit:focus-visible {
	outline: 3px solid var(--msh-accent);
	outline-offset: 2px;
}

#masthead form.searchform button.searchsubmit svg { width: 18px; height: 18px; }

/* Account actions injected by MS_Nav hold the right-hand column. */
#masthead .ms-header-actions {
	grid-column: 3;
	justify-self: end;
	text-align: right;
}

/* ---------- menu tier ---------- */

#nav-primary.menu,
#masthead #nav-primary {
	background: var(--msh-ink-2);
	border: 0;
	border-top: 1px solid var(--msh-rule);
}

#nav-primary section.row { padding-top: 0; padding-bottom: 0; }

#nav-primary .menu-welcome-container { float: none; }

#nav-primary ul.nav {
	display: flex;
	flex-wrap: wrap;
	align-items: stretch;
	margin: 0;
	padding: 0;
	list-style: none;
}

#nav-primary ul.nav > li.menu-item {
	margin: 0;
	padding: 0;
	border: 0;                          /* the theme's dividers and boxes */
	background: none;
	float: none;
}

#nav-primary ul.nav > li.menu-item > a {
	display: flex;
	align-items: center;
	min-height: 42px;
	padding: 0 12px;
	border: 0;
	background: none;
	color: var(--msh-muted);
	font-size: 16px;                    /* the membership is 60–80; 15px was the floor, not the target */
	font-weight: 500;
	line-height: 1.2;
	text-transform: none;               /* sentence case reads faster than capitals */
	letter-spacing: 0;
	text-decoration: none;
	box-shadow: inset 0 -2px 0 transparent;
}

#nav-primary ul.nav > li.menu-item > a:hover {
	color: var(--msh-on);
	background: rgba(255, 255, 255, .05);
}

#nav-primary ul.nav > li.menu-item > a:focus-visible {
	outline: 3px solid var(--msh-accent);
	outline-offset: -3px;
	color: var(--msh-on);
}

/* Where you are now — the one place the accent is spent. */
#nav-primary ul.nav > li.current-menu-item > a,
#nav-primary ul.nav > li.current_page_item > a,
#nav-primary ul.nav > li.current-menu-ancestor > a,
#nav-primary ul.nav > li.current_page_ancestor > a {
	color: var(--msh-on);
	box-shadow: inset 0 -2px 0 var(--msh-accent);
}

#nav-primary ul.nav > li.home.menu-item > a { padding: 0 12px; }

/* ---------- the homepage already opens with its own photograph ---------- */

body.home #header-image,
body.ms-home-page #header-image { display: none; }

/* ---------- phones: one row, wordmark and menu together ---------- */

@media only screen and (max-width: 767.98px) {
	/*
	 * One row: wordmark on the left, Menu on the right, search beneath it when it
	 * shows at all. `display: contents` lifts the branding and the search out of
	 * the theme's row wrapper so the three can be ordered independently — without
	 * it the search is welded to the wordmark and the menu can never sit beside it.
	 */
	#masthead {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		gap: 8px 12px;
		padding: 8px 16px;
	}

	#masthead > section.row { display: contents; }

	/* No grow: growing consumed the whole line and pushed Menu onto a second row. */
	#masthead #branding { order: 1; flex: 0 1 auto; width: auto; min-width: 0; margin: 0 auto 0 0; }
	#masthead #branding #logo { width: auto; }

	#masthead #logo,
	#masthead #logo.site-title { font-size: 17px; }

	#masthead > #nav-primary {
		order: 2;
		flex: 0 0 auto;
		padding: 0;
		border-top: 0;
		background: none;
	}

	#nav-primary section.row { padding: 0; }

	#masthead form.searchform { order: 4; flex: 1 1 100%; }

	#masthead form.searchform input.searchfield { width: auto; flex: 1 1 auto; height: 38px; }
	#masthead form.searchform button.searchsubmit { height: 38px; width: 42px; }

	#masthead .ms-header-actions { order: 3; flex: 1 1 100%; text-align: left; }

	/* The theme swaps the list for a native select on phones. */
	#nav-primary select,
	#nav-primary select.rn_select,
	select.rn_select {
		display: block;
		width: auto;
		min-width: 108px;
		max-width: 44vw;
		height: 38px;
		min-height: 38px;
		margin: 0;
		padding: 0 30px 0 11px;
		border: 1px solid rgba(255, 255, 255, .22);
		border-radius: 8px;
		background-color: rgba(255, 255, 255, .07);
		color: var(--msh-on);
		font-size: 15px;
		font-weight: 500;
	}

	#nav-primary select.rn_select:focus-visible {
		outline: 3px solid var(--msh-accent);
		outline-offset: 2px;
	}

	/* If the list renders instead of the select, let it wrap under everything. */
	#nav-primary ul.nav { flex: 1 1 100%; }
	#nav-primary ul.nav > li.menu-item > a { min-height: 44px; padding: 0 11px; }
}

@media print {
	#masthead { background: none; }
	#masthead #logo a { color: #000; }
	#nav-primary, #masthead form.searchform { display: none; }
}