/* ── All Courses mega menu (2-column: Category | Roles) ─────────────── */
.mega-wrap { position: static; }

.mega-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  transition: color .2s;
}
.mega-trigger .mega-caret {
  width: 9px; height: 9px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg);
  transition: transform .2s;
  margin-top: -3px;
}
.mega-wrap.open .mega-trigger .mega-caret { transform: rotate(-135deg); margin-top: 2px; }
.mega-wrap:hover .mega-trigger,
.mega-wrap.open .mega-trigger { color: var(--purple, #0077b6); }

/* Kill the page's progressive-underline link style (::after width transition)
   for anything inside the mega menu — trigger, categories, and role links all
   use a plain faded-purple hover state instead. */
.mega-trigger::after,
.mega-panel a::after {
  content: none !important;
  width: 0 !important;
}

/* Glass overlay — sits behind the panel, blurs the page content below the nav.
   Nested inside .mega-wrap so hover/leave tracking never mismatches the panel. */
.mega-overlay {
  position: fixed; inset: 0;
  top: var(--nav-h, 72px);
  background: rgba(15, 10, 30, .22);
  backdrop-filter: blur(6px) saturate(120%);
  -webkit-backdrop-filter: blur(6px) saturate(120%);
  z-index: 250;
  opacity: 0;
  pointer-events: none;
  transition: opacity .25s ease;
}
.mega-wrap.open .mega-overlay { opacity: 1; pointer-events: all; }

/* Panel is a contained card (not full-bleed), horizontally centered on the
   viewport, roughly as broad as All Courses–to–Careers or a bit wider. */
.mega-panel {
  position: fixed;
  left: 50%;
  width: min(880px, calc(100vw - 112px));
  top: var(--nav-h, 72px);
  background: rgba(255, 255, 255, .86);
  backdrop-filter: blur(18px) saturate(160%);
  -webkit-backdrop-filter: blur(18px) saturate(160%);
  border: 1px solid rgba(255,255,255,.6);
  border-top: none;
  border-radius: 20px;
  box-shadow: 0 24px 60px rgba(20,10,50,.18);
  z-index: 300;
  display: grid;
  grid-template-columns: 300px 1px 1fr;
  max-height: 0;
  overflow: hidden;
  opacity: 0;
  transform: translate(-50%, -6px);
  transition: max-height .32s cubic-bezier(.4,0,.2,1), opacity .22s ease, transform .28s cubic-bezier(.4,0,.2,1);
  pointer-events: none;
}
.mega-wrap.open .mega-panel {
  max-height: 520px;
  opacity: 1;
  transform: translate(-50%, 8px);
  pointer-events: all;
}

.mega-col { padding: 26px 32px; overflow-y: auto; max-height: 520px; }
.mega-divider { background: linear-gradient(180deg, transparent, rgba(0,119,182,.18) 15%, rgba(0,119,182,.18) 85%, transparent); }

.mega-cat-list { display: flex; flex-direction: column; gap: 2px; }
.mega-cat {
  padding: 12px 14px;
  border-radius: 10px;
  font-size: 14.5px;
  font-weight: 600;
  color: #03045e;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: background .15s, color .15s;
}
.mega-cat .mega-cat-arrow { font-size: 13px; opacity: .45; }
.mega-cat:hover, .mega-cat.active {
  background: rgba(0,119,182,.12);
  color: var(--purple, #0077b6);
}
.mega-cat.active .mega-cat-arrow { opacity: 1; }

/* "Skill Based" sits after the real categories with a thin divider above it,
   so it reads as a distinct, additional way to browse rather than another
   plain category. */
.mega-cat-skill {
  margin-top: 10px;
  padding-top: 14px;
  border-top: 1px solid rgba(0,119,182,.15);
}

.mega-roles-heading {
  font-family: 'Jua', sans-serif;
  font-size: 12px;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: #9a8fc2;
  margin-bottom: 14px;
}

/* Single column — roles are NOT split into sub-columns. */
.mega-role-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.mega-role {
  padding: 9px 12px;
  border-radius: 8px;
  font-size: 13.5px;
  color: #33263f;
  text-decoration: none;
  transition: background .15s, color .15s;
  display: block;
}
.mega-role:hover {
  background: rgba(0,119,182,.12);
  color: var(--purple, #0077b6);
  text-decoration: none;
}

/* 342 skills is too long for one column without a lot of scrolling, so this
   is a fixed 3-column grid — every cell the same width and height ("table
   form"), left-to-right then wrapping, so nothing can bleed into a
   neighbouring cell the way free-flowing CSS columns did with long names. */
.mega-skill-list {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 2px 8px;
}
.mega-skill-list .mega-skill {
  font-size: 12.5px;
  padding: 7px 10px;
  white-space: nowrap;
  overflow: hidden;
  position: relative;
}
/* Names too long for the cell auto-scroll (marquee) on hover instead of
   wrapping or spilling into the next column — see wireSkillMarquee() in
   mega-menu.js, which sets the transition/transform inline per item since
   the scroll distance and duration vary with each skill's name length. */
.mega-skill-text {
  display: inline-block;
  will-change: transform;
}

@media (max-width: 860px) {
  .mega-panel { display: none !important; }
  .mega-overlay { display: none !important; }
}