/* Program dropdown: Programs link + caret + Program2 item – shared across all pages */
/* Ensure navbar/header don’t clip dropdown; dropdown appears above content */
.header-default,
.header-default .header-inner,
.header-default .site-menu {
  position: relative;
  overflow: visible;
}
.header-default .site-menu .main-menu .nav-item.dropdown {
  position: relative;
  overflow: visible;
}

/* All Course active state: when on DevOps Master Program / Cloud Architect */
.header-default .site-menu .main-menu .nav-item.dropdown.active .program-nav-wrapper {
  position: relative;
}
.header-default .site-menu .main-menu .nav-item.dropdown.active .program-nav-link {
  color: #AEF400 !important;
}
.header-default .site-menu .main-menu .nav-item.dropdown.active .program-nav-wrapper:before {
  content: "";
  background-image: url(../images/menu-hover.png);
  height: 8px;
  position: absolute;
  bottom: 0;
  left: -5px;
  right: 0;
  background-position: center center;
  background-repeat: no-repeat;
  transition: all 0.3s ease-in-out;
}

.header-default .site-menu .main-menu .nav-item.dropdown {
  position: relative;
}
.header-default .site-menu .main-menu .nav-item.dropdown .dropdown-menu.program-dropdown-menu {
  display: none;
  position: absolute;
  z-index: 1060;
  background: #212121;
  top: 100%;
  left: 0;                    /* align left edge with parent nav item */
  transform: none;
  min-width: 200px;
  padding: 15px 0;
  margin-top: 8px;
  box-shadow: 0 10px 50px rgba(0,0,0,.2);
  border-radius: 8px;
  border: none;
}
.header-default .site-menu .main-menu .nav-item.dropdown .dropdown-menu.program-dropdown-menu.show {
  display: block;
}
}
.header-default .site-menu .main-menu .nav-item.dropdown .dropdown-menu.program-dropdown-menu .dropdown-item {
  color: rgba(255,255,255,.9);
  padding: 10px 25px;
  font-size: 16px;
}
.header-default .site-menu .main-menu .nav-item.dropdown .dropdown-menu.program-dropdown-menu .dropdown-item:hover {
  background: linear-gradient(130deg, #558B01 0%, #AEF400 100%);
  color: #fff !important;
}
.header-default .site-menu .main-menu .nav-item.dropdown .dropdown-menu.program-dropdown-menu .dropdown-item.active {
  background: linear-gradient(130deg, #558B01 0%, #AEF400 100%);
  color: #fff !important;
}
.program-nav-wrapper { display: flex; align-items: center; flex-wrap: nowrap; }
.program-nav-wrapper .program-nav-link { color: inherit; text-decoration: none; padding: 0; background: none; display: inline; }
.program-nav-wrapper .program-nav-link:hover { color: inherit; text-decoration: none; }
.program-nav-wrapper .dropdown-caret { background: none; border: none; padding: 0 0 0 4px; margin: 0; color: inherit; cursor: pointer; font-size: inherit; line-height: 1; vertical-align: middle; }
.program-nav-wrapper .dropdown-caret.dropdown-toggle::after { margin-left: 2px; vertical-align: middle; }
/* Mobile offcanvas: Program dropdown + nav links */
.main-menu-offcanvas .mobile-nav-links { padding: 0; }
.main-menu-offcanvas .mobile-nav-links a { color: rgba(255,255,255,.95); text-decoration: none; padding: 8px 0; display: inline-block; }
.main-menu-offcanvas .mobile-nav-links .program-nav-wrapper-mobile { color: rgba(255,255,255,.95); padding: 8px 0; display: flex; align-items: center; flex-wrap: nowrap; }
.main-menu-offcanvas .mobile-nav-links .program-nav-wrapper-mobile .program-nav-link-mobile { color: inherit; text-decoration: none; padding: 0; background: none; }
.main-menu-offcanvas .mobile-nav-links .program-dropdown-caret-mobile { background: none; border: none; padding: 0 0 0 6px; margin: 0; color: inherit; cursor: pointer; font-size: inherit; }
.main-menu-offcanvas .mobile-nav-links .program-dropdown-caret-mobile.dropdown-toggle::after { margin-left: 4px; }
.main-menu-offcanvas .mobile-nav-links .dropdown-menu { display: none; background: #212121; border: none; border-radius: 8px; padding: 8px 0; margin-top: 4px; position: relative; z-index: 1060; }
.main-menu-offcanvas .mobile-nav-links .dropdown-menu.show { display: block; }
.main-menu-offcanvas .mobile-nav-links .dropdown-item { color: rgba(255,255,255,.9); padding: 10px 20px; }
.main-menu-offcanvas .mobile-nav-links .dropdown-item:hover { background: linear-gradient(130deg, #558B01 0%, #AEF400 100%); color: #fff !important; }
.main-menu-offcanvas .mobile-nav-links .dropdown-item.active { background: linear-gradient(130deg, #558B01 0%, #AEF400 100%); color: #fff !important; }

/* Hide template default menu (Home 01/02/03, Pages, Service, etc.) when desktop clone is present – same nav on mobile and desktop */
.main-menu-offcanvas .body-inner:has(.mobile-nav-desktop-clone-wrap) > nav.navbar {
  display: none !important;
}

/* Desktop only: hide ONLY the nav-links block (top list: Home, About Us, Courses, etc.) inside the hamburger panel; keep rest (branding, social, QR, contact) visible */
@media (min-width: 992px) {
  .main-menu-offcanvas .offcanvas-body .body-inner > .mobile-nav-links,
  .main-menu-offcanvas .offcanvas-body .body-inner > .mobile-nav-desktop-clone-wrap {
    display: none !important;
  }
}
/* Cloned desktop menu in offcanvas – same items as desktop, stacked for mobile */
.mobile-nav-desktop-clone-wrap {
  width: 100%;
  margin-bottom: 1rem;
}
.mobile-nav-desktop-clone-wrap .main-menu {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 0;
}
.mobile-nav-desktop-clone-wrap .main-menu .nav-item {
  border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
.mobile-nav-desktop-clone-wrap .main-menu .nav-item:last-child {
  border-bottom: none;
}
.mobile-nav-desktop-clone-wrap .main-menu .nav-link,
.mobile-nav-desktop-clone-wrap .main-menu .program-nav-link {
  display: block;
  padding: 12px 0;
  color: rgba(255, 255, 255, 0.95);
  text-decoration: none;
  font-size: 1rem;
}
.mobile-nav-desktop-clone-wrap .main-menu .nav-link:hover,
.mobile-nav-desktop-clone-wrap .main-menu .program-nav-link:hover {
  color: #a1e401;
}
.mobile-nav-desktop-clone-wrap .main-menu .program-nav-wrapper {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  padding: 12px 0;
}
.mobile-nav-desktop-clone-wrap .main-menu .dropdown-menu {
  list-style: none;
  padding: 0;
  margin: 4px 0 8px 0;
  background: #212121;
  border-radius: 8px;
  border: none;
  position: relative;
  left: 0;
  box-shadow: none;
  display: none;
}
.mobile-nav-desktop-clone-wrap .main-menu .dropdown-menu.show {
  display: block;
}
.mobile-nav-desktop-clone-wrap .main-menu .dropdown-item {
  color: rgba(255, 255, 255, 0.9);
  padding: 10px 20px;
  display: block;
  text-decoration: none;
}
.mobile-nav-desktop-clone-wrap .main-menu .dropdown-item:hover {
  background: linear-gradient(130deg, #558B01 0%, #AEF400 100%);
  color: #fff !important;
}
.mobile-nav-desktop-clone-wrap .main-menu .dropdown-item.active {
  background: linear-gradient(130deg, #558B01 0%, #AEF400 100%);
  color: #fff !important;
}
.mobile-nav-desktop-clone-wrap .dropdown-caret {
  background: none;
  border: none;
  padding: 0 0 0 8px;
  margin: 0;
  color: inherit;
  cursor: pointer;
  font-size: inherit;
}
.mobile-nav-desktop-clone-wrap .dropdown-caret.dropdown-toggle::after {
  margin-left: 4px;
}

/* ===== FINAL COURSES DROPDOWN FIX ===== */
#programNavItem {
  position: relative;
}

#programNavItem .dropdown-menu.program-dropdown-menu {
  position: absolute;
  top: 100%;
  left: 0;
  margin-top: 12px;   /* space below Courses */
  transform: none;
}

/* Keep Courses active / highlighted while dropdown is open */
#programNavItem.show > .program-nav-wrapper .program-nav-link,
#programNavItem .dropdown-toggle.show,
#programNavItem.show > a {
  color: #A1E401 !important;
}

/* Optional underline-style accent when open (matches active feel) */
#programNavItem.show::after {
  content: "";
  position: absolute;
  bottom: -2px;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(90deg, #558B01, #A1E401);
  border-radius: 2px;
}

/* Explicitly handle Bootstrap applying .show on the trigger */
#coursesTrigger.show {
  color: #A1E401 !important;
}

/* Permanent active styling for Courses on program pages */
#programNavItem.active .program-nav-link {
  color: #A1E401 !important;
}

#programNavItem.active .program-nav-wrapper {
  position: relative;
}

#programNavItem.active .program-nav-wrapper::before {
  content: "";
  background-image: url(../images/menu-hover.png);
  height: 8px;
  position: absolute;
  bottom: -2px;
  left: -5px;
  right: 0;
  background-position: center center;
  background-repeat: no-repeat;
}

/* Fix ONLY DevOps Sprint dropdown font to match other dropdown items */
.header-default .site-menu .main-menu .dropdown-menu.program-dropdown-menu a[href*="DevOpsSprint.html"] {
  font-family: inherit !important;
  font-size: inherit !important;
  font-weight: inherit !important;
  letter-spacing: inherit !important;
  text-transform: inherit !important;
}

/* Force navbar dropdown same on all pages */
.header-default .site-menu .main-menu .dropdown-menu.program-dropdown-menu{
  background: #212121 !important;
  border-radius: 8px !important;
  padding: 15px 0 !important;
  box-shadow: 0 10px 50px rgba(0,0,0,.35) !important;
}

/* Active underline only when Courses is active OR dropdown is open */
#programNavItem.active .program-nav-wrapper::before,
#programNavItem.show .program-nav-wrapper::before{
  content:"";
  background-image:url(../images/menu-hover.png);
  height:8px;
  position:absolute;
  bottom:-2px;
  left:-5px;
  right:0;
  background-position:center;
  background-repeat:no-repeat;
}