/**
 * Primary navigation: a standalone mega menu.
 *
 * Pairs with inc/mega-menu.php, which renders this independently of
 * GeneratePress's own nav -- no GeneratePress classes or element-selector
 * rules apply here at all, so this stylesheet owns the whole thing instead
 * of resetting another system's defaults.
 *
 * Colours are literal hex, not the --gf-* tokens used elsewhere in the
 * theme: those are scoped to .gf-entry/.gf-sections (the content area),
 * which the header sits outside of. #0B1522 and #C2D7E4 are the same
 * values as sections.css's --navy and --pale-sky.
 *
 * Contents
 *   1. Header
 *   2. Top-level nav (desktop)
 *   3. Flyouts (desktop)
 *   4. Mobile
 */

/* -------------------------------------------------------------------------
   1. Header
   ---------------------------------------------------------------------- */

#masthead {
	background-color: #0b1522;
}

/* GeneratePress's own header layout (logo + nav side by side) isn't reused
   here since the nav itself is now a from-scratch system -- simplest to
   just own the whole header row directly instead of reverse-engineering
   which of GeneratePress's several nav-position layouts this is. */
#masthead .inside-header {
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 1rem;
}

#masthead,
#masthead a,
#masthead .main-title a,
#masthead .site-description {
	color: #ffffff;
}

/* -------------------------------------------------------------------------
   2. Top-level nav (desktop)
   ---------------------------------------------------------------------- */

/* .gf-nav itself has no flex/list styling of its own otherwise -- it's the
   <nav> wrapping the toggle button, the <ul> list, and (added here) the
   search icon, and needs to be the row that lines all three up, with the
   search icon landing at the end simply by being last in source order. */
.gf-nav {
	display: flex;
	align-items: center;
	gap: 1.75rem;
}

.gf-nav__toggle {
	display: none;
}

.gf-nav__list {
	display: flex;
	align-items: center;
	gap: 1.75rem;
	margin: 0;
	padding: 0;
	list-style: none;
}

.gf-nav__item {
	position: relative;
}

.gf-nav__link {
	display: inline-block;
	padding-block: 1.75rem;
	font-size: var(--gf-font-label);
	font-weight: 700;
	line-height: var(--gf-leading-label);
	text-decoration: none;
}

.gf-nav__link:is( :hover, :focus-visible ) {
	text-decoration: underline;
}

.gf-nav__flyout-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.5rem;
	height: 1.5rem;
	margin-inline-start: 0.25rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
	vertical-align: middle;
}

.gf-nav__chevron {
	width: 0.7em;
	height: 0.7em;
	transition: transform 0.15s ease;
}

.gf-nav__item--open .gf-nav__chevron {
	transform: rotate( -180deg );
}

.gf-nav__search {
	position: relative;
}

.gf-nav__search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 1.75rem;
	height: 1.75rem;
	padding: 0;
	border: 0;
	background: none;
	color: inherit;
	cursor: pointer;
}

.gf-nav__search-icon {
	width: 1.125rem;
	height: 1.125rem;
}

.gf-nav__search-toggle:is(:hover,:focus) {
	background-color: transparent;
}
.gf-nav__search-toggle:is(:hover,:focus) svg path{
	fill: #fff;
}

/* -------------------------------------------------------------------------
   3. Flyouts (desktop)
   ---------------------------------------------------------------------- */

