/**
 * Comp header, ported off Elementor.
 *
 * This is the rh-mega-menu stylesheet with its Elementor scaffolding removed.
 * Roughly a third of the original was there to fight the widget - !important
 * on every panel geometry property to outrank SmartMenus' inline styles,
 * repaints to undo Elementor's slate-grey active/highlighted item, and resets
 * for the widget wrappers between the column and the <ul>. None of that
 * applies here: the theme emits the markup, so the cascade is uncontested and
 * these rules are plain specificity throughout.
 *
 * Palette and measurements are unchanged - lifted from the comp.
 */

/* ---- Header shell ------------------------------------------------------ */

.rh-header {
	/* One source of truth for the bar height. The bar, the mega panel and the
	   drawer all read this, so they cannot drift apart - and its value comes
	   from theme.json (settings.custom.header.height), so the measurement is
	   configured rather than typed here. */
	--rh-header-h: var(--wp--custom--header--height, 108px);

	/* Reserves the bar's space so switching to position:fixed below cannot
	   collapse the wrapper and jump the page content upward. The +1px is the
	   bar's own border-bottom, which sits outside its min-height - without it
	   the page twitches a pixel every time a menu opens. */
	min-height: calc(var(--rh-header-h) + 1px);
}

.rh-header-bar {
	/* Wired to the theme.json presets so the header cannot drift from the rest
	   of the theme. No literal fallbacks: the global stylesheet that defines
	   the presets is printed everywhere this sheet is - the front end, and
	   the editor iframe, which gets both. */
	--rh-surface:   var(--wp--preset--color--cream);
	--rh-hover:     var(--wp--preset--color--parchment);
	/* What lights up under the pointer, kept apart from --rh-hover because that
	   one also serves as a quiet surface: the drawer's sub-panel and the
	   current-page pill. Parchment on cream barely registers as a highlight. */
	--rh-lit:       var(--rh-hover);
	--rh-ink:       var(--wp--preset--color--charcoal);
	--rh-muted:     var(--wp--preset--color--muted);
	/* Text on the outline buttons. The same brown as --rh-muted on the solid
	   bar, but full overlay ink over the hero: 11px capitals in 85% cream over
	   the sky came out at 3.8:1. */
	--rh-btn-ink:   var(--wp--preset--color--muted);
	/* The same brown as --rh-muted, taken down to text strength. --rh-muted is
	   a chrome tone: fine for icons, rules and arrows, which only owe 3:1 as
	   non-text. It is not strong enough for prose. Against the panel it gives
	   4.57:1, and against --rh-hover - which is what an item sits on the moment
	   you point at it, and descriptions do not lighten with the background - it
	   drops to 4.18:1, under the 4.5:1 AA floor for 12px text. This tone reads
	   6.77:1 on the panel and 6.19:1 hovered. */
	--rh-muted-ink: var(--wp--preset--color--muted-ink);
	--rh-accent:    var(--wp--preset--color--brick);
	--rh-line:      var(--wp--preset--color--line);
	/* Donate sits in both header modes, and the two modes want different
	   treatments: a filled brick button on the solid bar, a cream outline over
	   a photographic hero. Tokens rather than a second set of overlay
	   selectors, so it follows the bar the way everything else here does. */
	--rh-donate-bg:   var(--wp--preset--color--brick);
	--rh-donate-ink:  var(--wp--preset--color--cream);
	--rh-donate-line: var(--wp--preset--color--brick);
	/* On the solid button the heart is cream, because the button it sits on
	   is already the brick. Over a hero, where the button has no fill at
	   all, it goes brick instead — see the overlay block below. */
	--rh-donate-heart: var(--wp--preset--color--cream);
	/* Subscribe's outline. Staging's bar is always solid, so its literal
	   rgba(92,42,8,0.2) has no answer for the transparent bar over the hero,
	   where a 20% brown line is invisible. A tint of the brick preset, not
	   of --rh-accent: the accent turns cream over the hero, and the outline
	   has its own overlay value for that. */
	--rh-btn-line:    color-mix(in srgb, var(--wp--preset--color--brick) 20%, transparent);

	background-color: var(--rh-surface);
	border-bottom: 1px solid var(--rh-line);
	box-shadow: var(--wp--preset--shadow--bar);

	/* Always fixed, per the comp - the bar floats over the page and the hero
	   runs full-bleed beneath it. NOT sticky: position:sticky is constrained to
	   its containing block, and .rh-header is exactly as tall as the bar, so
	   sticky would release the moment you scrolled and leave the mega panel
	   floating on its own. The .rh-header wrapper above reserves the bar's
	   space in normal flow, which is what keeps the page from jumping. */
	position: fixed;
	left: 0;
	right: 0;
	top: 0;
	z-index: 50;

	/* The bar switches between its overlay and solid palettes by swapping the
	   --rh-* tokens above, and every piece of chrome in it follows: the logo,
	   the nav links, the social glyphs, Subscribe and Donate. They each used to
	   animate on their own clock — .3s for the bar and logo, .15s for the links
	   and Subscribe, .18s for Donate, nothing at all for the social icons, and
	   Subscribe's border snapped while its fill faded. The bar arrived in
	   pieces. One duration, used by all of them, so it arrives as one thing. */
	--rh-fade: var(--wp--custom--header--fade, 0.2s);
	--rh-ease: ease;

	transition:
		background-color var(--rh-fade) var(--rh-ease),
		box-shadow var(--rh-fade) var(--rh-ease),
		border-color var(--rh-fade) var(--rh-ease);
}

/* ---- Overlay mode: transparent over a dark full-bleed hero -------------
   The comp's front page opens on a full-viewport cover with the header
   floating over it, going solid once you scroll clear of it. `body.home` is
   WordPress's own front-page class, so this needs no markup of its own;
   .rh-overlay-header is the opt-in for any other template that opens the same
   way. Collapsing the flow placeholder to zero is what lets the hero start at
   the top of the viewport instead of below the bar. */
body:is(.home, .rh-overlay-header) .rh-header {
	min-height: 0;
}

