/**
 * The compact "signature left, nav right" bar -- see sticky-header-
 * bars.js for the full design rationale. Base layout/sizing matches the
 * homepage's own .jrh-header-bar (jrh-curtain-hero/curtain.css)
 * exactly, so it reads as the same element appearing on every page; only
 * the fade mechanism (a plain opacity transition on a scroll-position
 * class, vs. the homepage's own continuous scroll-scrubbed opacity) and
 * the color variants below are different.
 */
.jrh-sticky-header-bar {
	position: fixed;
	top: 0;
	left: 0;
	width: 100%;
	z-index: 999998;
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 24px;
	flex-wrap: wrap;
	box-sizing: border-box;
	padding: 16px 40px;
	box-shadow: 0 2px 10px rgba(0, 0, 0, 0.12);
	opacity: 0;
	pointer-events: none;
	transition: opacity 0.4s ease;
}

.jrh-sticky-header-bar.is-visible {
	opacity: 1;
	pointer-events: auto;
}

body.admin-bar .jrh-sticky-header-bar {
	top: 32px;
}

@media (max-width: 782px) {
	body.admin-bar .jrh-sticky-header-bar {
		top: 46px;
	}
}

.jrh-sticky-header-bar-logo {
	height: 26px;
	width: auto;
}

.jrh-sticky-header-bar-nav {
	display: flex;
	gap: 26px;
	flex-wrap: wrap;
}

.jrh-sticky-header-bar-nav a {
	font-family: Montserrat, sans-serif;
	font-weight: 700;
	font-size: 13px;
	letter-spacing: 0.5px;
	text-decoration: none;
	text-transform: uppercase;
	transition: opacity 0.2s ease;
}

.jrh-sticky-header-bar-nav a:hover {
	opacity: 0.7;
}

/* Dark variant -- Resume, Director's Notes: matches the homepage's own
   .jrh-header-bar exactly (black bar, white text, the logo's own black
   artwork inverted to white via filter -- the same trick already used
   for the Resume page's own reveal cover). */
.jrh-sticky-header-bar--dark {
	background: #0c0c0c;
}

.jrh-sticky-header-bar--dark .jrh-sticky-header-bar-logo {
	filter: brightness(0) invert(1);
}

.jrh-sticky-header-bar--dark .jrh-sticky-header-bar-nav a {
	color: #fff;
}

/* Light variant -- Gallery, About Me, Contact: matches each page's own
   current light header (white bar, black text, the logo's own natural
   black artwork -- no filter needed). */
.jrh-sticky-header-bar--light {
	background: #fff;
}

.jrh-sticky-header-bar--light .jrh-sticky-header-bar-nav a {
	color: #1a1a1a;
}

/* The theme's own original header -- fades out on the SAME scroll
   threshold and duration as .jrh-sticky-header-bar's own fade-in above,
   so the two genuinely cross-dissolve rather than one just scrolling
   away while the other separately appears. Joshua, live: "can the main
   menu at the top fade away as you scroll down and our new one fades
   in? like a cross fade?" pointer-events: none once faded so the
   invisible header doesn't still intercept clicks on the (very brief)
   sliver of page before it actually scrolls out of the document flow.
   This rule only exists on the same five pages sticky-header-bars.js
   itself only loads on -- never touches the homepage's own separate
   header. */
.header_style_wrapper {
	transition: opacity 0.4s ease;
}

.header_style_wrapper.jrh-sticky-header-fading-out {
	opacity: 0;
	pointer-events: none;
}

/* REAL BUG, found live from Joshua's own report ("the white menu that
   originates doesn't fade away, it pops away"): the theme's own native
   scroll handler (custom.js) adds its own .nofixed class to this exact
   same element at this exact same 200px scroll point, and the theme's
   own CSS for that class (screen.css) is `display: none` -- an instant,
   unanimatable snap that was racing our opacity fade above and winning,
   since display:none removes the element outright regardless of
   whatever opacity it was mid-transition to. This override keeps it a
   normal, animatable block through that class so our own fade (and
   pointer-events: none once faded) is the only thing actually hiding it
   now. Scoped the same way as the rest of this file -- only ever loads
   on these same five pages. */
.header_style_wrapper.nofixed {
	display: block !important;
}

@media (prefers-reduced-motion: reduce) {
	.jrh-sticky-header-bar,
	.header_style_wrapper {
		transition-duration: 0.01ms;
	}
}