/*
 * Header navigation - legibility layer.
 * Added October 2026.
 *
 * WHY THIS IS A SEPARATE FILE
 * custom.css is 4,349 lines and contains 13 unbalanced comment markers. A rule
 * appended to the end of it was silently dropped by the CSS parser while the
 * rules either side of it survived, which is exactly the kind of thing that
 * costs an hour to find. This file is small, balanced, and loads last, so what
 * is written here is what the browser gets.
 *
 * LOAD ORDER
 * Linked from header.php immediately after custom.css. It has to come after,
 * because custom.css sets the nav colours with !important.
 *
 * THE PROBLEM THIS SOLVES
 * The header is position:absolute over a transparent background. The body is
 * #000 and the first section of every page is transparent, so the nav sat on
 * black. custom.css coloured the links #412415 - a 1.49:1 contrast ratio
 * against black, against a WCAG AA requirement of 4.5:1. The links are now
 * cream (fixed in custom.css itself, where the offending rule lives); this
 * file adds the scrim behind them.
 */

/*
 * Gradient scrim.
 *
 * Insurance rather than decoration: it keeps the nav readable if a page ever
 * opens with a bright image or light section. That situation is what produced
 * the ten per-page "color: #fff !important" patches scattered through
 * custom.css - this removes the need for any more of them.
 *
 * There is deliberately NO `header { position: relative }` here. The header is
 * already position:absolute, which is a positioned ancestor for the
 * pseudo-element. Forcing relative would pull it out of the overlay and push
 * every page down by its own height.
 *
 * z-index:-1 sits it behind the logo and menu but still inside the header's
 * own stacking context (the header carries z-index:999), so it never paints
 * over page content below.
 *
 * Delete this rule to remove the effect; nothing else depends on it.
 */
header::before {
	content: "";
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	height: 240px;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, 0.72) 0%,
		rgba(0, 0, 0, 0.45) 45%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: -1;
}

/* The cart, account and social glyphs share the bar and had the same problem. */
header .social-woccomarce ul li a,
header .social-marketing ul li a {
	color: #f4ede3 !important;
}

header .social-woccomarce ul li a:hover,
header .social-marketing ul li a:hover {
	color: #962a29 !important;
}

header .social-woccomarce svg,
header .social-marketing svg {
	color: #f4ede3 !important;
}


/* ===========================================================================
   Wes Carr signature in the header
   ---------------------------------------------------------------------------
   One file, uploads/2024/04/wes-signature.svg, feeds two positions:

     1. the hero scroller logo  (.dhs-logo img)  - dms_hero_scroller_logo_url()
     2. the header logo         (img.nofixed-logo) - dms_header_logo()

   Both read dms_design['upload-logo'], so the artwork only ever needs
   changing in DMS Theme options once.

   Because the header carries the same mark as the hero, showing both at once
   doubles it up. Previously custom.css solved that with

       .page-id-2366 img.nofixed-logo { display: none !important; }

   which hid the header mark on the home page permanently - it never came
   back, even once the hero had scrolled away. That rule is gone. The header
   signature now starts transparent and fades in as the hero hands off,
   driven by --dhs-hero-exit which hero-scroller.js writes to <html>.

   --dhs-hero-exit is 0 while the hero owns the screen and 1 once the hand-off
   is complete. The fallback below is 1, so the signature is simply visible on
   every page without a hero, and also if the script never runs at all. Do not
   change that fallback to 0 - that is what would hide the logo site-wide.

   Geometry: the signature is 360.75 x 171.05, ratio 2.109. The old logo was
   934.39 x 584.65, ratio 1.598, and custom.css still hard-sets
   `height:129px!important; width:206px` - ratio 1.597 - which squashes the
   new artwork. Hence the width:auto override. Adjust the one custom property
   below to resize; everything else follows.
   =========================================================================== */

:root {
	--wes-signature-height: 78px;
}

/* Correct the aspect ratio in both the static and sticky header states. */
header .navbar-brand img.nofixed-logo,
.fixed header .navbar-brand img.nofixed-logo {
	height: var( --wes-signature-height ) !important;
	width: auto !important;
	max-width: 100%;
	padding: 0 !important;
	background: transparent !important;
}

/* NO RECOLOURING.
   The logo is now the full-colour Crazy Hearts Club lockup
   (uploads/2026/11/crazy-hearts-club-logo.webp). This rule used to force it
   white with `filter: brightness( 0 ) invert( 1 )`, which was correct for the
   old near-black signature artwork but would flatten a colour logo to a solid
   white silhouette. Removed 2026-11-06. If the signature ever comes back, put
   the filter back with it. */