/* Stated once, as the exception rather than as a pair of opposing blocks.
   The bar is solid by default; it goes transparent only on an overlay template
   that has not been scrolled and has nothing open. Previously this was two
   blocks — overlay tokens here, then the whole palette restated below to undo
   them — which is how the solid half drifted out of step and painted cream
   text on a cream panel. There is no restating now: when any arm below
   matches, these declarations simply do not apply and the bar is already what
   it was. */
body:is(.home, .rh-overlay-header):not(.is-scrolled) .rh-header-bar:not(:hover):not(:has(
		.rh-nav--main .menu-item-has-children > .rh-link:hover,
		.rh-nav--main .rh-panel:hover,
		.rh-nav--main .rh-depth-0.rh-hold,
		.rh-nav--main .rh-depth-0:focus-within > .rh-panel,
		.rh-burger[aria-expanded="true"]
	)) {
	background-color: transparent;
	border-bottom-color: transparent;
	box-shadow: none;
	/* Over a photographic hero the chrome has to hold its own contrast, so the
	   whole bar switches to the light-on-dark half of the palette. */
	--rh-ink: var(--wp--custom--header--overlay-ink);
	--rh-muted: var(--wp--custom--header--overlay-muted);
	--rh-btn-ink: var(--wp--custom--header--overlay-ink);
	--rh-muted-ink: var(--wp--custom--header--overlay-muted);
	--rh-accent: var(--wp--custom--header--overlay-ink);
	/* Focus rings over the hero: the brick ring is all but invisible on the
	   photograph, so it goes the overlay ink like everything else here. */
	--rh-focus-ink: var(--wp--custom--header--overlay-ink);
	--rh-hover: var(--wp--custom--header--overlay-hover);
	--rh-lit: var(--wp--custom--header--overlay-lit);
	--rh-line: var(--wp--custom--header--overlay-line);
	--rh-donate-bg: transparent;
	--rh-donate-ink: var(--wp--custom--header--overlay-ink);
	--rh-donate-line: var(--wp--custom--header--overlay-btn-line);
	/* The one piece of colour in the whole overlaid header. With the button's
	   fill gone there is nothing left carrying the brand's red, and a white
	   heart in an empty outline is just a shape; the brick heart is the same
	   red the button is about to become when the bar goes solid, so the
	   transition reads as the colour moving from the heart to the button
	   rather than as two unrelated states. */
	--rh-donate-heart: var(--wp--preset--color--brick);
	--rh-btn-line: var(--wp--custom--header--overlay-btn-line);
}

/* Anything anchored to the viewport has to clear the admin bar too. */
.admin-bar .rh-header-bar { top: 32px; }
.admin-bar .rh-menu .rh-panel,
.admin-bar .rh-nav--drawer { top: calc(var(--rh-header-h) + 32px); }

@media (max-width: 782px) {
	.admin-bar .rh-header-bar { top: 46px; }
	.admin-bar .rh-menu .rh-panel,
	.admin-bar .rh-nav--drawer { top: calc(var(--rh-header-h) + 46px); }
}

.rh-header-inner {
	max-width: 1280px;
	margin: 0 auto;
	padding: 0 24px;
	min-height: var(--rh-header-h);
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: nowrap;
	gap: 16px;
}

.rh-header-logo { flex: 0 0 auto; }
.rh-header-logo img,
.rh-header-logo .custom-logo-link img {
	height: var(--wp--custom--header--logo-height, 80px);
	width: auto;
	display: block;
}
/* Site title standing in for an image logo. */
.rh-header-logo .wp-block-site-title {
	font-size: var(--wp--preset--font-size--large, 1.125rem);
	font-weight: 700;
	letter-spacing: var(--wp--custom--tracking--tight, -0.01em);
}
.rh-header-logo .wp-block-site-title a {
	color: var(--rh-ink);
	text-decoration: none;
	transition: color var(--rh-fade) var(--rh-ease);
}

/* Stretch the nav column to the full bar height so each item's bottom edge
   meets the panel's top edge. The <li> only wraps its link - 46px tall inside
   a 108px bar - so without this the pointer crossed ~31px where neither the
   trigger nor the panel was hovered, and the panel collapsed mid-travel. The
   <a> keeps its own height, so the comp's small rounded hover pill is
   unchanged. */
.rh-header-nav {
	flex: 1 1 auto;
	display: flex;
	justify-content: center;
	align-self: stretch;
}
.rh-header-nav .rh-nav,
.rh-header-nav .rh-nav--main,
.rh-header-nav .rh-nav--main .rh-menu {
	height: 100%;
	width: 100%;
}

.rh-header-actions {
	flex: 0 0 auto;
	display: flex;
	align-items: center;
	gap: 12px;
}

/* ---- Header actions: socials + subscribe ------------------------------- */

/* 15px glyphs in the comp's muted brown, no chrome. */
.rh-header-actions .wp-block-social-links {
	display: flex;
	flex-wrap: nowrap;
	gap: 4px;
	margin: 0;
	padding: 0;
	justify-content: flex-end;
}
.rh-header-actions .wp-block-social-link {
	margin: 0;
	padding: 0;
	background-color: transparent;
}
/* The glyphs follow the bar like everything else in it. The previous way
   round — pinning the block to a preset colour in the markup — fixed them to
   one brown in both bar states, so they stayed dark against the hero while
   every other piece of chrome turned cream.

   Core sets the anchor and its svg to currentColor at four classes
   (.wp-block-social-links .wp-block-social-link.wp-social-link
   .wp-block-social-link-anchor), which is what the logos-only style's brand
   colours ride in on. Naming the same chain under .rh-header-actions outranks
   it on specificity, so this needs no !important — it used to carry two. */
