/**
 * Custom CSS overrides for Helix3 template
 * Fixes navigation display issue after security hardening (July 2026)
 *
 * Root cause: .sp-megamenu-wrapper collapses to height:0 because all
 * children are floated (toggler float:right, megamenu float:right).
 * Fix: clearfix on wrapper + constrain megamenu height to header.
 */

/* Ensure header is always visible above page content */
#sp-header {
  position: relative;
  z-index: 999;
  background: #ffffff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.08);
  overflow: visible !important;
}

/* Ensure no ancestor clips the dropdown - EVERY element in the chain */
#sp-header,
#sp-header .container,
#sp-header .container-fluid,
#sp-header .row,
#sp-header [class*="col-"],
#sp-header .sp-column,
#sp-header .sp-megamenu-wrapper,
#sp-header #sp-menu,
.sticky-wrapper {
  overflow: visible !important;
}

/* Ensure top bar also stays above */
#sp-top-bar {
  position: relative;
  z-index: 1000;
}

/* FIX: wrapper collapses because children are floated - add clearfix */
#sp-header .sp-megamenu-wrapper {
  overflow: visible;
  height: 90px;
  position: relative;
}

/* FIX: constrain megamenu UL to single line within header height */
#sp-header .sp-megamenu-parent {
  line-height: 90px;
  height: 90px;
  overflow: visible;
  white-space: nowrap;
  position: relative;
}

/* FIX: Dropdown menus must appear ABOVE page content */
#sp-header .sp-megamenu-parent > li {
  position: relative;
}

#sp-header .sp-megamenu-parent .sp-dropdown {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 10000;
  display: none;
  min-width: 200px;
  background: #fff;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  border-radius: 0;
  padding: 0;
  border: none;
  margin-top: 0;
  overflow: hidden;
}

/* Remove double-box effect from inner wrapper */
#sp-header .sp-megamenu-parent .sp-dropdown .sp-dropdown-inner {
  background: #fff;
  box-shadow: none;
  border: none;
  border-radius: 0;
  padding: 0 !important;
}

#sp-header .sp-megamenu-parent > li:hover > .sp-dropdown,
#sp-header .sp-megamenu-parent > li.sp-menu-open > .sp-dropdown {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  pointer-events: auto !important;
  clip: auto !important;
  height: auto !important;
  width: auto !important;
  overflow: visible !important;
}

/* Force stacking context so dropdown renders above page content.
   Note: z-index here must be below modal z-index (1050000+).
   The header at z-index:999 already creates the stacking context;
   individual li items need a high value for DROPDOWN overlap only. */
#sp-header .sp-megamenu-parent > li {
  position: relative;
  z-index: 1000;
}

/* Page content: NO z-index set here.
   Previously this had z-index:1 which created a stacking context that
   trapped all Bootstrap modals inside it - making them unable to render
   above the header (z-index:999). Removing z-index allows modals to
   use the root stacking context and properly layer above everything. */

#sp-header .sp-megamenu-parent .sp-dropdown li a {
  display: block;
  padding: 6px 16px;
  color: #333;
  line-height: 1.5;
  white-space: nowrap;
}

#sp-header .sp-megamenu-parent .sp-dropdown li a:hover {
  background: #f5f5f5;
  color: #eb4947;
}

/* Nav links - ensure proper alignment */
.sp-megamenu-parent > li > a,
.sp-megamenu-parent > li > span {
  color: #333333;
  font-weight: 500;
  line-height: 90px;
}

.sp-megamenu-parent > li > a:hover,
.sp-megamenu-parent > li.active > a {
  color: #eb4947;
}

/* Fix sticky wrapper height collapse */
.sticky-wrapper {
  position: relative;
  z-index: 999;
}

/* When header becomes fixed (scrolled), maintain white bg */
#sp-header.menu-fixed {
  background: #ffffff;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

