@media (max-width: 1238px) {
  /* Only target header navigation, NOT hero content */

  /* Respect the toggle driven via the hidden utility */
  #primary-menu.hidden,
  #primary-menu-landing.hidden {
    display: none !important;
  }

  #primary-menu,
  #primary-menu-landing {
    position: fixed !important;
    inset: 0 !important;
    z-index: 998 !important;
    height: 100vh !important;
    width: 100vw !important;
    background: rgba(0, 0, 0, 0.9) !important;
    display: none !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  #primary-menu.mobile-menu-active,
  #primary-menu-landing.mobile-menu-active {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
    margin: 0 !important;
  }

  #primary-menu.mobile-menu-active > ul,
  #primary-menu-landing.mobile-menu-active > ul {
    display: flex !important;
    flex-direction: column;
    align-items: center;
    gap: 2rem;
    width: 100%;
    padding: 0 2rem;
  }

  /* Show hamburger menu icon */
  #primary-menu-toggle {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Close button visibility follows the hidden class */
  #menu-close-topright.hidden {
    display: none !important;
  }

  #menu-close-topright:not(.hidden) {
    display: flex !important;
  }

  /* Mobile button container visibility */
  .visible-mobile-1238 {
    display: block !important;
  }

  /* Hide desktop-only elements */
  .hidden-mobile {
    display: none !important;
  }

  /* Show mobile-only elements */
  .visible-mobile {
    display: block !important;
  }

  /* Align logo and toggle symmetrically */
  .fixed.top-0.left-0.w-screen.z-\[999\] > div {
    display: flex;
    align-items: center;
    justify-content: space-between;
    width: 100%;
  }

  .fixed.top-0.left-0.w-screen.z-\[999\] .flex.justify-between {
    width: 100%;
  }

  .fixed.top-0.left-0.w-screen.z-\[999\]
    .flex.justify-between
    > .visible-mobile-1238,
  .fixed.top-0.left-0.w-screen.z-\[999\] .flex.justify-between > .lg\:hidden {
    margin-left: auto;
    display: flex !important;
  }

  /* Remove separator pipes on mobile */
  #primary-menu li::after,
  #primary-menu-landing li::after {
    display: none !important;
    content: none !important;
  }
}

@media (min-width: 1239px) {
  /* Desktop view - hide mobile button */
  .visible-mobile-1238 {
    display: none !important;
  }

  /* Show desktop menu with proper styling */
  #primary-menu,
  #primary-menu-landing {
    display: flex !important;
    position: relative !important;
    background: transparent !important;
    inset: auto !important;
    z-index: auto !important;
    height: auto !important;
    width: auto !important;
  }

  #primary-menu ul,
  #primary-menu-landing ul {
    flex-direction: row !important;
  }
}