/*
 * Site-wide header — pairs with header.php. Always enqueued (see
 * functions-enqueue-snippet.php), since header.php now renders on every
 * page via get_header(), not just Manager Resources.
 *
 * Colors read from Avada's global --awb-color* vars first, same fallback
 * convention as shared.css/front-page.css/site-footer.css.
 */

.gm-header {
	background: #ffffff;
	padding: 14px 24px;
	display: flex;
	align-items: center;
	gap: 16px;
	flex-wrap: wrap;
}
.gm-header__logo-link {
	display: flex;
	align-items: center;
	flex-shrink: 0;
}
.gm-header__logo {
	height: 41px;
	width: auto;
	display: block;
	transition: height .2s ease;
}

/* Pill group (Locations/Coupons/Services) is a sibling of .gm-header__menu,
   not nested inside it, so it stays visible regardless of the hamburger's
   open/closed state — see the <=1024px override below, which pulls it
   onto its own full-width row instead of hiding it. */
.gm-header__pillgroup {
	display: flex;
	align-items: center;
	background: #314c6c;
	border-radius: 6px;
	flex-shrink: 0;
}
.gm-header__pillgroup .gm-header__navitem {
	position: relative;
}
.gm-header__pillgroup .gm-header__navitem:not(:first-child) {
	border-left: 1px solid rgba(255, 255, 255, .2);
}
.gm-header__pillgroup .gm-header__navlink {
	color: #ffffff;
	padding: 10px 16px;
	text-transform: uppercase;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.8px;
	height: 44px;
	box-sizing: border-box;
}
/* No overflow:hidden on .gm-header__pillgroup (removed 2026-07-29) — it
   was clipping the Coupons/Services dropdown panels (.gm-header__submenu
   is position:absolute, escapes its parent's box, but overflow:hidden on
   any ancestor still clips it regardless of the descendant's own
   position). It was only ever there to keep the first/last pill's hover
   background from squaring off past the group's own rounded corners —
   giving those two navlinks their own matching corner radius directly
   achieves that without clipping anything else in the group.
   .gm-header__navitem:first-child / :last-child, not
   .gm-header__navlink:first-child / :last-child — the buttons are the
   only element inside each .gm-header__navitem, but selecting via the
   item keeps this correct even if a non-.gm-header__navlink element
   (e.g. a wrapping <div>) is ever added inside one. */
.gm-header__pillgroup .gm-header__navitem:first-child .gm-header__navlink {
	border-top-left-radius: 6px;
	border-bottom-left-radius: 6px;
}
.gm-header__pillgroup .gm-header__navitem:last-child .gm-header__navlink {
	border-top-right-radius: 6px;
	border-bottom-right-radius: 6px;
}
.gm-header__pillgroup .gm-header__navlink:hover,
.gm-header__pillgroup .gm-header__navitem.active .gm-header__navlink {
	color: #ffffff;
	background: rgba(255, 255, 255, .1);
}
.gm-header__pillgroup .gm-header__chevron {
	border-color: currentColor;
	display: none;
}
.gm-header__navicon {
	font-size: 13px;
}

/* Nav + search icon share the row's remaining space on desktop; collapse
   together behind the hamburger below 1024px (see .gm-header__toggle).
   Pill group above is NOT part of this collapsible group. */
.gm-header__menu {
	display: flex;
	align-items: center;
	flex: 1;
	gap: 16px;
	flex-wrap: wrap;
	min-width: 0;
}

.gm-header__toggle {
	display: none;
	flex-direction: column;
	justify-content: center;
	gap: 5px;
	width: 32px;
	height: 32px;
	padding: 0;
	background: transparent;
	border: none;
	cursor: pointer;
	flex-shrink: 0;
	/* .gm-header has no justify-content, so without this the toggle just
	   sits next to the logo on mobile instead of at the row's right edge —
	   .gm-header's own 24px padding then gives it the same right-side
	   spacing as the logo's 24px left-side spacing (harmless on desktop,
	   where this is display:none). */
	margin-left: auto;
}
.gm-header__toggle-bar {
	display: block;
	width: 100%;
	height: 2px;
	background: #000000;
	border-radius: 2px;
}

