/* Ensure the mobile off-canvas panel animates vertically (top). */
@media (max-width: 1000px) {
  .navigation-portrait .nav-menus-wrapper {
    transition-property: top !important;
  }

  /* Mobile menu layout: vertical, full-height, evenly stretched items */
  .navigation-portrait .nav-menus-wrapper .nav-menu {
    display: flex !important;
    flex-direction: column;
    height: 100%;
    justify-content: stretch;
    align-items: stretch;
    gap: 0;
    padding-top: 120px;
    padding-bottom: 120px;
  }

  .navigation-portrait .nav-menus-wrapper .nav-menu > li {
    flex: 1 1 auto;
    display: flex;
    float: none;
  }

  .navigation-portrait .nav-menus-wrapper .nav-menu > li > a {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
  }

  /* Mobile triangle: point right instead of down */
  .navigation-portrait .nav-menu > li > a::before {
    top: 50% !important;
    left: 10px !important;
    transform: translateY(-50%) !important;
    border-right: 0 !important;
    border-left: 12px solid var(--primary) !important;
    border-top: 8px solid transparent !important;
    border-bottom: 8px solid transparent !important;
  }

  .navigation-portrait .nav-menu > li:hover > a::before,
  .navigation-portrait .nav-menu > li.active > a::before,
  .navigation-portrait .nav-menu > li.focus > a::before {
    border-left-color: var(--blauw) !important;
  }

  /* Staggered slide-in for items when opening */
  @keyframes navItemInFromLeft {
    from {
      opacity: 0;
      transform: translateX(-24px);
    }
    to {
      opacity: 1;
      transform: translateX(0);
    }
  }

  /* Animate when the plugin applies `.no-scroll` to body (or html) */
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li {
    animation: navItemInFromLeft 420ms ease both !important;
    will-change: transform, opacity;
  }

  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(1) { animation-delay: 60ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(2) { animation-delay: 120ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(3) { animation-delay: 180ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(4) { animation-delay: 240ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(5) { animation-delay: 300ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(6) { animation-delay: 360ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(7) { animation-delay: 420ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(8) { animation-delay: 480ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(9) { animation-delay: 540ms; }
  .no-scroll .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li:nth-child(10) { animation-delay: 600ms; }

  @media (prefers-reduced-motion: reduce) {
    .navigation-portrait .nav-menus-wrapper.nav-menus-wrapper-open .nav-menu > li {
      animation: none;
      opacity: 1;
      transform: none;
    }
  }
}