@media ( min-width: 769px ) {
	.gf-nav__flyout {
		background-color: #c2d7e4;
		opacity: 0;
		visibility: hidden;
		pointer-events: none;
		transform: translateY( 4px );
		transition: opacity 0.15s ease, transform 0.15s ease, visibility 0.15s;
		z-index: 100;
	}

	/* .is-open is applied by mega-nav.js, not :hover -- see that file for
	   why (a pure CSS :hover chain has a dead zone the moment a
	   position:fixed mega flyout isn't visually touching its own <li>). */
	.gf-nav__item--open .gf-nav__flyout {
		opacity: 1;
		visibility: visible;
		pointer-events: auto;
		transform: translateY( 0 );
	}

	.gf-nav__flyout--simple {
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 240px;
		width: max-content;
		padding-block: 0.75rem;
		border-radius: 8px;
	}

	/* Full viewport width: position:fixed so it escapes the narrow,
	   off-centre <li> it's nested in -- a percentage/vw-based CSS breakout
	   can't do that from an ancestor this narrow. top/left/width are set by
	   mega-nav.js (positionMegaFlyouts), which measures the actual rendered
	   header box. */
	.gf-nav__flyout--mega {
		position: fixed;
		padding-block: 2rem;
	}

	.gf-nav__flyout-inner {
		max-width: 1312px;
		margin-inline: auto;
		padding-inline: 2rem;
	}

	.gf-nav__flyout-list {
		margin: 0;
		padding: 0;
		list-style: none;
	}

	.gf-nav__flyout--mega .gf-nav__flyout-list {
		columns: 2;
		column-gap: 2.5rem;
	}

	.gf-nav__flyout-item {
		break-inside: avoid;
	}

	/* #masthead's own "a" rule (below, in section 1) is an id selector, so
	   a plain class here loses the colour back to white regardless of
	   source order -- matching that id is what wins it back to a dark
	   colour for this panel's own light background. */
	#masthead .gf-nav__flyout-link {
		display: block;
		padding: 0.5rem 1.5rem;
		color: #0b1522;
		text-decoration: none;
		font-size: var(--gf-font-label);
		font-weight: 700;
		line-height: var(--gf-leading-label);
	}

	#masthead .gf-nav__flyout--mega .gf-nav__flyout-link {
		padding-inline: 0;
	}

	#masthead .gf-nav__flyout-link:is( :hover, :focus-visible ) {
		text-decoration: underline;
	}

	/* Right-aligned rather than left, unlike the other flyouts: this is the
	   last thing in the nav, so a left-aligned panel the usual width would
	   run off the right edge of the viewport instead of the other way.
	   Deliberately no visibility:hidden here, unlike the flyouts above: this
	   panel needs mega-nav.js to be able to move focus into its field the
	   instant it opens (in the same click, so the browser still treats it
	   as part of a trusted user gesture), and a property under a CSS
	   transition can't be forced to resolve synchronously -- not even with
	   a forced reflow -- so the field would still compute as
	   visibility:hidden, and therefore unfocusable, at the exact moment
	   .focus() runs. opacity + pointer-events alone give the same visual
	   hide/show without that problem, since opacity:0 content stays
	   focusable. */
	.gf-nav__search-panel {
		position: absolute;
		top: 100%;
		right: 0;
		width: 320px;
		padding: 1rem;
		background-color: #c2d7e4;
		opacity: 0;
		pointer-events: none;
		transform: translateY( 4px );
		transition: opacity 0.15s ease, transform 0.15s ease;
		z-index: 100;
	}

	.gf-nav__search.is-open .gf-nav__search-panel {
		opacity: 1;
		pointer-events: auto;
		transform: translateY( 0 );
	}

	#masthead .gf-nav__search-panel .search-form {
		display: flex;
		gap: 0.5rem;
		margin: 0;
	}

	#masthead .gf-nav__search-panel .search-form label {
		flex-grow: 1;
		margin: 0;
	}

	#masthead .gf-nav__search-panel .search-field {
		width: 100%;
		padding: 0.5rem 0.75rem;
		border: 1px solid rgba( 11, 21, 34, 0.25 );
		border-radius: 2px;
		color: #0b1522;
		background-color: #ffffff;
		font-size: 0.9375rem;
	}

	#masthead .gf-nav__search-panel .search-submit {
		padding: 0.5rem 0.875rem;
		border: 0;
		border-radius: 2px;
		background-color: #0b1522;
		color: #ffffff;
		font-size: var(--gf-font-button);
		font-weight: 700;
		line-height: var(--gf-leading-button);
		cursor: pointer;
	}

	#masthead .gf-nav__search-panel .search-submit:is( :hover, :focus-visible ) {
		background-color: #1a2d44;
	}
}

/* -------------------------------------------------------------------------
   4. Mobile
   ---------------------------------------------------------------------- */

