/* =========================================================
   Cart Launch — Site Header (Cart Launch)
   ========================================================= */

.mgc-header {
	position: relative;
	z-index: 999;
	font-family: var(--cl-font, 'Montserrat', sans-serif);
	overflow: visible;
}

.mgc-header__container {
	max-width: 1500px;
	margin: 0 auto;
	padding: 10px 20px;
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.mgc-header__skip-link {
	position: absolute;
	left: -9999px;
	top: auto;
}

.mgc-header__skip-link:focus {
	left: 10px;
	top: 10px;
	z-index: 10000;
	background: #fff;
	padding: 8px 16px;
}

/* ----- Top bar (black) ----- */
.mgc-header__top {
	background: #000;
	color: #fff;
	min-height: 42px;
}

.mgc-header__top .mgc-header__container {
	min-height: 42px;
}

.mgc-header__top-spacer {
	flex: 0 0 200px;
	max-width: 200px;
}

.mgc-header__top-right {
	display: flex;
	align-items: center;
	gap: 20px;
	margin-left: auto;
}

.mgc-header__phone a {
	color: #fff;
	font-weight: 600;
	font-size: 23px;
	text-decoration: none;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	white-space: nowrap;
	letter-spacing: 0.5px;
}

.mgc-header__phone a:hover {
	color: var(--cl-red);
}

.mgc-header__phone i {
	color: var(--cl-red);
}

.mgc-header__location-btn {
	display: inline-block;
	background: var(--cl-red);
	color: #fff !important;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	text-decoration: none;
	padding: 11px 28px;
	border-radius: 3px;
	line-height: 1.2;
	letter-spacing: 1px;
	transition: background .2s ease, color .2s ease;
}

.mgc-header__location-btn:hover {
	background: #fff;
	color: #000 !important;
}

/* ----- Main bar (white) ----- */
.mgc-header__main {
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
	position: relative;
	overflow: visible;
}

.mgc-header__container--main {
	min-height: 90px;
	padding-left: 185px;
	position: relative;
	overflow: visible;
}

.mgc-header__logo-wrap {
	position: absolute;
	left: 24px;
	top: 50%;
	transform: translateY(-50%);
	z-index: 10;
	line-height: 0;
}

.mgc-header__logo {
	display: block;
	height: 66px;
	width: auto;
	max-width: 260px;
}

/* ── Logo overhang (2026-08-11, owner ask — modeled on mrgolfcart.org, where
   a 259px-tall badge hangs ~80px below a 182px header straight onto the
   hero): Theme Editor → Brand → "Overhang the logo". The desktop logo wrap
   is already absolutely positioned inside the (overflow: visible, z-index
   999) bar, so a taller logo costs the layout nothing — the bar keeps its
   height and the logo simply paints over whatever section comes next. The
   anchor swaps from vertical-center to top so all the extra height hangs
   DOWNWARD like the reference site, and the drop-shadow follows the logo's
   own alpha (filter, not box-shadow — no shadowed rectangle around a
   see-through PNG). Off = every rule here is inert; the flat in-bar logo is
   untouched. ─────────────────────────────────────────────────────────── */
/* 2026-08-11 v2 (owner: "wasn't tastefully done — I want it done better"):
   three refinements over the first cut. (1) SHAPE-ADAPTIVE SIZE — height was
   fixed at 136px with a width clamp, which squashed wide wordmarks out of
   proportion; now BOTH axes are ceilings and the logo keeps its own aspect,
   so a tall badge fills the full 140px drop while a wide wordmark settles
   around ~85px and hangs modestly — each shape gets the overhang IT can
   carry. (2) LAYERED SHADOW — one hard 30%-black blob read like a sticker;
   a tight contact shadow plus a wide soft ambient one reads like the badge
   actually floats over the page. (3) The top anchor tucks to 8px so the
   badge locks visually to the bar's top edge like the reference site. */
.mgc-header--logo-overhang .mgc-header__logo-wrap {
	top: 8px;
	transform: none;
}
.mgc-header--logo-overhang .mgc-header__logo {
	height: auto;
	width: auto;
	max-height: 140px;
	max-width: 250px;
	filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.16)) drop-shadow(0 14px 24px rgba(0, 0, 0, 0.20));
}

.mgc-header__nav {
	flex: 1;
	display: flex;
	justify-content: flex-end;
}

/* ----- Navigation ----- */
.mgc-nav__list {
	list-style: none;
	margin: 0;
	padding: 0;
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	justify-content: flex-end;
	gap: 4px;
}

.mgc-nav__item {
	position: relative;
}

.mgc-nav__link {
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-size: 19px;
	padding: 12px 18px;
	color: #111827;
	font-weight: 600;
	text-transform: uppercase;
	text-decoration: none;
	letter-spacing: 0.8px;
	transition: color .2s ease;
}

