/**
 * Main nav (header.php) — the accessible mega-menu / off-canvas accordion
 * built on Medallion_Nav_Walker's markup (inc/class-medallion-nav-walker.php)
 * plus assets/js/main-nav.js.
 *
 * Mobile-first: everything below is the mobile look by default. The
 * single @media (min-width: 900px) block at the bottom reshapes the SAME
 * markup into the desktop mega-menu bar — same 900px breakpoint
 * convention as assets/css/gallery-filter.css.
 *
 * Mobile and desktop don't just restyle the same panel, they change what
 * "opening" one even means:
 *   - Mobile is a drill-down. Opening Products (or, from inside Products,
 *     opening Storage Solutions) hides every OTHER item at that same
 *     level plus its own toggle button, leaving only the panel it opened
 *     visible — one full-width "screen" at a time, with its own
 *     "‹ Back" button. main-nav.js does this via .main-nav-drill-hidden
 *     (see that class below, and its own doc comment, for exactly why it
 *     hides siblings-and-self rather than an ancestor, and why the
 *     desktop block below doesn't have to fight it).
 *   - Desktop is a straightforward overlay: depth 0 opens a full-width
 *     mega-panel below the header; depth 1+ (Storage Solutions) opens as
 *     extra column(s) beside the flat list it belongs to, with nothing
 *     else hidden and no back button at all (CSS just hides
 *     .main-nav-back and depth-1's own heading there).
 *
 * Two different "hidden" mechanisms are used on purpose, for two different
 * problems:
 *   - #main-nav-menu-wrap (the whole off-canvas panel) is shown/hidden via
 *     an `.is-open` CLASS, because at ≥900px it must stay visible
 *     unconditionally (it becomes the desktop nav bar) regardless of
 *     whether main-nav.js has ever "opened" it.
 *   - .main-nav-panel / .main-nav-branch-panel (the mega-menu panels /
 *     drill-down steps) are shown/hidden via the native `hidden`
 *     ATTRIBUTE, because those should always start closed and only ever
 *     open by user action, at any screen size — no breakpoint exception.
 * Only click/Enter/Space open anything here — deliberately no
 * mouseenter/hover handlers anywhere (see main-nav.js's own doc comment
 * for why: WCAG 1.4.13 "Content on Hover or Focus").
 */

:root {
	--main-nav-bg: #000000;
	--main-nav-ink: #ffffff;
	--main-nav-panel-bg: var( --goldHex );
	--main-nav-panel-ink: #1a1a1a;
	--main-nav-bp: 900px; /* match gallery-filter.css's convention */
}

/* ---- Screen-reader-only utility — used by header.php outside the
   carousel component that used to be the only place this existed (see
   assets/css/image-carousel.css's scoped .pg-carousel .screen-reader-text),
   so a global copy lives here instead since this file loads on every page. ---- */

.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

/* ---- Focus visibility — every interactive nav control gets a clear ring;
   the color flips inside the gold panel so it's never low-contrast against
   its own background. ---- */

.site-header a:focus-visible,
.site-header button:focus-visible,
.site-header input:focus-visible {
	outline: 2px solid #ffffff;
	outline-offset: 2px;
}

.main-nav-panel :focus-visible {
	outline-color: var( --main-nav-panel-ink );
}

/* =========================================================================
   Shared header chrome
   ========================================================================= */

.site-header {
	position: relative;
	z-index: 500; /* See .main-nav-panel's own comment below — this is the
	                 fix for the mega-panel opening "behind" page content. */
	background: var( --main-nav-bg );
	color: var( --main-nav-ink );
}

.main-nav-topline {
	display: none; /* mobile: the same search/misc content lives in .main-nav-offcanvas-misc instead */
}

.main-nav-brand-row {
	display: flex;
	align-items: center;
	padding: 0.9rem 1.25rem;
}

.main-nav-hamburger {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 2.5rem;
	height: 2.5rem;
	flex-shrink: 0;
	background: none;
	border: none;
	color: var( --main-nav-ink );
	padding: 0;
	cursor: pointer;
}

