/**
 * Moneysworth Toolkit — Header A ("Utility bar")
 *
 * Restyles the existing Divi header markup. No header.php changes: the
 * destination pill, cart badge and persistent search field are applied by
 * mt-ux.js to markup the theme already outputs.
 *
 * What it changes, against the August 2026 audit:
 *   19  the top bar was 9px on mobile — now 13.5px with real tap targets
 *   07  the cart count becomes a badge that visibly moves on add
 *   —   search stops swallowing the whole nav when opened
 *   18  focus states inherit the yellow ring from mt-ux.css on navy
 *
 * Rollback: remove the 'mt-header' enqueue in core-init.php.
 */


/* =========================================================================
 * Sticky header — utility bar and nav row together
 *
 * Divi pins #main-header only, and derives its pinned offset from where the
 * top bar used to be, so once the top bar scrolls away the nav sits ~90px
 * down the screen with a blank strip above it. Pinning both at real measured
 * heights (set by mt-ux.js as --mt-topbar-h / --mt-header-total) removes the
 * gap and keeps the destination, cart and menu reachable the whole way down.
 *
 * To let the top bar scroll away again, delete this block.
 * ====================================================================== */

/* mt-core.css carries `.et_fixed_nav #top-header { position: absolute
   !important }`, which deliberately let the bar scroll away. That selector
   scores (1,1,0); matching it needs at least (1,1,1), hence body.et_fixed_nav. */
body.et_fixed_nav #top-header,
body #top-header {
	position: fixed !important;
	top: var(--mt-header-offset, 0px) !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 100000 !important;
}

body #main-header {
	position: fixed !important;
	top: calc(var(--mt-header-offset, 0px) + var(--mt-topbar-h, 42px)) !important;
	left: 0;
	right: 0;
	width: 100%;
	z-index: 99999 !important;
}

body #page-container {
	padding-top: var(--mt-header-total, 117px) !important;
}

/* The admin-bar offset is measured in mt-ux.js (--mt-header-offset) rather
   than hard-coded, because it is 32px, 46px or 0 depending on viewport and
   whether anyone is logged in. */

/* Anchor targets must clear the pinned header. */
body :target { scroll-margin-top: calc(var(--mt-header-total, 117px) + 12px); }


/* =========================================================================
 * Utility bar
 * ====================================================================== */

body #top-header {
	background-color: #15467b !important;
	border-bottom: 0 !important;
	font-size: 13.5px;
}

body #top-header .container {
	padding-top: 0 !important;
	padding-bottom: 0 !important;
	display: flex;
	align-items: center;
	gap: 16px;
	min-height: 42px;
}

body #top-header #et-info {
	display: flex !important;
	align-items: center;
	gap: 12px;
	flex-wrap: wrap;
	padding: 0 !important;
	float: none !important;
}

body #top-header #et-secondary-menu {
	margin-left: auto;
	float: none !important;
	display: flex;
	align-items: center;
}

/* The destination indicator. Previously 9px grey text that read as a
   disclaimer rather than the state of the whole catalogue. */
body #et-info a.mt-dest {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	background: rgba(255, 255, 255, .13);
	border: 1px solid rgba(255, 255, 255, .34);
	border-radius: 999px;
	padding: 4px 13px;
	min-height: 30px;
	color: #fff !important;
	font-size: 13px !important;
	font-weight: 600;
	line-height: 1.2;
	text-decoration: none !important;
}

body #et-info a.mt-dest:hover {
	background: rgba(255, 255, 255, .24);
	border-color: rgba(255, 255, 255, .55);
}

body #et-info a.mt-dest #et-info-phone {
	font-size: 13px !important;
	font-weight: 600;
	color: #fff !important;
}

body #et-info a.mt-dest::before {
	content: "\f041";                 /* fa-map-marker */
	font-family: FontAwesome;
	font-size: 13px;
	opacity: .9;
}

/* Hide the FontAwesome icon the theme prints inside the link, so the pin
   above isn't doubled up. */
body #et-info a.mt-dest .fa {
	display: none;
}

