/* ============================================================
   menu.css — WCI modern menu (replaces legacy AWBS menu styles)
   This file is loaded AFTER style.css by the AWBS template.
   ============================================================ */

/* Wrapper bar */
.wci-nav-wrap{
  background:#0a0f1f;
  border-bottom:1px solid rgba(255,255,255,.06);
  width:100%;
  position:relative;
  z-index:50;
}

/* Reset legacy AWBS menu */
ul#menu{
  margin:0 auto !important;
  padding:0 24px !important;
  border:0 none !important;
  width:auto !important;
  max-width:1200px !important;
  height:auto !important;
  line-height:1.4 !important;
  background:transparent !important;
  color:#cfd6e4 !important;
  list-style:none !important;
  display:flex !important;
  flex-wrap:wrap !important;
  align-items:center !important;
  gap:2px !important;
}

ul#menu li{
  margin:0 !important;
  border:0 none !important;
  padding:0 !important;
  float:none !important;
  display:block !important;
  list-style:none !important;
  position:relative !important;
  height:auto !important;
}

/* Top-level link */
ul#menu > li > a,
ul#menu a.umenuhead{
  display:block !important;
  float:none !important;
  padding:14px 18px !important;
  color:#cfd6e4 !important;
  font-family:'Inter','Segoe UI',Arial,sans-serif !important;
  font-size:.92rem !important;
  font-weight:500 !important;
  font-style:normal !important;
  text-decoration:none !important;
  text-align:left !important;
  text-transform:none !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:0 none !important;
  position:relative;
  transition:color .15s ease, background .15s ease;
}

/* Strip AWBS forced helpers */
ul#menu a.w-100{ width:auto !important }
ul#menu a.ac{ text-align:left !important }

/* Hover on top-level */
ul#menu > li > a:hover,
ul#menu li:hover > a,
ul#menu li.iehover > a{
  color:#ffffff !important;
  background:rgba(255,255,255,.05) !important;
  text-decoration:none !important;
}

/* Hover underline accent on top-level */
ul#menu > li > a::after{
  content:"";
  position:absolute;
  left:18px; right:18px; bottom:0;
  height:2px;
  background:transparent;
  border-radius:2px;
  transition:background .15s ease;
}
ul#menu > li > a:hover::after,
ul#menu li:hover > a::after{
  background:#11C5A1;
}

/* Active / selected page */
ul#menu a.selectedMenu{
  color:#11C5A1 !important;
}
ul#menu a.selectedMenu::after{
  background:#11C5A1 !important;
}

/* Submenu (2nd level) */
ul#menu ul{
  margin:0 !important;
  border:1px solid rgba(255,255,255,.08) !important;
  border-top:2px solid #11C5A1 !important;
  border-radius:0 0 10px 10px !important;
  padding:6px 0 !important;
  width:240px !important;
  list-style:none !important;
  display:none !important;
  position:absolute !important;
  top:100% !important;
  left:0 !important;
  background:#0a0f1f !important;
  box-shadow:0 12px 30px rgba(0,0,0,.45) !important;
  z-index:1100 !important;
}

ul#menu ul li{
  width:100% !important;
  float:none !important;
  display:block !important;
  height:auto !important;
}

ul#menu ul li a{
  display:block !important;
  float:none !important;
  padding:10px 16px !important;
  color:#cfd6e4 !important;
  font-family:'Inter','Segoe UI',Arial,sans-serif !important;
  font-size:.88rem !important;
  font-weight:400 !important;
  text-decoration:none !important;
  text-align:left !important;
  width:auto !important;
  height:auto !important;
  background:transparent !important;
  border:0 none !important;
  white-space:nowrap !important;
}

/* 2nd-level hover */
ul#menu ul li a:hover,
ul#menu li:hover ul li a:hover,
ul#menu li.iehover ul li a:hover{
  background:rgba(17,197,161,.14) !important;
  color:#ffffff !important;
}

/* CRITICAL: Override the legacy "li:hover li a" rule that paints all
   submenu items the hover bg. Reset them to the base submenu look. */
ul#menu li:hover li a,
ul#menu li.iehover li a{
  background:transparent !important;
  color:#cfd6e4 !important;
  border:0 none !important;
  float:none !important;
}

/* Show submenu on hover/focus */
ul#menu li:hover > ul,
ul#menu li:focus-within > ul,
ul#menu li.iehover > ul{
  display:block !important;
}

/* Hide deeper submenus by default; show on hover */
ul#menu ul ul,
ul#menu ul ul ul{
  display:none !important;
  position:absolute !important;
  top:0 !important;
  left:240px !important;
  border-radius:10px !important;
  border-top:2px solid #11C5A1 !important;
}
ul#menu ul li:hover > ul,
ul#menu ul li:focus-within > ul,
ul#menu ul li.iehover > ul{
  display:block !important;
}

ul#menu a.close{ border-right:0 !important }

/* ------------------------------------------------------------
   Hamburger toggle button (injected by bottom.php on every page)
   Hidden on desktop; visible on small screens.
   ------------------------------------------------------------ */