.main-nav-logo {
	flex: 1;
	display: flex;
	justify-content: center;
	color: var( --main-nav-ink );
}

.main-nav-logo svg {
	height: 28px;
	width: auto;
}

.main-nav-brand-spacer {
	width: 2.5rem;
	flex-shrink: 0; /* balances .main-nav-hamburger's width so the logo stays visually centered */
}

/* =========================================================================
   Mobile off-canvas panel (#main-nav-menu-wrap)
   ========================================================================= */

.main-nav-menu-wrap {
	position: fixed;
	inset: 0;
	z-index: 1000;
	background: #ffffff;
	color: var( --main-nav-panel-ink );
	overflow-y: auto;
	padding: 1.5rem 1.5rem 3rem;
	transform: translateX( 100% );
	visibility: hidden;
	transition: transform 0.3s ease;
}

.main-nav-menu-wrap.is-open {
	transform: translateX( 0 );
	visibility: visible;
}

/* main-nav.js adds this to <body> while the mobile off-canvas panel is
   open, so the page behind it can't also scroll. */
body.main-nav-open {
	overflow: hidden;
}

.main-nav-offcanvas-close {
	position: absolute;
	top: 1.25rem;
	right: 1.25rem;
	background: none;
	border: none;
	color: var( --main-nav-panel-ink );
	padding: 0.5rem;
	cursor: pointer;
}

.main-navigation {
	margin-top: 3rem;
}

.main-nav-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav-item {
	border-bottom: 1px solid #e2e2e2;
}

.main-nav-link,
.main-nav-toggle,
.main-nav-branch-toggle {
	display: flex;
	width: 100%;
	align-items: center;
	justify-content: space-between;
	gap: 0.75rem;
	background: none;
	border: none;
	font-family: var( --font-primary );
	font-size: 1.05rem;
	font-weight: var( --font-weight-light );
	color: var( --main-nav-panel-ink );
	text-decoration: none;
	text-align: left;
	padding: 0.9rem 0;
	cursor: pointer;
}

.main-nav-caret,
.main-nav-caret-right {
	flex-shrink: 0;
	transition: transform 0.2s ease;
}

.main-nav-toggle[ aria-expanded="true" ] .main-nav-caret,
.main-nav-branch-toggle[ aria-expanded="true" ] .main-nav-caret-right {
	transform: rotate( 180deg );
}

.main-nav-panel[ hidden ],
.main-nav-branch-panel[ hidden ] {
	display: none;
}

/* Opening a panel/branch adds this to its toggle button's OWN <li>
   siblings, plus the toggle button itself (main-nav.js) — deliberately
   never to an ancestor of the panel being revealed, since display:none
   on an ancestor would hide the panel too regardless of its own [hidden]
   attribute. Hiding "everyone else at this level, and my own trigger"
   instead is what turns this into a full-screen drill-down on mobile.
   Desktop explicitly resets this back for every element it can land on,
   inside the 900px block below — see the compound-class overrides there. */
.main-nav-drill-hidden {
	display: none;
}

/* Mobile: every depth is its own boxed "screen" — heading + back button
   at the top, its list below, all inside one bordered card. Desktop
   resets this box treatment entirely (see the 900px block) since depth 0
   there is already a full-width gold panel and depth 1 is just inline
   columns. */
.main-nav-panel-inner,
.main-nav-branch-inner {
	border: 1px solid #e2e2e2;
	border-radius: 12px;
	padding: 1.25rem;
	margin-bottom: 1.5rem;
}

.main-nav-back {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: none;
	border: none;
	padding: 0 0 1rem;
	font-family: var( --font-primary );
	font-size: 0.95rem;
	color: var( --main-nav-panel-ink );
	cursor: pointer;
}

.main-nav-panel-heading {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 0.6rem;
	padding-bottom: 1rem;
	font-family: var( --font-primary );
	font-size: 0.85rem;
	font-weight: var( --font-weight-bold );
	letter-spacing: 0.06em;
	color: var( --main-nav-panel-ink );
	text-decoration: none;
}