/* The fade itself, only on pages that actually carry a hero scroller. */
html:has( .dms-hero-scroller ) header .navbar-brand img.nofixed-logo {
	opacity: var( --dhs-hero-exit, 1 );
	transition: opacity 0.35s ease-out;
	will-change: opacity;
}

/* If the scroller bails out - reduced motion, or markup it cannot drive - it
   adds .dhs-static and never writes --dhs-hero-exit. Show the signature
   normally in that case rather than leaving it stuck at 0. */
html:has( .dms-hero-scroller.dhs-static ) header .navbar-brand img.nofixed-logo {
	opacity: 1;
}

@media (max-width: 1000px) {
	:root {
		--wes-signature-height: 58px;
	}
}


/* ===========================================================================
   Sticky header at desktop widths
   ---------------------------------------------------------------------------
   `header` is position:absolute (css/style.css), so it scrolls away with the
   page. custom.css turns it into position:fixed via `.fixed header`, where
   `.fixed` is put on <body> by the scroll handler in footer.php past 50px.

   But every one of those 15 `.fixed header` rules sits inside
   @media (max-width: 1200px), (max-width: 991px) or (max-width: 767px). So
   the sticky header has only ever existed on tablet and phone. Above 1200px
   the nav scrolled out of view and never came back, which is what Derek
   reported. This adds the missing desktop half.

   No layout shift when it engages: the header is already out of normal flow
   at position:absolute, so switching to fixed moves nothing below it.

   OVER THE HERO
   The home page hero is a 7000px cinematic sequence. Dropping an opaque bar
   across the top of it as soon as you nudge the wheel fights the sequence, so
   while a hero scroller is on the page and has not finished handing off, the
   bar stays transparent and the gradient scrim above does the legibility
   work. The solid bar arrives with html.dhs-hero-done, which hero-scroller.js
   sets once --dhs-hero-exit reaches 1 - the same moment the signature
   finishes fading in. On every page without a hero the bar is solid as soon
   as you scroll, matching the mobile treatment.

   To make the bar solid over the hero too, delete the
   `html:has(.dms-hero-scroller):not(.dhs-hero-done)` block.
   =========================================================================== */

@media (min-width: 1201px) {

	.fixed header {
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
		z-index: 99999;
		background: #1d1c11;
		border-bottom: 2px solid #992a21;
		box-shadow: 0 5px 15px 0 rgba( 0, 0, 0, 0.2 );

		/* 20px top and bottom in the static state is generous for a bar that
		   is going to sit over content permanently. */
		padding-top: 12px;
		padding-bottom: 12px;
		transition: background-color 0.3s ease-out, padding 0.3s ease-out,
			border-color 0.3s ease-out;
	}

	/* The scrim is only needed while the bar is transparent. */
	.fixed header::before {
		opacity: 0;
		transition: opacity 0.3s ease-out;
	}

	/* Hero pages: stay transparent until the hand-off completes. */
	html:has( .dms-hero-scroller ):not( .dhs-hero-done ) .fixed header {
		background: transparent;
		border-bottom-color: transparent;
		box-shadow: none;
	}

	html:has( .dms-hero-scroller ):not( .dhs-hero-done ) .fixed header::before {
		opacity: 1;
	}

	/* The logo block is absolutely positioned at top:25px in the static
	   header. In the shorter sticky bar that pushes it out the bottom, so
	   centre it in the bar instead - the same correction custom.css makes at
	   mobile widths with `.fixed header .logo { position: relative }`. */
	.fixed header .logo {
		top: 50% !important;
		transform: translateY( -50% );
	}

	.fixed header .nav-right {
		top: 50%;
		transform: translateY( -50% );
	}
}


/* ===========================================================================
   Hide the header cart and account block
   ---------------------------------------------------------------------------
   Requested 2026-10-24. `.social-woccomarce` is the <ul> in the header holding
   the cart icon (with its item count) and the My Account link - see
   includes/header/header-v1.php.

   It is ALREADY suppressed in markup for ordinary visitors while the store is
   closed: header-v1.php wraps that block in a dms_store_offline_for_viewer()
   check, which omits it entirely rather than hiding it, so there is nothing
   left for crawlers or screen readers and the cart count is never queried.

   That check deliberately exempts anyone with manage_woocommerce or
   manage_options, so logged-in admins still saw the icons. This rule hides
   them for everyone, logged in included.

   REMOVE THIS RULE WHEN THE STORE GOES LIVE. It outranks the markup gate: with
   it in place, turning the store back on (DMS_STORE_OFFLINE false, per
   includes/functions/store-offline.php) will NOT bring the cart icon back, and
   there is nothing in the page to indicate why. That is the one way this bites.
   =========================================================================== */

.social-woccomarce {
	display: none !important;
}