/**
 * Waterwheel Mega Navigation — front-end styles.
 * Mirrors the original mega-nav look so the site header keeps its rich
 * dropdown panels but renders from editable block attributes instead of
 * hardcoded HTML.
 */

.wwh-mega-nav {
	display: flex;
	align-items: center;
}

.wwh-mega-nav__menu {
	display: flex;
	align-items: center;
	list-style: none;
	margin: 0;
	padding: 0;
	gap: 2rem;
}

.wwh-mega-nav__item {
	position: static; /* dropdown spans full header width */
}

.wwh-mega-nav__link {
	color: #fff;
	text-decoration: none;
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 400;
	letter-spacing: 0.22em;
	text-transform: uppercase;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem 0;
	white-space: nowrap;
	display: inline-flex;
	align-items: center;
}

/*
 * NAVBAR_SCROLL_MOCK.pdf refinements 1 and 4 (core 2.125.0). Hover used to be
 * `opacity: 0.85`, which nobody could see. Now: a faint underline on hover, the
 * copper one for the open item (it was the home page's alone, in the theme's
 * header.css), and a dot under the section the visitor is in. The accent
 * defaults to the light copper the header uses over photos; the theme's pinned
 * cream bar sets `--wwh-nav-accent` to the darker #8C5A2D.
 *
 * Desktop only: below 1250px the items are rows in the burger overlay.
 */
@media (min-width: 1251px) {
	/* Three classes, not one: the theme's header.css sets
	   `.site-header .wwh-mega-nav__link { text-decoration: none }` and is
	   enqueued after this sheet, so a tie on specificity loses on order. */
	.wwh-mega-nav .wwh-mega-nav__menu .wwh-mega-nav__link {
		text-decoration: underline;
		text-decoration-thickness: 2px;
		text-underline-offset: 10px;
		text-decoration-color: transparent;
		transition: text-decoration-color 0.2s ease;
	}

	.wwh-mega-nav .wwh-mega-nav__menu .wwh-mega-nav__link:hover {
		text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
	}

	.wwh-mega-nav .wwh-mega-nav__menu .wwh-mega-nav__link[aria-expanded="true"] {
		text-decoration-color: var(--wwh-nav-accent, rgba(197, 139, 92, 0.95));
	}

	.wwh-mega-nav__item--current > .wwh-mega-nav__link {
		position: relative;
	}

	/* `::after` is the caret, and on the home page `::before` is the contrast
	   glow (theme header.css) — but the home page is never a current section,
	   because the home path is never matched. */
	.wwh-mega-nav__item--current > .wwh-mega-nav__link::before {
		content: '';
		position: absolute;
		left: calc(50% - 10px);
		bottom: -4px;
		width: 5px;
		height: 5px;
		border-radius: 50%;
		background: var(--wwh-nav-accent, rgba(197, 139, 92, 0.95));
	}
}

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

/* Caret for items with a dropdown */
.wwh-mega-nav__item--has-dropdown .wwh-mega-nav__link::after {
	content: '';
	display: inline-block;
	width: 6px;
	height: 6px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	margin-left: 0.5rem;
	position: relative;
	top: -2px;
	transition: transform 0.2s ease;
}

.wwh-mega-nav__item--has-dropdown .wwh-mega-nav__link[aria-expanded="true"]::after {
	transform: rotate(-135deg);
	top: 1px;
}

