/* ==========================================================================
   NH Marathon — compact header ("layout A")
   Loaded after Customizer Additional CSS via includes/nhm-header.php.
   Layout only; colors are the site's existing ones (Customizer CSS):
   green #00754e · dark green #005337 · yellow #ffc120
   :not(.nhm-redesign) lets the local full redesign (nhm-redesign.css) restyle
   the same header; on a site without it the selector simply always matches.
   ========================================================================== */

.nhm-header {
	--nhm-h-green: #00754e;
	--nhm-h-green-dark: #005337;
	--nhm-h-yellow: #ffc120;
	--nhm-h-text: #222;
	--nhm-h-border: #e5e5e5;
}

/* Logo size in the single header row (overrides Mai's customizer CSS vars) */
:root {
	--logo-width: 68px;
	--logo-margin-top: 10px;
	--logo-margin-bottom: 10px;
}

/* --------------------------------------------------------------------------
   Top utility bar (Mai .header-before)
   -------------------------------------------------------------------------- */

.nhm-header:not(.nhm-redesign) .header-before {
	background: var(--nhm-h-green);
	border-bottom: 0;
	padding-left: 16px;
	padding-right: 16px;
}

.nhm-header:not(.nhm-redesign) .header-before > .wrap {
	padding-left: 0;
	padding-right: 0;
}

/* Large screens: Mai gives the boxed site container a 24px top margin
   (mai-theme.css, min-width:1249px) — drop it so the green bar sits flush
   at the top of the viewport. */
@media only screen and (min-width: 1249px) {
	.nhm-header .site-container.boxed {
		margin-top: 0;
	}
}

.nhm-header:not(.nhm-redesign) .nhm-topbar {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	min-height: 36px;
}

.nhm-header:not(.nhm-redesign) .nhm-topbar-tag {
	margin: 0;
	font-family: 'Oswald', sans-serif;
	font-size: .74rem;
	letter-spacing: .16em;
	text-transform: uppercase;
	color: rgba(255, 255, 255, .75);
}

