/* Hermes Mega Menu (Courses) - overrides Roocket header menu to be CLICK-TO-OPEN (no hover)
   and styles span toggles like links. */

/* Desktop-only: header menubar exists only on >= 1400px in your header.php */
@media (max-width: 1399.98px){
  #siteHead.hm-sitehead .hm-mega-panel{display:none !important}
}

/* ------------- CLICK-TO-OPEN behavior (regular dropdowns) ------------- */

/* Disable hover-open for normal dropdowns */
#siteHead.hm-sitehead .hm-menu li:hover > ul{display:none}

/* Open when li has .is-open (set by JS) */
#siteHead.hm-sitehead .hm-menu li.is-open > ul{display:block}

/* Span toggle must look exactly like <a> */
#siteHead.hm-sitehead .hm-menu .hm-menu-toggle{
  color:var(--hm-text-menu);
  text-decoration:none;
 
  padding:8px 2px;
  display:inline-flex;
  align-items:center;
  gap:8px;
  cursor:pointer;
}

/* Hover visual like links */
#siteHead.hm-sitehead .hm-menu .hm-menu-toggle:hover{opacity:.95}

/* Caret for dropdowns on both <a> and <span> */
#siteHead.hm-sitehead .hm-menu li.menu-item-has-children > a:after,
#siteHead.hm-sitehead .hm-menu li.menu-item-has-children > .hm-menu-toggle:after,
#siteHead.hm-sitehead .hm-menu .cat-menu > li > a:after{
  content:"";
  width:10px;
  height:10px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  opacity:.9;
  margin-left:6px;
}

/* ------------- MEGA MENU panel ------------- */

#siteHead.hm-sitehead .hm-mega-menu{position:relative}

/* Caret for mega menu title (both a and span) */
#siteHead.hm-sitehead .hm-mega-menu > a:after,
#siteHead.hm-sitehead .hm-mega-menu > .hm-menu-toggle:after{
  content:"";
  width:10px;
  height:10px;
  border-left:2px solid currentColor;
  border-bottom:2px solid currentColor;
  transform:rotate(-45deg);
  opacity:.9;
  margin-left:6px;
}

/* panel show/hide */
#siteHead.hm-sitehead .hm-mega-menu .hm-mega-panel{
  display:none;
  position:absolute;
  top:calc(100% + 12px);
  right:0;
  z-index:999;
}

/* Disable hover-open for mega menu */
#siteHead.hm-sitehead .hm-mega-menu:hover > .hm-mega-panel{display:none}

/* Open when li has .is-open */
#siteHead.hm-sitehead .hm-mega-menu.is-open > .hm-mega-panel{display:block}

/* panel base */
#siteHead.hm-sitehead .hm-mega-panel{
  background:var(--hm-dropdown-bg);
  border:1px solid var(--hm-dropdown-border);
  border-radius:16px;
  box-shadow:0 14px 34px rgba(0,0,0,.18);
  padding:14px;
  min-width:520px;
  max-width:680px;
}

#siteHead.hm-sitehead .hm-mega-panel--wide{
  min-width:680px;
  max-width:820px;
}

#siteHead.hm-sitehead .hm-mega-inner{display:block}

/* grid */
#siteHead.hm-sitehead .hm-mega-grid{
  display:grid;
  grid-template-columns:repeat(2, minmax(0, 1fr));
  gap:18px;
}

#siteHead.hm-sitehead .hm-mega-cols-1 .hm-mega-grid{grid-template-columns:1fr}
#siteHead.hm-sitehead .hm-mega-cols-2 .hm-mega-grid{grid-template-columns:repeat(2, minmax(0, 1fr))}
#siteHead.hm-sitehead .hm-mega-cols-3 .hm-mega-grid{grid-template-columns:repeat(3, minmax(0, 1fr))}

#siteHead.hm-sitehead .hm-mega-col{display:flex;flex-direction:column;gap:10px}

/* rows layout */
#siteHead.hm-sitehead .hm-mega-layout--rows .hm-mega-rows{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  max-width:760px;
}

/* item row */
#siteHead.hm-sitehead .hm-mega-row{
  display:flex;
  align-items:flex-start;
  gap:10px;
  padding:12px 12px;
  border-radius:14px;
  text-decoration:none;
  color:var(--hm-text-child-menu);
}

#siteHead.hm-sitehead .hm-mega-row:hover{background:var(--hm-dropdown-hover)}

#siteHead.hm-sitehead .hm-mega-ico{
  width:34px;
  height:34px;
  border-radius:12px;
  display:flex;
  align-items:center;
  justify-content:center;
  flex:0 0 34px;
}

html.hms-theme-night #siteHead.hm-sitehead .hm-mega-ico{
  background:rgba(255,255,255,.08);
}

#siteHead.hm-sitehead .hm-mega-ico svg{
  width:20px;
  height:20px;
  color:inherit;
}

#siteHead.hm-sitehead .hm-mega-ico img{
  width:20px;
  height:20px;
  object-fit:contain;
}

#siteHead.hm-sitehead .hm-mega-txt{display:flex;flex-direction:column;gap:4px}
#siteHead.hm-sitehead .hm-mega-title{font-weight:800;font-size:15px;line-height:1.2;color: var(--hm-icon);margin-top: 5px;}
#siteHead.hm-sitehead .hm-mega-desc{font-size:12.5px;opacity:.75;line-height:1.4;color: var(--hm-icon);}
a.bg-menu {
    background: #5b5c5b;
    border-radius: 10px;
    padding: 5px 10px !important;
}
/* bottom block */
#siteHead.hm-sitehead .hm-mega-block{
  margin-top:12px;
  padding:14px;
  border-radius:16px;
  background:rgba(15,23,42,.04);
  border:1px solid rgba(15,23,42,.06);
}

html.hms-theme-night #siteHead.hm-sitehead .hm-mega-block{
  background:rgba(255,255,255,.06);
  border:1px solid rgba(255,255,255,.10);
}

#siteHead.hm-sitehead .hm-mega-block-title{
  font-weight:800;
  margin-bottom:10px;
  color:var(--hm-text-child-menu);
}

#siteHead.hm-sitehead .hm-mega-chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
}

#siteHead.hm-sitehead .hm-mega-chip{
  display:inline-flex;
  align-items:center;
  padding:8px 10px;
  border-radius:10px;
  text-decoration:none;
  font-weight:700;
  font-size:13px;
  background:rgba(15,23,42,.08);
  color:var(--hm-text-child-menu);
}

#siteHead.hm-sitehead .hm-mega-chip:hover{background:var(--hm-dropdown-hover)}

/* Keep dark legibility */
html.hms-theme-night #siteHead.hm-sitehead .hm-mega-row{color:rgba(255,255,255,.92)}
html.hms-theme-night #siteHead.hm-sitehead .hm-mega-chip{background:rgba(255,255,255,.10)}