.rh-header-actions .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor,
.rh-header-actions .wp-block-social-links .wp-block-social-link.wp-social-link .wp-block-social-link-anchor svg {
	color: var(--rh-muted);
	fill: currentColor;
}
.rh-header-actions .wp-block-social-link a {
	background-color: transparent;
	transition: color var(--rh-fade) var(--rh-ease);
	/* The glyph stays 15px, per the comp. The BOX has to be 24x24: these are
	   the smallest targets in the header, and at their natural size they render
	   under the WCAG 2.2 SC 2.5.8 minimum. Sizing the box rather than the icon
	   buys the target back without touching the visual. With the wrapper's 4px
	   gap the centres sit 28px apart, clearing the spacing exception too. */
	min-width: var(--wp--custom--header--tap-target, 24px);
	min-height: var(--wp--custom--header--tap-target, 24px);
	display: inline-flex;
	align-items: center;
	justify-content: center;
	padding: 0;
}
.rh-header-actions .wp-block-social-link svg {
	width: 15px;
	height: 15px;
	fill: currentColor;
}
.rh-header-actions .wp-block-social-link a:hover { color: var(--rh-accent); }

/* Divider between the socials and Subscribe, per the comp. */
.rh-header-actions .rh-subscribe {
	display: flex;
	align-items: center;
}
.rh-header-actions .rh-subscribe::before {
	content: "";
	flex: 0 0 auto;
	width: 1px;
	height: 16px;
	margin-right: 12px;
	background-color: var(--rh-line);
}
/* Appearance lives in styles/button-header-outline.json as a block style
   variation, so it is editable rather than locked in this file. What a
   variation cannot express is the crossfade between the bar's two palettes —
   theme.json has no transition property — so that stays here. */
.rh-header-actions .rh-subscribe .wp-block-button__link {
	transition:
		background-color var(--rh-fade) var(--rh-ease),
		border-color var(--rh-fade) var(--rh-ease),
		color var(--rh-fade) var(--rh-ease);
}

/* ---- Burger ------------------------------------------------------------ */

/* Hidden above the collapse breakpoint; the media query at the foot shows it. */
.rh-burger {
	display: none;
	align-items: center;
	justify-content: center;
	color: var(--rh-ink);
	background: none;
	/* 18px, not 22px: the social glyphs beside it are 15px, and a hamburger is
	   three thin rules, so it needs a little more height to carry the same
	   visual weight. Box works out to 34px with the padding, comfortably above
	   the 24px minimum target size. */
	border: 0;
	padding: 8px;
	cursor: pointer;
	margin: 0;
}
.rh-burger svg { width: 18px; height: 18px; display: block; }
/* One button, two glyphs - whichever matches the current state. */
.rh-burger .rh-icon--close { display: none; }
.rh-burger[aria-expanded="true"] .rh-icon--close { display: flex; }
.rh-burger[aria-expanded="true"] .rh-icon--menu { display: none; }

/* ---- Menu, shared between both renders --------------------------------- */

.rh-menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	align-items: center;
	gap: 2px;
}
.rh-menu .rh-link {
	display: flex;
	align-items: center;
	padding: 8px 16px;
	font-size: var(--wp--custom--header--nav-size, 0.875rem);
	font-weight: 500;
	border-radius: var(--wp--custom--header--radius, 6px);
	color: var(--rh-muted);
	text-decoration: none;
	transition:
		background-color var(--rh-fade) var(--rh-ease),
		color var(--rh-fade) var(--rh-ease);
}
.rh-menu > .rh-depth-0 > .rh-link:hover,
.rh-menu > .rh-depth-0:has( > .rh-panel:hover ) > .rh-link,
.rh-menu > .rh-depth-0.rh-hold > .rh-link,
.rh-menu > .rh-depth-0:focus-within > .rh-link {
	background-color: var(--rh-lit);
	color: var(--rh-ink);
	font-weight: 600;
}
.rh-menu .rh-chevron {
	display: inline-flex;
	align-items: center;
	margin-left: 6px;
	transition: transform 0.2s;
}
.rh-menu .rh-chevron svg { width: 13px; height: 13px; display: block; }
.rh-menu > .rh-depth-0 > .rh-link:hover .rh-chevron,
.rh-menu > .rh-depth-0:has( > .rh-panel:hover ) > .rh-link .rh-chevron,
.rh-menu > .rh-depth-0.rh-hold > .rh-link .rh-chevron,
/* Focus alone no longer opens a panel (mega-menu.js), so a focused trigger
   whose panel is shut must not show the open chevron. */
.rh-menu > .rh-depth-0:focus-within:not(.rh-collapsed) > .rh-link .rh-chevron { transform: rotate(180deg); }

.rh-menu .rh-heading {
	display: block;
	font-size: var(--wp--custom--header--label-size, 10px);
	font-weight: 700;
	letter-spacing: var(--wp--custom--header--tracking-label, 0.15em);
	text-transform: uppercase;
	/* Solid, not alpha. In the old palette this needed 0.85 to stay legible;
	   brick on cream is 7.03:1 at full strength, plainly subordinate to the
	   item labels above it (14.02:1) while clearing AA with room to spare. */
	color: var(--rh-accent);
	margin-bottom: 12px;
	padding-bottom: 8px;
	border-bottom: 1px solid var(--rh-line);
}

/* Two rows (label, description) with the arrow beside the label - a grid
   rather than nested spans, so the walker markup stays flat.

   The arrow used to have a column of its own at the far right, which is only
   tolerable while the row is narrow. Give the row the width it deserves and
   that arrow ends up marooned 500px from the word it belongs to. It travels
   with the label instead, and the description runs the full width below. */