#sp-header.menu-fixed .sp-megamenu-wrapper,
#sp-header.menu-fixed .sp-megamenu-parent {
  height: 60px;
  line-height: 60px;
}

#sp-header.menu-fixed .sp-megamenu-parent > li > a,
#sp-header.menu-fixed .sp-megamenu-parent > li > span {
  line-height: 60px;
}

/* Ensure the page content does not overlap the header */
/* (covered by rule above) */

/* Menu column alignment */
#sp-menu {
  display: flex;
  align-items: center;
  height: 90px;
}

#sp-menu > .sp-column {
  width: 100%;
}

/* Hide toggler on desktop (it shows on mobile via media query) */
@media (min-width: 992px) {
  #offcanvas-toggler {
    display: none;
  }
}

/* Mobile: make hamburger icon visible, larger tap target */
@media (max-width: 991px) {
  #offcanvas-toggler {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    float: right;
    margin-top: 23px;
    line-height: normal;
  }

  #offcanvas-toggler > i {
    color: #333333 !important;
    font-size: 24px;
    font-family: "Font Awesome 6 Free" !important;
    font-weight: 900 !important;
  }

  #offcanvas-toggler > i::before {
    content: "\f0c9" !important;
  }

  /* On mobile, wrapper should not clip the toggler */
  #sp-header .sp-megamenu-wrapper {
    height: auto;
    overflow: visible;
    display: flex;
    align-items: center;
    justify-content: flex-end;
    min-height: 90px;
  }

  /* Menu column on mobile */
  #sp-menu {
    height: auto;
    min-height: 90px;
  }

  /* Wizard container: full width on mobile */
  .container.inj-wizard-container {
    width: 100% !important;
    max-width: 100%;
    padding-left: 15px;
    padding-right: 15px;
  }
}

/* Wizard container: 50% on desktop, responsive on smaller screens */
.container.inj-wizard-container {
  width: 50%;
}

@media (max-width: 767px) {
  .container.inj-wizard-container {
    width: 100% !important;
    max-width: 100%;
  }
}

@media (min-width: 768px) and (max-width: 991px) {
  .container.inj-wizard-container {
    width: 75% !important;
  }
}

/* ==========================================================================
   GLOBAL MODAL FIX - All Bootstrap modals must render above site header
   
   Root cause of modal issues: The nav header uses z-index: 999 (and menu
   items use z-index: 99999 for dropdowns). Bootstrap modals default to
   z-index: 1050 (backdrop) and 1055 (modal). When modals are inside a
   parent with a lower stacking context, they get trapped below the header.
   
   Fix: We removed z-index from #sp-main-body so modals are in the root
   stacking context. We also ensure modal z-index is above the nav dropdown
   z-index (99999). Bootstrap 5 uses 1050/1055 by default which is above
   our header (999) but BELOW nav items (99999). So we bump modals higher.
   ========================================================================== */

/* Backdrop must cover everything including sticky header and nav dropdowns */
.modal-backdrop {
  z-index: 1050000 !important;
}

/* Modal wrapper must be above the backdrop */
.modal {
  z-index: 1050001 !important;
}

/* When a modal is open, ensure the header dropdowns don't poke through */
body.modal-open #sp-header .sp-megamenu-parent > li {
  z-index: auto !important;
}

body.modal-open #sp-header {
  z-index: 999 !important;
}

/* Ensure modal content is opaque and properly styled */
.modal .modal-content {
  background-color: #ffffff;
  position: relative;
}

/* Ensure form inputs and buttons inside modals are always interactive */
.modal .form-control,
.modal .form-select,
.modal .btn,
.modal input,
.modal textarea,
.modal select,
.modal button,
.modal a,
.modal iframe,
.modal video {
  pointer-events: auto;
  position: relative;
}

/* Override inline z-index:9999 on legacy modals (courseModal, quizModal, etc.)
   These inline styles are lower than our nav (99999) so they need overriding */
.modal.fade,
.modal.show {
  z-index: 1050001 !important;
}


