/* v2.6.658 — Real Mobile Nav Menu
   Replaces clipped/floating mobile header links with a stable drawer/menu below the header line. */
@media (max-width: 782px) {
  body:not(.wp-admin) {
    --picklehub-mobile-nav-top: calc(env(safe-area-inset-top, 0px) + 94px);
    --picklehub-mobile-nav-side: max(16px, env(safe-area-inset-left, 0px));
    --picklehub-mobile-nav-right: max(16px, env(safe-area-inset-right, 0px));
  }

  /* Keep the header controls in their own row; menu items must never sit in that row. */
  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation__responsive-container.has-modal-open,
    .main-navigation.toggled,
    .primary-navigation-open .primary-navigation,
    .mobile-menu-wrapper.is-open,
    .mobile-menu-wrapper.open,
    .mobile-nav.open,
    .drawer-menu.is-open,
    .offcanvas.show,
    .off-canvas.is-open,
    .ast-mobile-popup-drawer.active,
    .wd-side-hidden.wd-opened
  ) {
    position: fixed !important;
    inset: 0 !important;
    width: 100vw !important;
    max-width: 100vw !important;
    height: 100vh !important;
    min-height: 100vh !important;
    margin: 0 !important;
    padding: var(--picklehub-mobile-nav-top) var(--picklehub-mobile-nav-right) 24px var(--picklehub-mobile-nav-side) !important;
    background: linear-gradient(180deg, rgba(241, 255, 254, 0.98), rgba(248, 252, 255, 0.98)) !important;
    box-sizing: border-box !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
    -webkit-overflow-scrolling: touch !important;
    transform: none !important;
    z-index: 999999 !important;
  }

  @supports (height: 100dvh) {
    body:not(.wp-admin) :where(
      .wp-block-navigation__responsive-container.is-menu-open,
      .wp-block-navigation__responsive-container.has-modal-open,
      .main-navigation.toggled,
      .primary-navigation-open .primary-navigation,
      .mobile-menu-wrapper.is-open,
      .mobile-menu-wrapper.open,
      .mobile-nav.open,
      .drawer-menu.is-open,
      .offcanvas.show,
      .off-canvas.is-open,
      .ast-mobile-popup-drawer.active,
      .wd-side-hidden.wd-opened
    ) {
      height: 100dvh !important;
      min-height: 100dvh !important;
      max-height: 100dvh !important;
    }
  }

  /* Header divider line, matching the screenshot line, with menu content below it. */
  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open,
    .wp-block-navigation__responsive-container.has-modal-open,
    .main-navigation.toggled,
    .primary-navigation-open .primary-navigation,
    .mobile-menu-wrapper.is-open,
    .mobile-menu-wrapper.open,
    .mobile-nav.open,
    .drawer-menu.is-open,
    .offcanvas.show,
    .off-canvas.is-open,
    .ast-mobile-popup-drawer.active,
    .wd-side-hidden.wd-opened
  )::before {
    content: "" !important;
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 78px) !important;
    left: 0 !important;
    right: 0 !important;
    height: 1px !important;
    background: rgba(13, 33, 48, 0.72) !important;
    z-index: 1000000 !important;
    pointer-events: none !important;
  }

  /* Center hamburger / fixed close remain above the divider. */
  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container-open,
    .menu-toggle,
    .mobile-menu-toggle,
    .navbar-toggle,
    .hamburger,
    .ast-mobile-menu-trigger-minimal,
    .wd-header-mobile-nav
  ) {
    position: relative !important;
    z-index: 1000002 !important;
    inline-size: 44px !important;
    block-size: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
  }

  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container-close,
    .mobile-menu-close,
    .drawer-close,
    .close-menu,
    .ast-mobile-popup-drawer .menu-toggle-close,
    .wd-close-side
  ) {
    position: fixed !important;
    top: calc(env(safe-area-inset-top, 0px) + 22px) !important;
    right: max(18px, env(safe-area-inset-right, 0px)) !important;
    inline-size: 44px !important;
    block-size: 44px !important;
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    margin: 0 !important;
    padding: 8px !important;
    z-index: 1000002 !important;
    border-radius: 999px !important;
    box-sizing: border-box !important;
  }

  /* The actual mobile menu card. */
  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content,
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-container-content,
    .main-navigation.toggled .menu,
    .main-navigation.toggled > div,
    .primary-navigation-open .primary-navigation > div,
    .mobile-menu-wrapper.is-open > *,
    .mobile-menu-wrapper.open > *,
    .mobile-nav.open > *,
    .drawer-menu.is-open > *,
    .offcanvas.show > *,
    .off-canvas.is-open > *,
    .ast-mobile-popup-drawer.active .ast-mobile-popup-inner,
    .wd-side-hidden.wd-opened .wd-side-hidden-content
  ) {
    position: static !important;
    width: 100% !important;
    max-width: 420px !important;
    min-width: 0 !important;
    margin: 0 auto !important;
    padding: 14px !important;
    border: 1px solid rgba(8, 82, 78, 0.12) !important;
    border-radius: 24px !important;
    background: rgba(255, 255, 255, 0.92) !important;
    box-shadow: 0 18px 45px rgba(8, 31, 44, 0.13) !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__container,
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-page-list,
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-page-list,
    .main-navigation.toggled ul,
    .main-navigation.toggled ul.menu,
    .primary-navigation-open .primary-menu-container > ul,
    .mobile-menu-wrapper.is-open ul,
    .mobile-menu-wrapper.open ul,
    .mobile-nav.open ul,
    .drawer-menu.is-open ul,
    .offcanvas.show ul,
    .off-canvas.is-open ul,
    .ast-mobile-popup-drawer.active ul,
    .wd-side-hidden.wd-opened ul
  ) {
    position: static !important;
    display: flex !important;
    flex-direction: column !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    gap: 10px !important;
    list-style: none !important;
    box-sizing: border-box !important;
    overflow: visible !important;
    transform: none !important;
  }

  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item,
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item,
    .main-navigation.toggled li,
    .primary-navigation-open li,
    .mobile-menu-wrapper.is-open li,
    .mobile-menu-wrapper.open li,
    .mobile-nav.open li,
    .drawer-menu.is-open li,
    .offcanvas.show li,
    .off-canvas.is-open li,
    .ast-mobile-popup-drawer.active li,
    .wd-side-hidden.wd-opened li
  ) {
    display: block !important;
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation-item__content,
    .wp-block-navigation__responsive-container.is-menu-open a,
    .wp-block-navigation__responsive-container.has-modal-open a,
    .main-navigation.toggled a,
    .primary-navigation-open a,
    .mobile-menu-wrapper.is-open a,
    .mobile-menu-wrapper.open a,
    .mobile-nav.open a,
    .drawer-menu.is-open a,
    .offcanvas.show a,
    .off-canvas.is-open a,
    .ast-mobile-popup-drawer.active a,
    .wd-side-hidden.wd-opened a
  ) {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 100% !important;
    max-width: 100% !important;
    min-height: 48px !important;
    margin: 0 !important;
    padding: 13px 16px !important;
    border-radius: 16px !important;
    background: linear-gradient(180deg, rgba(219, 252, 247, 0.95), rgba(235, 247, 243, 0.95)) !important;
    color: #0f2233 !important;
    font-size: 15px !important;
    font-weight: 800 !important;
    line-height: 1.15 !important;
    text-align: center !important;
    text-decoration: none !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    box-sizing: border-box !important;
  }

  body:not(.wp-admin) :where(
    .wp-block-navigation__responsive-container.is-menu-open a:hover,
    .wp-block-navigation__responsive-container.has-modal-open a:hover,
    .main-navigation.toggled a:hover,
    .primary-navigation-open a:hover,
    .mobile-menu-wrapper.is-open a:hover,
    .mobile-menu-wrapper.open a:hover,
    .mobile-nav.open a:hover,
    .drawer-menu.is-open a:hover
  ) {
    background: linear-gradient(180deg, rgba(190, 247, 238, 1), rgba(220, 245, 239, 1)) !important;
  }

  /* Hide accidental desktop inline menu rows while mobile modal/drawer is open. */
  body:not(.wp-admin) .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog,
  body:not(.wp-admin) .wp-block-navigation__responsive-container.has-modal-open .wp-block-navigation__responsive-dialog {
    margin-top: 0 !important;
    padding-top: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }
}