.rh-menu .rh-group-list .rh-link {
	display: grid;
	/* minmax(0, max-content), not bare max-content: the label column must be
	   allowed to shrink, or a long one cannot wrap and pushes the drawer wider
	   than the phone it is on. */
	grid-template-columns: minmax(0, max-content) auto;
	grid-template-areas: "label arrow" "desc desc";
	align-items: start;
	column-gap: 8px;
	padding: var(--wp--custom--header--row-pad-y, 10px) var(--wp--custom--header--row-pad-x, 12px);
	margin-bottom: 2px;
	border-radius: var(--wp--custom--header--radius, 6px);
	font-weight: 600;
	color: var(--rh-ink);
}
.rh-menu .rh-group-list .rh-label { grid-area: label; display: flex; align-items: center; gap: 6px; }
.rh-menu .rh-group-list .rh-desc { grid-area: desc; }
.rh-menu .rh-arrow {
	grid-area: arrow;
	align-self: center;
	justify-self: start;
	margin-left: 8px;
	display: flex;
	color: var(--rh-muted);
}
.rh-menu .rh-arrow svg { width: var(--wp--custom--header--icon-size, 12px); height: var(--wp--custom--header--icon-size, 12px); display: block; }
.rh-menu .rh-icon { display: inline-flex; align-items: center; flex: 0 0 auto; }
.rh-menu .rh-icon svg { width: var(--wp--custom--header--icon-size, 12px); height: var(--wp--custom--header--icon-size, 12px); display: block; }
.rh-menu .rh-desc {
	font-size: var(--wp--custom--header--desc-size, 12px);
	font-weight: 400;
	color: var(--rh-muted-ink);
	margin-top: 2px;
}
.rh-menu .rh-link--cta {
	background-color: color-mix(in srgb, var(--wp--preset--color--brick) 6%, transparent);
	color: var(--rh-accent);
}
.rh-menu .rh-link--cta:hover { background-color: color-mix(in srgb, var(--wp--preset--color--brick) 10%, transparent); }

/* ---- Current page ------------------------------------------------------
   WordPress marks ANY menu item whose URL resolves to the current page as
   .current-menu-item, and that includes an in-page anchor: "Intro Video"
   points at /#intro-video, so on the front page its <li> was current and the
   link sat permanently lit - a stuck highlight rather than a current page.
   The walker adds .rh-anchor to fragment links so they can be excluded. */
.rh-menu .current-menu-item > .rh-link:not(.rh-anchor) {
	background-color: var(--rh-hover);
	color: var(--rh-ink);
	font-weight: 600;
}
/* Inside a panel the cream pill on its own is indistinguishable from a hover
   state, so the current destination carries its label in the accent brown as
   well. That is the whole "you are here" signal - deliberately just a colour
   shift, with no rule or marker drawn on the pill. */
.rh-menu .rh-group-list .current-menu-item > .rh-link:not(.rh-anchor) {
	color: var(--rh-accent);
}

/* Keyboard and pointer deliberately land on the same cream: which input you
   used is not information the highlight needs to carry. The focus ring below
   is what distinguishes them. */
.rh-menu .rh-link:focus,
.rh-menu .rh-link:hover {
	background-color: var(--rh-lit);
	color: var(--rh-ink);
}
/* The donate item is tinted rather than cream and has to stay that way in
   every one of those states - the rule above sits at the same specificity and
   would otherwise flatten it on the way past. */
.rh-menu .rh-link--cta:focus,
.rh-menu .rh-link--cta:hover {
	background-color: color-mix(in srgb, var(--wp--preset--color--brick) 12%, transparent);
	color: var(--rh-accent);
}

/* Nothing here suppresses outlines, but the UA default ring is easy to lose
   against the cream bar, so make it explicit. */
.rh-menu .rh-link:focus-visible,
.rh-burger:focus-visible {
	outline: 2px solid var(--rh-accent);
	outline-offset: 2px;
	border-radius: var(--wp--custom--header--radius, 6px);
}

/* ---- Desktop mega panel ------------------------------------------------ */

.rh-nav--main .rh-menu {
	justify-content: center;
	align-items: stretch;
}
.rh-nav--main .rh-menu > .rh-depth-0 {
	/* static, so the fixed panel below is not anchored to the item. */
	position: static;
	display: flex;
	align-items: center;
}

/* Fixed, not absolute: the panel spans the full header width, and the header
   is pinned at top:0 while a panel is open, so the panel always sits flush
   beneath it regardless of what the ancestors' positioning is doing. */
.rh-nav--main .rh-panel {
	position: fixed;
	/* A band the full width of the window, flush under the bar. Its contents
	   start on the page's content rail, so the panel lines up with the page
	   beneath it rather than floating free. */
	left: 0;
	right: 0;
	top: var(--rh-header-h);
	z-index: 40;
	margin: 0;
	/* Staging's vertical padding and gap, but its horizontal rail was 1280 to
	   match an Elementor container of that width. Ours is 1200, so the same
	   formula would leave the panel's contents 16px out of line with the page
	   beneath them. The rail follows our content width instead. */
	padding: var(--wp--custom--header--panel-pad, 32px) max(24px, calc((100% - var(--wp--style--global--content-size, 1200px)) / 2));
	list-style: none;
	background-color: var(--rh-surface);
	/* The page behind it is the same cream, so the band needs its bottom edge
	   drawn or it dissolves into whatever it is covering. */
	border-bottom: 1px solid var(--rh-line);
	box-shadow: var(--wp--preset--shadow--panel);
	display: grid;
	/* Full use of the rail. Capping these at 320px was a workaround for the
	   arrow being pinned to the row's right edge, which left a two-group panel
	   using half its width. The arrow now sits beside its label (see
	   .rh-group-list .rh-link below), so the columns can have the space.
	   minmax(0, …) so a long description wraps instead of forcing the track
	   wider than its share. */
	grid-template-columns: repeat(var(--rh-cols, 3), minmax(0, 1fr));
	gap: var(--wp--custom--header--panel-gap, 32px);

	/* Hidden but still focusable-in-order until opened. */
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
	/* Closing is held for a beat so a diagonal sweep from the trigger toward
	   the panel cannot snap it shut mid-travel. Opening stays instant - the
	   rule below resets the delay to 0. */
	transition: opacity 0.18s ease, visibility 0s linear 0.22s;
}
/* The corridor between button and panel.
   This is the same transparent strip below the button as before, with one
   difference that matters: it is inert unless a panel is already open. Hovering
   below the label activates nothing, because there is nothing there to hover.
   Once the button has opened a panel the strip becomes live, so a pointer on
   its way down keeps the panel open however slowly it travels — and the strip
   sustains itself, since hovering it counts as hovering the button it belongs
   to. The timed hold covers the other direction: leaving the button sideways. */