.mgc-nav__link:hover,
.mgc-nav__item--current > .mgc-nav__link {
	color: var(--cl-red);
}

.mgc-nav__arrow {
	display: inline-block;
	width: 0;
	height: 0;
	border-left: 4px solid transparent;
	border-right: 4px solid transparent;
	border-top: 5px solid currentColor;
	margin-top: 2px;
}

/* Dropdown submenu */
.mgc-nav__submenu {
	list-style: none;
	margin: 0;
	padding: 8px 0;
	position: absolute;
	top: 100%;
	left: 0;
	min-width: 240px;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 8px 24px rgba(0, 0, 0, .12);
	opacity: 0;
	visibility: hidden;
	transform: translateY(8px);
	transition: opacity .2s ease, transform .2s ease, visibility .2s;
	z-index: 100;
}

.mgc-nav__submenu .mgc-nav__link {
	text-transform: none;
	font-size: 17px;
	font-weight: 600;
	padding: 10px 20px;
	display: block;
	width: 100%;
}

.mgc-nav__item--has-children:not(.mgc-nav__item--mega):hover > .mgc-nav__submenu,
.mgc-nav__item--has-children:not(.mgc-nav__item--mega):focus-within > .mgc-nav__submenu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

/* Mega menu panel — position: static on the item lets the panel
   position relative to .mgc-header__container--main (position: relative) */
.mgc-nav__item--mega {
	position: static;
}

.mgc-mega-panel {
	position: absolute;
	top: 100%;
	left: 20px;
	right: 20px;
	width: auto;
	transform: none;
	background: #fff;
	border: 1px solid #e5e5e5;
	box-shadow: 0 12px 40px rgba(0, 0, 0, .15);
	padding: 24px;
	opacity: 0;
	visibility: hidden;
	pointer-events: none;
	transition: opacity .25s ease, visibility .25s ease;
	z-index: 200;
}

/* Transparent bridge — catches mouseenter while mouse travels from link to panel */
.mgc-mega-panel::before {
	content: '';
	position: absolute;
	top: -60px;
	left: 0;
	right: 0;
	height: 60px;
}

.mgc-mega-panel[hidden] {
	display: block !important;
}

.mgc-nav__item--mega:hover > .mgc-mega-panel,
.mgc-nav__item--mega:focus-within > .mgc-mega-panel,
.mgc-nav__item--mega.is-open > .mgc-mega-panel {
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
}

.mgc-nav__item--mega:hover > .mgc-nav__link,
.mgc-nav__item--mega.is-open > .mgc-nav__link {
	color: var(--cl-red);
}

/* Mega menu inside panel */
.mgc-mega-panel .mgc-mm {
	padding: 0;
}

/* ----- Mobile header bar ----- */
.mgc-header__mobile {
	display: none;
	background: #fff;
	border-bottom: 1px solid #e5e5e5;
}

.mgc-header__container--mobile {
	min-height: 70px;
	gap: 10px;
}

.mgc-header__mobile .mgc-header__logo-wrap {
	position: static;
	transform: none;
	flex-shrink: 0;
}

.mgc-header__mobile .mgc-header__logo {
	height: 46px;
	width: auto;
	max-width: 150px;
	/* 2026-08-05: with height fixed and max-width clamping, a wide logo used
	   to squash. contain letterboxes it instead — true at 150px and truer at
	   the 126px small-phone cap below. */
	object-fit: contain;
}

/* 2026-08-11 v3 (owner: "only overhang on desktop not on mobile"): phones
   render the exact same flat 46px in-bar logo as a site with the checkbox
   off. The desktop overhang rule above also matches the mobile logo (same
   .mgc-header__logo class), so this reset unwinds its ceilings and shadow —
   the flat mobile rule already re-asserts the 46px height on its own. */
.mgc-header--logo-overhang .mgc-header__mobile .mgc-header__logo {
	max-height: none;
	max-width: 150px;
	filter: none;
}

.mgc-header__mobile-actions {
	display: flex;
	align-items: center;
	gap: 12px;
	margin-left: auto;
}

.mgc-header__locations-mobile {
	color: #000;
	text-decoration: none;
	font-weight: 600;
	font-size: 16px;
	display: inline-flex;
	align-items: center;
	gap: 6px;
}

.mgc-header__locations-mobile i {
	color: var(--cl-red);
}

.mgc-header__menu-toggle {
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	color: #000;
	display: flex;
	align-items: center;
}

.mgc-header__menu-toggle-icon {
	display: flex;
}

.mgc-header__menu-toggle .mgc-icon-close {
	display: none;
}

.mgc-header.is-menu-open .mgc-header__menu-toggle .mgc-icon-menu {
	display: none;
}

.mgc-header.is-menu-open .mgc-header__menu-toggle .mgc-icon-close {
	display: block;
}

.mgc-header__search-toggle {
	background: none;
	border: 0;
	padding: 6px;
	cursor: pointer;
	width: 36px;
	height: 36px;
}