.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu {
	display: flex;
	flex-wrap: wrap;
	justify-content: flex-end;
	gap: 0 2px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu li {
	margin: 0;
	padding: 0;
}

.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu a {
	display: block;
	padding: 9px 11px;
	font-family: 'Oswald', sans-serif;
	font-size: .74rem;
	letter-spacing: .14em;
	text-transform: uppercase;
	color: #fff;
	text-decoration: none;
	background: transparent;
}

.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu a:hover,
.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu a:focus,
.nhm-header:not(.nhm-redesign) .nhm-utility-nav .nhm-utility-menu .current-menu-item > a {
	color: var(--nhm-h-yellow);
	background: transparent;
}

/* --------------------------------------------------------------------------
   Main header row: logo | primary nav | Register
   -------------------------------------------------------------------------- */

.nhm-header:not(.nhm-redesign) .site-header {
	border-bottom: 1px solid var(--nhm-h-border);
	position: relative;
	z-index: 50;
}

.nhm-header:not(.nhm-redesign) .site-header .header-right {
	display: flex;
	justify-content: flex-end;
	align-items: center;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary,
.nhm-header:not(.nhm-redesign).home .site-header .nav-primary .current-menu-item > a {
	background-color: transparent;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary {
	margin: 0;
	box-shadow: none;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap {
	max-width: none;
	padding: 0;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .menu {
	justify-content: flex-end;
	align-items: center;
	flex-wrap: nowrap;
	gap: 0;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary a {
	color: var(--nhm-h-text);
	font-size: .9rem;
	padding: 14px;
	background: transparent;
	position: relative;
	white-space: nowrap;
}

/* Green underline: animated on plain links, static for the current section */
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item:not(.register) > a::before {
	content: "";
	position: absolute;
	left: 14px;
	right: 14px;
	bottom: 6px;
	height: 2px;
	background: var(--nhm-h-green);
	transform: scaleX(0);
	transition: transform .2s ease;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children > a::before {
	transition: none;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item:not(.register):not(.menu-item-has-children):hover > a::before,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item:not(.register):not(.menu-item-has-children) > a:focus::before,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .current-menu-item:not(.register) > a::before,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .current-menu-ancestor:not(.register) > a::before {
	transform: scaleX(1);
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .current-menu-ancestor > a,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .current-menu-item > a,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary a:focus,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary a:hover,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children:hover > a,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children:focus-within > a {
	background-color: transparent;
	color: var(--nhm-h-green-dark);
}

/* Dropdown arrow: flips up while the menu is open */
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	vertical-align: 3px;
	border-style: solid;
	border-color: var(--nhm-h-green);
	border-width: 0 1.5px 1.5px 0;
	transform: rotate(45deg);
	background: none;
	position: static;
	transition: transform .2s ease;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children:hover > a::after,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children:focus-within > a::after,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item-has-children.sfHover > a::after {
	transform: translateY(3px) rotate(-135deg);
}

/* Dropdowns keep the site's green, snug under the parent item */
.nhm-header .site-header .nav-primary > .wrap > .menu > .menu-item > .sub-menu {
	top: calc(100% - 8px); /* covers the 2px "current page" underline */
}

.nhm-header .site-header .nav-primary .sub-menu {
	width: 220px;
}

/* Mai fixes links at 200px; make them fill the box so the background has no gap on the right */
.nhm-header .site-header .nav-primary .sub-menu a {
	width: 100%;
}

.nhm-header .site-header .nav-primary .sub-menu .sub-menu {
	margin-left: 217px;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .sub-menu {
	box-shadow: 0 8px 24px rgba(0, 0, 0, .15);
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .sub-menu a {
	background-color: var(--nhm-h-green);
	color: #fff;
	font-size: .82rem;
	padding: 11px 20px;
	border: 0;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .sub-menu a:focus,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .sub-menu a:hover,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .sub-menu .current-menu-item > a {
	background-color: var(--nhm-h-green-dark);
	color: #fff;
}

/* Register: yellow pill */
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register {
	background: transparent;
	margin-left: 14px;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register > a,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register > a:hover,
.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register > a:focus {
	background: var(--nhm-h-yellow);
	color: var(--nhm-h-green-dark);
	font-weight: 600;
	font-size: .85rem;
	border-radius: 999px;
	padding: 11px 20px;
	margin: 0;
}

.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register > a:not([href]) {
	cursor: default;
}

/* --------------------------------------------------------------------------
   Mobile drawer menu — current-page highlight matches the desktop nav's
   dark-green text (no underline in the drawer). The Mai Theme Engine plugin
   colors `.mobile-menu .current-menu-item > a` blue (#067ccc); this wins on
   specificity. mai-theme.js adds the `mobile-menu` class to the #mai-menu
   drawer menus, which only render at the hamburger breakpoint.

   Touch feedback: the plugin's global `a { transition: all .2s }` animates
   every state change on touch, and its `-webkit-tap-highlight-color`
   transparent rule covers `.mobile-menu li/ul` but not the links themselves,
   so tapping a link also shows the browser's default gray flash. Kill both.
   -------------------------------------------------------------------------- */

.nhm-header:not(.nhm-redesign) .mobile-menu a,
.nhm-header:not(.nhm-redesign) .mobile-menu button { /* sub-menu toggles are <button>s */
	transition: none;
	-webkit-tap-highlight-color: transparent;
}

.nhm-header:not(.nhm-redesign) .mobile-menu .current-menu-item > a,
.nhm-header:not(.nhm-redesign) .mobile-menu .current-page-ancestor > a,
.nhm-header:not(.nhm-redesign) .mobile-menu .current-menu-ancestor > a {
	color: var(--nhm-h-green-dark);
}

/* Drawer gutter: Mai's additional CSS zeroes the container and gives each item
   only 10px, so menu text sits ~10px from the screen edge vs the 24px page
   gutter (`.site-inner`) everywhere else. Restore one clean 24px edge-to-text
   at the container level and drop the per-item padding so we don't double-stack
   (which would over-indent on narrow phones). The search form + Register pill
   live in `.mai-menu-inner` too, so they align with the menu text as a bonus. */
.nhm-header:not(.nhm-redesign) .mai-menu-inner {
	padding-left: 24px;
	padding-right: 24px;
}

.nhm-header:not(.nhm-redesign) .mai-menu-inner .menu-item {
	padding-left: 0;
	padding-right: 0;
}

/* Register item: Mai's additional CSS has an unscoped `.register { background-color:
   #ffc120 }` that paints the whole <li> (full-width, since menu items are width:100%),
   and the link inside has padding-left:0 — so the text starts flush against the
   yellow's left edge. Render it as the same contained pill the desktop nav uses:
   move the fill from the <li> to the <a>, add internal padding + rounding. */
.nhm-header:not(.nhm-redesign) .mobile-menu .register {
	background: transparent;
	justify-content: center; /* pill centers in its row (menu-item is a flex container) */
}

.nhm-header:not(.nhm-redesign) .mobile-menu .register > a {
	display: inline-block;
	width: auto;
	flex: none;
	white-space: nowrap;
	background: var(--nhm-h-yellow);
	color: var(--nhm-h-green-dark);
	font-size: .9rem;
	border-radius: 999px;
	padding: 11px 20px;
}

/* --------------------------------------------------------------------------
   Mobile tagline — the top bar hides at the hamburger breakpoint (960px,
   kept in sync with NHM_MOBILE_MENU_WIDTH), so repeat the tagline in the
   header row. It is absolutely positioned at the exact horizontal center of
   the page (the row spans edge-to-edge minus its 8px gutters, so its midpoint
   IS the viewport's). Centering it *between* logo and menu button instead
   drifts off page-center because those two elements have different widths.
   -------------------------------------------------------------------------- */

.nhm-header .nhm-mobile-tag {
	display: none;
}

@media (max-width: 960px) {
	/* Containing block for the absolutely-positioned tagline below. */
	.nhm-header:not(.nhm-redesign) .site-header-row {
		position: relative;
	}

	/* Restore Mai's intent to hide the header-right wrapper at the hamburger
	   breakpoint: the display:flex rule above out-specificity Mai's own
	   display:none, leaving a grown empty wrapper in the row. (Its nav is
	   already hidden by Mai.) */
	.nhm-header:not(.nhm-redesign) .site-header .header-right {
		display: none;
	}

	.nhm-header:not(.nhm-redesign) .nhm-mobile-tag {
		display: block;
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		margin: 0;
		white-space: nowrap;
		pointer-events: none; /* never blocks the logo or menu button */
		font-family: 'Oswald', sans-serif;
		font-size: .68rem;
		letter-spacing: .14em;
		text-transform: uppercase;
		color: #000;
	}
}

@media (max-width: 440px) {
	/* Phones: stack "Newfound Lake" over "Bristol, New Hampshire" (dot
	   hidden). Breakpoint is 440 (not 420) so the single line — which is
	   page-centered and would nearly touch the logo at ~430px widths like the
	   iPhone Pro Max — only starts where it has clearance. */
	.nhm-header:not(.nhm-redesign) .nhm-mobile-tag {
		display: flex;
		flex-direction: column;
		align-items: center;
		line-height: 1.5;
		font-size: .58rem;
		letter-spacing: .12em;
	}

	.nhm-header:not(.nhm-redesign) .nhm-mt-dot {
		display: none;
	}

	/* Balance the header: make the logo a mirror of the menu button — same
	   width (64px, the #mai-toggle box) and same distance from the viewport
	   edge (8px; zeroing the link's 16px margin puts it on the row's left
	   edge). With both flanks mirrored, the page-centered tagline reads as
	   truly centered. */
	.nhm-header:not(.nhm-redesign) .site-header .custom-logo-link {
		margin-left: 0;
		max-width: 64px;
	}
}

/* --------------------------------------------------------------------------
   Responsive
   -------------------------------------------------------------------------- */

@media (max-width: 1159px) {
	.nhm-header:not(.nhm-redesign) .site-header .nav-primary a {
		padding-left: 10px;
		padding-right: 10px;
		font-size: .84rem;
	}

	.nhm-header:not(.nhm-redesign) .site-header .nav-primary > .wrap > .menu > .menu-item:not(.register) > a::before {
		left: 10px;
		right: 10px;
	}

	.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register {
		margin-left: 8px;
	}

	.nhm-header:not(.nhm-redesign) .site-header .nav-primary .register > a {
		padding: 10px 16px;
	}

	.nhm-header:not(.nhm-redesign) .nhm-topbar-tag {
		display: none;
	}

	.nhm-header:not(.nhm-redesign) .nhm-topbar {
		justify-content: flex-end;
	}
}

/* Narrow desktops (just above the 960px hamburger breakpoint) */
@media (max-width: 1080px) {
	.nhm-header .site-header .nav-primary .menu-item {
		letter-spacing: 1px;
	}

	.nhm-header .site-header .nav-primary a {
		padding-left: 8px;
		padding-right: 8px;
		font-size: .8rem;
	}

	.nhm-header .site-header .nav-primary > .wrap > .menu > .menu-item:not(.register) > a::before {
		left: 8px;
		right: 8px;
	}

	.nhm-header .site-header .nav-primary > .wrap > .menu > .menu-item-has-children > a::after {
		margin-left: 5px;
	}

	.nhm-header .site-header .nav-primary .register > a {
		padding: 9px 14px;
		font-size: .8rem;
	}
}

/* Below 1249px Mai drops the header wrap padding to 8px — line the pill up with the content edge */
@media (max-width: 1248px) {
	.nhm-header .site-header .header-right {
		padding-right: 16px;
	}
}