/* =========================
   Sticky header (yours)
   ========================= */
:root { --header-h: 75px; }          /* ← set this to your real header height */
@media (max-width: 650px) { :root { --header-h: 75px; } }

/* If you’re logged in, account for the WP admin bar (optional) */
body.admin-bar { --adminbar-h: 32px; }
@media (max-width: 782px) {
  body.admin-bar { --adminbar-h: 46px; }
}

/* Astra sticky header */
.main-header-bar {
    position: fixed;
    top: 0;
    left: 0; right: 0;
    width: 100%;
    z-index: 10050;      /* header above everything */
    background: #fff;
}

/* Push content below the bar */
.site-content { padding-top: var(--header-h); }
@media (max-width: 800px) { .site-content { padding-top: var(--header-h); } }
@media (max-width: 650px) { .site-content { padding-top: var(--header-h); } }

/* ================================================
   FORCE MOBILE MENUS TO START BELOW THE STICKY BAR
   and FOLLOW SCROLL (Astra variants + Elementor)
   ================================================ */

/* 1) Astra OFF-CANVAS drawer */
body.ast-header-break-point .ast-mobile-popup-drawer {
  position: fixed !important;
  top: calc(var(--header-h) + var(--adminbar-h, 0px)) !important;
  left: 0; right: 0;
  height: calc(100dvh - var(--header-h) - var(--adminbar-h, 0px));
  height: calc(100vh - var(--header-h) - var(--adminbar-h, 0px)); /* fallback */
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  transform: none !important;
  margin: 0 !important;
  z-index: 10000; /* just under header */
  background: #fff;
  box-sizing: border-box;
}

/* Inner containers full height & visible */
body.ast-header-break-point .ast-mobile-popup-inner,
body.ast-header-break-point .ast-mobile-popup-content {
  min-height: 100%;
  overflow-y: auto;
  transform: none !important;
}

/* Overlay starts below header (so header is clickable) */
body.ast-header-break-point .ast-mobile-popup-overlay {
  position: fixed !important;
  top: calc(var(--header-h) + var(--adminbar-h, 0px)) !important;
  left: 0; right: 0; bottom: 0;
  z-index: 9999;
}

/* 2) Astra CLASSIC DROPDOWN (no off-canvas) */
body.ast-header-break-point .main-header-bar-navigation {
  /* when mobile menu is toggled, pin it to viewport under the header */
  position: fixed !important;
  top: calc(var(--header-h) + var(--adminbar-h, 0px)) !important;
  left: 0; right: 0;
  max-height: calc(100dvh - var(--header-h) - var(--adminbar-h, 0px));
  max-height: calc(100vh - var(--header-h) - var(--adminbar-h, 0px)); /* fallback */
  overflow: auto;
  z-index: 10000;
  background: #fff;
  margin: 0 !important;
  transform: none !important;
  box-sizing: border-box;
}

/* Make sure the UL itself isn’t offset/hidden */
body.ast-header-break-point .main-header-bar-navigation .main-header-menu,
body.ast-header-break-point .ast-builder-menu-mobile .main-header-menu,
body.ast-header-break-point .ast-builder-menu-mobile .main-navigation {
  position: static !important;
  margin-top: 0 !important;
  transform: none !important;
}

/* 3) Elementor nav menu dropdown (if used anywhere) */
body.ast-header-break-point .elementor-nav-menu--dropdown {
  position: fixed !important;
  top: calc(var(--header-h) + var(--adminbar-h, 0px)) !important;
  left: 0 !important; right: 0 !important;
  max-height: calc(100dvh - var(--header-h) - var(--adminbar-h, 0px));
  max-height: calc(100vh - var(--header-h) - var(--adminbar-h, 0px)); /* fallback */
  overflow: auto;
  z-index: 10000 !important;
  background: #fff !important;
  transform: none !important;
}

/* Ensure page/body don’t get unwanted transforms in open state */
html.ast-main-header-nav-open,
body.ast-main-header-nav-open {
  transform: none !important;
}

/* Optional: keep the close row visible at the top of the drawer */
body.ast-header-break-point.ast-main-header-nav-open .ast-mobile-popup-drawer .menu-toggle {
  position: sticky;
  top: 0;
  background: #fff;
  z-index: 1;
}