.mgc-header__search-icon {
	display: block;
	width: 20px;
	height: 20px;
	border: 2px solid #000;
	border-radius: 50%;
	position: relative;
}

.mgc-header__search-icon::after {
	content: '';
	position: absolute;
	width: 8px;
	height: 2px;
	background: #000;
	bottom: -4px;
	right: -6px;
	transform: rotate(45deg);
}

/* Mobile drawer */

/*
 * AUDIT FIX 2026-08-01 (QA G-17). Same family of bug as G-16, found by sweeping
 * the theme for viewport units after the owner's sticky bar report.
 *
 * On a phone, 100vh is the LARGE viewport: the height the page would have if
 * the browser's chrome were hidden. It does not shrink when the address bar and
 * the toolbar are on screen. So a fixed element at top 0 with height 100vh runs
 * about 130px past the bottom of what the shopper can actually see, and that
 * bottom band sits behind the toolbar.
 *
 * For a normal page that costs nothing, because the page keeps scrolling. For
 * this drawer it costs real taps, because the drawer is its own scroller and it
 * bottoms out at its OWN bottom, which is already behind the toolbar. So the
 * tail of the menu cannot be scrolled up into view. It is not merely hidden, it
 * is unreachable.
 *
 * Measured on the QA site with one location: on a 360x640 handset the last item
 * in the drawer, the location's DETAILS link, sits fully behind the toolbar; on
 * a 375x667 iPhone SE it is cut in half; and for a logged in dealer the admin
 * bar rule below pushes it into the band on a full size iPhone too. The block
 * that lands there is the location card, which carries the dealer's phone
 * number, and that is the highest value tap on a golf cart dealer's site. Every
 * extra location a dealer adds pushes more of the menu into the dead band.
 *
 * dvh is the currently visible viewport, so it tracks the chrome. dvh rather
 * than svh because mgc-header.js locks body scroll while the drawer is open
 * (mgc-header-no-scroll), so the chrome cannot collapse underneath an open
 * drawer and there is nothing for a dynamic unit to jitter against. The plain
 * vh line stays first as the fallback for anything too old to know dvh.
 *
 * Not caught before now for exactly the reason G-16 was not: emulated mobile
 * has no browser chrome, so vh and dvh are the same number and the defect is
 * invisible to an automated pass. It was reproduced here by sizing the drawer
 * to the large viewport by hand and treating the bottom 130px as covered.
 */
.mgc-header__drawer {
	position: fixed;
	top: 0;
	right: 0;
	width: min(320px, 85vw);
	height: 100vh;  /* fallback: engines without dvh */
	height: 100dvh;
	background: #fff;
	z-index: 10001;
	overflow-y: auto;
	padding: 72px 24px 24px;
	box-shadow: -4px 0 24px rgba(0, 0, 0, .15);
	transform: translateX(100%);
	visibility: hidden;
	pointer-events: none;
	transition: transform .3s ease, visibility .3s ease;
}

.mgc-header.is-menu-open .mgc-header__drawer {
	transform: translateX(0);
	visibility: visible;
	pointer-events: auto;
}

/*
 * AUDIT FIX 2026-08-01 (QA G-13): the drawer and its overlay are position:fixed
 * at top 0, and a fixed element does NOT get pushed down by the margin-top that
 * WordPress puts on <html> for the admin bar. So for anyone logged in, the
 * drawer slid underneath the admin bar and the close button, which sits 20px
 * from the drawer's top, landed inside the bar's 46px band. Hit-testing the
 * centre of that button returned a.ab-item, not the button: a tap there opens
 * the admin bar menu instead of closing the drawer.
 *
 * Dealers log into their own sites from their phones, so this is a real path
 * and not a developer-only one. Logged out it was always fine, which is exactly
 * why it would have gone unreported: the shopper never sees it, and the dealer
 * has no way to describe it beyond "the X does not work".
 *
 * Offsetting by the bar's own height puts the whole drawer below it. The height
 * shrinks by the same amount so the bottom of the drawer stays on screen rather
 * than being pushed off it. WordPress switches the bar from 46px to 32px at
 * 783px, so this matches that breakpoint exactly.
 */
body.admin-bar .mgc-header__drawer,
body.admin-bar .mgc-header__overlay {
	top: 46px;
	height: calc( 100vh - 46px );  /* fallback: engines without dvh */
	height: calc( 100dvh - 46px ); /* G-17: see the drawer note above */
}

@media screen and ( min-width: 783px ) {
	body.admin-bar .mgc-header__drawer,
	body.admin-bar .mgc-header__overlay {
		top: 32px;
		height: calc( 100vh - 32px );  /* fallback: engines without dvh */
		height: calc( 100dvh - 32px ); /* G-17: see the drawer note above */
	}
}

