body .site-header .main-header-bar,
body .site-header .ast-mobile-header-wrap {
position: fixed !important;
top: 0 !important;
left: 0; right: 0;
z-index: 100000 !important; /* header above the menu panel so the X stays visible */
}

.site-header .main-header-bar.scrolled-header {
background-color: #00421f !important;
box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
padding: 14px 0 !important;
}

@media (max-width: 921px) {
/* Mobile: transparent at top; green after scroll (body gets .mobile-scrolled) */
body.ast-header-break-point .main-header-bar,
body.ast-header-break-point .ast-mobile-header-wrap {
background-color: transparent !important;
box-shadow: none !important;
transition: background-color .3s, box-shadow .3s, padding .3s;
}
body.ast-header-break-point.mobile-scrolled .main-header-bar,
body.ast-header-break-point.mobile-scrolled .ast-mobile-header-wrap {
background-color: #00421f !important;
box-shadow: 0 2px 12px rgba(0,0,0,.2) !important;
padding: 14px 0 !important;
}

/* Keep header toggle/brand visible on green */
.ast-header-break-point .main-header-menu-toggle,
.ast-header-break-point .ast-site-identity,
.ast-header-break-point .ast-site-identity a,
.ast-header-break-point .ast-site-title,
.ast-header-break-point .ast-mobile-svg {
color: #ffffff !important;
fill: #ffffff !important;
}

/* Inline mobile nav (Astra sets .ast-main-header-nav-open on body) /
body.ast-header-break-point.ast-main-header-nav-open { overflow: hidden; }
body.ast-header-break-point.ast-main-header-nav-open .main-header-bar-navigation {
position: fixed !important;
top: calc(var(--admin-bar-h, 0px) + var(--header-h, 64px)) !important; / start below sticky header /
left: 0; right: 0;
width: 100%;
z-index: 99980 !important; / below header so the X is visible /
background: #00421f !important;
}
body.ast-header-break-point.ast-main-header-nav-open .main-header-menu {
display: block !important;
max-height: calc(100vh - (var(--admin-bar-h, 0px) + var(--header-h, 64px))) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}
/ Ensure the header’s toggle (hamburger / X) stays clickable while menu is open */
body.ast-header-break-point.ast-main-header-nav-open .main-header-menu-toggle {
position: relative;
z-index: 100001 !important;
}

/* Popup drawer variant (if your site uses Astra’s drawer) /
.ast-mobile-popup-overlay {
position: fixed !important;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99960 !important; / below header /
}
.ast-mobile-popup-drawer {
position: fixed !important;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99970 !important; / below header /
}
.ast-mobile-popup-inner {
position: fixed !important;
top: calc(var(--admin-bar-h, 0px) + var(--header-h, 64px)) !important; / under header /
bottom: 0; left: 0; right: 0;
z-index: 99975 !important; / below header */
background: #00421f !important;
max-height: calc(100vh - (var(--admin-bar-h, 0px) + var(--header-h, 64px))) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
}

/* After scroll, keep mobile logo/menu away from screen edges */
body.ast-header-break-point.mobile-scrolled .main-header-bar > .site-primary-header-wrap.ast-container,
body.ast-header-break-point.mobile-scrolled .ast-mobile-header-wrap > .site-primary-header-wrap.ast-container,
body.ast-header-break-point.mobile-scrolled .main-header-bar .ast-builder-grid-row-container,
body.ast-header-break-point.mobile-scrolled .main-header-bar .ast-builder-grid-row {
padding-left: 20px !important;
padding-right: 20px !important;
box-sizing: border-box;
}
}

/* Don’t let wrappers clip the fixed header */
body .site-header,
body .site-primary-header-wrap,
body .ast-primary-header-bar { overflow: visible !important; }

/* Admin bar offsets when logged in on front-end */
.admin-bar body .site-header .main-header-bar,
.admin-bar body .site-header .ast-mobile-header-wrap { top: 32px !important; }
@media (max-width: 782px) {
.admin-bar body .site-header .main-header-bar,
.admin-bar body .site-header .ast-mobile-header-wrap { top: 46px !important; }
}



@media (max-width: 921px) {
/* stop page scroll when menu is open */
body.ast-header-break-point.ast-main-header-nav-open {
overflow: hidden;
}

/* make header transparent while menu is open (so it doesn't cover the panel) */
body.ast-header-break-point.ast-main-header-nav-open .main-header-bar,
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap {
background: transparent !important;
box-shadow: none !important;
}

/* hide the brand/logo so it doesn't sit on top of the submenu */
body.ast-header-break-point.ast-main-header-nav-open .ast-site-identity,
body.ast-header-break-point.ast-main-header-nav-open .site-branding {
display: none !important;
}

/* place the inline mobile menu panel BELOW the sticky header, full height, scrollable /
body.ast-header-break-point.ast-main-header-nav-open .main-header-bar-navigation {
position: fixed !important;
top: var(--header-h, 64px) !important;
left: 0; right: 0; bottom: 0;
width: 100%;
z-index: 99990 !important; / below the header so the X can sit above */
background: #00421f !important;
}
body.ast-header-break-point.ast-main-header-nav-open .main-header-menu {
display: block !important;
max-height: calc(100vh - var(--header-h, 64px)) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
margin: 0;
padding: 16px 20px 32px;
}

/* keep the hamburger/X visible and clickable above the panel /
body.ast-header-break-point.ast-main-header-nav-open .main-header-menu-toggle,
body.ast-header-break-point.ast-main-header-nav-open .ast-menu-toggle,
body.ast-header-break-point.ast-main-header-nav-open .menu-toggle-main {
position: fixed !important;
top: 12px; right: 16px;
z-index: 100001 !important; / above the panel */
display: inline-flex !important;
pointer-events: auto;
}

/* prevent the rest of the fixed header from blocking taps over the panel */
body.ast-header-break-point.ast-main-header-nav-open .main-header-bar,
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-header-wrap {
pointer-events: none;
}
body.ast-header-break-point.ast-main-header-nav-open .main-header-menu-toggle,
body.ast-header-break-point.ast-main-header-nav-open .ast-menu-toggle,
body.ast-header-break-point.ast-main-header-nav-open .menu-toggle-main {
pointer-events: auto;
}
}

/* popup drawer variant (safe to keep even if not used) */
@media (max-width: 921px) {
.ast-mobile-popup-overlay {
position: fixed !important;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99980 !important;
}
.ast-mobile-popup-drawer {
position: fixed !important;
top: 0; bottom: 0; left: 0; right: 0;
z-index: 99990 !important;
}
.ast-mobile-popup-inner {
position: fixed !important;
top: var(--header-h, 64px) !important;
bottom: 0; left: 0; right: 0;
z-index: 99995 !important;
background: #00421f !important;
max-height: calc(100vh - var(--header-h, 64px)) !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
padding: 16px 20px 32px;
}
.ast-mobile-popup-inner .ast-mobile-popup-close {
position: sticky !important;
top: 8px !important;
right: 12px !important;
z-index: 100001 !important;
display: inline-flex !important;
}
}