/* Chat request: depth 1+ branches (Storage Solutions, Finishing Touches)
   now have their own "All Storage Solutions"-style link leading their own
   list (inc/class-medallion-nav-walker.php's view_all_item_markup()),
   which goes to the exact same URL as this heading link — so on a branch
   panel specifically, this heading is a plain duplicate of that list
   item now, not a second useful control. Used to only get hidden on
   desktop (main-nav-branch-panel .main-nav-panel-heading inside the
   900px block below), where depth 1+ never showed this heading anyway
   for a different reason (it's inline columns there, not its own
   "screen"); this now hides it EVERYWHERE, including mobile's
   drill-down, where it used to sit redundantly above "All Storage
   Solutions" — back button, then straight into the list, its first item
   doing the exact job this heading used to. Depth 0's own heading
   ("PRODUCTS →") is untouched — .main-nav-panel (not
   .main-nav-branch-panel) never matches this selector, and depth 0 has
   no view-all item of its own to duplicate (see
   has_view_all_item()'s own comment for why). */
.main-nav-branch-panel .main-nav-panel-heading {
	display: none;
}

.main-nav-sublist,
.main-nav-branch-list {
	list-style: none;
	margin: 0;
	padding: 0;
}

.main-nav-sublist .main-nav-item,
.main-nav-branch-list .main-nav-item {
	border-bottom: none;
}

.main-nav-sublist .main-nav-link,
.main-nav-sublist .main-nav-branch-toggle,
.main-nav-branch-list .main-nav-link {
	padding: 0.6rem 0;
	font-size: 0.95rem;
	font-weight: var( --font-weight-regular );
}

/* The "All Storage Solutions"-style link every branch list (depth 1+)
   gets as its own first item (inc/class-medallion-nav-walker.php's
   view_all_item_markup()) — bold + its own underline, so it still reads
   as "view everything here" rather than getting lost as just one more
   sibling above "New Storage Solutions". */
.main-nav-link--view-all {
	/* !important: both the mobile and desktop rules right above/below this
	   one target these same links via a two-class descendant selector
	   (.main-nav-sublist .main-nav-link / .main-nav-branch-list
	   .main-nav-link, specificity 0,2,0) — equal to or higher than this
	   single-class one, and the desktop copy comes later in the file, so
	   without !important it would silently win the font-weight back to
	   "light" on desktop despite this rule looking like it should apply
	   everywhere.
	   NOTE: this had var( --font-weight-normal ), which isn't one of the
	   weight variables style.css actually defines (thin/light/book/
	   regular/medium/bold/extrabold/black — no "normal") — an undefined
	   custom property makes the whole declaration invalid, so the browser
	   was falling back to font-weight's INHERITED value instead, not
	   anything chosen on purpose. Swapped in --font-weight-regular (400)
	   as the closest real match to "normal" — say if you actually wanted
	   --font-weight-light to match the rest of this file's recent pass. */
	font-weight: var( --font-weight-regular ) !important;

	/* box-shadow, NOT a real border-bottom, and no margin-bottom of its
	   own beyond what every .main-nav-branch-list .main-nav-item already
	   gets — paints the same 1px "divider under All Storage Solutions"
	   rule visually without adding any layout height of its own. This
	   used to matter for column-balancing math (an extra 1-2px on just
	   this one item was enough to tip a 5-item list's column split the
	   wrong way); now that the branch-list column split is computed
	   explicitly server-side instead (--branch-rows, see
	   .main-nav-branch-list's own comment below), it's really just a
	   tidiness choice at this point, but still the right one. This
	   declaration went missing somewhere along the way — restored. */
	box-shadow: 0 1px 0 0 #e2e2e2;
}

/* ---- Mobile-only search + misc row (inside the off-canvas panel) ---- */

.main-nav-offcanvas-misc {
	margin-top: 2rem;
	padding-top: 1.5rem;
	display: flex;
	flex-direction: column;
	gap: 1.25rem;
}