.rh-nav--main .rh-menu > .rh-depth-0 > .rh-link {
	position: relative;
}
.rh-nav--main .rh-menu > .rh-depth-0 > .rh-link::after {
	content: "";
	position: absolute;
	top: 100%;
	left: 0;
	right: 0;
	height: 2.25rem;
	pointer-events: none;
}
.rh-nav--main .rh-menu > .rh-depth-0 > .rh-link:hover::after,
.rh-nav--main .rh-menu > .rh-depth-0.rh-hold > .rh-link::after,
.rh-nav--main .rh-menu > .rh-depth-0:has( > .rh-panel:hover ) > .rh-link::after,
.rh-nav--main .rh-menu > .rh-depth-0:focus-within:not(.rh-collapsed) > .rh-link::after {
	pointer-events: auto;
}

/* Hover the BUTTON, not the item. The <li> is a flex child of a 108px bar
   while its button is 39px tall, so `li:hover` opened a panel from anywhere in
   that column — above the label and well below it. The panel keeps itself open
   once the pointer is inside it, which is what makes the journey from button
   to panel possible. */
.rh-nav--main .rh-menu > .rh-depth-0:has( > .rh-link:hover ) > .rh-panel,
.rh-nav--main .rh-menu > .rh-depth-0:has( > .rh-panel:hover ) > .rh-panel,
.rh-nav--main .rh-menu > .rh-depth-0.rh-hold > .rh-panel,
.rh-nav--main .rh-menu > .rh-depth-0:focus-within > .rh-panel {
	visibility: visible;
	opacity: 1;
	pointer-events: auto;
	transition: opacity 0.18s ease, visibility 0s linear 0s;
}
/* Escape-dismissed. Focus stays on the trigger, so :focus-within would hold
   the panel open - this overrides it until focus or the pointer leaves and
   returns. Later in the sheet and equally specific, so it wins on order. */
.rh-nav--main .rh-menu > .rh-depth-0.rh-collapsed > .rh-panel {
	visibility: hidden;
	opacity: 0;
	pointer-events: none;
}
.rh-nav--main .rh-group-list {
	display: block;
	list-style: none;
	margin: 0;
	padding: 0;
}

/* ---- Mobile drawer ----------------------------------------------------- */

/* Hidden above the collapse breakpoint; the media query below shows it. */
.rh-nav--drawer { display: none; }

.rh-nav--drawer .rh-menu,
.rh-nav--drawer .rh-panel,
.rh-nav--drawer .rh-group-list {
	display: block;
	position: static;
	padding: 0;
	margin: 0;
	list-style: none;
	box-shadow: none;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	grid-template-columns: none;
	transition: none;
}
.rh-nav--drawer .rh-menu > .rh-depth-0 {
	border-bottom: 1px solid var(--rh-line);
}
.rh-nav--drawer .rh-menu > .rh-depth-0 > .rh-link {
	padding: 16px 24px;
	font-size: var(--wp--custom--header--nav-size, 0.875rem);
	font-weight: 600;
	color: var(--rh-ink);
	justify-content: space-between;
}
/* Collapsed by default; opened by the accordion toggle. */
.rh-nav--drawer .rh-menu > .rh-depth-0 > .rh-panel {
	display: none;
	background-color: var(--rh-hover);
	padding-bottom: 12px;
}
.rh-nav--drawer .rh-menu > .rh-depth-0.rh-open > .rh-panel { display: block; }
/* The chevron flips with the accordion state here, not on hover. */
.rh-nav--drawer .rh-menu .rh-chevron { margin-left: auto; color: var(--rh-muted); }
.rh-nav--drawer .rh-menu > .rh-depth-0 > .rh-link .rh-chevron { transform: none; }
.rh-nav--drawer .rh-menu > .rh-depth-0.rh-open > .rh-link .rh-chevron { transform: rotate(180deg); }
.rh-nav--drawer .rh-menu .rh-heading {
	padding: 12px 24px 4px;
	margin: 0;
	border-bottom: none;
}
/* The description is the first thing to cost you a tap target on a phone.
   The trailing arrow goes too - the comp's drawer shows label and heart only. */
.rh-nav--drawer .rh-menu .rh-group-list .rh-link {
	display: flex;
	align-items: center;
	padding: 10px 32px;
	margin: 0;
}
.rh-nav--drawer .rh-menu .rh-desc,
.rh-nav--drawer .rh-menu .rh-arrow { display: none; }

/* ---- Collapse ----------------------------------------------------------
   1200px, not 1024: five top-level items with labels this long, beside an 80px
   logo and the actions cluster, run out of bar well before tablet width. */
@media (max-width: 1200px) {
	.rh-header { --rh-header-h: var(--wp--custom--header--height-compact, 88px); }

	.rh-nav--main { display: none; }
	.rh-burger { display: inline-flex; }

	/* The drawer is full-bleed under the header, like the comp's fixed panel
	   rather than a dropdown hanging off the widget. */
	.rh-nav--drawer:not([hidden]) {
		display: block;
		position: fixed;
		left: 0;
		right: 0;
		top: var(--rh-header-h);
		margin: 0;
		width: 100vw;
		max-height: 80vh;
		overflow-y: auto;
		-webkit-overflow-scrolling: touch;
		background-color: var(--rh-surface);
		border-bottom: 1px solid var(--rh-line);
		box-shadow: 0 8px 32px color-mix(in srgb, var(--wp--preset--color--charcoal) 14%, transparent);
		z-index: 45;
	}

	/* Once the nav is just a burger it belongs at the end of the right-hand
	   cluster, as in the comp - not marooned in the middle of the bar. With the
	   centre column gone, space-between would strand the actions mid-bar, so
	   pin the whole cluster right with an auto margin instead. */
	/* Scoped under .rh-header: core prints its flex-layout gap, margins and
	   justification after this file at the same specificity, and they won. */
	.rh-header .rh-header-inner { justify-content: flex-start; }
	.rh-header-nav {
		flex: 0 0 auto;
		order: 3;
		/* Undo the desktop stretch. Up there it closes the hover gap between a
		   trigger and its panel; down here there is no gap to bridge, and the
		   stretch left the burger floating above the centre line the socials
		   and Subscribe share. */
		align-self: center;
	}
	.rh-header .rh-header-actions { margin-left: auto; }
	.rh-header-logo img,
	.rh-header-logo .custom-logo-link img { height: 60px; }
}

