/*
 * Eventbricks: Mobile Navigation Overlay (drawer/popup)
 *
 * Goal:
 * Mobile menu should NOT push content down.
 * It should behave like a popup/drawer with a backdrop and an (X) close.
 */

@media (max-width: 900px) {
  :root {
    --eb-mobile-menu-top: var(--wp-admin--admin-bar--height, 0px);
    --eb-mobile-menu-width: min(86vw, 420px);
  }

  /* Backdrop (inserted by JS when menu is open) */
  .eb-mobile-menu-backdrop {
    position: fixed;
    top: var(--eb-mobile-menu-top);
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 99998;
    background: rgba(0, 0, 0, 0.35);
  }

  /*
   * --- Gutenberg Navigation block (wp-block-navigation) ---
   *
   * Open-state class placement varies depending on WP version/theme:
   * - .wp-block-navigation__responsive-container.is-menu-open
   * - .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container
   * - aria-hidden="false" on the responsive container
   */
  .wp-block-navigation__responsive-container.is-menu-open,
  .wp-block-navigation.is-menu-open .wp-block-navigation__responsive-container,
  .wp-block-navigation__responsive-container[aria-hidden="false"],
  .eb-mobile-nav-overlay {
    position: fixed !important;
    top: var(--eb-mobile-menu-top) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    z-index: 99999 !important;

    width: var(--eb-mobile-menu-width) !important;
    max-width: 420px !important;

    display: block !important;

    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 50px rgba(0, 0, 0, 0.18);

    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    padding: 14px 14px 22px !important;
  }

  /* Keep content readable and ensure room for close button */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-content,
  .wp-block-navigation.is-menu-open
    .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-container-content,
  .wp-block-navigation__responsive-container[aria-hidden="false"]
    .wp-block-navigation__responsive-container-content {
    padding: 44px 0 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  /* WP's close button (when present) */
  .wp-block-navigation__responsive-container.is-menu-open
    .wp-block-navigation__responsive-container-close,
  .wp-block-navigation.is-menu-open
    .wp-block-navigation__responsive-container
    .wp-block-navigation__responsive-container-close,
  .wp-block-navigation__responsive-container[aria-hidden="false"]
    .wp-block-navigation__responsive-container-close {
    position: absolute !important;
    top: 8px !important;
    right: 8px !important;
    z-index: 100000 !important;

    width: 44px !important;
    height: 44px !important;
    border-radius: 999px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 1px solid rgba(0, 0, 0, 0.08) !important;
    background: rgba(255, 255, 255, 0.92) !important;

    color: #111 !important;
  }

  /* Ensure WP close icon is visible (some themes force white icons) */
  .wp-block-navigation__responsive-container-close svg,
  .wp-block-navigation__responsive-container-close svg * {
    fill: #111 !important;
    stroke: #111 !important;
  }

  /*
   * --- Classic themes fallback ---
   *
   * Many classic themes toggle a "toggled" / "is-open" class on the main nav.
   * We make that nav a drawer panel.
   */
  #site-navigation.toggled,
  nav.main-navigation.toggled,
  .main-navigation.toggled,
  #site-navigation.is-open,
  nav.main-navigation.is-open,
  .main-navigation.is-open {
    position: fixed !important;
    top: var(--eb-mobile-menu-top) !important;
    right: 0 !important;
    left: auto !important;
    bottom: 0 !important;
    z-index: 99999 !important;

    width: var(--eb-mobile-menu-width) !important;
    max-width: 420px !important;

    background: rgba(255, 255, 255, 0.98) !important;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);

    border-radius: 18px 0 0 18px;
    box-shadow: -24px 0 50px rgba(0, 0, 0, 0.18);

    overflow: auto !important;
    -webkit-overflow-scrolling: touch;

    padding: 44px 14px 22px !important;
  }

  /* Injected close button (only used when theme has none) */
  .eb-mobile-menu-close {
    position: absolute;
    top: 8px;
    right: 8px;
    z-index: 100000;

    width: 44px;
    height: 44px;
    border-radius: 999px;

    display: inline-flex;
    align-items: center;
    justify-content: center;

    border: 1px solid rgba(0, 0, 0, 0.08);
    background: rgba(255, 255, 255, 0.92);

    color: #111;
    font-size: 28px;
    line-height: 1;

    cursor: pointer;
  }

  .eb-mobile-menu-close:focus {
    outline: 2px solid rgba(0, 0, 0, 0.35);
    outline-offset: 2px;
  }

  /* Prevent background scroll */
  body.has-modal-open,
  body.eb-mobile-menu-open {
    overflow: hidden !important;
  }
}