.wci-menu-toggle{
  display:none;
  align-items:center;
  gap:10px;
  background:transparent;
  color:#cfd6e4;
  border:0;
  padding:12px 18px;
  font-family:'Inter','Segoe UI',Arial,sans-serif;
  font-size:.92rem;
  font-weight:600;
  cursor:pointer;
  -webkit-appearance:none;
  appearance:none;
}
.wci-menu-toggle-bars{
  position:relative;
  display:inline-block;
  width:22px;height:16px;
}
.wci-menu-toggle-bars > span{
  position:absolute;left:0;right:0;height:2px;
  background:#cfd6e4;
  border-radius:2px;
  transition:transform .2s ease, opacity .2s ease, top .2s ease;
}
.wci-menu-toggle-bars > span:nth-child(1){ top:2px }
.wci-menu-toggle-bars > span:nth-child(2){ top:7px }
.wci-menu-toggle-bars > span:nth-child(3){ top:12px }
.wci-nav-wrap.wci-menu-open .wci-menu-toggle-bars > span:nth-child(1){ top:7px; transform:rotate(45deg) }
.wci-nav-wrap.wci-menu-open .wci-menu-toggle-bars > span:nth-child(2){ opacity:0 }
.wci-nav-wrap.wci-menu-open .wci-menu-toggle-bars > span:nth-child(3){ top:7px; transform:rotate(-45deg) }
.wci-menu-toggle-label{ letter-spacing:.02em }

/* ------------------------------------------------------------
   Mobile: turn horizontal nav into a collapsible vertical panel
   ------------------------------------------------------------ */
@media (max-width: 768px){
  .wci-menu-toggle{
    display:inline-flex !important;
  }
  .wci-nav-wrap{
    /* Keep the wrap a thin bar holding the toggle */
    padding:0;
  }
  ul#menu{
    /* Hidden by default; revealed when wrap has .wci-menu-open */
    display:none !important;
    flex-direction:column !important;
    flex-wrap:nowrap !important;
    overflow-x:visible !important;
    overflow-y:auto !important;
    max-height:calc(100vh - 200px) !important;
    width:100% !important;
    max-width:100% !important;
    padding:6px 0 !important;
    gap:0 !important;
    background:#0a0f1f !important;
    border-top:1px solid rgba(255,255,255,.08) !important;
  }
  .wci-nav-wrap.wci-menu-open ul#menu{
    display:flex !important;
  }
  ul#menu > li{
    width:100% !important;
    border-bottom:1px solid rgba(255,255,255,.04) !important;
  }
  ul#menu > li:last-child{ border-bottom:0 !important }
  ul#menu > li > a,
  ul#menu a.umenuhead{
    padding:14px 18px !important;
    font-size:.95rem !important;
    white-space:normal !important;
    width:100% !important;
  }
  /* Remove desktop hover underline indicator on mobile */
  ul#menu > li > a::after{ display:none !important }
  /* Show submenu indicator (caret) on items that have a submenu */
  ul#menu > li:has(> ul) > a::before{
    content:"\25BE";
    float:right;
    margin-left:8px;
    color:rgba(255,255,255,.5);
    transition:transform .2s ease;
  }
  ul#menu > li.wci-sub-open > a::before{
    transform:rotate(180deg);
    color:#11C5A1;
  }
  /* Submenus inline (not floating popups) on mobile */
  ul#menu ul{
    position:static !important;
    display:none !important;
    width:100% !important;
    box-shadow:none !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.04) !important;
    border-radius:0 !important;
    padding:0 !important;
    background:rgba(0,0,0,.25) !important;
  }
  /* Open the submenu only when its <li> has wci-sub-open (set by JS).
     Disable :hover-based opening on mobile because hover is sticky on touch. */
  ul#menu li.wci-sub-open > ul{
    display:block !important;
  }
  ul#menu li:hover > ul,
  ul#menu li:focus-within > ul,
  ul#menu li.iehover > ul{
    /* override desktop rule on mobile — only wci-sub-open opens submenus */
    display:none !important;
  }
  ul#menu li.wci-sub-open > ul{ display:block !important }
  ul#menu ul li a{
    padding:12px 18px 12px 36px !important;
    font-size:.9rem !important;
    white-space:normal !important;
  }
  /* Nested deeper submenus also inline */
  ul#menu ul ul,
  ul#menu ul ul ul{
    position:static !important;
    left:auto !important; top:auto !important;
    border-radius:0 !important;
    border:0 !important;
    border-top:1px solid rgba(255,255,255,.04) !important;
  }
  ul#menu ul ul li a{ padding-left:54px !important }
}

/* ------------------------------------------------------------
   #uvmenu (vertical user side menu) — keep usable, restyled dark
   ------------------------------------------------------------ */
#uvmenu{
  font-size:.85rem;
  width:auto;
  border:0;
  background:transparent;
  float:none;
}
#uvmenu div.TabTitleBar,
#uvmenu div.CollapsiblePanelTab,
div.RegTitleBar{
  background:rgba(17,197,161,.08);
  color:#0b1525;
  font-weight:600;
  height:auto;
  padding:10px 12px;
  border-radius:8px 8px 0 0;
  cursor:pointer;
  text-align:left;
}
#uvmenu ul{ margin:0; padding:0; border:none; list-style:none }
#uvmenu li{ border-bottom:1px solid rgba(0,0,0,.06); margin:0 }
#uvmenu li a.closed,
#uvmenu li.closed{ border-bottom:0; margin:0 }
#uvmenu li a{
  display:block;
  padding:10px 12px;
  border-left:3px solid transparent;
  background:#fff;
  color:#1a2332;
  text-decoration:none;
  font-weight:400;
  font-size:.88rem;
}
#uvmenu li a:hover{
  border-left:3px solid #11C5A1;
  background:rgba(17,197,161,.06);
  color:#0b1525;
  font-weight:600;
}
#uvmenu .CollapsiblePanel{ margin:0; padding:0; border:0 }
#uvmenu div.vmenuSep{ clear:both; height:5px; display:block }