/* ==========================================================================
   River Arts navigation  —  rebuild 2026-07-26
   Namespaced ra-* so it cannot collide with the ~5,900 lines of legacy inline
   CSS in templates/html-header.twig. Bump RA_NAV_VER in functions.php on edit.

   Contrast (all verified, WCAG 2.1 AA):
     #281d17 on #ffffff   16.4:1   nav links
     #8a6219 on #ffffff    5.47:1  nav hover / current
     #ffffff on #38607f    6.67:1  utility bar
     #ffffff on #281d17   16.4:1   panels + drawer
     #ffd35b on #281d17   11.5:1   panel hover, drawer accents
     #281d17 on #ffd35b   11.5:1   Donate button
   ========================================================================== */

:root {
	--ra-dark:   #281d17;
	--ra-blue:   #38607f;
	--ra-gold:   #ffd35b;
	--ra-goldtx: #8a6219;
	--ra-cream:  #e8e3d7;
	/* Logo is 350x180 (1.94:1). The original theme sized it by max-WIDTH 246px
	   -> ~127px tall, so the bar has to clear that. Sizing by max-height made
	   it roughly half the size it used to be. */
	--ra-logo:    246px;
	--ra-bar:     142px;
	--ra-util:    34px;
	/* A viewport-anchored mega panel must start at the TAB's bottom edge, not
	   the bar's, or it floats free of its tab. Link box is ~39px, so half the
	   bar plus ~19px. */
	--ra-paneltop:       calc(var(--ra-util) + var(--ra-bar) / 2 + 19px);
}

/* --------------------------------------------------------------------------
   Hide the legacy header and neutralise the space it used to reserve.
   html-header.twig sets padding-top on .wh-page-content-wrapper in three
   places to clear the old fixed header; without this the new nav and that
   padding stack into a 200px+ gap. (Alpenglow hit exactly this.)
   -------------------------------------------------------------------------- */
body[data-template] #site-header-wrap { display: none !important; }
/* padding-top AND margin-top - the theme uses both. The margin is 128px and is
   only zeroed by the theme under 768px, which is why the leftover gap showed
   on large screens only. */
body .wh-page-content-wrapper {
	padding-top: 0 !important;
	margin-top: 0 !important;
}

/* --------------------------------------------------------------------------
   Shell
   -------------------------------------------------------------------------- */
.ra-nav-shell {
	position: fixed;
	top: 0; left: 0; right: 0;
	z-index: 1000;
	background: #ffffff;
	box-shadow: 0 1px 0 rgba(40, 29, 23, 0.10);
}
/* Scoped to the public shell. base.twig is the ONLY template that includes
   partials/nav.twig, so it is the only one that needs to clear the fixed bar.
   A bare `body` rule here also lands on the Webhelper Tools back office --
   base-webhelper.twig calls wp_head(), so this file loads there too -- and
   #wh-top-bar is position:fixed with NO top value, so it drops to the padded
   static position while .wh-navbar (top:32px) stays put. That inverts the
   two bars. Keep this selector scoped. */
body[data-template="base.twig"] { padding-top: calc(var(--ra-bar) + var(--ra-util)); }


/* utility bar ------------------------------------------------------------- */
.ra-nav-utility {
	background: var(--ra-blue);
	height: var(--ra-util);
}
.ra-nav-utility-inner {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 32px;
	height: var(--ra-util);
	display: flex;
	align-items: center;
	justify-content: flex-end;
	gap: 26px;
}
.ra-nav-util {
	color: #ffffff;
	font-family: "Oswald", sans-serif;
	font-size: 13px;
	letter-spacing: 0.08em;
	text-transform: uppercase;
	text-decoration: none;
	transition: color 180ms ease;
}
.ra-nav-util:hover,
.ra-nav-util:focus { color: var(--ra-gold); }

/* main bar ---------------------------------------------------------------- */
.ra-nav-bar { background: #ffffff; }
.ra-nav-inner {
	max-width: 1560px;
	margin: 0 auto;
	padding: 0 32px;
	height: var(--ra-bar);
	display: flex;
	align-items: center;
	gap: 32px;
}

.ra-nav-logo { flex: 0 0 auto; display: block; line-height: 0; }
.ra-nav-logo img {
	display: block;
	max-width: var(--ra-logo);
	width: 100%;
	height: auto;
}

/* --------------------------------------------------------------------------
   Desktop nav
   -------------------------------------------------------------------------- */
.ra-nav-drawer { margin-left: auto; }
.ra-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: stretch;
	gap: 4px;
}
.ra-nav-item { position: relative; display: flex; align-items: center; }