body #et-info a.change-destination {
	color: #fff !important;
	opacity: .92;
	font-size: 13px !important;
	text-decoration: underline !important;
	display: inline-flex;
	align-items: center;
	min-height: 30px;
	padding: 4px 2px;
}

body #et-info a.change-destination small {
	font-size: 13px !important;
}

body #et-info a.change-destination:hover { opacity: 1; }

/* The "please choose a destination" state: an invitation, not a shouted
   warning in 9px caps. */
body #et-info a.change-destination.mt-dest-empty {
	background: #cc2a2a;
	border-radius: 999px;
	padding: 4px 14px;
	text-decoration: none !important;
	font-weight: 700;
	text-transform: none;
}

body #et-info a.change-destination.mt-dest-empty small {
	text-transform: none;
	font-weight: 700;
}

body #et-info a.change-destination.mt-dest-empty:hover {
	background: #b02222;
}

/* Account + cart */
body #top-header ul.account-links {
	display: flex;
	align-items: center;
	gap: 6px;
	margin: 0 !important;
	padding: 0 !important;
}

body #top-header ul.account-links li {
	display: inline-flex !important;
	margin: 0 !important;
}

body #top-header ul.account-links li a {
	font-size: 12.5px !important;
	letter-spacing: .04em;
	padding: 6px 10px !important;
	min-height: 30px;
	display: inline-flex !important;
	align-items: center;
	gap: 6px;
	color: #fff !important;
	border-radius: 3px;
}

body #top-header ul.account-links li a:hover {
	background: rgba(255, 255, 255, .14);
}

/* Cart count as a badge. mt-ux.js rewrites the label into
   "Cart <b class="mt-cart-badge">n</b>" and keeps it live. */
body .et-cart-info {
	display: inline-flex !important;
	align-items: center;
	gap: 7px;
	font-size: 12.5px !important;
	letter-spacing: .04em;
	color: #fff !important;
}

body .et-cart-info span { display: inline-flex; align-items: center; gap: 7px; }

body .mt-cart-badge {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 21px;
	height: 21px;
	padding: 0 6px;
	border-radius: 999px;
	background: #cc2a2a;
	color: #fff;
	font-size: 12px;
	font-weight: 700;
	line-height: 1;
	font-variant-numeric: tabular-nums;
}

body .mt-cart-badge.is-bump { animation: mtBump .42s ease; }

@keyframes mtBump {
	0%   { transform: scale(1); }
	35%  { transform: scale(1.45); }
	100% { transform: scale(1); }
}


/* =========================================================================
 * Main nav row
 * ====================================================================== */

body #main-header {
	box-shadow: 0 1px 0 #e3e8ee, 0 2px 12px rgba(16, 38, 62, .05);
}

body #top-menu li a {
	font-size: 15px;
	font-weight: 600;
	color: #2b3442;
	padding-bottom: 10px !important;
	border-bottom: 2px solid transparent;
	transition: color .14s ease, border-color .14s ease;
}

body #top-menu > li > a:hover {
	opacity: 1;
	color: #15467b;
	border-bottom-color: #15467b;
}

body #top-menu > li.current-menu-item > a,
body #top-menu > li.current-menu-ancestor > a {
	color: #cc2a2a;
	border-bottom-color: #cc2a2a;
}

/* Mega-menu panel: give the columns air and make the category headings read
   as headings rather than as another link in the list. */
body #top-menu li.mega-menu > ul {
	padding: 22px 24px !important;
	box-shadow: 0 18px 40px rgba(16, 38, 62, .16);
	border-top: 2px solid #15467b;
}

body #top-menu li.mega-menu > ul > li > a:first-child {
	font-size: 13px !important;
	letter-spacing: .05em;
	text-transform: uppercase;
	color: #15467b !important;
	border-bottom: 1px solid #e3e8ee !important;
	padding-bottom: 8px !important;
	margin-bottom: 6px !important;
}

body #top-menu li.mega-menu > ul > li li a {
	font-size: 14px !important;
	padding: 6px 6px !important;
	color: #3d4854 !important;
	line-height: 1.35;
}