/*
 * Dropdown panel.
 *
 * `--open` is the SINGLE source of truth for whether a panel is showing, and it
 * is set only by view.js. This rule used to also match `:hover` and
 * `:focus-within`, which is what users complained about: click-to-open already
 * worked, but moving the pointer off the panel stopped `:hover` matching and the
 * panel vanished while `--open` and `aria-expanded="true"` both still said it was
 * open. State and appearance disagreed in both directions. Don't reintroduce
 * either selector — a second open path desyncs `aria-expanded` again.
 * (Removed 2026-09-10, core 2.37.0.)
 *
 * The reveal is a one-row grid animated 0fr -> 1fr, so the panel unrolls from
 * under the nav bar. Three details that will each look like a mistake later:
 *   - `overflow: hidden` clips the INNER as the row grows, but not the wrapper's
 *     own box-shadow, so the shadow tracks the growing edge. That is what makes
 *     it read as unrolling. `clip-path` would clip the shadow away entirely.
 *   - `visibility: hidden` is load-bearing, not redundant. Zero height plus
 *     `overflow: hidden` does NOT reliably drop the panel's links out of the tab
 *     order; visibility does.
 *   - `opacity` is redundant to the reveal, but a browser that can't interpolate
 *     `grid-template-rows` then degrades to a plain fade instead of a hard snap.
 *
 * The tracks are `minmax(0, Nfr)`, not a bare `Nfr`, and that is load-bearing.
 * A bare `0fr` track is floored by the item's min-content contribution, and the
 * inner's 2.5rem top+bottom padding counts toward that even with `min-height: 0`
 * (which caps the content box, not the padding). Measured: the closed row sat at
 * exactly 80px, so the panel started its slide from an 80px sliver instead of
 * from nothing. `minmax(0, …)` pins the track minimum to 0 and the wrapper's
 * `overflow: hidden` clips the overflowing inner. Don't simplify it back.
 */