.mgc-header__drawer-close {
	position: absolute;
	top: 20px;
	right: 20px;
	z-index: 2;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	padding: 0;
	border: 0;
	background: none;
	color: #000;
	cursor: pointer;
}

.mgc-header__drawer-close:focus-visible {
	outline: 2px solid var(--cl-red);
	outline-offset: 2px;
}

.mgc-header__drawer-close .mgc-icon-close {
	display: block;
	width: 24px;
	height: 24px;
}

.mgc-header__overlay {
	display: none;
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .5);
	z-index: 10000;
	pointer-events: none;
}

.mgc-header.is-menu-open .mgc-header__overlay {
	display: block;
	pointer-events: auto;
}

/* Mobile nav in drawer */
.mgc-header__drawer .mgc-nav__list {
	flex-direction: column;
	align-items: stretch;
}

.mgc-header__drawer .mgc-nav__link {
	padding: 14px 0;
	border-bottom: 1px solid #eee;
	width: 100%;
}

.mgc-header__drawer .mgc-nav__submenu,
.mgc-header__drawer .mgc-mega-panel {
	position: static;
	transform: none;
	width: 100%;
	box-shadow: none;
	border: 0;
	opacity: 1;
	visibility: visible;
	pointer-events: auto;
	padding: 0 0 16px;
	display: none;
}

.mgc-header__drawer .mgc-nav__item.is-open > .mgc-nav__submenu,
.mgc-header__drawer .mgc-nav__item.is-open > .mgc-mega-panel {
	display: block;
}

/* Caret toggle on parent items: the link navigates, this opens the submenu. */
.mgc-nav__subtoggle { display: none; }
.mgc-header__drawer .mgc-nav__item--has-children { position: relative; }
.mgc-header__drawer .mgc-nav__subtoggle {
	display: flex;
	align-items: center;
	justify-content: center;
	position: absolute;
	top: 0;
	right: 0;
	height: 51px;
	width: 60px;
	margin: 0;
	padding: 0;
	background: transparent;
	border: 0;
	cursor: pointer;
	color: #332C2B;
	-webkit-tap-highlight-color: transparent;
}
.mgc-header__drawer .mgc-nav__subtoggle svg {
	width: 18px;
	height: 18px;
	transition: transform 0.2s ease;
}
.mgc-header__drawer .mgc-nav__item.is-open > .mgc-nav__subtoggle svg {
	transform: rotate(180deg);
}

.mgc-header__drawer .mgc-mm {
	flex-direction: column;
}

/* Search overlay */
.mgc-header__search-overlay {
	position: fixed;
	inset: 0;
	background: rgba(0, 0, 0, .85);
	z-index: 10002;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 20px;
}

.mgc-header__search-overlay[hidden] {
	display: none !important;
}

.mgc-header__search-inner {
	position: relative;
	width: min(600px, 100%);
	text-align: center;
	color: #fff;
}

.mgc-header__search-label {
	font-size: 18px;
	margin-bottom: 20px;
}

.mgc-header__search-form {
	display: flex;
	gap: 10px;
}

.mgc-header__search-form input[type="search"] {
	flex: 1;
	padding: 14px 16px;
	border: 0;
	border-radius: 4px;
	font-size: 16px;
}

.mgc-header__search-form button {
	background: var(--cl-red);
	color: #fff;
	border: 0;
	padding: 14px 24px;
	font-weight: 700;
	border-radius: 4px;
	cursor: pointer;
}

.mgc-header__search-close {
	position: absolute;
	top: -40px;
	right: 0;
	background: none;
	border: 0;
	color: #fff;
	font-size: 32px;
	cursor: pointer;
	line-height: 1;
}

body.mgc-header-no-scroll {
	overflow: hidden;
}

/* ----- Responsive ----- */
@media (max-width: 921px) {
	.mgc-header__search-toggle {
		display: none;
	}

	.mgc-header__phone a,
	.mgc-header__locations-mobile {
		font-size: 16px;
	}

	.mgc-header__phone a {
		margin-top: 3px;
		margin-right: 10px;
	}
	
	.mgc-header__top,
	.mgc-header__main {
		display: none;
	}

	.mgc-header__mobile {
		display: block;
	}

	.mgc-header__phone-text {
		display: none;
	}
}

@media (max-width: 480px) {
	.mgc-header__locations-mobile .map-mobile {
		display: none;
	}
}

@media (min-width: 922px) {
	.mgc-header__drawer,
	.mgc-header__overlay,
	.mgc-header__search-overlay {
		display: none !important;
	}
}

/* ═════════════════════════════════════════════════════════════════════════
   LOCATIONS DROPDOWN (2026-07-28 — the multi-location header).
   Renders ONLY when the dealer has 2+ locations (single-location keeps the
   classic phone + Location Info bar). One red control opens a panel where
   every showroom has its OWN tap-to-call number and Details link — the
   answer to "which location am I calling?" is that the caller picks.
   ═════════════════════════════════════════════════════════════════════════ */
