CWC/styles/navigation/nav-mobile-sliding.css

/**
 * 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 z-10 py-8 flex flex-col;
      @apply absolute hidden; /* Hidden by default */
      top: var(--hgtHeader);
      min-height: calc(100vh - var(--hgtHeader));
      width: 95%;
      background: var(--color-cwc-blue-02);
      color: var(--color-white);

      /* 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 {
        a,
        button {
          /* text */
          @apply font-bold text-22px text-white no-underline leading-snug;
          /* spacing & display */
          @apply flex items-center w-full px-6 py-5;
          /* interaction */
          @apply focus-visible:bg-white/10 hover:bg-white/10;
        }

        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 border, no chevron, indented under their parent */
      .menu-vdi__submenu {
        @apply flex flex-col gap-2 py-2;

        .menu-vdi__item--child {
          @apply font-bold text-white no-underline leading-snug;
          border: 2px solid var(--color-secondary);
          border-radius: 0.5rem;
          margin: 0 1.5rem;

          span {
            @apply block w-full text-16px text-white p-3;
          }

          a {
            @apply block w-full text-16px text-white p-3 no-underline;
          }

          &: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 {
        @apply flex flex-col gap-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;
  }
}