/* FA staging: restyle WP core nav overlay as right-side drawer (mobile/tablet).
   Staging polyfill opens .is-menu-open; this CSS turns full-screen into sidebar. */
@keyframes fa-drawer-in {
  from { transform: translateX(100%); opacity: .6; }
  to { transform: translateX(0); opacity: 1; }
}

/* Soft: do not hard-lock body scroll when menu open */
html.has-modal-open {
  overflow: auto !important;
}

@media (max-width: 1023px) {
  .wp-block-navigation__responsive-container.is-menu-open {
    display: block !important;
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    max-width: none !important;
    padding: 0 !important;
    background: transparent !important;
    background-color: transparent !important;
    overflow: hidden !important;
    z-index: 100000 !important;
    animation: none !important;
  }
  /* Dim clickable backdrop */
  .wp-block-navigation__responsive-container.is-menu-open::before {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(5, 7, 15, 0.55);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    z-index: 0;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-close {
    position: absolute !important;
    top: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    left: auto !important;
    width: min(80vw, 340px) !important;
    max-width: 340px !important;
    height: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    background: rgba(8, 12, 28, 0.92) !important;
    background-color: rgba(8, 12, 28, 0.92) !important;
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-left: 1px solid rgba(255, 122, 89, 0.3) !important;
    box-shadow:
      -16px 0 48px rgba(0, 0, 0, 0.5),
      inset 1px 0 0 rgba(176, 77, 255, 0.18);
    z-index: 1;
    overflow-y: auto;
    overflow-x: hidden;
    animation: fa-drawer-in 0.32s cubic-bezier(0.22, 0.61, 0.36, 1) both;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-dialog {
    position: relative !important;
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 1.1rem 1rem 2rem !important;
    box-sizing: border-box !important;
    min-height: 100%;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 0.85rem !important;
    right: 0.85rem !important;
    left: auto !important;
    z-index: 3;
    width: 2.75rem;
    height: 2.75rem;
    border-radius: 999px !important;
    border: 1px solid rgba(255, 255, 255, 0.14) !important;
    background: rgba(8, 12, 28, 0.72) !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content {
    padding-top: 3.5rem !important;
    padding-left: 0.35rem !important;
    padding-right: 0.35rem !important;
    align-items: stretch !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__container,
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation__responsive-container-content .wp-block-navigation__container {
    width: 100% !important;
    gap: 0 !important;
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item {
    width: 100% !important;
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
  }
  .wp-block-navigation__responsive-container.is-menu-open .wp-block-navigation-item__content {
    display: block !important;
    padding: 0.85rem 0.65rem !important;
    font-size: 1.05rem !important;
    letter-spacing: 0.03em;
    background-image: linear-gradient(90deg, #ff7a59, #ff3d7f 50%, #b04dff);
    -webkit-background-clip: text;
    background-clip: text;
    -webkit-text-fill-color: transparent;
    color: transparent;
  }
}