body #top-menu li.mega-menu > ul > li li a:hover {
	background: #eef2f7 !important;
	color: #15467b !important;
	border-radius: 2px;
}


/* =========================================================================
 * Dropdowns — readable, stacked, properly sized
 *
 * Divi renders submenu items as inline-block at a fixed 150px and the child
 * theme trims their padding to 3px/1px, which made a six-item list unreadable
 * and easy to mis-tap. Force a real vertical list with comfortable rows.
 * ====================================================================== */

/* Scoped to NON-mega dropdowns only. A broader `#top-menu li ul.sub-menu`
   also matches the mega-menu panel and the nested lists inside each of its
   columns, which collapses the whole panel to 340px and stacks the columns
   on top of each other. */
body #top-menu > li:not(.mega-menu) > ul.sub-menu {
	white-space: normal !important;
	width: auto !important;
	min-width: 250px;
	max-width: 340px;
	padding: 8px 0 !important;
	border-top: 2px solid #15467b !important;
	box-shadow: 0 16px 34px rgba(16, 38, 62, .16) !important;
	background: #fff !important;
}

/* Undo any white-space inheritance inside the mega menu without touching
   its widths or positioning. */
body #top-menu > li.mega-menu > ul,
body #top-menu > li.mega-menu > ul > li,
body #top-menu > li.mega-menu > ul > li > ul,
body #top-menu > li.mega-menu > ul > li > ul > li {
	white-space: normal !important;
}

body #top-menu > li:not(.mega-menu) > ul.sub-menu > li {
	display: block !important;
	width: 100% !important;
	white-space: normal !important;
	float: none !important;
	padding: 0 !important;
	margin: 0 !important;
	line-height: 1.4;
}

body #top-menu > li:not(.mega-menu) > ul.sub-menu > li > a {
	display: block !important;
	width: auto !important;
	white-space: normal !important;
	font-size: 15px !important;
	font-weight: 500 !important;
	line-height: 1.35;
	color: #2b3442 !important;
	padding: 11px 20px !important;
	min-height: 44px;
	border-bottom: 0 !important;
	opacity: 1 !important;
}

body #top-menu > li:not(.mega-menu) > ul.sub-menu > li > a:hover {
	background: #eef2f7 !important;
	color: #15467b !important;
	opacity: 1 !important;
}

/* A hairline between the category links and the individual products that
   follow them, so the list reads as two groups rather than six equals. */
body #top-menu > li:not(.mega-menu) > ul.sub-menu > li.menu-item-object-product_cat + li.menu-item-object-product {
	border-top: 1px solid #e3e8ee;
	margin-top: 6px !important;
	padding-top: 6px !important;
}

body #top-menu > li:not(.mega-menu) > ul.sub-menu > li.menu-item-object-product_cat > a {
	font-weight: 700 !important;
	color: #15467b !important;
}


/* =========================================================================
 * Persistent search field (injected by mt-ux.js)
 *
 * Divi's magnifier replaces the entire navigation with a bare input when
 * opened, which loses the user's place. This is a normal field that lives
 * in the bar and never moves anything.
 * ====================================================================== */

body form.mt-search {
	display: none;
	align-items: center;
	gap: 8px;
	background: #f2f4f7;
	border: 1px solid #ccd3da;
	border-radius: 3px;
	padding: 0 12px;
	height: 40px;
	min-width: 200px;
	margin-left: 20px;
}

body form.mt-search:focus-within {
	border-color: #15467b;
	background: #fff;
}

body form.mt-search svg { flex: none; opacity: .55; }

body form.mt-search input {
	border: 0;
	background: none;
	outline: none;
	font-size: 14px;
	width: 100%;
	color: #2b3442;
	height: 38px;
	padding: 0;
}