.main-nav-search {
	display: flex;
	align-items: center;
	gap: 0.5rem;
	background: #f2f2f2;
	border-radius: 999px;
	padding: 0.65rem 1.1rem;
  border: 0px solid #cacaca;
}

.main-nav-search-input {
	flex: 1;
	min-width: 0;
	border: none;
	background: none;
	font-family: var( --font-primary );
	font-size: 0.95rem;
	color: var( --main-nav-panel-ink );
	outline: none;
}

.main-nav-search-submit {
	flex-shrink: 0;
	display: flex;
	background: none;
	border: none;
	color: #6b6b6b;
	padding: 0;
	cursor: pointer;
}

/* Mobile only: "Available at Menards" on its own row, then Track Order /
   Store Locator as two side-by-side pill buttons underneath — a CSS Grid
   on the always-3-children .main-nav-misc list turns that flat list into
   the mockup's 1-then-2 layout without any extra wrapper markup. */
.main-nav-offcanvas-misc .main-nav-misc {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 0.75rem;
}

.main-nav-offcanvas-misc .main-nav-misc-available {
	grid-column: 1 / -1;
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.4rem;
  color: black;
}

/* "Available at Menards" — visible text in front of the logo (both here
   and in the desktop .main-nav-topline context below), per chat. Font
   size pinned to 12px in both places rather than left to inherit each
   context's own ambient size. */
.main-nav-misc-available-label {
	font-family: var( --font-primary );
	font-size: 12px;
}

.main-nav-misc-menards-logo {
	height: 16px;
	width: auto;
}

.main-nav-offcanvas-misc .main-nav-misc-link {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 0.5rem;
	border: 1px solid var( --main-nav-panel-ink );
	border-radius: 0;
	padding: 0.75rem 1rem;
	font-family: var( --font-primary );
	font-weight: var( --font-weight-normal );
	font-size: 0.9rem;
	color: var( --main-nav-panel-ink );
	text-decoration: none;
}

.main-nav-offcanvas-misc .main-nav-misc-link--accent {
	background: var( --goldHex );
	border-color: var( --goldHex );
}

/* =========================================================================
   Desktop mega-menu (≥900px) — same markup, reshaped.
   ========================================================================= */

