/**
 * Site-wide dark header -- applied on every front-end page so the header
 * looks the same everywhere, not just on the homepage. The homepage layers
 * its own transparent-over-hero effect on top of this in homepage.css
 * (transparent at the top of the page, this same dark navy once scrolled).
 *
 * Only the TOP-LEVEL bar (logo, top nav links, search/account/cart icons)
 * changes color here. The mega-menu dropdown panels are a separate white
 * panel with dark text and must stay exactly as they are -- selectors below
 * are deliberately scoped to avoid touching anything inside them.
 *
 * Also carries a small set of unrelated mobile FOOTER fixes (see the bottom
 * of the @media block) -- kept here rather than a new file since this is
 * already the one stylesheet enqueued site-wide specifically to win cascade
 * ties against the theme's mobile !important rules (see enqueue_site_header()
 * in class-wsc-homepage.php for why that ordering matters).
 */

header#masthead,
.site-header,
header.header {
	background-color: #05090d;
}

/* Theme-default decorative pseudo-element behind the search/account/cart
   icons -- invisible against the theme's normal white header, but a stray
   white block against this dark one (same root cause fixed on the
   homepage itself; needed site-wide now that every header is dark). */
.header-right::after {
	background: transparent !important;
}

/* Top-level nav links only -- #menu-mega-menu > li > a is the direct-child
   top bar link; dropdown links live several levels deeper inside
   .sub-container/.menu-mega-menu-container and are never matched by this. */
#menu-mega-menu > li > a,
.menu-toggle {
	color: #fff;
}
#menu-mega-menu > li > a:hover,
#menu-mega-menu > li > a:focus {
	color: #3fa868;
}

.site-title,
.site-title a {
	color: #fff;
}

/* Search / account / cart icons and labels. */
.header-search svg,
.header-cart svg,
.top-svg svg,
.header-toggle svg {
	fill: #fff;
}
.account-label {
	color: #fff;
}
.account-sub {
	color: #c9d6dd;
}
.cart-qty {
	color: #fff;
}

/* Below 767px the theme swaps in a completely different collapsed-bar
   layout (its own !important rules in responsive.css, handle
   'wntr-responsive' -- this stylesheet is enqueued with that as a
   dependency so it reliably prints after and can win the tie). Only the
   collapsed top bar (hamburger icon, search/cart icons) is touched here.
   The slide-out mobile nav panel (.mobile-menu, a separate #menu-mega-menu-1
   structure, not #menu-mega-menu) keeps its own white background and dark
   text untouched -- it is never matched by any selector below. */
@media ( max-width: 767px ) {
	.site-header,
	.site-header-fix,
	.masthead,
	.header {
		background: #05090d !important;
	}
	.site-header .menu-toggle,
	.site-header .menu-toggle::before,
	.site-header .mob-toggle,
	.site-header .header-toggle,
	.site-header .header-toggle svg,
	.site-header .header-search svg,
	.site-header .header-cart svg,
	.site-header .account-cart svg,
	.site-header .top-svg svg {
		color: #fff !important;
		fill: #fff !important;
		stroke: #fff !important;
	}

	/* The theme's own hamburger icon (#site-navigation .menu-toggle) renders
	   its glyph via an 18px absolutely-positioned ::before, leaving the
	   element's own real hit-testable box only ~25x19 CSS px -- well under
	   the ~44x44px minimum for a reliably tappable target, and the likely
	   cause of visitors needing several taps to open the mobile menu. This
	   invisible ::after enlarges only the tap area; it doesn't touch the
	   icon's own size/position (::before is untouched). */
	#site-navigation .menu-toggle {
		position: relative;
	}
	#site-navigation .menu-toggle::after {
		content: "";
		position: absolute;
		top: -14px;
		left: -14px;
		right: -14px;
		bottom: -14px;
	}

	/* The theme runs its footer widgets (Our Address, Follow Us, Information/
	   policy links) as a tap-to-expand accordion below 767px -- responsive.css
	   sets `.site-footer .toggle-block { display:none }` unconditionally, only
	   revealed once a widget heading is tapped and gets a `.toggled-on` class.
	   There's no visible affordance hinting that the heading is tappable, so
	   in practice this content (contact details, social links, policy pages)
	   was invisible on mobile unless a visitor happened to tap a heading --
	   confirmed by comparing the actual rendered DOM on mobile vs desktop
	   (identical HTML, only CSS display differed). Forcing it open matches
	   how it already appears on desktop and removes a real access gap for
	   contact info and legal/policy links. The now-purposeless expand/collapse
	   chevron is hidden alongside it so nothing implies a tap still does
	   something. */
	.site-footer .toggle-block {
		display: block !important;
	}
	.site-footer .title-outer::before {
		display: none !important;
	}
}