.wwh-mega-nav__dropdown {
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	background: var(--wp--custom--wwh--nav-dropdown-bg, #ffffff);
	box-shadow: 0 12px 40px rgba(0, 0, 0, 0.15);
	border-top: 1px solid rgba(140, 90, 45, 0.35); /* joins the panel to the bar */
	display: grid;
	grid-template-rows: minmax(0, 0fr);
	overflow: hidden;
	opacity: 0;
	visibility: hidden;
	transition: grid-template-rows 0.28s ease, opacity 0.2s ease, visibility 0.28s;
	z-index: 200;
}

.wwh-mega-nav__item--has-dropdown .wwh-mega-nav__dropdown--open {
	grid-template-rows: minmax(0, 1fr);
	opacity: 1;
	visibility: visible;
}

/*
 * Refinement 2: every panel starts at the wordmark's edge. Each panel used to
 * be a centred 1200px box, so the content started at a different x for each
 * menu (193px for Discover, 361px for Get Involved at 1600px) and jumped
 * sideways as you moved along the menu. The side padding is the header's own
 * gutter (theme header.css), and the columns keep a set width (below) instead
 * of sharing out the row.
 */
.wwh-mega-nav__dropdown-inner {
	display: flex;
	padding: 2.5rem clamp(0.75rem, 4vw, 3rem);
	gap: 3rem;
	min-height: 0; /* pairs with the minmax(0, …) track — see the note above */
}

/* Featured image card */
.wwh-mega-nav__featured {
	flex: 0 0 280px;
	position: relative;
	border-radius: 8px;
	overflow: hidden;
}

.wwh-mega-nav__featured img {
	width: 100%;
	height: 220px;
	object-fit: cover;
	display: block;
}

/* The scrim has to hold against the WORST image, not the average one.
   Panel images are volunteer-chosen, so contrast can't be reasoned about
   per-card — the Shop card (a robin on a pale ground) put white breast
   feathers directly behind the label and measured 1.31:1 against white text.
   The old `linear-gradient(transparent, rgba(0,0,0,.7))` was the cause: it
   starts fully transparent at the caption's TOP edge, which is exactly where
   the label sits, so the label got almost no cover at all.

   Now the gradient is opaque where the text is and only fades at the top, past
   the type. Measured over pure white that leaves ~12:1 on the label. Same
   reasoning: contrast must hold in the worst case — don't lighten for looks. */
.wwh-mega-nav__featured-caption {
	position: absolute;
	bottom: 0;
	left: 0;
	right: 0;
	padding: 1.75rem 1rem 1rem;
	background: linear-gradient(
		to top,
		rgba(20, 17, 13, 0.92) 0%,
		rgba(20, 17, 13, 0.88) 60%,
		rgba(20, 17, 13, 0.55) 85%,
		rgba(20, 17, 13, 0) 100%
	);
	color: #fff;
}

.wwh-mega-nav__featured-label {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.05em;
	margin-bottom: 0.25rem;
}

.wwh-mega-nav__featured-desc {
	display: block;
	font-size: var(--wp--preset--font-size--caption);
	opacity: 0.9;
	line-height: 1.3;
}

/* Link columns */
.wwh-mega-nav__columns {
	display: flex;
	flex: 1;
	gap: 2.5rem;
}

.wwh-mega-nav__column {
	flex: 0 1 12.5rem;
	min-width: 0;
}

/* Refinement 3: the headings were bold serif capitals over a 2px black rule
   and outweighed the links. Now small Montserrat capitals in dark copper
   (#8C5A2D, 5.1:1 on the cream panel) over a hairline. */
.wwh-mega-nav__heading {
	font-family: 'Montserrat', 'Helvetica Neue', Arial, sans-serif;
	font-size: 0.75rem;
	font-weight: 600;
	text-transform: uppercase;
	letter-spacing: 0.24em;
	color: #8C5A2D;
	margin: 0 0 1rem 0;
	padding-bottom: 0.6rem;
	border-bottom: 1px solid rgba(26, 22, 19, 0.18);
}

.wwh-mega-nav__column ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.wwh-mega-nav__column li {
	margin-bottom: 0.6rem;
}

/* Refinement 4: hover was navy to near-black, invisible in practice. Now a
   copper underline and a small arrow. The arrow's alt text is empty so screen
   readers don't announce it. The page you are on is bold with a copper dot
   (refinement 1; aria-current is set in render.php). */
.wwh-mega-nav__column li {
	position: relative;
}

.wwh-mega-nav__column a {
	color: var(--wp--preset--color--ink-primary, #1A1613);
	text-decoration: underline;
	text-decoration-thickness: 1.5px;
	text-underline-offset: 5px;
	text-decoration-color: transparent;
	font-family: 'Cormorant Garamond', 'EB Garamond', Georgia, serif;
	font-size: var(--wp--preset--font-size--body);
	font-weight: 500;
	transition: color 0.15s ease, text-decoration-color 0.15s ease;
}

/* Zero width with a leading no-break space: an arrow with real width wrapped
   onto a blank second line whenever a label nearly filled its column. */
.wwh-mega-nav__column a::after {
	content: '\00a0→' / '';
	display: inline-block;
	width: 0;
	white-space: nowrap;
	color: #8C5A2D;
	opacity: 0;
	transform: translateX(-4px);
	transition: opacity 0.15s ease, transform 0.15s ease;
}

.wwh-mega-nav__column a:hover,
.wwh-mega-nav__column a:focus-visible {
	text-decoration-color: #8C5A2D;
}

.wwh-mega-nav__column a:hover::after,
.wwh-mega-nav__column a:focus-visible::after {
	opacity: 1;
	transform: none;
}

.wwh-mega-nav__column a[aria-current] {
	font-weight: 700;
}

.wwh-mega-nav__column a[aria-current]::before {
	content: '';
	position: absolute;
	left: -0.9rem;
	top: 0.7em;
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: #8C5A2D;
}

/* Hamburger toggle — hidden on desktop */
.wwh-mega-nav__toggle {
	display: none;
	background: none;
	border: none;
	cursor: pointer;
	padding: 0.5rem;
	width: 36px;
	height: 30px;
	position: relative;
}

/*
 * The visible burger is 36x30 — under the 44x44 WCAG 2.1 AA target size. The
 * box itself can't simply grow: the three bars are absolutely positioned at
 * fixed `top` offsets with `left:0; width:100%`, so padding would both stretch
 * and shift them. A pseudo-element extends the *hit* area to 44x44, centred on
 * the icon, while the icon keeps its designed size and position.
 */
.wwh-mega-nav__toggle::before {
	content: '';
	position: absolute;
	top: 50%;
	left: 50%;
	transform: translate(-50%, -50%);
	width: 44px;
	height: 44px;
}

.wwh-mega-nav__toggle span {
	display: block;
	width: 100%;
	height: 2px;
	background: #fff;
	position: absolute;
	left: 0;
	transition: transform 0.3s ease, opacity 0.3s ease;
}

.wwh-mega-nav__toggle span:nth-child(1) { top: 4px; }
.wwh-mega-nav__toggle span:nth-child(2) { top: 14px; }
.wwh-mega-nav__toggle span:nth-child(3) { top: 24px; }

.wwh-mega-nav__toggle[aria-expanded="true"] span:nth-child(1) {
	transform: rotate(45deg);
	top: 14px;
}

.wwh-mega-nav__toggle[aria-expanded="true"] span:nth-child(2) {
	opacity: 0;
}

.wwh-mega-nav__toggle[aria-expanded="true"] span:nth-child(3) {
	transform: rotate(-45deg);
	top: 14px;
}

/*
 * Mobile / compact responsive.
 *
 * Breakpoint raised 900px -> 1250px on 2026-08-04. The horizontal menu needs
 * more room than 900px gives it, so between 901px and ~1249px the desktop nav
 * was shown but did not fit, and the header pushed the whole document into
 * horizontal scroll on EVERY page. Measured at 1400px:
 *
 *     brand 338 + menu 750 + search 36 + login 93 = 1217px of content
 *
 * plus gutters, so ~1250px is the first width where the row genuinely fits.
 * Overflow measured before the change: +251px @950, +203 @1000, +180 @1024,
 * +107 @1100, +11 @1200, clean from 1250.
 *
 * If the menu ever gains an item, re-measure — this number is a consequence of
 * the content width, not a device size.
 */
@media (max-width: 1250px) {
	.wwh-mega-nav__toggle {
		display: block;
	}

	.wwh-mega-nav__menu {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		right: 0;
		flex-direction: column;
		background: var(--wp--preset--color--nocturne, #1B1F2A);
		padding: 1.5rem 2rem;
		gap: 0;
		z-index: 200;
	}

	/*
	 * The overlay runs to the foot of the screen instead of stopping after its
	 * last item with the page showing underneath (GitLab #426), and a long one
	 * (an open accordion on a short phone) scrolls inside itself.
	 * `--wwh-nav-panel-top` is where the overlay starts on screen, measured by
	 * view.js when it opens (ribbon, admin bar and header row above it).
	 */
	.wwh-mega-nav__menu--open {
		display: flex;
		box-sizing: border-box;
		min-height: calc(100vh - var(--wwh-nav-panel-top, 0px));
		min-height: calc(100dvh - var(--wwh-nav-panel-top, 0px));
		max-height: calc(100vh - var(--wwh-nav-panel-top, 0px));
		max-height: calc(100dvh - var(--wwh-nav-panel-top, 0px));
		overflow-y: auto;
		overscroll-behavior: contain;
	}

	.wwh-mega-nav__item {
		width: 100%;
		border-bottom: 1px solid rgba(255, 255, 255, 0.1);
	}

	.wwh-mega-nav__link {
		display: block;
		width: 100%;
		text-align: left;
		padding: 1rem 0;
		font-size: var(--wp--preset--font-size--body);
	}

	/*
	 * The open overlay lays its own nocturne ground, so the scroll-driven
	 * `body.home2-nav-on-light` inversion in the theme's header.css is wrong
	 * here — it painted #1a1613 ink on #1B1F2A, a contrast of 1.09:1, and the
	 * top-level items read as missing rather than merely as unreadable.
	 *
	 * This keys off `body.wwh-nav-open` (set by view.js) rather than the
	 * overlay's own `--open` class, because it has to beat
	 * `body.home2-nav-on-light .site-header .wwh-mega-nav__link` — `!important`
	 * at (0,3,0) in the theme's header.css.
	 *
	 * A tie on specificity is NOT enough: header.css is enqueued after this
	 * sheet (measured: this at document index 6, header.css at 24), so on equal
	 * specificity the theme wins on order. Hence the extra `.wwh-mega-nav__menu`
	 * here, taking this to (0,4,0). Every class is load-bearing — drop one and
	 * the labels silently go back to unreadable.
	 *
	 * Verify by screenshot pixels, not getComputedStyle: reading colours over
	 * CDP returned stale values throughout this fix and will tell you a broken
	 * rule works. scratchpad/contrast.py does the measurement.
	 *
	 * Scoped to the open overlay only: the *collapsed* header below this
	 * breakpoint still sits over the page and must keep following the inversion.
	 *
	 * The chevrons are `currentColor` and follow along; the burger/close glyph
	 * sets its own `background: #fff` and never needed this.
	 */
	body.wwh-nav-open .site-header .wwh-mega-nav__menu .wwh-mega-nav__link {
		color: #fff !important;
	}

	/*
	 * The mobile accordion shares the desktop grid reveal, so a sub-panel slides
	 * open instead of snapping. It used to flip `display: none` -> `block`; that
	 * override is gone and must NOT come back, because `display: block` beats the
	 * base rule's `display: grid` and silently kills the animation. The
	 * opacity/visibility overrides went with it so `--open` drives both surfaces.
	 * Only the chrome differs here: static flow, no shadow, tinted ground.
	 */
	.wwh-mega-nav__dropdown {
		position: static;
		box-shadow: none;
		background: rgba(255, 255, 255, 0.05);
	}

	.wwh-mega-nav__dropdown-inner {
		flex-direction: column;
		padding: 1rem 1.5rem;
		gap: 1.5rem;
	}

	.wwh-mega-nav__featured {
		flex: none;
		display: none;
	}

	.wwh-mega-nav__columns {
		flex-direction: column;
		gap: 1.5rem;
	}

	/* The desktop column's 12.5rem flex-basis is a WIDTH; stacked, it became a
	   200px minimum HEIGHT, so a short group (one or three links) sat on a tall
	   empty gap before the next heading (GitLab #426). */
	.wwh-mega-nav__column {
		flex: none;
	}

	/* On the nocturne overlay. These were ink-caption (#5A544D), 2.2:1
	   on #1B1F2A, and the link hover turned white text that same grey. Light
	   copper is 5.7:1 here; hover underlines in it like the desktop panel. */
	.wwh-mega-nav__heading {
		color: #C58B5C;
		border-bottom-color: rgba(255, 255, 255, 0.18);
	}

	.wwh-mega-nav__column a {
		color: #fff;
	}

	.wwh-mega-nav__column a:hover,
	.wwh-mega-nav__column a:focus-visible {
		color: #fff;
		text-decoration-color: #C58B5C;
	}

	.wwh-mega-nav__column a::after {
		color: #C58B5C;
	}

	.wwh-mega-nav__column a[aria-current]::before {
		background: #C58B5C;
	}

	/* The section you are in: a copper edge on its row. */
	.wwh-mega-nav__item--current > .wwh-mega-nav__link {
		border-left: 3px solid #C58B5C;
		padding-left: 0.75rem;
	}
}

/*
 * Reduced motion. The slide reveal is decorative — the panel must still open and
 * close, it just does so instantly. Zeroing the transition is enough because
 * `--open` alone determines the final state; nothing here depends on a
 * transitionend firing.
 */
@media (prefers-reduced-motion: reduce) {
	.wwh-mega-nav__dropdown,
	.wwh-mega-nav__item--has-dropdown .wwh-mega-nav__link::after,
	.wwh-mega-nav__toggle span {
		transition: none;
	}
}