/* 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));
  }
}

/* Global header is self-contained on standalone tools and product entry pages. */
.oob-global-header { --ballpoint:#244aa5; position:sticky; top:0; z-index:1000; width:100%; margin:0; padding:0; background:#000; color:#fff; font-family:Arial,Helvetica,sans-serif; line-height:1.4; border-bottom:1px solid #444; }
.oob-global-header *, .oob-global-header *::before, .oob-global-header *::after { box-sizing:border-box; }
.oob-global-header .header-inner { display:flex; align-items:center; justify-content:space-between; gap:1rem; width:min(100% - 40px,1440px); min-height:82px; margin:0 auto; padding:0; }
.oob-global-header .mark { display:inline-flex; flex-shrink:0; margin:0; padding:0; }
.oob-global-header .mark img { display:block; width:64px; height:44px; object-fit:contain; }
.oob-global-header a { color:#fff; text-decoration:none; }
.oob-global-header a:focus-visible, .oob-global-header summary:focus-visible { outline:2px solid #f2c94c; outline-offset:3px; }
.oob-global-header .desktop-nav { display:flex; align-items:center; }
.oob-global-header .desktop-nav > a { font-size:.73rem; font-weight:700; text-transform:uppercase; }
.oob-global-header .nav-cta { display:inline-block; background:#244aa5; border:1px solid #244aa5; padding:1rem; color:#fff; }
.oob-global-header .mobile-nav { display:none; position:relative; margin:0; padding:0; border:0; background:transparent; }
.oob-global-header .mobile-nav > summary { display:grid; align-content:center; gap:5px; width:44px; height:44px; padding:12px; margin:0; cursor:pointer; list-style:none; }
.oob-global-header .mobile-nav > summary::-webkit-details-marker { display:none; }
.oob-global-header .mobile-nav > summary span { display:block; height:2px; width:20px; background:#fff; }
.oob-global-header .mobile-nav > nav { position:absolute; top:calc(100% + 12px); right:0; width:min(88vw,360px); max-height:calc(100dvh - 100px); overflow-y:auto; overscroll-behavior:contain; padding:1rem; margin:0; border:1px solid #444; background:#000; color:#fff; }
.oob-global-header .mobile-nav nav > a { display:block; padding:.8rem 0; font-size:.78rem; font-weight:700; text-transform:uppercase; }
.oob-global-header .mobile-nav .nav-group > summary { width:auto; height:auto; margin:0; color:#fff; background:transparent; }
.oob-global-header .mobile-nav .nav-cta { margin-top:.75rem; padding:1rem; text-align:center; }
body.calendar-preview .oob-global-header { display:none; }
@media (max-width:980px) { .oob-global-header .desktop-nav { display:none; } .oob-global-header .mobile-nav { display:block; } }
@media print { .oob-global-header { display:none; } }

@media (max-width:980px) {
 .oob-global-header .mobile-nav > nav { position:fixed; inset:82px 0 0; width:100%; height:calc(100dvh - 82px); max-height:calc(100dvh - 82px); padding:1.25rem 20px; background:#fff; color:#111; }
 .oob-global-header .mobile-nav nav a, .oob-global-header .mobile-nav .nav-group > summary { color:#111; }
 .oob-global-header .mobile-nav nav > a:not(.nav-cta), .oob-global-header .mobile-nav .nav-group > summary { min-height:54px; padding:.9rem 1rem; border:1px solid #d8d8d4; background:#fff; }
 .oob-global-header .mobile-nav .nav-group > summary { display:flex; align-items:center; justify-content:space-between; }
 .oob-global-header .mobile-nav .nav-group__menu { background:#f7f7f5; }
 .oob-global-header .mobile-nav .nav-menu-all { color:#244aa5; }
 .oob-global-header .mobile-nav nav > .nav-cta { color:#fff; background:#244aa5; }
}

body.calendar-preview > header, body.calendar-preview > footer { display:none!important; }

@media (max-width:980px) { body:has(.oob-global-header .mobile-nav[open]) { overflow:hidden; } }
@media (max-width:760px) { .oob-global-header .header-inner { min-height:72px; } .oob-global-header .mobile-nav > nav { inset:72px 0 0; height:calc(100dvh - 72px); max-height:calc(100dvh - 72px); } }