/* ==========================================================================
   Mobile Navigation — MBA ACT
   3-state drill-down: Closed → Level 1 → Level 2 → Level 3 (Training only)
   Replaces desktop nav below 769px.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Mobile Nav Closed State — logo on left, search/cart/hamburger on right.
   Per figma/2.0-mobile.pdf: white bg, navy icons. Vertical separator before
   the hamburger marks the boundary between "tools" (search/cart) and "menu".
   -------------------------------------------------------------------------- */
.mobile-nav-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-3) var(--space-4);
  background-color: var(--color-white);
  border-bottom: 1px solid var(--color-neutral-lighter);
}

@media (min-width: 769px) {
  .mobile-nav-bar {
    display: none;
  }
}

.mobile-nav-bar__left,
.mobile-nav-bar__right {
  display: flex;
  align-items: center;
  gap: var(--space-2);
}

.mobile-nav-bar__logo img {
  height: 40px;
  width: auto;
}

.mobile-nav-bar__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--color-navy);
  cursor: pointer;
}

/* Vertical separator before the hamburger trigger — mirrors the Figma rule
   line at right end of header. Only applied when the open-menu button sits
   in the right group (current DOM after header.php reorder). */
.mobile-nav-bar__right [data-mobile-nav-open] {
  margin-left: var(--space-2);
  border-left: 1px solid var(--color-neutral-lighter);
  padding-left: var(--space-3);
}

.mobile-nav-bar__btn:focus-visible {
  outline: 2px solid var(--color-tangerine);
  outline-offset: -2px;
}

/* --------------------------------------------------------------------------
   Mobile Nav Overlay — full-screen
   -------------------------------------------------------------------------- */
.mobile-nav {
  position: fixed;
  inset: 0;
  z-index: 2000;
  background-color: var(--color-navy);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav[aria-hidden="false"] {
  transform: translateX(0);
}

/* Prevent body scroll when nav open */
body.mobile-nav-open {
  overflow: hidden;
}

/* --------------------------------------------------------------------------
   Level 1 — main items
   -------------------------------------------------------------------------- */
.mobile-nav__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-navy-light);
}

.mobile-nav__close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  background: none;
  border: none;
  color: var(--color-white);
  cursor: pointer;
  font-size: 24px;
}

.mobile-nav__top-links {
  display: flex;
  gap: var(--space-4);
  padding: var(--space-4);
  border-bottom: 1px solid var(--color-navy-light);
}

.mobile-nav__top-links a {
  font-size: var(--text-sm);
  color: var(--color-white);
  text-decoration: none;
}

.mobile-nav__top-links a:hover {
  color: var(--color-tangerine);
}

.mobile-nav__list,
.mobile-nav__list .sub-menu {
  list-style: none;
  padding: 0;
  margin: 0;
}

.mobile-nav__item,
.mobile-nav__list .menu-item {
  border-bottom: 1px solid var(--color-navy-light);
}

.mobile-nav__link,
.mobile-nav__list > .menu-item > a,
.mobile-nav__list .sub-menu > .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-4);
  font-size: var(--text-md);
  font-weight: var(--font-weight-semibold);
  color: var(--color-white);
  text-decoration: none;
  background: none;
}

.mobile-nav__link:hover,
.mobile-nav__list > .menu-item > a:hover,
.mobile-nav__list .sub-menu > .menu-item > a:hover {
  background-color: var(--color-navy-dark);
  color: var(--color-white);
}

/* Arrow for items with children — chevron-right pointing to drill-down */
.mobile-nav__link--has-children::after,
.mobile-nav__list .menu-item-has-children > a::after {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-right: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(-45deg);
  flex-shrink: 0;
  margin-left: var(--space-2);
}

/* --------------------------------------------------------------------------
   Level 2/3 — WP-rendered .sub-menu, slides in from right when its parent
   .menu-item-has-children gets the .is-open marker class (added by JS).
   -------------------------------------------------------------------------- */
.mobile-nav__sublevel,
.mobile-nav__list .sub-menu {
  position: fixed;
  inset: 0;
  z-index: 2001;
  background-color: var(--color-navy);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform 0.3s ease;
}

.mobile-nav__sublevel[aria-hidden="false"],
.mobile-nav__list .menu-item.is-open > .sub-menu {
  transform: translateX(0);
}

.mobile-nav__list .sub-menu .sub-menu {
  z-index: 2002; /* L3 above L2 */
}

/* Back button injected by JS as the first <li> of each opened .sub-menu */
.mobile-nav__list .sub-menu .mobile-nav__back-item {
  border-bottom: 1px solid var(--color-navy-light);
}

.mobile-nav__back {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  width: 100%;
  padding: var(--space-4);
  background: none;
  border: none;
  border-bottom: 1px solid var(--color-navy-light);
  color: var(--color-white);
  font-family: var(--font-family);
  font-size: var(--text-base);
  font-weight: var(--font-weight-bold);
  cursor: pointer;
  text-align: left;
}

.mobile-nav__back::before {
  content: "";
  display: inline-block;
  width: 10px;
  height: 10px;
  border-left: 2px solid var(--color-white);
  border-bottom: 2px solid var(--color-white);
  transform: rotate(45deg);
  flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Level 3 — Training sub-sub-menu (same slide pattern)
   -------------------------------------------------------------------------- */
.mobile-nav__sublevel--l3 {
  z-index: 2002;
}

/* --------------------------------------------------------------------------
   Heading dividers (Services & Resources sub-groups on mobile)
   -------------------------------------------------------------------------- */
.mobile-nav__heading {
  padding: var(--space-4) var(--space-4) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--font-weight-bold);
  color: var(--color-white-60);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}