/* =====================================================================
   MGC — "Club Activities" NESTED FLYOUT (inside the Activities menu)
   Purely additive. Loads after mgc-style.css, mgc-polish.css and
   mgc-polish-pro.css. No other menu is touched.

   Markup it targets (see Default.aspx):
     <li class="mgc-has-sub">
       <a href="#" class="mgc-submenu-toggle">Club Activities <i class="fa fa-angle-right"></i></a>
       <ul class="sub mgc-club-submenu"> ...7 club links... </ul>
     </li>
   sitting inside the Activities dropdown's own <ul class="sub">.

   Behaviour: opens on hover (desktop, CSS-only) AND on click/tap
   (desktop + mobile, via the small script added to mgc-custom.js),
   using the shared ".open" class already used elsewhere in the menu.
   ===================================================================== */

.mgc-menu .sub li.mgc-has-sub{ position:relative; }

/* !important is intentional here: the base menu stylesheet already styles
   ".mgc-menu .sub li a" (likely with its own flex/centering rules), and
   this item needs to win that fight so the label sits flush left like
   every other item in the Activities dropdown instead of looking
   centered. The arrow is pulled out of flow and pinned to the right edge
   instead of relying on flex justify-content, so a conflicting base rule
   can't push it back toward the middle. */
.mgc-menu .sub li.mgc-has-sub > a{
  display:flex !important;
  align-items:center !important;
  text-align:left !important;
  position:relative;
  padding-right:34px !important;
}
.mgc-menu .sub li.mgc-has-sub > a .fa-angle-right{
  position:absolute;
  top:50%;
  right:14px;
  transform:translateY(-50%);
  font-size:11px;
  opacity:.65;
  transition:transform .25s ease, opacity .2s ease;
}

/* ---------- Desktop: side flyout panel, opens on hover OR click ---------- */
@media (min-width:992px){
  /* The Activities dropdown panel itself typically has overflow:hidden
     (used for its own open/close slide animation). That clips this
     flyout even though it's positioned correctly, which is why it never
     appeared. Rescue overflow only on the row/panel that actually
     contains Club Activities — every other dropdown in the menu is
     untouched. */
  .mgc-menu .sub:has(> li.mgc-has-sub),
  .mgc-menu > li:has(.mgc-has-sub){
    overflow:visible !important;
  }
  .mgc-menu .sub li.mgc-has-sub > .sub{
    position:absolute;
    top:-11px;
    left:100%;
    min-width:230px;
    margin-left:6px;
    opacity:0;
    visibility:hidden;
    transform:translateX(8px);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear .18s;
    z-index:50;
  }
  .mgc-menu .sub li.mgc-has-sub:hover > .sub,
  .mgc-menu .sub li.mgc-has-sub.open > .sub{
    opacity:1;
    visibility:visible;
    transform:translateX(0);
    transition:opacity .18s ease, transform .18s ease, visibility 0s linear 0s;
  }
  .mgc-menu .sub li.mgc-has-sub:hover > a .fa-angle-right,
  .mgc-menu .sub li.mgc-has-sub.open > a .fa-angle-right{
    transform:translateY(-50%) translateX(3px);
    opacity:1;
  }

  /* If Activities sits close enough to the right edge that the flyout
     would spill off-screen, mgc-custom.js adds this class so it opens
     to the left of the row instead. */
  .mgc-menu .sub li.mgc-has-sub.mgc-flip-left > .sub{
    left:auto;
    right:100%;
    margin-left:0;
    margin-right:6px;
    transform:translateX(-8px);
  }
  .mgc-menu .sub li.mgc-has-sub.mgc-flip-left:hover > .sub,
  .mgc-menu .sub li.mgc-has-sub.mgc-flip-left.open > .sub{
    transform:translateX(0);
  }
}

/* ---------- Mobile: nested accordion, opens on tap ---------- */
@media (max-width:991px){
  .mgc-menu .sub:has(> li.mgc-has-sub.open){
    overflow:visible !important;
    max-height:none !important;
  }
  .mgc-menu .sub li.mgc-has-sub.open > a{
    color:var(--mgc-gold-soft);
  }
  .mgc-menu .sub li.mgc-has-sub.open > a .fa-angle-right{
    transform:rotate(90deg);
  }
  .mgc-menu .sub li.mgc-has-sub > .sub{
    display:none;
    position:static;
    margin:2px 6px 6px 16px;
    background:rgba(0,0,0,.22);
  }
  .mgc-menu .sub li.mgc-has-sub.open > .sub{
    display:block;
  }
}

@media (prefers-reduced-motion: reduce){
  .mgc-menu .sub li.mgc-has-sub > .sub{ transition:none !important; }
}