/**
 * Helix Ultimate — Overlay Cover header
 * @author  InfiNet Computer Solutions, Inc.
 * @license http://www.gnu.org/licenses/gpl-2.0.html GNU/GPLv2 or Later
 *
 * Loaded only while this header style is selected (header.php adds it), so a
 * site that switches away is left with nothing to clean up.
 *
 * SCOPE: everything here is under .header-overlay-cover / .header-cover.
 *
 * MECHANISM ONLY — NOTHING TUNABLE IS HARD-CODED HERE.
 * This file describes HOW the header floats, how the scrim is drawn and how
 * sticky releases it. Every value an editor might want to change arrives as a
 * CSS custom property that header.php sets inline from a Template Settings
 * parameter:
 *
 *   --hu-cover-image     Cover Image          (media)
 *   --hu-cover-height    Cover Height         (list)
 *   --hu-cover-position  Cover Focal Point    (list)
 *   --hu-overlay-scrim   Cover Overlay Strength (list)
 *   --hu-overlay-text    Header Text Colour   (colour)
 *
 * If you find yourself wanting to edit a colour or a dimension in this file,
 * add a parameter instead — the point of this header is that its appearance is
 * reachable from the admin rather than buried in a stylesheet.
 *
 * The fallbacks in var() exist only so the header degrades sanely if a
 * parameter is somehow unset; they are not the place to retune the design.
 */

/* The cover the header floats over. Present only when a Cover Image is set. */
.header-cover {
	height: var(--hu-cover-height, 420px);
	background-image: var(--hu-cover-image, none);
	background-size: cover;
	background-position: var(--hu-cover-position, center center);
	background-repeat: no-repeat;
}

/*
 * Note the #sp-header prefix on this block. template.css styles the header by ID
 *   #sp-header { min-height: 250px; position: relative; box-shadow: ...; }
 * and an ID selector beats a class one, so styling this purely as
 * .header-overlay-cover loses: the header keeps its 250px reserved height and
 * stays in normal flow, pushing the page down instead of floating over it — the
 * one thing this style exists to avoid. Matching #sp-header.header-overlay-cover
 * (0,1,1,0 vs 0,1,0,0) wins without resorting to !important.
 *
 * min-height is deliberately NOT reset. It looks like reserved height worth
 * removing, but an absolutely-positioned header is already out of flow and
 * reserves nothing — while Helix sizes the logo with a height:100% chain that
 * needs the header to have a definite height. Zeroing it collapses that chain
 * and the logo shrinks to a few pixels at mobile widths.
 */
#sp-header.header-overlay-cover {
	position: absolute;
	top: 0;
	left: 0;
	right: 0;
	z-index: 99;
	background: transparent;
	box-shadow: none;
}

/*
 * The scrim. A photo cover has no contract to be dark where the navigation
 * lands, so a gradient is laid behind the header content — strongest at the
 * top where the nav sits, fading out so it reads as depth rather than a bar.
 * Strength comes from --hu-overlay-scrim, set inline by header.php from the
 * template parameter; the fallback keeps this usable if the var is absent.
 */
#sp-header.header-overlay-cover::before {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(
		to bottom,
		rgba(0, 0, 0, calc(var(--hu-overlay-scrim, 0.45))) 0%,
		rgba(0, 0, 0, calc(var(--hu-overlay-scrim, 0.45) * 0.4)) 55%,
		rgba(0, 0, 0, 0) 100%
	);
	pointer-events: none;
	z-index: 0;
}

/* Header content sits above the scrim. */
#sp-header.header-overlay-cover > .container {
	position: relative;
	z-index: 1;
}

/*
 * Light-on-dark treatment.
 *
 * Uses `color` inheritance rather than repainting each element so a site that
 * overrides menu colours in template settings still wins. The text-shadow is
 * the important part: over a photo, contrast varies pixel to pixel, and a
 * shadow keeps the text readable where a colour alone cannot. This is a
 * legibility aid, NOT a substitute for contrast — see the note below.
 */
