/*------------------------------------
 * Desktop primary navigation
 *
 * Hand-authored, NOT part of the gulp/SASS build. style.css at the theme root
 * is a build artifact and node-sass no longer compiles on a modern Mac, so
 * this file is enqueued after `unify2021-style` instead of being folded into
 * the pipeline. See CLAUDE.md -> Build pipeline.
 *
 * Breakpoint: 1280px. This is the theme's own $bp-nav (_screen-sizes.scss),
 * not the house Bootstrap ladder, and it has to stay in lock-step with it --
 * the compiled style.css hides .menu-wrap (the "Talk to us" CTA) below
 * max-width: 1279px, and that rule is not editable from here.
 *-----------------------------------*/

.nav-desktop {
	/* Brand tokens, mirroring build/sass/global/settings/_colors.scss */
	--nav-navy: #143250;
	--nav-teal: #1dc2bb;
	--nav-teal-dark: #01a69f;
	--nav-teal-text: #00857e;
	--nav-rule: rgba(20, 50, 80, 0.12);
	/* Gap between a top-level item and its panel. The invisible hover bridge
	   on .nav-desktop__panel::before is sized from the same values so the two
	   can never drift apart -- the border counts, because the bridge is
	   positioned against the panel's padding box, inside that border. */
	--nav-dd-gap: 14px;
	--nav-dd-border: 2px;

	display: none;
}