@media (max-width: 767px) {
	.rh-header .rh-header-inner { padding: 0 16px; gap: 8px; }
	.rh-header-logo img,
	.rh-header-logo .custom-logo-link img { height: 52px; }
	/* Subscribe and its divider are the first things to go when width is tight. */
	.rh-header-actions .rh-subscribe { display: none; }

	/* Then the social icons. The row is nowrap by design — a wrapping header
	   bar is worse than a tight one — and measured at a real 390px viewport,
	   the logo, three icons, Donate and the burger do not fit: Donate ends up
	   against the edge and the burger falls off the end entirely. The icons
	   are in the footer on the same screen, so they are the thing to drop. */
	.rh-header-actions .wp-block-social-links { display: none; }
	.rh-header .rh-header-actions { gap: 4px; }
}

@media (prefers-reduced-motion: reduce) {
	/* Zeroing the shared duration covers the bar, the logo, the nav links, the
	   social glyphs, Subscribe and Donate in one go. */
	.rh-header-bar { --rh-fade: 0s; }

	.rh-menu .rh-link,
	.rh-menu .rh-chevron,
	.rh-nav--main .rh-panel { transition: none; }
}

/* ---- Logo -------------------------------------------------------------
   The header part carries a site-logo and a site-title so it works either way.
   When a logo image is actually set they would otherwise stack on top of each
   other, so the title stands down and the logo speaks for the brand. */
.rh-header-logo:has(.custom-logo) .wp-block-site-title {
	display: none;
}
/* No logo set: the wordmark is the brand, so give it the display face. */
.rh-header-logo .wp-block-site-title {
	font-family: var(--wp--preset--font-family--display, Georgia, serif);
}

/* ---- Donate -------------------------------------------------------------
   The client asked for this prominent and always reachable. The bar is
   already position:fixed, so "sticky" costs nothing structurally. What it
   needs is to survive the width where Subscribe is dropped, and to hold its
   contrast over a photographic hero — both handled by the --rh-donate-*
   tokens set with the rest of the bar's palette above. */
.rh-header-actions .rh-donate {
	display: flex;
	align-items: center;
	margin-left: 12px;
}
/* As above: appearance is in styles/button-header-solid.json; the crossfade
   and the nowrap are what theme.json cannot carry. */
.rh-header-actions .rh-donate .wp-block-button__link {
	white-space: nowrap;
	transition:
		background-color var(--rh-fade) var(--rh-ease),
		border-color var(--rh-fade) var(--rh-ease),
		color var(--rh-fade) var(--rh-ease);
}

@media (max-width: 767px) {
	/* Subscribe goes, Donate stays — it is the reason the bar is sticky. */
	.rh-header-actions .rh-donate {
		display: flex;
		margin-left: 6px;
	}
	/* Donate is a two-celled button, and the padding that shapes it lives on
	   the cells — see .rh-donate__heart / __label in theme.css. Padding on
	   the anchor as well is padding twice: at the wide header's type size
	   that added sixteen pixels of height here and shoved the burger clean
	   off the right-hand edge of a 390px screen.

	   So: nothing on the anchor, and the height comes from a min-height
	   rather than from padding, so it cannot creep. It used to drop to the
	   11px action type in 26px of height, which made the one control the bar
	   exists for the dinkiest thing in it and half a fingertip tall. Now it
	   is a full 44px target in 14px type, and the cells only set the width. */
	.rh-header-actions .rh-donate .wp-block-button__link {
		padding: 0;
		min-height: 44px;
		font-size: 0.875rem;
		letter-spacing: 0.1em;
	}
	.rh-header-actions .rh-donate .rh-donate__heart,
	.rh-header-actions .rh-donate .rh-donate__label {
		padding-block: 0;
		padding-inline: 1em;
	}
	.rh-header-actions .rh-donate .rh-donate__heart {
		padding-inline: 0.7em;
	}
	/* Close to the burger, so the pair reads as one cluster at the right edge
	   instead of Donate floating somewhere right of centre — but with enough
	   air that the button does not look jammed against it. */
	.rh-header-actions .rh-donate { margin-left: 0; }
	.rh-header .rh-header-nav { margin-left: 6px; }
}

/* The narrowest phones (360px and down) cannot fit a 44px logo, the full
   Donate and the burger on one line, so the logo gives up a few pixels
   first — Donate keeps its target size. */
@media (max-width: 380px) {
	.rh-header-logo img,
	.rh-header-logo .custom-logo-link img { height: 44px; }
	.rh-header-actions .rh-donate .wp-block-button__link { font-size: 0.8125rem; }
}


/* A guard, not a fix: the header above is sized to fit, and at a real 390px
   viewport the document measures exactly 390px wide. But this content was
   lifted from a page builder, and one over-wide embed or unbroken URL in it
   should not turn a page into a sideways scroll.

   It is clip rather than hidden, and that matters more than it looks.
   overflow-x: hidden forces the other axis to compute to auto, which makes
   the element a scrolling box — and anything sticky inside a box that
   never scrolls can never stick. This rule silently disabled position:
   sticky for the whole document, which is how the horse's strip came to
   sit in the footer refusing to pin to the window. clip does the same
   guarding without creating a scroll container.

   Browsers too old for clip (Safari 15 and before) keep the max-width and
   lose the sticky, which is the right way round for a flourish. */
html,
body {
	max-width: 100%;
	overflow-x: hidden;
	overflow-x: clip;
}

/* The social glyphs were 4px apart — close enough to read as one object and
   to make a 24px tap target feel like a lucky guess. */
.rh-header-actions .wp-block-social-links {
	gap: 10px;
}