@media ( min-width: 900px ) {

  #menu-primary-menu {
    display: flex;
    max-width: 75rem;
    margin: 0 auto;
    padding: 1rem 2rem;

    & li {
      flex-basis: 20%;
    }
  }

  
  
  
	.main-nav-topline {
		display: flex;
		align-items: center;
		justify-content: space-between;
		gap: 2rem;
		padding: 0.85rem clamp( 1.5rem, 4vw, 3rem );
	}

	.main-nav-topline .main-nav-search {
		background: rgba( 255, 255, 255, 0.1 );
		color: #ffffff;
		border-radius: 0;
		padding: 0.5rem 1rem;
	}

	.main-nav-topline .main-nav-search-input {
		width: 180px;
		color: #ffffff;
	}

	.main-nav-topline .main-nav-search-input::placeholder {
		color: rgba( 255, 255, 255, 0.7 );
	}

	.main-nav-topline .main-nav-search-submit {
		color: #ffffff;
	}

	.main-nav-topline .main-nav-misc {
		display: flex;
		flex-direction: row;
		align-items: center;
		gap: 1.75rem;
	}

	.main-nav-topline .main-nav-misc-available,
	.main-nav-topline .main-nav-misc-link {
		display: inline-flex;
		align-items: center;
		gap: 0.4rem;
		border: none;
		background: none;
		border-radius: 0;
		padding: 0;
		font-family: var( --font-primary );
		font-size: 0.875rem;
		color: var( --main-nav-ink );
		text-decoration: none;
	}

	.main-nav-brand-row {
		justify-content: center;
		padding: 1.1rem 1.5rem 0.9rem;
	}

	.main-nav-hamburger,
	.main-nav-brand-spacer {
		display: none;
	}

	.main-nav-logo svg {
		height: 54px;
	}

	.main-nav-menu-wrap {
		position: static;
		inset: auto;
		z-index: auto;
		transform: none;
		visibility: visible;
		background: transparent;
		color: var( --main-nav-ink );
		padding: 0;
		overflow: visible;
		border-top: 1px solid rgba( 255, 255, 255, 0.15 );
	}

	.main-nav-offcanvas-close,
	.main-nav-offcanvas-misc,
	.main-nav-back {
		display: none;
	}

	.main-navigation {
		margin-top: 0;
	}

	/* Desktop never drills down — every <li> and every toggle button stays
	   visible regardless of what main-nav.js added .main-nav-drill-hidden
	   to. Compound class selectors (specificity 0,2,0) beat the plain
	   .main-nav-drill-hidden rule (0,1,0) outright, no source-order
	   dependency. */
	.main-nav-item.main-nav-drill-hidden {
		display: list-item;
	}

	.main-nav-toggle.main-nav-drill-hidden,
	.main-nav-branch-toggle.main-nav-drill-hidden {
		display: flex;
	}

	.main-nav-list {
		display: flex;
		align-items: center;
		justify-content: center;
		gap: 2.75rem;
		padding: 0.9rem 1.5rem;
	}

  
  #site-navigation > #menu-primary-menu > .main-nav-item {
    display: flex;
    justify-content: center;
  }
  
	.main-nav-item {
		border-bottom: none;
    
	}

	.main-nav-link,
	.main-nav-toggle {
		width: auto;
		padding: 0.35rem 0;
		font-size: 0.95rem;
		font-weight: var( --font-weight-light );
		color: var( --main-nav-ink );
	}
  
  .main-nav-panel-heading:hover,
  .main-nav-link:hover,
  .main-nav-toggle:hover,
  .main-nav-branch-toggle:hover span {
    text-decoration: underline;
  }

  /* Chat request: while a toggle's own panel is OPEN (not just hovered),
     keep its label underlined too — same visual treatment as the :hover
     rule above, just driven by main-nav.js's own open/closed state instead
     of the pointer. main-nav.js adds/removes .main-nav-item--open on the
     toggle's PARENT <li> the same moment it flips aria-expanded (see
     openToggle()/closeToggle()), so this never has to duplicate any of
     that open/closed logic here — it just reacts to the one class. */
  .main-nav-item--open > .main-nav-toggle span,
  .main-nav-item--open > .main-nav-branch-toggle span {
    text-decoration: underline;
  }


	/* The mega panel overlays the page below the header rather than
	   pushing content down — .site-header is the positioned ancestor.
	   Without .site-header's own z-index (see above), this panel is
	   "positioned, z-index:auto" with nothing but DOM order to say
	   whether it paints above or below <main>'s content further down the
	   page — and any block in <main> that creates its OWN stacking
	   context (a hero/carousel with position + z-index, a CSS transform,
	   etc. — extremely common) can end up painting on top of it despite
	   coming later in the source, making an opened panel invisible behind
	   the page even though the DOM/ARIA state is 100% correct (this was
	   the real bug behind "the submenu never shows" — main-nav.js was
	   opening the panel correctly the whole time). Giving .site-header
	   its own explicit z-index makes it (and everything positioned inside
	   it, including this panel) its own stacking context that sits above
	   the rest of the page outright, with no dependency on what any given
	   block below happens to do with ITS OWN z-index/transform. */
	.main-nav-panel {
		position: absolute;
		top: 100%;
		left: 0;
		width: 100%;
		background: var( --main-nav-panel-bg );
		color: var( --main-nav-panel-ink );
		box-shadow: 0 16px 28px rgba( 0, 0, 0, 0.18 );
	}

	/* Resets the mobile "boxed screen" look — depth 0 is already its own
	   full-width gold panel here, it doesn't also need a border/card. */
	.main-nav-panel-inner,
	.main-nav-branch-inner {
		border: none;
		border-radius: 0;
		padding: 0;
		margin-bottom: 0;
	}

	.main-nav-panel-inner {
		position: relative;
		display: flex;
		gap: 4rem;
		max-width: 1320px;
		margin: 0 auto;
		padding: 2.75rem clamp( 1.5rem, 5vw, 4rem ) 3rem;
    align-items: flex-start;
	}

	.main-nav-panel-heading {
		display: inline-flex;
		align-items: center;
		gap: 0.6rem;
		flex: 0 0 auto;
		white-space: nowrap;
		padding-bottom: 0;
		font-size: 1rem;
		font-weight: var( --font-weight-regular );
		letter-spacing: 0.04em;
		color: var( --main-nav-panel-ink );
		text-decoration: none;
	}

	/* .main-nav-branch-panel .main-nav-panel-heading is hidden EVERYWHERE
	   now (base rules, above .main-nav-sublist), not just here — this
	   desktop copy would just be a no-op duplicate of that, so it's gone
	   rather than left behind as dead weight. */

	.main-nav-sublist {
		position: relative; /* .main-nav-branch-list anchors off this, not the panel, so it lines up beside this column regardless of heading width */
		flex: 0 0 220px;
		display: flex;
		flex-direction: column;
		gap: 1rem;
		padding: 0;
		margin: 0;
	}

	.main-nav-sublist .main-nav-link,
	.main-nav-sublist .main-nav-branch-toggle {
		width: auto;
		padding: 0;
		font-size: 1rem;
    color: black;
	}

	/* Opened as extra column(s) beside the flat list, matching the mockup —
	   NOT a drill-down step like mobile. Absolutely positioned off
	   .main-nav-sublist (top:0; left:100%) so it always starts level with
	   the column's own top, no matter which row's toggle opened it —
	   exactly what the mockup shows (Storage Solutions' children start
	   level with "Door Gallery", not indented under their own toggle row).
	   The column split itself lives on the inner <ul> (main-nav-branch-list),
	   not this wrapper — .main-nav-branch-panel just positions the whole
	   thing; hidden/shown the same [hidden]-attribute way as everywhere
	   else. */
	.main-nav-branch-panel {
		position: absolute;
		top: 0;
		left: 100%;
		margin-left: 3rem;
		width: max-content;
		max-width: 34rem;
	}

	/* CSS Grid, NOT `column-count: 2` + browser auto-balancing — chat
	   report: a 5-item branch list ("Finishing Touches") was splitting
	   2-then-3 across the two columns instead of the expected 3-then-2.
	   That wasn't a height mismatch (making every item exactly the same
	   height didn't change it, see .main-nav-link--view-all's own
	   comment) — it's that a browser's multicol balance search only
	   optimizes for the SMALLEST MAX column height, and 3-then-2 vs.
	   2-then-3 both come out to that same max height (3 items tall) for
	   a list of 5, so the browser has no reason to prefer one over the
	   other; it's free to pick either, and it happened to pick the one
	   that doesn't read the way most people would expect.
	   grid-auto-flow: column, with an EXPLICIT row count (--branch-rows,
	   computed server-side by inc/class-medallion-nav-walker.php's
	   branch_list_style_attr() — see its own comment for the ceil() math)
	   sidesteps that ambiguity outright: it fills column 1 top-to-bottom
	   for exactly that many rows, then moves on — no balancing, no judgment
	   call, so it's not a coin flip which column gets the extra item on an
	   odd-numbered list. The fallback of 4 (var(--branch-rows, 4)) only
	   matters if that inline style is ever missing entirely (it always
	   gets one — see the walker), and even then just lands on a sane
	   default rather than breaking. */
	.main-nav-branch-list {
		display: grid;
		grid-auto-flow: column;
		grid-template-rows: repeat( var( --branch-rows, 4 ), auto );
		grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
		column-gap: 2.5rem;
		row-gap: 1rem;
		padding: 0;
	}

	.main-nav-branch-list .main-nav-item {
		border-bottom: none;
	}

	.main-nav-branch-list .main-nav-link {
		width: auto;
		padding: 0;
		font-size: 1rem;
		font-weight: var( --font-weight-light );
	}
}

#masthead {
  position: relative;
  z-index: 999999999999;
}