.header-overlay-cover,
.header-overlay-cover .sp-megamenu-parent > li > a,
.header-overlay-cover .sp-megamenu-parent > li > span,
.header-overlay-cover .offcanvas-toggler,
.header-overlay-cover .header-cart a {
	color: var(--hu-overlay-text, #fff);
	text-shadow: 0 1px 4px rgba(0, 0, 0, 0.85), 0 0 2px rgba(0, 0, 0, 0.6);
}

.header-overlay-cover .burger-icon span {
	background-color: var(--hu-overlay-text, #fff);
}

/*
 * CONTRAST WARNING FOR IMPLEMENTERS.
 *
 * White text over an arbitrary photograph cannot be guaranteed to meet WCAG
 * 2.1 AA (4.5:1 normal, 3:1 large). The scrim above is what buys the contrast,
 * so do not set overlay_cover_scrim to 0 over a light image and assume the
 * shadow is enough — it is not. Measure the rendered header against the actual
 * cover art, and raise the scrim until it passes. A cover image that is bright
 * behind the navigation needs ~0.6+.
 */

/*
 * Sticky behaviour. When Helix detaches the header, it stops being an overlay
 * and becomes a normal bar, so the transparency and scrim are dropped and the
 * light-on-dark treatment is released back to the template's own sticky rules.
 */
#sp-header.header-overlay-cover.header-sticky {
	position: fixed;
	/*
	 * NOT `inherit`. That was the original here and it is a trap: `inherit` takes
	 * the PARENT's computed background (.body-innerwrapper — transparent), not the
	 * template's sticky background, and because this selector carries one id and two
	 * classes it out-specifies template.css's own #sp-header.header-sticky rule — so
	 * it beat the very background it was meant to defer to. The sticky bar rendered
	 * fully transparent with white text over whatever scrolled underneath.
	 *
	 * --hu-sticky-bg comes from the template's existing Header Background Colour
	 * param via header.php, so this stays editable from the admin and cannot drift
	 * away from the rest of the site's chrome.
	 */
	background: var(--hu-sticky-bg, #fff);
	/*
	 * The overlay base rule sets z-index 99 so the floating header clears the cover.
	 * template.css puts a real sticky header at 9999; match it, or page content with
	 * a higher stacking order scrolls OVER the detached bar.
	 */
	z-index: 9999;
	/*
	 * A stuck bar needs an EDGE, not just a fill.
	 *
	 * The base overlay rule sets box-shadow:none (correct while floating — a shadow
	 * over a cover photo reads as grime). Once stuck, the bar sits directly on top of
	 * scrolling content, and on a site with a white page background a white bar has
	 * no discernible boundary at all: the navigation appears to hover in the middle
	 * of the text. Restoring a hairline plus a soft drop gives the separation the
	 * background colour alone cannot.
	 *
	 * Deliberately neutral alpha rather than a named colour so it reads correctly
	 * over any --hu-sticky-bg an editor picks, light or dark.
	 */
	box-shadow: 0 1px 0 rgba(0, 0, 0, 0.10), 0 2px 14px rgba(0, 0, 0, 0.10);
}

#sp-header.header-overlay-cover.header-sticky::before {
	display: none;
}

#sp-header.header-overlay-cover.header-sticky,
#sp-header.header-overlay-cover.header-sticky .sp-megamenu-parent > li > a,
#sp-header.header-overlay-cover.header-sticky .sp-megamenu-parent > li > span,
#sp-header.header-overlay-cover.header-sticky .offcanvas-toggler,
#sp-header.header-overlay-cover.header-sticky .header-cart a {
	color: inherit;
	text-shadow: none;
}

#sp-header.header-overlay-cover.header-sticky .burger-icon span {
	background-color: currentColor;
}

/*
 * DELIBERATELY NOT ZEROING #sp-main-body PADDING.
 *
 * The obvious next rule is `#sp-main-body { padding-top: 0 }` so the cover
 * starts under the floating header. It is not here on purpose: Helix sets no
 * per-header-style body class, so such a rule could only be global, and it
 * would then flatten the top spacing of every ordinary page on the site — not
 * just the ones with a cover.
 *
 * Whether the first section runs flush to the top belongs to that section, not
 * to the header. Give the cover row/section a top padding of 0 in SP Page
 * Builder (or in the row settings), which is per-page, visible in the builder,
 * and reversible.
 */