/* Subscribe and Donate were sitting off-centre against the logo and the nav:
   the buttons block aligns its items to the start of a flex row that is taller
   than they are. Centre them, and centre the row they are in. */
.rh-header-actions {
	align-items: center;
}
.rh-header-actions .wp-block-buttons,
.rh-header-actions .rh-subscribe,
.rh-header-actions .rh-donate {
	align-items: center;
	margin: 0;
}
.rh-header-actions .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	line-height: 1.2;
}

/* ---- The bar arriving ---------------------------------------------------
   On an overlay template the bar used to flip from transparent to solid at a
   threshold: scroll sixty pixels and it appeared. mega-menu.js writes
   --rh-scrolled, 0 to 1, across the first half-screenful, and the bar is
   painted from that — so it fades in proportionally instead of popping.

   The background alone is not enough. Fading a cream ground in under cream
   type gives you a moment where the type is cream on cream, so the ink, the
   muted tones, the accent and the rule line all cross-fade on the same
   progress. color-mix does the interpolation; the @supports guard leaves
   everything exactly as it was where it is unavailable.

   The class is doubled on purpose. The transparency rule above carries an
   extra :not(.is-scrolled), which outranks a single .rh-header-bar and would
   hold the bar transparent through the first sixty pixels of the fade —
   which is most of the pop this replaces.

   :not(:hover) because hovering the bar lights it fully, as it always has. */
@supports (background-color: color-mix(in srgb, red 50%, transparent)) {
	body:is(.home, .rh-overlay-header) .rh-header-bar.rh-header-bar:not(:hover):not(:has(
			.rh-nav--main .menu-item-has-children > .rh-link:hover,
			.rh-nav--main .rh-panel:hover,
			.rh-nav--main .rh-depth-0.rh-hold,
			.rh-nav--main .rh-depth-0:focus-within > .rh-panel,
			.rh-burger[aria-expanded="true"]
		)) {
		--rh-p: calc(var(--rh-scrolled, 0) * 100%);

		background-color: color-mix(in srgb, var(--wp--preset--color--cream) var(--rh-p), transparent);
		border-bottom-color: color-mix(in srgb, var(--wp--preset--color--line) var(--rh-p), transparent);
		box-shadow: none;

		--rh-ink:        color-mix(in srgb, var(--wp--preset--color--charcoal) var(--rh-p), var(--wp--custom--header--overlay-ink));
		--rh-muted:      color-mix(in srgb, var(--wp--preset--color--muted) var(--rh-p), var(--wp--custom--header--overlay-muted));
		--rh-btn-ink:    color-mix(in srgb, var(--wp--preset--color--muted) var(--rh-p), var(--wp--custom--header--overlay-ink));
		--rh-muted-ink:  color-mix(in srgb, var(--wp--preset--color--muted-ink) var(--rh-p), var(--wp--custom--header--overlay-muted));
		--rh-accent:     color-mix(in srgb, var(--wp--preset--color--brick) var(--rh-p), var(--wp--custom--header--overlay-ink));
		--rh-focus-ink:  color-mix(in srgb, var(--wp--preset--color--brick) var(--rh-p), var(--wp--custom--header--overlay-ink));
		--rh-line:       color-mix(in srgb, var(--wp--preset--color--line) var(--rh-p), var(--wp--custom--header--overlay-line));
		--rh-hover:      color-mix(in srgb, var(--wp--preset--color--parchment) var(--rh-p), var(--wp--custom--header--overlay-hover));
		--rh-lit:        color-mix(in srgb, var(--wp--preset--color--parchment) var(--rh-p), var(--wp--custom--header--overlay-lit));
		--rh-btn-line:   color-mix(in srgb, rgba(92, 42, 8, 0.2) var(--rh-p), var(--wp--custom--header--overlay-btn-line));
		--rh-donate-bg:  color-mix(in srgb, var(--wp--preset--color--brick) var(--rh-p), transparent);
		--rh-donate-ink: var(--wp--custom--header--overlay-ink);
		--rh-donate-line: color-mix(in srgb, var(--wp--preset--color--brick) var(--rh-p), var(--wp--custom--header--overlay-btn-line));
		/* The heart travels the other way to everything else here: brick at
		   the top of the page, where the button has no fill and the heart is
		   the only colour in the bar, and cream by the time the button has
		   become the brick itself.

		   It belongs in this block and not in the overlay rule above, which
		   is where it was and why it appeared to do nothing: that rule flips
		   at a threshold, so the heart changed colour in one frame somewhere
		   in the middle of a fade that everything else was crossing
		   smoothly. On --rh-p it walks the gradient between the two with the
		   scroll, through the warm tan in the middle, and arrives exactly as
		   the button does. */
		--rh-donate-heart: color-mix(in srgb, var(--wp--preset--color--cream) var(--rh-p), var(--wp--preset--color--brick));
	}

	/* The shadow only makes sense once there is a bar to cast it. */
	body:is(.home, .rh-overlay-header).is-scrolled .rh-header-bar:not(:hover) {
		box-shadow: var(--wp--preset--shadow--bar);
	}
}

/* ---- The heart on Donate -----------------------------------------------
   (Moved here from theme.css: it is header chrome, and this sheet is the one
   that ships wherever the header does.)

   Two regions inside one control, the way a text field carries its own small
   button. The anchor gives up its padding and becomes the flex container; the
   two spans carry the padding instead and stretch to its full height. That is
   what makes the divider run edge to edge and each highlight fill its whole
   side rather than floating as a chip in the middle.

   The reactions sit on the spans, not on the anchor, which is what keeps them
   independent: hovering the heart cannot light the word, and hovering the
   word cannot light the heart. It remains one link to one page.

   aria-hidden on the heart, so a screen reader hears "Donate". */