.gm-header__nav {
	display: flex;
	align-items: center;
	gap: 24px;
	flex-wrap: wrap;
	font-family: var(--awb-body-typography-font-family, 'Rubik', sans-serif);
	font-weight: 500;
}
.gm-header__nav a {
	color: #000000;
	text-decoration: none;
}
.gm-header__nav a:hover {
	color: var(--awb-color2, #ed2e38);
}
.gm-header__navlink-plain,
.gm-header__navlink--plain {
	font-size: 15px;
}
.gm-header__search-toggle {
	margin-left: auto;
}

/* Mobile: collapse the plain-link group + search icon behind a hamburger;
   pill group (Locations/Coupons/Services) is a sibling of .gm-header__menu
   (see header.php), so it's unaffected by this and handled separately
   below. */
@media (max-width: 1024px) {
	.gm-header__toggle {
		display: flex;
	}
	.gm-header__menu {
		display: none;
		flex: 0 0 100%;
		flex-direction: column;
		align-items: flex-start;
		width: 100%;
		gap: 16px;
	}
	.gm-header__menu.is-open {
		display: flex;
	}
	.gm-header__nav {
		flex-direction: column;
		align-items: flex-start;
		gap: 14px;
		width: 100%;
	}
	.gm-header__search-toggle {
		margin-left: 0;
	}

	/* Pill group becomes a full-width, 3-equal-column, square-cornered band
	   directly under the header row instead of a compact inline pill. Full-
	   bleed edge-to-edge, flush against the header's bottom edge: negative
	   margin cancels .gm-header's own 14px 24px padding on 3 sides, and the
	   flex-basis is grown by the same 48px (2x24px) the negative left/right
	   margins remove, so the item's margin-box exactly fills the header's
	   available width instead of overflowing or falling short. */
	.gm-header {
		flex-wrap: wrap;
		row-gap: 0;
	}
	.gm-header__menu {
		/* .gm-header's row-gap is 0 at this breakpoint (above) so the pill
		   group sits flush under the header row when the menu is closed;
		   this restores that spacing specifically above the menu for when
		   the hamburger is open, without reintroducing a gap above the pill
		   group in the (default) closed state. */
		margin-top: 16px;
	}
	.gm-header__pillgroup {
		flex: 1 0 calc(100% + 48px);
		margin: 0 -24px -14px;
		margin-top: 11px;
		border-radius: 0;
		order: 10;
	}
	.gm-header__pillgroup .gm-header__navitem {
		flex: 1;
	}
	.gm-header__pillgroup .gm-header__navlink {
		width: 100%;
		justify-content: center;
	}
	/* Group itself resets to square corners at this width (border-radius: 0
	   above) — match that on the first/last navlink's own radius too, or
	   they'd show a stray round corner the group no longer has. */
	.gm-header__pillgroup .gm-header__navitem:first-child .gm-header__navlink,
	.gm-header__pillgroup .gm-header__navitem:last-child .gm-header__navlink {
		border-radius: 0;
	}
}

/* Pin header to top on scroll, site-wide (see site-header.js for the
   .is-scrolled toggle). Sticky, not fixed — header is already the first
   in-flow block in <body>, so no padding-top compensation is needed
   below it. */
.gm-site-header {
	position: sticky;
	top: 0;
	z-index: 1000;
	transition: box-shadow .2s linear, padding .2s ease;
}
.gm-site-header.is-scrolled {
	box-shadow: 0 2px 10px rgba(0, 0, 0, .12);
}

/* Shrink-on-scroll — layers onto the .is-scrolled class the scroll
   listener in site-header.js already toggles; no new JS needed. */
.gm-site-header.is-scrolled .gm-header {
	padding-top: 8px;
	padding-bottom: 8px;
}
.gm-site-header.is-scrolled .gm-header__logo {
	height: 31px;
}

/* --- Nav trigger buttons (Services / Locations / About / Careers) --- */
.gm-header__navlink {
	background: none;
	border: none;
	cursor: pointer;
	display: inline-flex;
	align-items: center;
	gap: 6px;
	font-family: var(--awb-body-typography-font-family, 'Rubik', sans-serif);
	font-size: 14px;
	font-weight: 500;
	color: #000000;
	padding: 0;
}
.gm-header__navlink:hover,
.gm-header__navitem.active .gm-header__navlink {
	color: var(--awb-color2, #ed2e38);
}
.gm-header__chevron {
	width: 8px;
	height: 8px;
	border-right: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	transform: rotate(45deg);
	transition: transform .2s ease;
	margin-top: -4px;
}
.gm-header__navitem.active .gm-header__chevron {
	transform: rotate(-135deg);
	margin-top: 2px;
}

/* --- Pattern B: menu panel (Services / About / Careers) --- */
.gm-header__navitem {
	position: relative;
}
.gm-header__submenu {
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translate(-50%, -12px);
	visibility: hidden;
	opacity: 0;
	background: rgb(233, 239, 242);
	border-radius: 0 0 16px 16px;
	box-shadow: 0 0 8px rgba(10, 10, 10, .12);
	padding: 20px;
	min-width: 480px;
	transition: transform .3s ease, opacity .3s ease, visibility 0s .3s;
	z-index: 10;
}
.gm-header__navitem.active .gm-header__submenu {
	visibility: visible;
	opacity: 1;
	transform: translate(-50%, 0);
	transition: transform .3s ease, opacity .3s ease, visibility 0s;
}
.gm-header__submenu-grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 10px;
}
.gm-header__submenu-grid--2col .gm-header__pill {
	padding: 24px;
	font-size: 15px;
}
.gm-header__pill {
	display: block;
	background: #ffffff;
	border-radius: 8px;
	box-shadow: 0 1px 4px rgba(0, 0, 0, .08);
	padding: 14px 16px;
	font-family: var(--awb-body-typography-font-family, 'Rubik', sans-serif);
	font-size: 13px;
	font-weight: 700;
	text-transform: uppercase;
	color: #000000;
	text-decoration: none;
	transition: box-shadow .15s ease;
}
.gm-header__pill:hover {
	box-shadow: 0 2px 8px rgba(0, 0, 0, .15);
	color: var(--awb-color2, #ed2e38);
}

/* --- Pattern A: search/location bar. Sibling of .gm-header (see
   header.php), not nested inside .gm-header__menu's flex row — so
   width: 100% here is genuinely full header-width. --- */
.gm-header__searchbar {
	width: 100%;
	box-sizing: border-box;
	background: rgb(233, 239, 242);
	padding: 16px 24px;
	display: flex;
	align-items: center;
	gap: 12px;
}
.gm-header__searchbar[hidden] {
	display: none;
}
.gm-header__searchbar-input {
	flex: 1;
	border: 1px solid #d5dbe0;
	border-radius: 6px;
	padding: 12px 16px;
	font-size: 15px;
	font-family: var(--awb-body-typography-font-family, 'Rubik', sans-serif);
}
.gm-header__searchbar-locate,
.gm-header__searchbar-submit {
	border: none;
	border-radius: 6px;
	width: 44px;
	height: 44px;
	flex-shrink: 0;
	cursor: pointer;
}
.gm-header__searchbar-locate {
	background: transparent;
}
.gm-header__searchbar-submit {
	background: var(--awb-color2, #ed2e38);
	color: #fff;
}

/* --- Search icon toggle --- */
.gm-header__search-toggle {
	background: none;
	border: none;
	cursor: pointer;
	width: 24px;
	height: 24px;
	display: flex;
	align-items: center;
	justify-content: center;
}

/* About/Careers live inside the collapsible .gm-header__menu, so their
   submenus switch to inline accordion treatment at the same <=1024px
   breakpoint the hamburger itself uses. Scoped to .gm-header__menu so it
   doesn't affect the pill group's own Coupons/Services submenus, which
   stay floating panels down to the narrower breakpoint below. */
@media (max-width: 1024px) {
	.gm-header__menu .gm-header__submenu {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
		border-radius: 8px;
		display: none;
	}
	.gm-header__menu .gm-header__navitem.active .gm-header__submenu {
		display: block;
	}
	.gm-header__menu .gm-header__submenu-grid {
		grid-template-columns: 1fr;
	}
}

/* Narrow-viewport fallback: pill-group dropdowns (Coupons/Services) and
   the search bars still need to collapse to full-width/stacked treatment
   below 600px — no room for a 480px floating panel at that width. */
@media (max-width: 600px) {
	.gm-header__submenu {
		position: static;
		transform: none;
		min-width: 0;
		width: 100%;
		box-sizing: border-box;
		border-radius: 8px;
		display: none;
	}
	.gm-header__navitem.active .gm-header__submenu {
		display: block;
	}
	.gm-header__submenu-grid {
		grid-template-columns: 1fr;
	}
	.gm-header__searchbar {
		flex-direction: column;
		align-items: stretch;
		padding: 12px 0;
	}
	.gm-header__searchbar-locate,
	.gm-header__searchbar-submit {
		width: 100%;
	}
	.gm-header__pillgroup .gm-header__navlink {
		font-size: 14px;
		padding: 10px 10px;
	}
}