body form.mt-search input::placeholder { color: #8a95a1; }

@media (min-width: 981px) {
	body form.mt-search { display: flex; }

	/* Divi absolutely positions the magnifier and reserves padding for it,
	   which is what let the field ride over "Contact". Lay the row out with
	   flex instead and reclaim the reserved space. */
	body #et_top_search { display: none !important; }

	body #et-top-navigation {
		display: flex !important;
		align-items: center;
		padding-right: 0 !important;
	}

	body #top-menu-nav { float: none !important; }

	/* Keep the five items on one line; the search field is the flexible
	   element, not the navigation. */
	body #top-menu {
		display: flex !important;
		flex-wrap: nowrap !important;
		align-items: center;
	}

	body #top-menu > li {
		padding-right: 18px !important;
		float: none !important;
	}

	/* Keep the top-level labels on one line WITHOUT letting white-space
	   inherit into the dropdowns — Divi's submenu items are inline-block, so
	   an inherited `nowrap` lays them all out on a single line off-screen. */
	body #top-menu > li > a { white-space: nowrap; }

	body #top-menu > li:last-child { padding-right: 0 !important; }

	body form.mt-search {
		flex: 0 1 210px;
		min-width: 150px;
		margin-left: 18px;
	}
}

/* Between 981 and 1200 the logo, five menu items and the field get tight —
   let the field give up width before anything wraps. */
@media (min-width: 981px) and (max-width: 1200px) {
	body form.mt-search { flex-basis: 160px; margin-left: 12px; }
	body #top-menu > li { padding-right: 14px; }
	body #top-menu li a { font-size: 14px; }
}


/* =========================================================================
 * Mobile
 * ====================================================================== */

@media (max-width: 980px) {
	body #top-header .container {
		min-height: 40px;
		gap: 10px;
		flex-wrap: nowrap;
	}

	body #et-info { gap: 8px; }

	body #et-info a.mt-dest {
		padding: 3px 11px;
		font-size: 12.5px !important;
	}

	body #et-info a.mt-dest #et-info-phone,
	body #et-info a.change-destination,
	body #et-info a.change-destination small {
		font-size: 12.5px !important;
	}

	body #top-header ul.account-links li a { padding: 6px 7px !important; }

	/* The account label is redundant next to the icon at this width. */
	body #top-header ul.account-links li a.top-bl-myaccount span,
	body #top-header ul.account-links li a.top-bl-login span { display: none; }
}

@media (max-width: 560px) {
	/* Keep the destination and the cart; the account link lives in the
	   drawer, which mt-ux.css restored. */
	body #top-header ul.account-links li:not(:last-child) { display: none !important; }

	body #et-info a.change-destination {
		text-decoration: underline !important;
	}

	/* The pill carried "1-800-662-2122 Sandbridge, VA", which wrapped the bar
	   onto two ragged lines. Drop the digits — the pill is still a tel: link,
	   so tapping it dials the same number. */
	body #et-info .mt-dest-num { display: none; }

	/* The theme's bare "|" separator is noise once these stack. */
	body #et-info .mt-sep { display: none; }
}

/* One tidy row: destination left, switch beside it, cart hard right. */
@media (max-width: 980px) {
	body #top-header .container {
		flex-wrap: nowrap !important;
		gap: 10px;
		min-height: 44px;
		padding-left: 14px !important;
		padding-right: 14px !important;
	}

	body #top-header #et-info {
		flex: 1 1 auto;
		min-width: 0;
		flex-wrap: nowrap !important;
		gap: 10px;
		overflow: hidden;
	}

	body #et-info a.mt-dest {
		min-width: 0;
		max-width: 100%;
		overflow: hidden;
		white-space: nowrap;
		text-overflow: ellipsis;
	}

	body #et-info a.change-destination {
		flex: none;
		white-space: nowrap;
	}

	body #top-header #et-secondary-menu {
		flex: none;
		margin-left: auto;
	}
}

/* Logo and hamburger on one baseline. Divi floats them, which is what left
   the burger sitting under the "Select Page" label. */