.wp-block-button__link:has(.rh-donate__heart) {
	display: inline-flex;
	align-items: stretch;
	padding: 0;
	/* A point up on the rest of the header's actions, and the type the
	   padding and the heart are both measured in em against — so one number
	   sets the size of the whole button. Donate is the reason the bar is
	   sticky and the only control that survives to the narrowest breakpoint;
	   it is allowed to be the biggest thing up there. */
	font-size: 0.771rem;
	/* So the lit corners follow the button's own radius. */
	overflow: hidden;
}
.rh-donate__heart,
.rh-donate__label {
	display: flex;
	align-items: center;
	justify-content: center;
	/* The padding the anchor used to carry, now on both sides of the line in
	   equal measure. The negative block margin takes each side out over the
	   button's own 1px border, so the divider and the two lit areas run the
	   full height of the button rather than stopping short of it; overflow:
	   hidden on the anchor clips them back to its radius. */
	margin-block: -1px;
	/* Deeper than the other header buttons on purpose: Donate standing a few
	   pixels taller than Subscribe is the hierarchy, not an accident of
	   whatever the heart happened to measure. */
	padding: calc(0.7em + 1px) 1.15em;
	transition: background-color var(--rh-fade, 0.2s) ease;
}
.rh-donate__heart {
	/* Narrower than the word's side: the glyph needs less room than six
	   letters do, and matching the two made the heart's cell look overfed. */
	padding-inline: 0.72em;
	border-right: 1px solid color-mix(in srgb, currentColor 38%, transparent);
	line-height: 1;
}

/* The heart is drawn, not typed. It used to be U+1F90D, and an emoji's
   colour belongs to the font: there is no way to ask a white heart to be
   red, and the two header states need two different hearts. A path takes
   whatever colour it is given, sits where its geometry says rather than
   high in an em box, and renders the same on every system — which the emoji
   did not, hence the font-variant-emoji line this replaces. */
.rh-donate__heart-svg {
	display: block;
	width: 1.54em;
	height: 1.54em;
	/* Big enough to be the one piece of colour in an overlaid header, and
	   taller than the line it sits on — so its layout height is pulled back
	   to about the cap height of DONATE beside it. Without this the svg
	   drives the button's height and Donate stands eight pixels taller than
	   Subscribe next to it. It still paints at full size; the anchor's
	   overflow clips nothing, because the heart is shorter than the button
	   even at this size. */
	margin-block: -0.18em;
	/* Two things move this colour and they want different speeds. The scroll
	   ramp changes --rh-donate-heart continuously, frame by frame, and must
	   not be eased at all or it lags the bar. The rose tint on hover is a
	   state change and wants a good half second either way.

	   So the tint is a registered number that transitions, and the fill is
	   computed from it. The ramp still lands instantly; the rose takes its
	   time arriving and leaving. Without @property support the number is
	   simply not animatable and it behaves as it did before. */
	fill: color-mix(
		in srgb,
		var(--rh-rose-ink, var(--wp--custom--header--rose)) calc(var(--rh-rose, 0) * 62%),
		var(--rh-donate-heart, var(--wp--preset--color--cream))
	);
	/* The bar's one duration, not a duration of its own. header.css sets
	   --rh-fade for exactly this reason: Donate, Subscribe, the nav and the
	   social icons used to cross-fade at four different speeds and the
	   header arrived in pieces. A heart that took half a second to change
	   colour over a button that took a fifth was the same bug again. If this
	   wants to be slower, --wp--custom--header--fade is the place — and then
	   the whole bar slows down together. */
}

/* The word's half lights its area. The heart's half does not: it is shaded
   instead, raised at rest and pressed in under a pointer, which says the
   same thing without a second colour change beside the one the heart itself
   is already making. */
.rh-donate__label:hover {
	background-color: color-mix(in srgb, currentColor 16%, transparent);
}

/* The heart's half carries no relief and does not move. The divider says
   where one half ends and the other begins; the heart's own colour says it
   is being touched. Shading it as well was a third thing happening in a
   27px cell, and moving it was a fourth. */


@property --rh-rose {
	syntax: "<number>";
	inherits: false;
	initial-value: 0;
}

/* And the heart itself warms to rose while its half is lit.

   The rose is its own colour, theme.json's custom.header.rose (#d9798b) —
   not mixed from brick, whatever an earlier note here said. What is mixed is
   the amount: 62% of the rose into whatever the heart currently is, which is
   brick over the hero and cream once the bar has gone solid. That way the
   tint reads the same against both grounds instead of disappearing into one
   of them.

   It rides the same --rh-fade as everything else in the bar, because a
   heart that warmed at its own speed over a button that lit at the bar's
   was the four-different-durations bug all over again. */
.rh-donate__heart:hover .rh-donate__heart-svg,
.rh-donate__heart:focus-visible .rh-donate__heart-svg {
	--rh-rose: 1;
}

/* And the heart skips a beat when you touch it: two quick beats, then rest —
   the rhythm of an actual heartbeat rather than a single pulse. */
.rh-donate__beat {
	display: inline-flex;
	line-height: 1;
}
/* The glyph beats; the lit area does not. Scaling the padded box made the
   highlight swell with every beat, which read as the button itself moving. */
.rh-donate__heart:hover .rh-donate__beat {
	animation: rh-heartbeat 0.85s ease;
}
@keyframes rh-heartbeat {
	0%   { transform: scale(1); }
	14%  { transform: scale(1.22); }
	28%  { transform: scale(1); }
	42%  { transform: scale(1.16); }
	60%  { transform: scale(1); }
	100% { transform: scale(1); }
}

/* The button's own hover would light both halves at once and undo the
   independence, so a button carrying a heart stands still. */
.wp-block-button__link:has(.rh-donate__heart):hover {
	background-color: var(--rh-donate-bg, var(--wp--preset--color--brick));
	border-color: var(--rh-donate-line, var(--wp--preset--color--brick));
}

/* Settings -> Red Horse -> Flourishes turns the beat off. */
.rh-no-heartbeat .rh-donate__heart:hover .rh-donate__beat {
	animation: none;
}

@media (prefers-reduced-motion: reduce) {
	.rh-donate__heart,
	.rh-donate__label {
		transition: none;
	}
	.rh-donate__heart:hover .rh-donate__beat {
		animation: none;
	}
	.rh-donate__heart,
	.rh-donate__heart-svg {
		transition: none;
	}
}