/* =========================================================
   MOBILE FULLSCREEN MENU (Elementor)
   + STAGGERED ITEM ANIMATION
   + BODY SCROLL LOCK
   ========================================================= */

@media (max-width: 880px){

  /* -----------------------------------------
     Dropdown container: full viewport height
     ----------------------------------------- */
  .elementor-nav-menu--dropdown{
    height: 100vh !important;
    max-height: 100vh !important;

    /* Semi-transparent background */
    background-color: rgba(255, 255, 255, 0.95) !important;

    /* Vertical centering of the menu block */
    display: flex;
    flex-direction: column;
    justify-content: center;

    /* Allow internal scrolling if menu exceeds viewport height */
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -----------------------------------------
     Menu list: reset spacing + visual offset
     ----------------------------------------- */
  .elementor-nav-menu--dropdown .elementor-nav-menu{
    margin: 0;
    padding: 0;
    transform: translateY(-10%);
  }

  /* -----------------------------------------
     Menu items alignment
     ----------------------------------------- */
  .elementor-nav-menu--dropdown .elementor-nav-menu > li{
    text-align: center;
  }

  /* -----------------------------------------
     Menu links typography & color
     ----------------------------------------- */
  .elementor-nav-menu--dropdown a.elementor-item{
    font-size: 1.5rem; /* scalable font size using rem */
    line-height: 1.2;
    color: var(--e-global-color-primary);
    fill: var(--e-global-color-primary);
  }

  /* =====================================================
     STAGGERED ITEM ANIMATION (controlled by JavaScript)
     ===================================================== */

  /* Initial state (before menu opens) */
  .elementor-nav-menu--dropdown .elementor-nav-menu > li{
    opacity: 0;
    transform: translateY(12px);
    will-change: transform, opacity;
  }

  /* Animate items only when menu is open */
  .elementor-nav-menu--dropdown.menu-open .elementor-nav-menu > li{
    animation-name: mobileMenuItemIn;
    animation-duration: 420ms;
    animation-timing-function: ease;
    animation-fill-mode: forwards;
    animation-delay: var(--stagger-delay, 0ms);
  }

  @keyframes mobileMenuItemIn{
    to{
      opacity: 1;
      transform: translateY(0);
    }
  }

  /* Safety rule: ensure items are visible when menu is closed */
  .elementor-nav-menu--dropdown:not(.menu-open) .elementor-nav-menu > li{
    opacity: 1;
    transform: none;
    animation: none;
  }

  /* -----------------------------------------
     Accessibility: reduced motion
     ----------------------------------------- */
  @media (prefers-reduced-motion: reduce){
    .elementor-nav-menu--dropdown .elementor-nav-menu > li{
      animation: none !important;
      opacity: 1 !important;
      transform: none !important;
    }
  }

  /* =====================================================
     Prevent page scrolling when the mobile menu is open
     ===================================================== */
  body.mobile-menu-open{
    overflow: hidden;
  }

}