/* Canonical oobSKILLS primary navigation.
   Reviews = understand what is happening.
   Practical AI = decide, test and implement AI deliberately.
   Start Here remains the guided navigator above both paths. */

.desktop-nav {
  gap: clamp(.65rem, 1.15vw, 1.25rem);
}

.desktop-nav .nav-group {
  position: relative;
}

.desktop-nav .nav-group > summary {
  position: relative;
  display: flex;
  align-items: center;
  gap: .35rem;
  padding-block: .4rem;
  cursor: pointer;
  list-style: none;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .055em;
  line-height: 1.4;
  text-transform: uppercase;
}

.desktop-nav .nav-group > summary::-webkit-details-marker,
.mobile-nav .nav-group > summary::-webkit-details-marker {
  display: none;
}

.desktop-nav .nav-group > summary::after {
  content: "▾";
  color: #aebbe7;
  font-size: .72rem;
  transform: translateY(-1px);
}

.desktop-nav .nav-group > summary::before {
  content: "";
  position: absolute;
  right: 0;
  bottom: 0;
  left: 0;
  height: 1px;
  background: currentColor;
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .18s ease;
}

.desktop-nav .nav-group:hover > summary::before,
.desktop-nav .nav-group:focus-within > summary::before,
.desktop-nav .nav-group[open] > summary::before {
  transform: scaleX(1);
}

.nav-group__menu {
  display: none;
}

.desktop-nav .nav-group__menu {
  position: absolute;
  z-index: 1100;
  top: calc(100% + .65rem);
  left: -.9rem;
  width: min(360px, 88vw);
  padding: .55rem;
  background: #000;
  border: 1px solid #444;
  box-shadow: 7px 9px 0 rgba(0,0,0,.16);
}

.desktop-nav .nav-group:hover .nav-group__menu,
.desktop-nav .nav-group[open] .nav-group__menu {
  display: grid;
}

.desktop-nav .nav-group__menu a,
.mobile-nav .nav-group__menu a {
  display: block;
  padding: .68rem .75rem;
  font-size: .78rem;
  font-weight: 700;
  letter-spacing: .01em;
  line-height: 1.3;
  text-transform: none;
}

.desktop-nav .nav-group__menu a:hover,
.desktop-nav .nav-group__menu a:focus-visible {
  background: #fff;
  color: #111;
  outline: none;
}

.desktop-nav .nav-group__menu .nav-menu-all {
  margin-top: .2rem;
  padding-top: .8rem;
  border-top: 1px solid #444;
  color: #bfcaf0;
}

.mobile-nav .nav-group {
  border-top: 1px solid #333;
}

.mobile-nav .nav-group > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: .75rem;
  padding: .8rem 0;
  cursor: pointer;
  list-style: none;
  font-size: .73rem;
  font-weight: 700;
  letter-spacing: .055em;
  text-transform: uppercase;
}

.mobile-nav .nav-group > summary::after {
  content: "+";
  color: #aebbe7;
  font-size: 1rem;
}

.mobile-nav .nav-group[open] > summary::after {
  content: "−";
}

.mobile-nav .nav-group__menu {
  padding: 0 0 .65rem .65rem;
  border-left: 2px solid var(--ballpoint, #244aa5);
}

.mobile-nav .nav-group[open] .nav-group__menu {
  display: block;
}

.mobile-nav .nav-group__menu .nav-menu-all {
  color: #bfcaf0;
}

@media (max-width: 1080px) {
  .desktop-nav {
    gap: .65rem;
  }
  .desktop-nav a,
  .desktop-nav .nav-group > summary {
    font-size: .67rem;
    letter-spacing: .035em;
  }
  .nav-cta {
    padding-inline: .85rem;
  }
}


/* 2026-09 site architecture: Resources menu + VOX product menu. */
.desktop-nav .nav-group--resources .nav-mega {
  position: absolute;
  top: calc(100% + .65rem);
  right: auto;
  left: -.9rem;
  width: min(380px, calc(100vw - 2rem));
  transform: none;
  padding: 0;
  grid-template-columns: 1fr;
  gap: 0;
}

.desktop-nav .nav-group--resources:hover .nav-mega,
.desktop-nav .nav-group--resources[open] .nav-mega {
  display: grid;
}

.nav-mega__col {
  padding: 1rem;
  border-right: 0;
}

.desktop-nav .nav-group--resources .nav-mega__col + .nav-mega__col {
  border-top: 1px solid #444;
}

.desktop-nav .nav-mega__section {
  margin: 0;
  padding-block: 0;
}

.desktop-nav .nav-mega__section + .nav-mega__section {
  margin-top: .7rem;
  padding-top: .7rem;
  border-top: 1px solid #444;
}

.nav-menu-heading {
  margin: 0 0 .45rem;
  color: #bfcaf0;
  font-size: .67rem;
  font-weight: 800;
  letter-spacing: .08em;
  line-height: 1.25;
  text-transform: uppercase;
}

.desktop-nav .nav-mega__all {
  grid-column: 1 / -1;
  margin: 0;
  padding: .85rem 1rem;
  border-top: 1px solid #444;
}

.desktop-nav .nav-group--vox .nav-group__menu--compact {
  right: 0;
  left: auto;
  width: 285px;
}

.desktop-nav .nav-group--practical-ai .nav-group__menu--compact {
  width: 330px;
}

.desktop-nav .nav-group--services .nav-group__menu--compact {
  width: 350px;
}

.desktop-nav .nav-ai-menu .nav-mobile-section {
  padding: .25rem 0 .55rem;
}

.desktop-nav .nav-ai-menu .nav-mobile-section + .nav-mobile-section {
  margin-top: .45rem;
  padding-top: .75rem;
  border-top: 1px solid #444;
}

.mobile-nav .nav-mobile-resources {
  padding: .6rem;
}

.mobile-nav .nav-mobile-section {
  padding: .45rem 0 .65rem;
}

.mobile-nav .nav-mobile-section + .nav-mobile-section {
  border-top: 1px solid var(--line, #d8d8d4);
}

.mobile-nav .nav-mobile-section .nav-menu-heading {
  margin: .35rem .75rem .2rem;
  color: var(--ballpoint, #244aa5);
}

.mobile-nav .nav-mobile-section a {
  border-bottom: 0;
}

@media (max-width: 1180px) and (min-width: 981px) {
  .desktop-nav .nav-group--resources .nav-mega {
    width: min(380px, calc(100vw - 2rem));
  }
}