.nav-desktop__menu {
	display: flex;
	align-items: center;
	/* Widened at $bp-laptop; see the 1400px block at the foot of this file. */
	gap: 20px;
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-desktop__item {
	position: relative;
	display: flex;
	align-items: center;
	margin: 0;
	padding: 8px 0;
}

.nav-desktop__link {
	position: relative;
	display: inline-block;
	padding: 2px 0;
	font-size: 16px;
	line-height: 24px;
	font-weight: 500;
	letter-spacing: 0.04em;
	color: var(--nav-navy);
	text-decoration: none;
}

.nav-desktop__link::after {
	content: '';
	position: absolute;
	left: 0;
	right: 0;
	bottom: -2px;
	height: 2px;
	background: var(--nav-teal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.22s ease;
}

.nav-desktop__item:hover > .nav-desktop__link,
.nav-desktop__link:focus-visible {
	color: var(--nav-teal-text);
}

.nav-desktop__item:hover > .nav-desktop__link::after,
.nav-desktop__link:focus-visible::after {
	transform: scaleX(1);
}

/* Current page / section */
.nav-desktop__item.current-menu-item > .nav-desktop__link,
.nav-desktop__item.current-menu-ancestor > .nav-desktop__link,
.nav-desktop__item.current_page_item > .nav-desktop__link,
.nav-desktop__item.current_page_ancestor > .nav-desktop__link {
	color: var(--nav-teal-text);
}

.nav-desktop__item.current-menu-item > .nav-desktop__link::after,
.nav-desktop__item.current-menu-ancestor > .nav-desktop__link::after,
.nav-desktop__item.current_page_item > .nav-desktop__link::after,
.nav-desktop__item.current_page_ancestor > .nav-desktop__link::after {
	transform: scaleX(1);
}

/* Parent toggle -- the keyboard/touch route into a panel that pointer users
   reach by hover. */
.nav-desktop__toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	margin-left: 4px;
	padding: 0;
	border: 0;
	background: none;
	color: var(--nav-navy);
	cursor: pointer;
	outline-offset: 2px;
}

.nav-desktop__chevron {
	display: block;
	transition: transform 0.2s ease;
}

.nav-desktop__item--parent:hover > .nav-desktop__toggle,
.nav-desktop__toggle:focus-visible {
	color: var(--nav-teal-text);
}

.nav-desktop__item--parent:hover > .nav-desktop__toggle .nav-desktop__chevron,
.nav-desktop__toggle[aria-expanded='true'] .nav-desktop__chevron {
	transform: rotate(180deg);
}

/* The reset shipped with this theme predates :focus-visible and puts a UA ring
   on bare button:focus, so reset it before reinstating our own. */
.nav-desktop__toggle:focus {
	outline: none;
}

.nav-desktop__toggle:focus-visible {
	outline: 2px solid var(--nav-teal-dark);
}

.nav-desktop__link:focus {
	outline: none;
}

.nav-desktop__link:focus-visible {
	outline: 2px solid var(--nav-teal-dark);
	outline-offset: 4px;
}

/* Dropdown panel
   - - - - - - - - - - - - - - - - - - - - - - - - - */
.nav-desktop__panel {
	position: absolute;
	top: calc(100% + var(--nav-dd-gap));
	left: -16px;
	z-index: 1000;
	min-width: 240px;
	padding: 8px 0;
	background: #fff;
	border: 1px solid var(--nav-rule);
	border-top: var(--nav-dd-border) solid var(--nav-teal);
	box-shadow: 0 14px 32px rgba(20, 50, 80, 0.14);
	opacity: 0;
	visibility: hidden;
	transform: translateY(-4px);
	/* The 0.25s delay is hover intent, not decoration: it covers a diagonal
	   path to the panel's far corner. The bridge below covers straight-down
	   travel across the gap. */
	transition: opacity 0.2s ease 0.25s, visibility 0.2s ease 0.25s, transform 0.2s ease 0.25s;
}

/* Invisible bridge spanning exactly --nav-dd-gap, so the pointer never leaves
   the parent <li> on its way from the trigger to the panel. */
.nav-desktop__panel::before {
	content: '';
	position: absolute;
	top: calc((var(--nav-dd-gap) + var(--nav-dd-border)) * -1);
	height: calc(var(--nav-dd-gap) + var(--nav-dd-border));
	left: 0;
	right: 0;
}

/* Keyboard opens via the toggle button (assets/js/nav-desktop.js sets
   .is-open), NOT via :has(:focus-visible). Focus-driven opening fights Escape:
   closing returns focus to the toggle, which still matches :focus-visible, and
   the panel springs straight back open. */
.nav-desktop__item--parent:hover > .nav-desktop__panel,
.nav-desktop__item--parent.is-open > .nav-desktop__panel {
	opacity: 1;
	visibility: visible;
	transform: none;
	transition-delay: 0s;
}

.nav-desktop__sub {
	margin: 0;
	padding: 0;
	list-style: none;
}

.nav-desktop__subitem {
	margin: 0;
	padding: 0;
}

.nav-desktop__sublink {
	position: relative;
	display: block;
	padding: 10px 24px;
	font-size: 16px;
	line-height: 22px;
	font-weight: 500;
	letter-spacing: 0.02em;
	color: var(--nav-navy);
	text-decoration: none;
	transition: color 0.2s ease, background-color 0.2s ease;
}

.nav-desktop__sublink::before {
	content: '';
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 3px;
	background: var(--nav-teal);
	transform: scaleX(0);
	transform-origin: left center;
	transition: transform 0.2s ease;
}

.nav-desktop__sublink:hover,
.nav-desktop__sublink:focus-visible {
	color: var(--nav-teal-text);
	background-color: #f5f7f8;
	text-decoration: none;
}

.nav-desktop__sublink:hover::before,
.nav-desktop__sublink:focus-visible::before {
	transform: scaleX(1);
}

.nav-desktop__subitem.current-menu-item > .nav-desktop__sublink,
.nav-desktop__subitem.current_page_item > .nav-desktop__sublink {
	color: var(--nav-teal-text);
}

.nav-desktop__subitem.current-menu-item > .nav-desktop__sublink::before,
.nav-desktop__subitem.current_page_item > .nav-desktop__sublink::before {
	transform: scaleX(1);
}

.nav-desktop__sublink:focus {
	outline: none;
}

.nav-desktop__sublink:focus-visible {
	outline: 2px solid var(--nav-teal-dark);
	outline-offset: -2px;
}

/* Dark header variant (single event templates paint .site-header navy) */
.single-event .nav-desktop__link,
.single-event .nav-desktop__toggle {
	color: #fff;
}

.single-event .nav-desktop__item:hover > .nav-desktop__link,
.single-event .nav-desktop__link:focus-visible,
.single-event .nav-desktop__item--parent:hover > .nav-desktop__toggle {
	color: var(--nav-teal);
}

.single-event .nav-desktop__link:focus-visible,
.single-event .nav-desktop__toggle:focus-visible {
	outline-color: #fff;
}

/* Desktop only
   - - - - - - - - - - - - - - - - - - - - - - - - - */
@media (min-width: 1280px) {
	/* style.css sets rem(80) top and bottom, which was fine when the header
	   was a logo and one button. A 233px bar cannot sit on a hero, so bring it
	   down to something closer to the proposal's 76px chrome. */
	.main-navigation {
		padding-top: 28px;
		padding-bottom: 28px;
	}

	.nav-wrap .nav-desktop {
		display: block;
		margin-left: auto;
	}

	/* .menu-wrap is flex: 1 1 auto in style.css; stop it stealing the row now
	   that the link list shares it. */
	.nav-wrap .menu-wrap--quick {
		flex: 0 0 auto;
		margin-left: 24px;
	}

	/* style.css gives every .menu-wrap li a 32px right margin, which held the
	   CTA off the content edge back when it was the only thing in the row. */
	.nav-wrap .menu-wrap--quick li {
		margin-right: 0;
	}

	/* .btn--box is a 20px page button; in the header bar it towers over the
	   16px links and drives the whole header's height. */
	.nav-wrap .menu-wrap--quick a {
		font-size: 16px;
		line-height: 22px;
		padding-top: 7px;
		padding-bottom: 7px;
	}

	/* The point of the exercise: no hamburger on desktop. */
	.nav-wrap #menu-open {
		display: none;
	}
}

/* Seven top-level items plus the CTA only breathe once there is room for them.
   1280-1399px runs the tightest gaps; $bp-laptop opens them up. The link size
   stays at 16px at every width -- the header has to stay short enough to sit
   on a hero without eating it. */
@media (min-width: 1400px) {
	.nav-desktop__menu {
		gap: 32px;
	}

	.nav-wrap .menu-wrap--quick {
		margin-left: 40px;
	}
}

@media (prefers-reduced-motion: reduce) {
	.nav-desktop__link::after,
	.nav-desktop__sublink::before,
	.nav-desktop__chevron,
	.nav-desktop__sublink {
		transition: none;
	}

	/* Keep the close delay -- it is hover intent, not motion. */
	.nav-desktop__panel {
		transform: none;
		transition: opacity 0.01ms 0.25s, visibility 0.01ms 0.25s;
	}
}