.mgc-header__top,
.mgc-header__top .mgc-header__container,
.mgc-header__mobile,
.mgc-header__container--mobile {
	overflow: visible; /* the absolute panel must never be clipped */
}
.mgc-header__locdrop {
	position: relative;
	display: inline-flex;
	/* 2026-08-05 (owner): beside a wide logo the chip was the only flex item
	   that could give, so it gave — "3" over "LOCATIONS" on two lines. The
	   chip never shrinks; the label below never wraps. */
	flex-shrink: 0;
}
.mgc-header__locdrop-btn {
	display: inline-flex;
	align-items: center;
	gap: 9px;
	white-space: nowrap;
	/* !important: parent/plugin button resets repaint bare <button>s white. */
	background: var(--cl-red) !important;
	color: #fff !important;
	border: 0;
	cursor: pointer;
	font-family: inherit;
	font-weight: 700;
	font-size: 18px;
	text-transform: uppercase;
	letter-spacing: 1px;
	line-height: 1.2;
	padding: 11px 22px;
	border-radius: 3px;
	transition: background .2s ease, color .2s ease;
}
.mgc-header__locdrop-btn:hover {
	background: #fff !important;
	color: #000 !important;
}
/*
 * 2026-08-03 (owner): clicking the Locations button left a blue ring around
 * the red pill. That is the browser's own focus ring, and on a <button> it
 * stays painted after the click that opened the panel, so it reads as a
 * selected state nobody asked for and it fights the brand red.
 *
 * Gone for pointer input, kept for the keyboard. :focus-visible is the browser
 * telling us the person is tabbing rather than clicking, so someone navigating
 * by keyboard still sees where they are, in black instead of blue. Same
 * treatment on the red Location Info button beside it, which is the same pill
 * in the single location shape and had the same ring.
 */
.mgc-header__locdrop-btn:focus,
.mgc-header__location-btn:focus {
	outline: none;
	box-shadow: none;
}
.mgc-header__locdrop-btn:focus-visible,
.mgc-header__location-btn:focus-visible {
	outline: 2px solid #000;
	outline-offset: 2px;
}
.mgc-header__locdrop-btn i { color: inherit; }
.mgc-header__locdrop-chev {
	width: 13px;
	height: 13px;
	flex: 0 0 auto;
	transition: transform .18s ease;
}
.mgc-header__locdrop.is-open .mgc-header__locdrop-chev { transform: rotate(180deg); }

.mgc-header__locpanel {
	position: absolute;
	top: calc(100% + 10px);
	right: 0;
	z-index: 1200;
	width: 340px;
	max-width: calc(100vw - 20px);
	background: #fff;
	border: 1px solid #e6ecf3;
	border-radius: 14px;
	box-shadow: 0 26px 56px -18px rgba(13, 27, 42, .38);
	padding: 8px;
	text-align: left;
}
.mgc-header__locpanel[hidden] { display: none; }

.mgc-header__locrow {
	display: flex;
	align-items: center;
	justify-content: space-between;
	gap: 12px;
	padding: 12px 14px;
	border-radius: 10px;
}
.mgc-header__locrow:hover { background: #f6f8fb; }
.mgc-header__locrow-main {
	display: flex;
	flex-direction: column;
	gap: 3px;
	min-width: 0;
}
.mgc-header__locrow-city {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 14.5px;
	color: #14181e;
}
.mgc-header__locrow-tag {
	font-size: 9.5px;
	font-weight: 700;
	letter-spacing: .12em;
	text-transform: uppercase;
	color: var(--cl-red);
	border: 1px solid rgba(221, 0, 0, .4);
	border-radius: 999px;
	padding: 2px 7px;
	line-height: 1.2;
}
.mgc-header__locrow-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 600;
	font-size: 13.5px;
	color: #4a5563;
	text-decoration: none;
	transition: color .15s ease;
}
.mgc-header__locrow-phone i {
	color: var(--cl-red);
	font-size: 12px;
}
.mgc-header__locrow-phone:hover { color: var(--cl-red); }
.mgc-header__locrow-details {
	display: inline-flex;
	align-items: center;
	gap: 5px;
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cl-red);
	text-decoration: none;
	white-space: nowrap;
}
.mgc-header__locrow-details svg {
	width: 12px;
	height: 12px;
	transition: transform .18s ease;
}
.mgc-header__locrow-details:hover svg { transform: translateX(3px); }
.mgc-header__locpanel-all {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-top: 6px;
	padding: 12px;
	border-top: 1px solid #eef1f5;
	font-weight: 700;
	font-size: 12px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: #14181e;
	text-decoration: none;
	transition: color .15s ease;
}
.mgc-header__locpanel-all:hover { color: var(--cl-red); }

/* Mobile bar instance: smaller trigger; the panel anchors to the FULL
   mobile bar (locdrop goes static, container goes relative), or a
   right-anchored 356px panel clips off the left viewport edge. */