.ra-nav-link {
	/* set directly, not inherited - body carries font-family:'Roboto' !important */
	font-family: "Oswald", sans-serif;
	font-size: 16px;
	font-weight: 500;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--ra-dark);
	text-decoration: none;
	padding: 10px 14px;
	transition: color 180ms ease;
}
.ra-nav-link:hover,
.ra-nav-link:focus { color: var(--ra-goldtx); }

/* The tab background sits on the ITEM, not the link, so it encloses the
   chevron too - on the link alone the arrow was left stranded outside the
   highlighted tab. */
.ra-nav-item {
	border-radius: 6px 6px 0 0;
	transition: background-color 180ms ease;
}
.ra-has-panel:hover,
.ra-has-panel:focus-within,
.ra-has-panel.is-open { background: var(--ra-dark); }

.ra-has-panel:hover > .ra-nav-link,
.ra-has-panel:focus-within > .ra-nav-link,
.ra-has-panel.is-open > .ra-nav-link { color: #ffffff; }

/* disclosure chevron - the keyboard/touch route into a panel */
.ra-disc {
	appearance: none;
	-webkit-appearance: none;
	border: 0;
	background: transparent;
	width: 22px;
	height: 32px;
	margin-left: -8px;
	padding: 0;
	cursor: pointer;
	position: relative;
}
.ra-disc::before {
	content: "";
	position: absolute;
	top: 50%; left: 50%;
	width: 7px; height: 7px;
	margin: -5px 0 0 -4px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform 220ms ease;
	color: var(--ra-dark);
}
.ra-has-panel:hover > .ra-disc::before,
.ra-has-panel:focus-within > .ra-disc::before,
.ra-has-panel.is-open > .ra-disc::before { color: #ffffff; }

/* --------------------------------------------------------------------------
   Panels
   visibility (not display) so hover, :focus-within and the JS class can all
   drive it, AND so hidden panels leave the accessibility tree and cannot be
   tabbed into.
   -------------------------------------------------------------------------- */
.ra-panel {
	position: absolute;
	top: calc(50% + 19px);   /* docks to the link's bottom edge, not the bar's */
	left: 0;
	min-width: 260px;
	background: var(--ra-dark);
	border-radius: 0 6px 6px 6px;
	box-shadow: 0 14px 30px -6px rgba(40, 29, 23, 0.45);
	visibility: hidden;
	opacity: 0;
	transform: translateY(6px);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s linear 200ms;
	z-index: 20;
}
.ra-has-panel:hover > .ra-panel,
.ra-has-panel:focus-within > .ra-panel,
.ra-has-panel.is-open > .ra-panel {
	visibility: visible;
	opacity: 1;
	transform: translateY(0);
	transition: opacity 200ms ease, transform 200ms ease, visibility 0s;
}

/* mega panels are far wider than their tab, so round all four corners */
.ra-panel--mega { border-radius: 6px; padding: 8px; }
.ra-panel--mega .ra-panel-inner { padding: 14px 18px 18px; }
/* The wide Projects jumbo is anchored to the VIEWPORT, not to its tab.
   Docked to the tab it ran off the right edge, and a max-width cannot fix that
   - the overflow comes from the left offset, not the width. Fixed positioning
   also means it cannot break if PROJECTS moves in the menu order. */
.ra-panel--wide {
	position: fixed;
	top: var(--ra-paneltop);
	/* Align the panel's right edge with the NAV CONTAINER's right edge, not the
	   viewport's. .ra-nav-inner is a centred max-width:1560px box, so on a very
	   wide screen a viewport-anchored panel drifts far right of the menu it
	   belongs to. This tracks the container's gutter instead. */
	right: calc(32px + max(0px, (100vw - 1560px) / 2));
	left: auto;
	width: min(1180px, calc(100vw - 64px));
}

/* Standard dropdowns all open LEFT-aligned (extending rightward). DONATE is
   the last item that has one, and VOLUNTEER + CONTACT after it are short, so
   there is room - right-aligning it made it open leftward for no reason. */

.ra-panel-inner { padding: 10px 6px; }

.ra-panel-cols { list-style: none; margin: 0; padding: 0; }
.ra-panel-cols--2 { columns: 2; column-gap: 30px; }
.ra-panel-cols--3 { columns: 3; column-gap: 30px; }
.ra-panel-cols li { break-inside: avoid; margin: 0; }

.ra-panel-cols a {
	display: block;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	font-weight: 400;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	line-height: 1.3;
	color: #ffffff;
	text-decoration: none;
	padding: 9px 12px;
	border-radius: 4px;
	transition: color 160ms ease, background-color 160ms ease;
}
.ra-panel-cols a:hover,
.ra-panel-cols a:focus {
	color: var(--ra-gold);
	background: rgba(255, 255, 255, 0.07);
}

/* full-width banner across the top of the Projects mega */
.ra-panel-banner {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	font-family: "Oswald", sans-serif;
	font-size: 15px;
	font-weight: 500;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--ra-dark);
	background: var(--ra-gold);
	text-decoration: none;
	padding: 12px 18px;
	border-radius: 4px;
	margin-bottom: 14px;
	transition: background-color 180ms ease;
}
.ra-panel-banner:hover,
.ra-panel-banner:focus { background: #ffdf85; color: var(--ra-dark); }
.ra-panel-banner .ra-arrow { transition: transform 180ms ease; }
.ra-panel-banner:hover .ra-arrow { transform: translateX(4px); }

/* Events panel: a real 3-column grid - events flow across the first two,
   the callout owns the third. Collapses to a single column when there are no
   upcoming events, so the callout does not sit alone in column 3 with two
   empty columns beside it. */
.ra-panel-inner--events {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	gap: 0 28px;
	align-items: start;
}
.ra-panel-inner--events:has(.ra-panel-cols--2) {
	grid-template-columns: minmax(190px, 1fr) minmax(190px, 1fr) 236px;
}
.ra-panel-inner--events .ra-panel-cols--2 { grid-column: span 2; }
.ra-panel-inner--events:has(.ra-panel-cols--2) .ra-callout {
	border-left: 1px solid rgba(255, 255, 255, 0.16);
	padding-left: 24px;
}
.ra-callout-title {
	font-family: "Oswald", sans-serif;
	font-size: 12px;
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--ra-gold);
	margin: 6px 0 10px;
}
.ra-callout-link {
	display: block;
	font-family: "Oswald", sans-serif;
	font-size: 14px;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #ffffff;
	text-decoration: none;
	padding: 8px 0;
	border-bottom: 1px solid rgba(255, 255, 255, 0.12);
	transition: color 160ms ease;
}
.ra-callout-link:hover,
.ra-callout-link:focus { color: var(--ra-gold); }

/* --------------------------------------------------------------------------
   Drawer chrome — hidden on desktop
   -------------------------------------------------------------------------- */
.ra-nav-burger,
.ra-drawer-head,
.ra-drawer-actions,
.ra-nav-scrim { display: none; }

/* --------------------------------------------------------------------------
   Focus
   -------------------------------------------------------------------------- */
.ra-nav-shell a:focus-visible,
.ra-nav-shell button:focus-visible {
	outline: 3px solid var(--ra-blue);
	outline-offset: 2px;
}
.ra-panel a:focus-visible,
.ra-drawer-actions a:focus-visible,
.ra-nav-utility a:focus-visible,
.ra-has-panel.is-open > .ra-nav-link:focus-visible {
	outline: 3px solid var(--ra-gold);
	outline-offset: 2px;
}

/* ==========================================================================
   MOBILE  <=991px  —  left-sliding drawer (right edge belongs to the cart)
   ========================================================================== */
@media screen and (max-width: 991px) {

	/* logo matches the theme's old mobile max-width: 160px (~82px tall) */
	:root {
		--ra-bar:     94px;
		--ra-logo:    160px;
	}
	/* scoped for the same reason as the desktop rule above - see the note there */
	body[data-template="base.twig"] { padding-top: var(--ra-bar); }

	.ra-nav-utility { display: none; }
	.ra-nav-inner { padding: 0 18px; gap: 14px; }

	.ra-nav-burger {
		display: block;
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		background: transparent;
		width: 42px; height: 42px;
		padding: 9px 8px;
		cursor: pointer;
		flex: 0 0 auto;
	}
	.ra-nav-burger span {
		display: block;
		height: 2px;
		background: var(--ra-dark);
		border-radius: 2px;
		transition: transform 240ms ease, opacity 200ms ease;
	}
	.ra-nav-burger span + span { margin-top: 6px; }

	/* centred: auto margins both sides, and a spacer matching the burger so the
	   logo is optically centred in the bar rather than pushed off by 42px */
	.ra-nav-logo { margin: 0 auto; }
	.ra-nav-inner::after { content: ""; flex: 0 0 42px; }

	/* the drawer itself */
	.ra-nav-drawer {
		position: fixed;
		top: 0; bottom: 0;
		left: 0;
		width: 330px;
		max-width: 86vw;
		margin: 0;
		background: var(--ra-dark);
		transform: translateX(-100%);
		transition: transform 300ms ease;
		display: flex;
		flex-direction: column;
		z-index: 1100;
	}
	body.ra-nav-open .ra-nav-drawer { transform: translateX(0); }

	/* The drawer takes programmatic focus on open so keyboard/SR users land
	   inside it. It is tabindex="-1" and never reached by Tab, so hiding its
	   ring is not a 2.4.7 concern - every real control keeps its own. */
	.ra-nav-drawer:focus { outline: none; }

	/* White head so the black wordmark and gold disc both read cleanly - tinted
	   backdrops sat too close in tone to the gold and muddied the mark.

	   The 1px brown edge is what separates it from what is behind. It is needed
	   HERE ONLY: the scrim sits UNDER the nav shell (that is what stopped the
	   drawer being greyed out), so the white nav bar stays undimmed right
	   alongside the head and the two whites run together. Below the head the
	   drawer is dark brown against a dimmed canvas and needs no help.
	   On white: close button 16.4:1, focus ring 6.67:1, close hover 5.47:1. */
	.ra-drawer-head {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding: 14px 14px 14px 18px;
		background: #ffffff;
		border-right: 1px solid var(--ra-dark);
		flex: 0 0 auto;
	}
	.ra-drawer-logo { display: block; line-height: 0; flex: 0 1 auto; }
	.ra-drawer-logo img {
		display: block;
		max-width: 150px;
		width: 100%;
		height: auto;
	}
	.ra-drawer-close {
		appearance: none;
		-webkit-appearance: none;
		border: 0;
		background: transparent;
		color: var(--ra-dark);   /* 16.4:1 on the white head */
		font-size: 32px;
		line-height: 1;
		width: 44px; height: 44px;
		flex: 0 0 auto;
		cursor: pointer;
	}
	.ra-drawer-close:hover,
	.ra-drawer-close:focus { color: var(--ra-goldtx); }

	/* the head is light, so the gold drawer ring would be invisible here -
	   these two need the blue ring instead (6.67:1 on white) */
	.ra-drawer-logo:focus-visible,
	.ra-drawer-close:focus-visible {
		outline: 3px solid var(--ra-blue);
		outline-offset: 2px;
	}

	/* scrolls independently of the pinned action bar */
	.ra-nav { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }

	.ra-nav-list { display: block; gap: 0; padding: 6px 0 10px; }
	.ra-nav-item {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		border-bottom: 1px solid rgba(255, 255, 255, 0.09);
	}
	.ra-nav-link {
		flex: 1 1 auto;
		color: #ffffff;
		font-size: 16px;
		padding: 15px 18px;
		border-radius: 0;
	}
	.ra-nav-link:hover,
	.ra-nav-link:focus { color: var(--ra-gold); }
	.ra-has-panel:hover > .ra-nav-link,
	.ra-has-panel:focus-within > .ra-nav-link,
	.ra-has-panel.is-open > .ra-nav-link { background: transparent; color: var(--ra-gold); }

	.ra-disc {
		flex: 0 0 auto;
		width: 52px; height: 52px;
		margin: 0;
	}
	.ra-disc::before { color: #ffffff; }
	.ra-has-panel.is-open > .ra-disc::before {
		color: var(--ra-gold);
		transform: rotate(-135deg);
		margin-top: -1px;
	}

	/* accordion — height animation needs an explicit collapsed state */
	.ra-panel {
		position: static;
		flex: 1 1 100%;
		width: auto;
		min-width: 0;
		background: rgba(0, 0, 0, 0.22);
		border-radius: 0;
		box-shadow: none;
		transform: none;
		opacity: 1;
		visibility: hidden;
		max-height: 0;
		overflow: hidden;
		padding: 0;
		transition: max-height 300ms ease, visibility 0s linear 300ms;
	}
	.ra-has-panel:hover > .ra-panel,
	.ra-has-panel:focus-within > .ra-panel { visibility: hidden; max-height: 0; }
	.ra-has-panel.is-open > .ra-panel {
		visibility: visible;
		max-height: 1800px;
		transition: max-height 400ms ease, visibility 0s;
	}
	.ra-panel--mega,
	.ra-panel--wide {
		/* the desktop rule puts --wide on position:fixed - unset it here or the
		   Projects accordion would float over the drawer */
		position: static;
		top: auto;
		right: auto;
		width: auto;
		padding: 0;
	}
	.ra-panel--mega .ra-panel-inner,
	.ra-panel-inner { padding: 6px 0 10px; }

	/* one column in a 330px drawer */
	.ra-panel-cols--2,
	.ra-panel-cols--3 { columns: 1; }
	.ra-panel-cols a { padding: 11px 18px 11px 30px; border-radius: 0; font-size: 13px; }

	.ra-panel-inner--events { display: block; }
	.ra-panel-inner--events .ra-panel-cols--2 { min-width: 0; }
	.ra-callout {
		flex: none;
		border-left: 0;
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		padding: 8px 18px 4px 30px;
		margin-top: 6px;
	}
	.ra-panel-banner { margin: 8px 18px 10px 30px; font-size: 13px; }

	/* pinned action bar */
	.ra-drawer-actions {
		display: block;
		flex: 0 0 auto;
		padding: 14px 18px calc(14px + env(safe-area-inset-bottom, 0px));
		border-top: 1px solid rgba(255, 255, 255, 0.14);
		background: rgba(0, 0, 0, 0.25);
	}
	.ra-btn-row { display: flex; gap: 10px; margin-top: 10px; }
	.ra-btn {
		display: block;
		flex: 1 1 0;
		text-align: center;
		font-family: "Oswald", sans-serif;
		font-size: 14px;
		font-weight: 500;
		letter-spacing: 0.1em;
		text-transform: uppercase;
		text-decoration: none;
		padding: 13px 14px;
		border-radius: 4px;
		transition: background-color 180ms ease, color 180ms ease;
	}
	.ra-btn .fa { margin-right: 7px; }
	.ra-btn--gold { background: var(--ra-gold); color: var(--ra-dark); }
	.ra-btn--gold:hover,
	.ra-btn--gold:focus { background: #ffdf85; color: var(--ra-dark); }
	.ra-btn--ghost {
		background: transparent;
		color: #ffffff;
		border: 1px solid rgba(255, 255, 255, 0.45);
	}
	.ra-btn--ghost:hover,
	.ra-btn--ghost:focus { background: rgba(255, 255, 255, 0.12); color: #ffffff; }

	/* Scrim sits BELOW the nav shell, not between shell and drawer.
	   The drawer's z-index:1100 is trapped inside .ra-nav-shell's stacking
	   context (position:fixed + z-index:1000), so from the outside the whole
	   shell paints at 1000 - a scrim at 1050 covered the drawer too and greyed
	   out the menu. Raising the drawer cannot fix that; the scrim has to go
	   under the shell instead. */
	.ra-nav-scrim {
		display: block;
		position: fixed;
		inset: 0;
		background: rgba(40, 29, 23, 0.55);
		opacity: 0;
		visibility: hidden;
		transition: opacity 300ms ease, visibility 0s linear 300ms;
		z-index: 990;
	}
	body.ra-nav-open .ra-nav-scrim {
		opacity: 1;
		visibility: visible;
		transition: opacity 300ms ease, visibility 0s;
	}
	body.ra-nav-open { overflow: hidden; }
}

/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
	.ra-nav-shell,
	.ra-nav-inner,
	.ra-nav-utility,
	.ra-nav-logo img,
	.ra-panel,
	.ra-nav-drawer,
	.ra-nav-scrim,
	.ra-disc::before,
	.ra-btn,
	.ra-panel-banner .ra-arrow { transition: none !important; }
}