header{
	z-index: 99;
}

.head-bubble {
	padding: 6px 6px;
	background: linear-gradient(135.13deg, rgba(56, 56, 56, 0.48));
	backdrop-filter: blur(10px);
	color: #fff;
	-webkit-backdrop-filter: blur(10px);
	border-radius: 100px;
	font-family: 'Geist', sans-serif;
	font-weight: 500;
	letter-spacing: -0.04em;
	display: flex;
	align-items: center;
	position: relative;   /* positioning context for .nav-indicator */
	gap: .2em;
}

.header-bar{
	display: flex;
	justify-content: space-between;   /* groups land exactly at the bar's edges */
	align-items: center;
	/* Big side padding squeezes both groups toward the centre by default.
	   On scroll the padding shrinks to 1em, so space-between spreads them
	   out to the edges. Padding IS animatable (justify-content is not, which
	   is why it snapped) and % is relative to the bar's own width, so it
	   tracks the container with no width math. Tune 25% for the default look. */
	padding: 0.5em 16vw;
	transition: padding 1s ease;
	gap: .5em;
}

@media (min-width: 576px) {
    header .container{
        max-width: 640px;
    }
	.header-bar{
		padding: 0.5em 0vw;
	}
}

@media (min-width: 768px) {
    header .container{
        max-width: 860px;
    }

	.header-bar{
		padding: 0.5em 3vw;
	}
}

@media (min-width: 991px) {
	header .container{
		max-width:960px;
	}

	.header-bar{
		padding: 0.5em 7vw;
	}
}

@media (min-width: 1200px) {
	header .container{
		max-width:1140px;
	}
	.header-bar{
		padding: 0.5em 12vw;
	}
}

@media (min-width: 1490px) {
    header .container{
        max-width:1420px
    }
	.header-bar{
		padding: 0.5em 16vw;
	}
}

@media (min-width: 1600px) {
    header .container{
        max-width:1420px
    }
	.header-bar{
		padding: 0.5em 12vw;
	}
}

.header_on_scroll .header-bar{
	padding-left: 0;
	padding-right: 0;
}


.header-bar a {
	color: #fff;
}

.header-bar a{
	padding: .4em 1em;
	position: relative;   /* sit above the sliding pill */
	z-index: 1;
	transition: color 0.35s ease;
}

/* Static current pill — shown before JS runs (no-JS fallback). */
.header-bar a.current{
	background: #fff;
	border-radius: 50px;
	color: #000;
}

.header-bar a:hover{
	background: #fff;
	border-radius: 50px;
	color: #000;
	transition: color 0.35s ease;
}

.head-bubble.has-indicator a.is-active{
	color: #000;
}

/* ---- Desktop hover submenu ----------------------------------------------
   A nav item with children wraps in .moo-nav-item, which positions the panel
   under it. Hover and :focus-within both open it, so it works from the
   keyboard with no JS. */

.moo-nav-item{
	position: relative;
	display: flex;
	align-items: center;
}

/* Chevron rides in the pill beside the label and flips when the panel opens. */
.header-bar .moo-nav-item > a{
	display: inline-flex;
	align-items: center;
	gap: .45em;
}

.moo-nav-chevron{
	transition: transform .25s ease;
}

.moo-nav-item:hover .moo-nav-chevron,
.moo-nav-item:focus-within .moo-nav-chevron{
	transform: rotate(180deg);
}

/* The gap is padding, not margin, so the pointer can cross it without leaving
   the item and closing the panel. */
.moo-nav-submenu-wrap{
	position: absolute;
	top: 100%;
	left: 50%;
	transform: translateX(-50%);
	padding-top: 14px;
	opacity: 0;
	visibility: hidden;
	transition: opacity .25s ease, visibility .25s;
}

.moo-nav-item:hover .moo-nav-submenu-wrap,
.moo-nav-item:focus-within .moo-nav-submenu-wrap{
	opacity: 1;
	visibility: visible;
}

.moo-nav-submenu{
	width: 620px;
	max-width: calc(100vw - 2em);
	align-items: center;
	box-shadow: 0 24px 60px rgba(15, 31, 20, 0.18);
}

.moo-nav-submenu-col{
	display: flex;
	flex-direction: column;
	gap: 1.5em;
}

.moo-nav-submenu-rows{
	display: flex;
	flex-direction: column;
	gap: 1em;
}