@media (max-width: 921px) {
	.mgc-header__locdrop-btn {
		font-size: 13px;
		padding: 9px 14px;
		letter-spacing: .06em;
		gap: 7px;
	}
	.mgc-header__locdrop { position: static; }
	.mgc-header__container--mobile { position: relative; }
	.mgc-header__locpanel {
		position: absolute;
		left: 8px;
		right: 8px;
		top: calc(100% + 6px);
		width: auto;
		max-width: none;
	}

	/* ── Mobile panel upgrade (2026-08-02, owner-approved mockup) ──────────
	   A 5-6 showroom panel used to run taller than the phone: the last rows
	   and View All sat below the fold, and the page (not the panel)
	   scrolled. The panel is now a fixed sheet capped at 72vh with INTERNAL
	   scroll, a scrim dims the page behind it, the collapsed trigger goes
	   outline-style so the top bar keeps one visual weight, each row's
	   phone number becomes the single filled call button (Details drops to
	   a quiet gray secondary), and View All stays pinned at the bottom.
	   Desktop keeps the classic anchored dropdown above. */
	/* !important mirrors the base rule at the top of this section — it fights
	   the same plugin button-reset; without it the base red always wins. */
	.mgc-header__locdrop-btn {
		background: #fff !important;
		color: var(--cl-red) !important;
		border: 2px solid var(--cl-red);
	}
	.mgc-header__locdrop-btn .mgc-header__locdrop-chev { color: var(--cl-red); }
	/* 2026-08-05 (owner: "remove the emoji or whatever will make it the
	   best"): the pin icon goes on mobile. It repeated what the label
	   already says, and its ~20px is what the chip needs to sit on one
	   line beside a full-width logo. The chevron stays — it is the part
	   that says "this opens". Desktop keeps the pin. */
	.mgc-header__locdrop-btn i { display: none; }
	.mgc-header__locdrop.is-open::before {
		content: "";
		position: fixed;
		inset: 0;
		background: rgba(17, 17, 17, .45);
		z-index: 1190;
	}
	.mgc-header__locdrop.is-open .mgc-header__locpanel {
		position: fixed;
		left: 12px;
		right: 12px;
		top: 76px;
		z-index: 1200;
		max-height: min(72vh, 620px);
		overflow-y: auto;
		overscroll-behavior: contain;
		-webkit-overflow-scrolling: touch;
		box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
	}
	.mgc-header__locrow {
		align-items: center;
		padding: 13px 8px;
		border-bottom: 1px solid #f0f1f3;
		border-radius: 0;
	}
	.mgc-header__locrow:last-of-type { border-bottom: 0; }
	.mgc-header__locrow:hover { background: transparent; }
	.mgc-header__locrow-phone {
		align-self: flex-start;
		background: var(--cl-red);
		color: #fff;
		font-weight: 700;
		line-height: 1;
		padding: 11px 14px;
		border-radius: 9px;
		margin-top: 6px;
		white-space: nowrap;
	}
	.mgc-header__locrow-phone i { color: #fff; }
	.mgc-header__locrow-phone:hover { color: #fff; }
	.mgc-header__locrow-details {
		color: #6b7280;
		font-size: 11px;
		letter-spacing: .06em;
	}
	.mgc-header__locrow-details svg { color: #9ca3af; }
	.mgc-header__locpanel-all {
		position: sticky;
		bottom: 0;
		z-index: 3;
		background: #fff;
		box-shadow: 0 -8px 14px -10px rgba(0, 0, 0, .22);
	}
}
@media (max-width: 480px) {
	.mgc-header__locdrop-btn { font-size: 12px; padding: 8px 12px; letter-spacing: .04em; }
}
/* 2026-08-05: the 320-360px tail. Logo 150 + one-line chip + burger no
   longer fit, and since the chip is now the element that refuses to move,
   the logo is the one that concedes — by a few pixels, only here. */
@media (max-width: 400px) {
	.mgc-header__mobile .mgc-header__logo { max-width: 126px; }
	.mgc-header__locdrop-btn { padding: 8px 10px; }
}
@media (max-width: 360px) {
	.mgc-header__mobile .mgc-header__logo { max-width: 104px; }
	.mgc-header__container--mobile { gap: 8px; }
	.mgc-header__mobile-actions { gap: 8px; }
}

/* ═════════════════════════════════════════════════════════════════════════
   SINGLE-DECK HEADER (2026-07-28). The gray/black utility strip is gone —
   its only cargo was the phone/locations control, at a cost of ~60px of
   viewport on every page. Contact controls now live in the main white bar
   right of the nav (.mgc-header__main-actions). The strip's CSS above is
   retired with its markup; .mgc-header__phone is reused here, hence the
   dark-on-white overrides.
   ═════════════════════════════════════════════════════════════════════════ */
.mgc-header__main-actions {
	display: flex;
	align-items: center;
	gap: 18px;
	margin-left: 28px;
	flex: 0 0 auto;
}
.mgc-header__main-actions .mgc-header__phone a {
	color: #14181e;
	font-weight: 700;
	font-size: 16px;
}
.mgc-header__main-actions .mgc-header__phone a:hover { color: var(--cl-red); }
.mgc-header__main-actions .mgc-header__location-btn {
	font-size: 13px;
	padding: 11px 18px;
	letter-spacing: .07em;
}
.mgc-header__main-actions .mgc-header__locdrop-btn {
	font-size: 13px;
	padding: 11px 16px;
	letter-spacing: .07em;
}

/* Panel polish: header line + street under each city. */
.mgc-header__locpanel { width: 356px; }
.mgc-header__locpanel-head {
	display: block;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a929c;
	/* Right padding clears the close X so a long heading never runs under it. */
	padding: 10px 46px 8px 14px;
}
/*
 * 2026-08-03 (owner): close X, top right of the panel. Sits in the corner
 * rather than in the heading row so the heading keeps its own left alignment
 * with the rows beneath it.
 *
 * 34px square with a 15px glyph: the glyph reads as small and light next to
 * the heading, while the tap target still clears the 34px that thumbs need.
 * Grey by default so it never competes with the phone numbers and the Details
 * links, which are what the panel is actually for; it darkens on hover.
 */
.mgc-header__locpanel-close {
	position: absolute;
	top: 8px;
	right: 8px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	padding: 0;
	border: 0;
	border-radius: 8px;
	background: transparent !important; /* !important: parent button resets repaint bare <button>s. */
	color: #98a1ac !important;
	cursor: pointer;
	line-height: 0;
	transition: background .18s ease, color .18s ease;
}
.mgc-header__locpanel-close svg { width: 15px; height: 15px; }
.mgc-header__locpanel-close:hover {
	background: #f1f4f8 !important;
	color: #14181e !important;
}
.mgc-header__locpanel-close:focus { outline: none; box-shadow: none; }
.mgc-header__locpanel-close:focus-visible { outline: 2px solid #000; outline-offset: 2px; }
.mgc-header__locrow-street {
	font-size: 12.5px;
	color: #7a8694;
	line-height: 1.4;
}

/* Tight desktop widths: keep the bar on one line. */
@media (min-width: 922px) and (max-width: 1180px) {
	.mgc-header__main-actions { margin-left: 16px; gap: 12px; }
	.mgc-header__main-actions .mgc-header__phone { display: none; }
	.mgc-header__container--main { padding-left: 150px; }
}

/* [LD] 2026-07-31 (QA G-03/G-06). The block above says "keep the bar on one
   line" and then only trims the things to the RIGHT of the nav, which was
   never where the width went. Measured at 1024px: the nav has 658px to work
   with and the six shipped items (Home, Inventory, Financing, Service, Parts,
   Rentals) want 845px, so Parts and Rentals dropped to a second row and the
   header grew from 91px to 130px. That held all the way to 1279px, which is
   most of the laptops a golf cart shopper actually owns. Nothing overlapped
   and nothing overflowed, so it was not broken, but a two-deck nav with
   Rentals stranded on its own line is not the header anyone designed.

   So the nav's own type scales with the viewport across the whole desktop
   band instead. Both ramps are linear and both land exactly on the design
   values (19px text, 18px side padding) at 1366px, which is where the band
   ends, so there is no visible step when a window crosses out of it. At the
   narrow end they bottom out at 13.5px and 7px, which still clears the six
   items at 922px, the width where the desktop bar first appears.

   Scoped to direct children of the header's own list so the dropdown panels,
   which set their own 17px/10px-20px, are untouched. */
@media (min-width: 922px) and (max-width: 1365px) {
	.mgc-header__nav > .mgc-nav__list > .mgc-nav__item > .mgc-nav__link {
		font-size: clamp( 13.5px, 1.17vw + 3px, 19px );
		padding: 12px clamp( 7px, 2.63vw - 17.9px, 18px );
		letter-spacing: 0.5px;
	}

	.mgc-header__nav > .mgc-nav__list {
		gap: 2px;
	}
}

/* ── Drawer locations section (2026-07-28) — deliberate redundancy with the
      header pill: menu-browsers find the showrooms where a "Locations" menu
      item would be, styled to sit under the drawer nav. ─────────────────── */
.mgc-header__drawer-locs {
	margin-top: 26px;
	padding-top: 20px;
	border-top: 1px solid #eef1f5;
}
.mgc-header__drawer-locs-head {
	display: block;
	font-weight: 700;
	font-size: 10.5px;
	letter-spacing: .18em;
	text-transform: uppercase;
	color: #8a929c;
	margin: 0 0 14px;
}
.mgc-header__drawer-loc { padding: 0 0 18px; }
.mgc-header__drawer-loc:last-child { padding-bottom: 6px; }
.mgc-header__drawer-loc-city {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-weight: 700;
	font-size: 15px;
	color: #14181e;
}
.mgc-header__drawer-loc-street {
	display: block;
	font-size: 12.5px;
	color: #7a8694;
	margin: 2px 0 6px;
}
.mgc-header__drawer-loc-links {
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.mgc-header__drawer-loc-phone {
	display: inline-flex;
	align-items: center;
	gap: 7px;
	font-weight: 700;
	font-size: 14px;
	color: #14181e;
	text-decoration: none;
}
.mgc-header__drawer-loc-phone i { color: var(--cl-red); font-size: 12px; }
.mgc-header__drawer-loc-details {
	font-weight: 700;
	font-size: 11.5px;
	letter-spacing: .08em;
	text-transform: uppercase;
	color: var(--cl-red);
	text-decoration: none;
}

/* =========================================================
   Black header (2026-08-07, owner: "add the ability to make
   the header black")
   Gated by body.cl-header--black, which brand/brand.php adds
   only when Brand → Header color is Black — the default light
   header matches none of this. The !importants are not
   optional: functions.php attaches a light-skin inline block
   to this stylesheet (".mgc-header__main{background:#fff
   !important}", nav links #332C2B !important, …) that no
   plain rule can outrank, so every declaration that fights
   one of those carries !important plus a higher-specificity
   selector, and wins on both counts. The dropdown panel, the
   mega menu and the drawer stay white overlay surfaces on
   purpose — their links are re-pinned dark below because the
   white-link rule would otherwise reach into them.
   Accent-on-dark reads from --cl-red-ondark (computed
   server-side by cl_brand_readable_on against the bar,
   printed by cl_brand_header_style_css), with the raw accent
   as fallback for a stale engine.
   ========================================================= */
body.cl-header--black .mgc-header__main,
body.cl-header--black .mgc-header__mobile {
	background: #141414 !important;
	border-bottom: 1px solid rgba(255, 255, 255, .12);
}

/* Top-level nav links: white on the dark bar. */
body.cl-header--black .mgc-header__nav a {
	color: #fff !important;
}

body.cl-header--black .mgc-header__nav a:hover,
body.cl-header--black .mgc-header__nav .current-menu-item > a,
body.cl-header--black .mgc-header__nav .current_page_item > a,
body.cl-header--black .mgc-nav__item--current > .mgc-nav__link,
body.cl-header--black .mgc-nav__item--mega:hover > .mgc-nav__link,
body.cl-header--black .mgc-nav__item--mega.is-open > .mgc-nav__link {
	color: var(--cl-red-ondark, var(--cl-red, #DD0000)) !important;
}

/* Dropdown + mega panels are still white surfaces: put their link
   color back (same value the light skin uses), and give their hover
   the plain accent — the ondark shade is for the bar, not for white. */
body.cl-header--black .mgc-header__nav .mgc-nav__submenu a,
body.cl-header--black .mgc-header__nav .mgc-mega-panel a {
	color: #332C2B !important;
}

body.cl-header--black .mgc-header__nav .mgc-nav__submenu a:hover,
body.cl-header--black .mgc-header__nav .mgc-mega-panel a:hover {
	color: var(--cl-red, #DD0000) !important;
}

/* Mobile bar controls: the burger and search glyphs draw with
   currentColor / borders, so recoloring the control recolors the
   glyph. */
body.cl-header--black .mgc-header__menu-toggle,
body.cl-header--black .mgc-header__locations-mobile {
	color: #fff !important;
}

body.cl-header--black .mgc-header__locations-mobile i {
	color: var(--cl-red-ondark, var(--cl-red, #DD0000)) !important;
}

body.cl-header--black .mgc-header__search-icon {
	border-color: #fff;
}

body.cl-header--black .mgc-header__search-icon::after {
	background: #fff;
}

/* The single-location fallback button: the light skin hovers it to
   charcoal, which disappears on the dark bar — hover to white here. */
body.cl-header--black .mgc-header__location-btn:hover {
	background: #fff !important;
	color: #000 !important;
}

/* ── Today's hours in the locations panel + drawer rows (batch78). Sits
   between the street and the phone, in the row's quiet scale; the clock
   glyph gives the eye an anchor in a row that is otherwise all text. */
.mgc-header__locrow-hours {
	display: block;
	font-size: 12.5px;
	color: #7a8694;
	line-height: 1.4;
	margin-top: 1px;
}
.mgc-header__locrow-hours .fa-clock {
	font-size: 11px;
	margin-right: 2px;
}
.mgc-header__drawer-loc-hours {
	display: block;
	font-size: 12.5px;
	color: #7a8694;
	margin: 0 0 6px;
}
.mgc-header__drawer-loc-hours .fa-clock {
	font-size: 11px;
	margin-right: 2px;
}