/* NEXUS_SERVICE_CATALOG_V2
 * Stable desktop hover navigation and themes for the two expanded services.
 */

.service-page.theme-call-center {
  --service-accent: #56c8ff;
  --service-accent-rgb: 86, 200, 255;
}

.service-page.theme-voice {
  --service-accent: #d1a0ff;
  --service-accent-rgb: 209, 160, 255;
}

@media (min-width: 951px) {
  /* This transparent bridge covers the pointer gap between the label and menu. */
  .nav-services::after {
    content: "";
    position: absolute;
    z-index: 119;
    top: 100%;
    left: -24px;
    width: calc(100% + 48px);
    height: 28px;
  }

  .nav-services-menu {
    top: calc(100% + 12px) !important;
    max-height: min(72vh, 650px);
    overflow-y: auto;
  }

  .nav-services:hover .nav-services-menu,
  .nav-services.hover-open .nav-services-menu,
  .nav-services:focus-within .nav-services-menu {
    opacity: 1;
    visibility: visible;
    pointer-events: auto;
    transform: translate(-42%, 0);
  }

  .nav-services:hover .nav-services-toggle::after,
  .nav-services.hover-open .nav-services-toggle::after,
  .nav-services:focus-within .nav-services-toggle::after {
    transform: translateY(0.1rem) rotate(225deg);
  }
}

@media (max-width: 950px) {
  .nav-services.open .nav-services-menu {
    max-height: 820px;
  }
}