/* Beat .header-bar a's white pill — these rows are dark ink on a white card. */
.header-bar .moo-nav-submenu-link{
	display: flex;
	align-items: center;
	gap: 1em;
	padding: 0;
	color: var(--green-aztec);
	text-decoration: underline;
}

.header-bar .moo-nav-submenu-link:hover{
	background: none;
	color: var(--green-aztec);
}

.header-bar .moo-nav-submenu-link:hover .moo-social-card-arrow{
	background: var(--grey);
}

.moo-nav-submenu-media{
	position: relative;
	overflow: hidden;
	aspect-ratio: 16 / 11;
	display: flex;
	align-items: center;
	justify-content: center;
}

.moo-nav-submenu-media img{
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

.moo-nav-submenu-media svg{
	position: relative;
	width: 40%;
	height: auto;
}

.sticky{
	position: relative;
	top: 34px;
}

.header_on_scroll .sticky{
	position: sticky;
}


.admin-bar .sticky{
	top: 34px;
}

.header_on_scroll.admin-bar .sticky{
	top: 64px;
}


/* ---- Mobile bar + side drawer -------------------------------------------
   Two bars, one shown at a time. Declared after the breakpoint padding rules
   above so .header-bar-mobile's edge-to-edge padding wins on equal specificity. */

.header-bar-mobile{
	display: none;
	padding-inline: 0;
}

@media (max-width: 991px) {
	.header-bar-desktop{
		display: none;
	}

	.header-bar-mobile{
		display: flex;
	}
}

/* Matches the bar's anchors — same pill, minus the UA button chrome. */
.moo-nav-toggle{
	font: inherit;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
	padding: .4em 1em;
	border-radius: 50px;
	transition: color 0.35s ease;
}

.moo-nav-toggle:hover,
.moo-nav-open .moo-nav-toggle{
	background: #fff;
	color: #000;
}

.moo-nav-backdrop{
	position: fixed;
	inset: 0;
	z-index: 199;
	background: var(--transparent-dark-20, rgba(0, 0, 0, .2));
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	opacity: 0;
	visibility: hidden;
	transition: opacity .4s ease, visibility 0s linear .4s;
}

.moo-nav-drawer{
	position: fixed;
	inset-block: 0;
	inset-inline-end: 0;
	z-index: 200;
	width: min(380px, 88vw);
	display: flex;
	flex-direction: column;
	gap: 2em;
	padding: 1.5em;
	overflow-y: auto;
	background: var(--gradient-dark-green, #0F1F14);
	color: #fff;
	font-family: 'Geist', sans-serif;
	letter-spacing: -0.04em;
	/* Delay visibility until the slide-out finishes, so closed links stay
	   untabbable without juggling aria-hidden. */
	transform: translateX(100%);
	visibility: hidden;
	transition: transform .4s ease, visibility 0s linear .4s;
	border-radius: var(--radius-md);
    margin: var(--padding-xs);
}

.moo-nav-open .moo-nav-backdrop{
	opacity: 1;
	visibility: visible;
	transition: opacity .4s ease;
}

.moo-nav-open .moo-nav-drawer{
	transform: none;
	visibility: visible;
	transition: transform .4s ease;
}

/* Scroll lock while the drawer is open. */
html.moo-nav-open,
html.moo-nav-open body{
	overflow: hidden;
}

.moo-nav-drawer-head{
	display: flex;
	align-items: center;
	justify-content: space-between;
}

.moo-nav-drawer-logo{
	color: var(--text-white) !important;
	font-weight: 500;
}

.moo-nav-close{
	font: inherit;
	font-size: 32px;
	line-height: 1;
	color: #fff;
	background: none;
	border: 0;
	cursor: pointer;
	padding: 0 .3em;
}

.moo-nav-drawer-links{
	display: flex;
	flex-direction: column;
	gap: .25em;
}

/* FAQ/Contact sit apart, pinned to the foot of the panel. */
.moo-nav-drawer-links-end{
	margin-block-start: auto;
	padding-block-start: 1.5em;
	border-top: 1px solid var(--transparent-light-12, rgba(255, 255, 255, .12));
}

.moo-nav-drawer-links a{
	color: #fff;
	font-size: 24px;
	padding: .5em .7em;
	border-radius: 50px;
	transition: background-color .3s ease, color .3s ease;
}

.moo-nav-drawer-links a:hover,
.moo-nav-drawer-links a.current{
	background: #fff;
	color: #000;
}

@media (prefers-reduced-motion: reduce) {
	.moo-nav-backdrop,
	.moo-nav-drawer{
		transition-duration: 0s;
	}
}