/**
 * VDI Navs & Menu - Mobile Sliding Viewport Navigation
 *
 * Sliding viewport style for mobile navigation where
 * users can navigate through menu levels by sliding between views
 * Include this file for sliding-style mobile navigation
 */

/* Mobile sliding viewport navigation */
@media screen and (max-width: 62.5rem) {
  .nav-main {
    .nav-main__toggle {
      /* display */
      @apply text-white p-3;
    }

    .menu-vdi--sliding {
      @apply relative overflow-hidden right-0 py-8 flex flex-col;
      @apply absolute hidden; /* Hidden by default */
      z-index: 100;
      top: var(--hgtHeader);
      min-height: calc(100vh - var(--hgtHeader));
      width: 95%;
      background: var(--color-cwc-blue-02);
      color: var(--color-white);

      /* Suppress default <ul> bullets and indent inherited from base typography.
         The <ul> element IS .menu-vdi--sliding, so we use & to target the parent selector. */
      &,
      ul.menu-vdi {
        list-style: none;
        padding-left: 0;
        margin: 0;
      }

      .menu-vdi__item {
        list-style: none;
      }

      /* Container for all navigation levels */
      .menu-vdi__viewport {
        @apply flex transition-transform duration-300 ease-in-out;
        width: 100%;
      }

      /* Each navigation level */
      .menu-vdi__level {
        @apply w-full flex-shrink-0 flex-col;
        min-width: 100%;
      }

      /* Back button for secondary levels */
      .menu-vdi__back {
        @apply flex items-center gap-2 p-4 border-b border-gray-200 font-bold text-white hover:bg-white/10 focus-visible:bg-white/10 cursor-pointer;

        svg {
          @apply w-5 h-5;
        }
      }

      /* Level indicator for context */
      .menu-vdi__level-title {
        @apply p-4 border-b border-white/20 font-bold text-lg text-center text-white bg-white/10;
      }

      /* Top-level menu items */
      .menu-vdi__level--main > .menu-vdi__level-items > .menu-vdi__item {
        list-style: none;

        a,
        button {
          /* text */
          color: var(--color-white) !important;
          font-weight: 700;
          font-size: 1.375rem;
          line-height: 1.375;
          text-decoration: none;
          /* spacing & display */
          display: flex;
          align-items: center;
          width: 100%;
          padding: 1.25rem 1.5rem;
          /* interaction */
          background: transparent;
        }

        a:hover,
        a:focus-visible,
        button:hover,
        button:focus-visible {
          background: rgba(255, 255, 255, 0.1);
        }

        a {
          justify-content: flex-start;
        }

        button {
          justify-content: space-between;
        }

        /* Parent items keep their orange chevron visible */
        button svg {
          fill: none;
          stroke: var(--color-secondary);
          stroke-width: 2.5;
          width: 0.875rem;
          height: 0.875rem;
          transition: transform 0.2s ease;
        }

        /* Rotate the chevron when the parent's submenu is expanded */
        button[aria-expanded="true"] svg {
          transform: rotate(180deg);
        }
      }

      /* Child items: orange bottom border only, no chevron, no rounded corners */
      .menu-vdi__submenu {
        display: flex;
        flex-direction: column;
        gap: 0;
        padding: 0;

        .menu-vdi__item--child {
          font-weight: 700;
          line-height: 1.375;
          border-bottom: 2px solid var(--color-secondary);
          border-radius: 0;
          background: transparent;
          list-style: none;

          span {
            display: block;
            width: 100%;
            color: var(--color-white);
            font-size: 1rem;
            padding: 0.75rem 1.5rem;
          }

          a {
            display: block;
            width: 100%;
            color: var(--color-white) !important;
            font-size: 1rem;
            font-weight: 700;
            padding: 0.75rem 1.5rem;
            text-decoration: none;
          }

          &:hover,
          &:focus-visible {
            background: rgba(255, 255, 255, 0.1);
          }
        }
      }

      /* Hide traditional submenus in sliding mode as their parent items become navigation buttons */
      .menu-vdi__toggle {
        /* Override the accordion toggle behavior */
        &[aria-expanded="true"] {
          svg {
            @apply rotate-0; /* Don't rotate arrow */
          }

          +.menu-vdi__submenu {
            @apply hidden; /* Don't show dropdown */
          }
        }
      }

      /* Ensure menu items in sliding viewport have proper styling */
      .menu-vdi__level-items {
        display: flex;
        flex-direction: column;
        gap: 0;
        list-style: none;
        padding: 0;
        margin: 0;
      }
    }

    /* Footer area: Contact button + social icons below the menu. The footer is a
       sibling of .menu-vdi--sliding inside .nav-main, so it cannot be a descendant
       selector of the menu. */
    .menu-vdi__footer {
      display: none;
    }

    .nav-main__toggle[aria-expanded="true"] ~ .menu-vdi__footer {
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 1rem;
      padding: 2rem 1.5rem 1.5rem;
      inset: auto 2.5% 0;
      position: fixed;
      max-width: 95%;
    }

    .menu-vdi__contact-button {
      display: inline-flex;
      align-items: center;
      justify-content: center;
      font-weight: 700;
      text-align: center;
      text-decoration: none;
      background: var(--color-secondary);
      border-radius: 1.25rem 0.25rem;
      color: var(--color-white);
      padding: 0.75rem 2.5rem;
      width: 100%;
      max-width: 20rem;
    }

    .menu-vdi__contact-button:hover,
    .menu-vdi__contact-button:focus-visible {
      filter: brightness(1.1);
    }

    .menu-vdi__social {
      display: flex;
      align-items: center;
      justify-content: center;
      gap: 1rem;
    }

    .menu-vdi__social-icon {
      align-items: center !important;
      display: inline-flex !important;
      height: 2.75rem !important;
      justify-content: center !important;
      padding: 0 !important;
      width: 2.75rem !important;
    }

    .menu-vdi__social-icon svg {
      fill: var(--color-white);
      height: 1.5rem;
      width: 1.5rem;
    }

    .menu-vdi__social-icon:hover,
    .menu-vdi__social-icon:focus-visible {
      opacity: 0.8;
    }

    /* Show sliding menu when toggle button is expanded and menu has sliding class */
    .nav-main__toggle[aria-expanded="true"] + .menu-vdi--sliding {
      @apply !block; /* Use !important to override hidden */
    }
  }
}

/* The mobile menu footer (Contact button + social icons) only renders inside
   the open mobile menu. Hide it on desktop where it would otherwise leak into
   the DOM and trigger accessibility warnings. */
@media screen and (min-width: 62.5rem) {
  .menu-vdi__footer {
    display: none !important;
  }
}