@media ( max-width: 768px ) {
	/* Logo, search and hamburger stay on one row; the open menu and search
	   panel drop down below the whole header at full width (positioned
	   against #masthead), instead of being squeezed into the icon row. */
	#masthead {
		position: relative;
	}

	/* GeneratePress stacks the header into a centred column at tablet
	   widths; keep the same single row used on phones. */
	#masthead .inside-header {
		flex-direction: row;
		justify-content: space-between;
		flex-wrap: nowrap;
	}

	.gf-nav {
		flex: 0 0 auto;
		gap: 0.75rem;
	}

	.gf-nav__toggle {
		display: inline-flex;
		align-items: center;
		justify-content: center;
		width: 2.5rem;
		height: 2.5rem;
		padding: 0;
		border: 0;
		background: none;
		color: #ffffff;
		cursor: pointer;
	}

	.gf-nav__toggle-icon,
	.gf-nav__toggle-icon::before,
	.gf-nav__toggle-icon::after {
		display: block;
		width: 1.5rem;
		height: 2px;
		background-color: currentColor;
	}

	.gf-nav__toggle-icon {
		position: relative;
	}

	.gf-nav__toggle-icon::before,
	.gf-nav__toggle-icon::after {
		content: '';
		position: absolute;
		left: 0;
	}

	.gf-nav__toggle-icon::before {
		top: -6px;
	}

	.gf-nav__toggle-icon::after {
		top: 6px;
	}

	.gf-nav__list {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		max-height: calc( 100dvh - 5rem );
		overflow-y: auto;
		margin: 0;
		padding: 0.5rem 1.25rem 1.5rem;
		background-color: #0b1522;
		border-block-start: 1px solid rgba( 255, 255, 255, 0.15 );
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.25 );
	}

	.gf-nav.is-open .gf-nav__list {
		display: flex;
	}

	.gf-nav__item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-block-end: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	.gf-nav__link {
		flex-grow: 1;
		padding-block: 0.75rem;
		text-align: left;
	}

	.gf-nav__flyout-toggle {
		width: 2.5rem;
		height: 2.5rem;
	}

	/* No fixed/absolute positioning on mobile: the flyout is a normal,
	   in-flow block that expands below its trigger (a standard accordion),
	   not an overlay -- there's no header row width to break out of, and a
	   position:fixed panel would just cover the whole screen. */
	.gf-nav__flyout {
		flex-basis: 100%;
		display: none;
		background-color: #c2d7e4;
		padding-block: 0.5rem;
	}

	.gf-nav__item--open .gf-nav__flyout {
		display: block;
	}

	.gf-nav__flyout-inner {
		padding: 0;
	}

	.gf-nav__flyout-list {
		margin: 0;
		padding: 0;
		list-style: none;
		column-count: 2;
	}

	/* Same #masthead id-vs-class reasoning as the desktop rule above. */
	#masthead .gf-nav__flyout-link {
		display: block;
		padding: 0.625rem 1rem;
		color: #0b1522;
		text-decoration: none;
		text-align: left;
	}

	/* Ordered so the hamburger -- the more universally expected rightmost
	   control -- stays outermost, with search just before it. The
	   margin-inline-start:auto moves to whichever of the two is first in
	   this visual order (search): auto-margin only pushes space before the
	   element carrying it, so putting it on the toggle instead would leave
	   it stranded at the far edge with a gap between it and search, rather
	   than the pair sitting together. */
	.gf-nav__toggle {
		order: 2;
	}

	/* Static, so the panel below positions against #masthead (full width)
	   rather than this small icon wrapper. */
	.gf-nav__search {
		position: static;
		order: 1;
		margin-inline-start: auto;
	}

	.gf-nav__search-panel {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		z-index: 1000;
		padding: 0.75rem 1.25rem;
		background-color: #c2d7e4;
		box-shadow: 0 12px 24px rgba( 0, 0, 0, 0.25 );
	}

	.gf-nav__search.is-open .gf-nav__search-panel {
		display: block;
	}

	#masthead .gf-nav__search-panel .search-form {
		display: flex;
		gap: 0.5rem;
		margin: 0;
	}

	#masthead .gf-nav__search-panel .search-form label {
		flex-grow: 1;
		margin: 0;
	}

	#masthead .gf-nav__search-panel .search-field {
		width: 100%;
		padding: 0.5rem 0.75rem;
		border: 1px solid rgba( 11, 21, 34, 0.25 );
		border-radius: 2px;
		color: #0b1522;
		background-color: #ffffff;
		font-size: 0.9375rem;
	}

	#masthead .gf-nav__search-panel .search-submit {
		padding: 0.5rem 0.875rem;
		border: 0;
		border-radius: 2px;
		background-color: #0b1522;
		color: #ffffff;
		font-size: var(--gf-font-button);
		font-weight: 700;
		line-height: var(--gf-leading-button);
		cursor: pointer;
	}
}

@media (max-width: 500px) {
	.gf-nav__flyout-list {
		column-count: 1;
	}
}