@media (max-width: 980px) {
	body #main-header .container.clearfix {
		display: flex !important;
		align-items: center;
		justify-content: space-between;
		gap: 12px;
		padding-top: 10px !important;
		padding-bottom: 10px !important;
	}

	body #main-header .logo_container {
		position: static !important;
		height: auto !important;
		flex: 0 1 auto;
	}

	body #main-header #logo {
		max-height: 56px;
		width: auto;
	}

	body #main-header #et-top-navigation {
		float: none !important;
		margin: 0 !important;
		padding: 0 !important;
		display: flex;
		align-items: center;
	}

	body #et_mobile_nav_menu {
		float: none !important;
		margin: 0 !important;
	}

	body #et_mobile_nav_menu .mobile_nav {
		padding: 0 !important;
		background: none !important;
	}

	body .mobile_menu_bar {
		display: inline-flex !important;
		align-items: center;
		justify-content: center;
		width: 48px;
		height: 48px;
		padding: 0 !important;
	}

	body .mobile_menu_bar:before {
		position: static !important;
		margin: 0 !important;
	}
}

/* The destination pill is itself a tel: link, so tapping it calls the office
   for the selected destination. A separate call banner under the header was
   redundant and pushed the page content down on a phone. */


/* =========================================================================
 * Mobile menu
 *
 * Most orders come from a phone, so this is the primary navigation, not a
 * fallback. 16px is the smallest comfortable reading size on a handset and
 * 48px the smallest reliable tap target; both were well under.
 * ====================================================================== */

@media (max-width: 980px) {
	body .et_mobile_menu {
		border-top: 3px solid #15467b !important;
		padding: 0 !important;
		box-shadow: 0 16px 34px rgba(16, 38, 62, .18);
	}

	body .et_mobile_menu li > a {
		font-size: 16px !important;
		font-weight: 600 !important;
		line-height: 1.35;
		color: #1c2b3a !important;
		padding: 15px 18px !important;
		min-height: 50px;
		display: flex !important;
		align-items: center;
		border-bottom: 1px solid #e9edf2 !important;
		opacity: 1 !important;
	}

	body .et_mobile_menu li > a:active,
	body .et_mobile_menu li > a:hover {
		background: #eef2f7 !important;
		color: #15467b !important;
	}

	/* Second level — categories. Indented, still a full-size target. */
	body .et_mobile_menu li li > a {
		font-size: 15.5px !important;
		font-weight: 500 !important;
		padding-left: 34px !important;
		min-height: 48px;
		color: #3d4854 !important;
		background: #f8fafb !important;
	}

	/* Divi's expand toggle is a bare 20px arrow floated right; give it a real
	   target so people stop tapping the label and navigating away instead of
	   opening the section. */
	body .et_mobile_menu .menu-item-has-children > a {
		position: relative;
		padding-right: 58px !important;
	}

	body .et_mobile_menu .menu-item-has-children > a::after {
		content: "\33";
		font-family: ETmodules;
		font-size: 20px;
		color: #15467b;
		position: absolute;
		right: 18px;
		top: 50%;
		transform: translateY(-50%);
		transition: transform .2s ease;
		pointer-events: none;
	}

	body .et_mobile_menu .menu-item-has-children.visible > a::after {
		transform: translateY(-50%) rotate(180deg);
	}

	/* Divi's own toggle sits on top; widen its hit area to match the chevron
	   and hide its default glyph so the two don't double up. */
	body .et_mobile_menu .menu-item-has-children > .mobile-toggle {
		width: 58px !important;
		height: 50px !important;
		top: 0 !important;
		right: 0 !important;
		left: auto !important;
		opacity: 0;
	}

	body .et_mobile_menu li.current-menu-item > a,
	body .et_mobile_menu li.current-menu-ancestor > a {
		color: #cc2a2a !important;
		box-shadow: inset 3px 0 0 #cc2a2a;
	}

	/* The hamburger itself was a 32px glyph. */
	body .mobile_menu_bar:before {
		font-size: 32px !important;
		line-height: 1 !important;
		color: #15467b !important;
	}

	/* Divi prints a "Select Page" label beside the hamburger. It says nothing
	   the icon does not, and it pushed the burger onto a second line. */
	body .mobile_nav .select_page,
	body .et_mobile_nav_menu .select_page {
		display: none !important;
	}

	/* Search lives in the menu on desktop; on a phone the icon competed with
	   the hamburger for the same corner. */
	body #et_top_search,
	body form.mt-search {
		display: none !important;
	}

	body #et_mobile_nav_menu .mobile_nav {
		padding: 4px 0;
	}
}