/**
 * /chinese-immersion/ desktop Programs submenu compatibility bridge.
 *
 * Purpose:
 * - Restore the same global/Oxygen submenu behavior used by other Program pages.
 * - Only bridge the abnormal initial-load state where Oxygen has not yet inserted
 *   .sub-menu-wrap and the DOM is ul.sub-menu > li > a.
 *
 * Do not tune arbitrary gap/flex/equal-cell spacing here.
 */

@media (min-width: 1009px) {
  /*
   * Restore the global desktop submenu behavior from:
   * wp-content/uploads/oxygen/css/universal.css
   */
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 {
    position: unset;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu {
    width: 100%;
    left: 0;
    position: absolute !important;
    top: 100%;
    background: url('/wp-content/uploads/2021/05/bg_mountains2.jpg');
    background-repeat: no-repeat;
    background-position: center;
    background-size: cover;
    display: block !important;
    visibility: hidden !important;
    opacity: 0 !important;
    overflow: hidden !important;
    transition: opacity 0.5s ease, visibility 0.5s ease !important;
    z-index: 9 !important;
    will-change: opacity, visibility;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10.current-menu-item > ul.sub-menu,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10.current-menu-parent > ul.sub-menu,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10.current-menu-ancestor > ul.sub-menu {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    transition: none !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap {
    display: flex;
    flex-direction: row;
    max-width: 969px;
    margin: 0 auto;
    width: 100%;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li {
    padding-right: 65px;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li:last-child {
    padding-right: 0;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li > a {
    border-bottom: 6px solid transparent !important;
    padding: 12px 0 5px !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li > a:hover,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li.current-menu-item > a {
    border-color: #fff !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li:first-child > a {
    padding-left: 0;
  }

  /*
   * Initial-load bridge only.
   *
   * Before first mouse movement on /chinese-immersion/, Oxygen may not yet have
   * inserted .sub-menu-wrap, leaving:
   *
   * ul.sub-menu > li > a
   *
   * This mirrors the global .sub-menu-wrap layout without affecting the normal
   * initialized state once .sub-menu-wrap exists.
   */
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) {
    display: flex !important;
    flex-direction: row !important;
    justify-content: flex-start !important;
    align-items: stretch !important;
    gap: 0 !important;
    box-sizing: border-box !important;
    padding-left: max(0px, calc((100% - 969px) / 2)) !important;
    padding-right: max(0px, calc((100% - 969px) / 2)) !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    padding-right: 65px !important;
    list-style: none !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li:last-child {
    padding-right: 0 !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li > a {
    width: auto !important;
    max-width: none !important;
    border-bottom: 2px solid transparent !important;
    padding: 11px 0 10px !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li > a:hover,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li.current-menu-item > a {
    border-color: #fff !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu:not(:has(> .sub-menu-wrap)) > li:first-child > a {
    padding-left: 0 !important;
  }
}

/* CLI Immersion desktop Programs submenu stable-state hardening START */
@media (min-width: 1009px) {
  /*
   * Stable initialized DOM:
   * ul.sub-menu > .sub-menu-wrap > li > a
   *
   * This deliberately mirrors the global/Oxygen submenu model:
   * - full-width outer ul.sub-menu handled above/global
   * - centered 969px wrapper
   * - natural-width items
   * - 65px right padding between items
   *
   * It is intentionally stronger than older Immersion-specific reconstruction
   * rules so the MU bridge remains the page-specific source of truth.
   */
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap {
    display: flex !important;
    flex-direction: row !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    justify-content: flex-start !important;
    gap: 0 !important;
    column-gap: 0 !important;
    max-width: 969px !important;
    width: 100% !important;
    margin: 0 auto !important;
    padding: 0 !important;
    box-sizing: border-box !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li {
    width: auto !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin: 0 !important;
    padding: 0 65px 0 0 !important;
    list-style: none !important;
    box-sizing: border-box !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li:last-child,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li:last-child {
    padding-right: 0 !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li > a,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li > a {
    width: auto !important;
    max-width: none !important;
    border-bottom: 6px solid transparent !important;
    padding: 12px 0 5px !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li > a:hover,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li.current-menu-item > a,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li > a:hover,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li.current-menu-item > a {
    border-color: #fff !important;
  }

  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu > .sub-menu-wrap > li:first-child > a,
  body.cli-program-page--immersion #menu-main-menu #menu-item-10 > ul.sub-menu .sub-menu-wrap > li:first-child > a {
    padding-left: 0 !important;
  }
}
/* CLI Immersion desktop Programs submenu stable-state hardening END */