/* ==========================================================================
   NESTED SUBMENU (SUB-DROPDOWN) FLYOUT FIX
   Feature: Profile > Email Marketing > (Lists / Subscribers / Campaigns / Archive)

   Root cause: The megamenu UL has class "menu-slide-down". The template rule
   ".menu-slide-down .sp-has-child > .sp-dropdown" applies top:60px / hidden to
   EVERY dropdown, including the nested sub-dropdown (.sp-dropdown-sub). On hover
   ".sp-megamenu-parent.menu-slide-down .sp-has-child:hover > .sp-dropdown" then
   forces top:90px and never restores left:100%. The template only guards the
   nested case for "top" while the top-level item is hovered, so the sub-flyout
   never actually appears when you hover the sub-parent (Email Marketing).

   Fix: For the sub-dropdown specifically, force correct fly-right position and
   reveal it when its OWN parent li.sp-has-child is hovered.
   ========================================================================== */

/* Base position for the nested sub-dropdown regardless of slide-down overrides */
#sp-header .sp-megamenu-parent.menu-slide-down .sp-dropdown.sp-dropdown-sub,
#sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub {
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  margin: 0 !important;
}

/* Left-align variant when the sub would overflow the right edge */
#sp-header .sp-megamenu-parent .sp-menu-right .sp-dropdown.sp-dropdown-sub {
  left: 100% !important;
  right: auto !important;
}

/* Reveal the sub-dropdown when hovering ITS OWN parent (e.g. Email Marketing),
   not only when the top-level Profile item is hovered. Keep it flown-right. */
#sp-header .sp-megamenu-parent.menu-slide-down .sp-dropdown li.sp-has-child:hover > .sp-dropdown.sp-dropdown-sub,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child:hover > .sp-dropdown.sp-dropdown-sub {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  top: 0 !important;
  left: 100% !important;
  right: auto !important;
  pointer-events: auto !important;
  overflow: visible !important;
}

/* Keep the parent dropdown open (visible) while interacting with the sub-flyout */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child:hover {
  overflow: visible !important;
}

/* The sub-parent link should indicate it expands a submenu */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child > a {
  position: relative;
  padding-right: 24px;
}

#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child > a::after {
  content: "\f105"; /* fa-angle-right */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 12px;
  opacity: 0.6;
}

/* ==========================================================================
   READABLE MENU TEXT ON HOVER / ACTIVE / CURRENT STATES
   Fix: hover/active/current items with white (or light) backgrounds were
   rendering white text on white = unreadable. Force a dark, legible color on
   all hover/active/current states in the dropdown items and top-level nav.
   ========================================================================== */

/* Dropdown item links: hover, active and current-item states stay legible */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:hover,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-menu-item > a:focus,
#sp-header .sp-megamenu-parent .sp-dropdown li.active > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.current-item > a {
  background: #f5f5f5;
  color: #eb4947 !important;
}

/* Sub-dropdown item links use the same legible treatment */
#sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub li.sp-menu-item > a:hover,
#sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub li.sp-menu-item > a:focus,
#sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub li.active > a,
#sp-header .sp-megamenu-parent .sp-dropdown.sp-dropdown-sub li.current-item > a {
  background: #f5f5f5;
  color: #eb4947 !important;
}

/* Sub-parent (Email Marketing) stays legible when the sub-flyout is open */
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child:hover > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child.active > a,
#sp-header .sp-megamenu-parent .sp-dropdown li.sp-has-child.current-item > a {
  background: #f5f5f5;
  color: #eb4947 !important;
}

/* Top-level nav items: keep active/current/hover legible on the white header */
#sp-header .sp-megamenu-parent > li > a:hover,
#sp-header .sp-megamenu-parent > li.active > a,
#sp-header .sp-megamenu-parent > li.current-item > a,
#sp-header .sp-megamenu-parent > li.sp-has-child.active > a {
  color: #eb4947 !important;
}