/**
 * Knowledge Unlatched — Navigation styles (v4).
 * Scoped to .ku-nav / .ku-mobile-nav. No visual redesign — only nav CSS.
 *
 * v4 changes: dropdowns now open on native :hover / :focus-within as a
 * JS-free baseline; the theme JS still adds .is-open for delayed close
 * and touch/keyboard, but menus work even if JS is late or blocked by a
 * page cache.
 */

.ku-nav__menu,
.ku-submenu { list-style: none; margin: 0; padding: 0; }

/* =========================================================
   DESKTOP (>= 1024px)
   ========================================================= */
@media (min-width: 1024px) {
  .ku-nav__menu--desktop {
    display: flex;
    align-items: center;
    gap: 1.25rem;
  }
  .ku-nav__menu--desktop > .ku-nav__item { position: relative; }

  .ku-nav__menu--desktop .ku-nav__link {
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
    padding: 0.25rem 0;
    white-space: nowrap;
  }
  .ku-nav__menu--desktop .ku-nav__link--current,
  .ku-nav__menu--desktop .ku-is-current > .ku-nav__link,
  .ku-nav__menu--desktop .ku-is-current-parent > .ku-nav__link { color: var(--navy); }

  .ku-nav__chevron { transition: transform 0.2s ease; }
  .ku-nav__menu--desktop .ku-has-children:hover > .ku-nav__link .ku-nav__chevron,
  .ku-nav__menu--desktop .ku-has-children:focus-within > .ku-nav__link .ku-nav__chevron,
  .ku-nav__menu--desktop .ku-nav__item.is-open > .ku-nav__link .ku-nav__chevron { transform: rotate(180deg); }

  .ku-nav__menu--desktop .ku-submenu-toggle { display: none; }

  /* Root-level dropdown */
  .ku-nav__menu--desktop .ku-submenu {
    position: absolute;
    top: 100%;
    left: 0;
    min-width: 14rem;
    background: #ffffff;
    border: 1px solid rgb(228 228 231);
    border-radius: 0.5rem;
    box-shadow: 0 12px 32px -12px rgba(15, 23, 42, 0.18), 0 4px 12px -4px rgba(15, 23, 42, 0.08);
    padding: 0.5rem;
    margin-top: 0.5rem;
    opacity: 0;
    visibility: hidden;
    transform: translateY(-4px);
    transition: opacity 0.18s ease, transform 0.18s ease, visibility 0.18s;
    z-index: 60;
    pointer-events: none;
  }

  /* Bridge the 0.5rem margin gap so hover doesn't drop when moving to submenu */
  .ku-nav__menu--desktop .ku-has-children::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 0.75rem;
    pointer-events: none;
  }
  .ku-nav__menu--desktop .ku-has-children:hover::after,
  .ku-nav__menu--desktop .ku-has-children:focus-within::after { pointer-events: auto; }

  /* CSS-only reveal (works without JS) */
  .ku-nav__menu--desktop .ku-has-children:hover > .ku-submenu,
  .ku-nav__menu--desktop .ku-has-children:focus-within > .ku-submenu,
  .ku-nav__menu--desktop .ku-nav__item.is-open > .ku-submenu {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
  }

  /* Nested submenus flyout to the right */
  .ku-nav__menu--desktop .ku-submenu .ku-submenu {
    top: -0.5rem;
    left: 100%;
    margin-top: 0;
    margin-left: 0.25rem;
  }

  .ku-nav__menu--desktop .ku-nav__link--sub {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.75rem;
    padding: 0.5rem 0.75rem;
    font-size: 0.875rem;
    font-weight: 500;
    color: rgb(63 63 70);
    border-radius: 0.375rem;
    transition: background-color 0.15s ease, color 0.15s ease;
    white-space: nowrap;
  }
  .ku-nav__menu--desktop .ku-nav__link--sub:hover,
  .ku-nav__menu--desktop .ku-nav__link--sub:focus-visible {
    background: color-mix(in srgb, var(--aqua) 8%, transparent);
    color: var(--navy);
  }
  .ku-nav__menu--desktop .ku-nav__link--sub.ku-nav__link--current {
    color: var(--aqua);
    background: color-mix(in srgb, var(--aqua) 8%, transparent);
  }

  .ku-nav .ku-nav__link:focus-visible {
    outline: 2px solid var(--aqua);
    outline-offset: 2px;
    border-radius: 0.25rem;
  }
}

/* =========================================================
   MOBILE (< 1024px)
   ========================================================= */
.ku-mobile-nav {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
}
.ku-mobile-nav.is-open {
  max-height: calc(100dvh - 5rem);
  overflow-y: auto;
}
.ku-mobile-nav[hidden] { display: none; }
.ku-mobile-nav.is-open[hidden] { display: block; }

.ku-nav__icon--close { display: none; }
[data-ku-nav-toggle][aria-expanded="true"] .ku-nav__icon--open  { display: none; }
[data-ku-nav-toggle][aria-expanded="true"] .ku-nav__icon--close { display: inline-flex; }

.ku-nav__menu--mobile { padding: 0.5rem 0; }
.ku-nav__menu--mobile .ku-nav__item { position: relative; border-bottom: 1px solid rgb(244 244 245); }
.ku-nav__menu--mobile .ku-nav__item:last-child { border-bottom: 0; }

.ku-nav__menu--mobile .ku-nav__link {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  font-weight: 500;
  color: rgb(63 63 70);
}
.ku-nav__menu--mobile .ku-nav__link:hover,
.ku-nav__menu--mobile .ku-nav__link:focus-visible { color: var(--navy); }
.ku-nav__menu--mobile .ku-nav__link--current { color: var(--aqua); }
.ku-nav__menu--mobile .ku-nav__chevron { display: none; }

.ku-nav__menu--mobile .ku-submenu-toggle {
  position: absolute;
  top: 0.25rem;
  right: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  height: 2.75rem;
  background: transparent;
  border: 0;
  color: rgb(82 82 91);
  cursor: pointer;
  border-radius: 0.375rem;
  z-index: 2;
}
.ku-nav__menu--mobile .ku-submenu-toggle svg { transition: transform 0.25s ease; }
.ku-nav__menu--mobile .ku-submenu-toggle[aria-expanded="true"] svg { transform: rotate(180deg); }

.ku-nav__menu--mobile .ku-submenu {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  background: rgb(250 250 250);
}
.ku-nav__menu--mobile .ku-nav__item.is-open > .ku-submenu { max-height: 60rem; }

.ku-nav__menu--mobile .ku-submenu .ku-nav__link { padding-left: 2.75rem; font-size: 0.875rem; color: rgb(82 82 91); }
.ku-nav__menu--mobile .ku-submenu .ku-submenu .ku-nav__link { padding-left: 4rem; }
.ku-nav__menu--mobile .ku-submenu .ku-submenu .ku-submenu .ku-nav__link { padding-left: 5.25rem; }