/* Fullscreen backdrop */
.who-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.8);
  color: #fff;
  z-index: 9999;
  display: none;             /* hidden by default */
}

/* Layout */
.who-wrap {
  max-width: 1200px;
  margin: 80px auto;
  padding: 0 24px;
  display: grid;
  grid-template-columns: 38% 1fr;
  gap: 36px;
}

/* Close button */
.who-close {
  position: absolute;
  top: 16px;
  left: 16px;
  font-size: 36px;
  line-height: 1;
  background: transparent;
  color: #fff;
  border: 0;
  cursor: pointer;
}

/* Left tree (top-level list) */
.who-tree,
.who-tree ul {
  list-style: none;
  margin: 0;
  padding: 0;
}
.who-left .menu-item { margin: 4px 0; }

.who-left .menu-item > a {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  text-decoration: none;
  color: #fff;
  padding: 12px 14px;
  border-radius: 8px;
  background: rgba(255,255,255,.06);
  transition: background .15s ease, transform .15s ease;
}
.who-left .menu-item > a:hover,
.who-left .menu-item > a:focus {
  background: rgba(255,255,255,.12);
  outline: none;
}

/* Chevron for items that have children */
.who-left .menu-item-has-children > a::after {
  content: "›";
  font-size: 20px;
  opacity: .85;
}

/* Hide all nested lists in the left pane (we use right pane to show them) */
.who-left .sub-menu { display: none; }

/* Right pane where children render */
.who-right { min-height: 260px; }
.who-right-placeholder { opacity: .8; }

.who-right h3 {
  margin: 0 0 12px;
  font-size: 22px;
  font-weight: 700;
}
.who-right ul {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px 18px;
}
.who-right li a {
  color: #fff;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 6px;
  background: rgba(255,255,255,.06);
}
.who-right li a:hover { background: rgba(255,255,255,.12); }

/* Open state */
.who-overlay.is-open { display: block; }

/* Prevent body scroll when open */
body.who-no-scroll { overflow: hidden; }

/* Mobile: single column + accordion behavior */
@media (max-width: 991px) {
  .who-wrap { grid-template-columns: 1fr; margin: 60px auto; }
  .who-right { display: none; } /* we’ll use expand-in-place on mobile */
  .who-left .menu-item-has-children > .sub-menu {
    display: none;
    margin-top: 6px;
    padding-left: 10px;
  }
  .who-left .menu-item.is-open > .sub-menu { display: block; }
  .who-left .menu-item-has-children > a::after { content: "▾"; }
}