/* Codex fix: Joomla 6 / FontAwesome compatibility for Helix submenu toggles. */
.sp-megamenu-parent .menu-toggler,
.offcanvas-menu .menu-toggler {
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 14px;
  height: 14px;
  margin-left: 6px;
  vertical-align: middle;
  color: currentColor;
  font-size: 0;
  line-height: 1;
}

.sp-megamenu-parent .menu-toggler::before,
.offcanvas-menu .menu-toggler::before {
  content: "" !important;
  display: block;
  width: 7px;
  height: 7px;
  border-right: 2px solid currentColor;
  border-bottom: 2px solid currentColor;
  transform: rotate(45deg) translateY(-2px);
  transition: transform .2s ease;
}

.sp-megamenu-parent li:hover > a > .menu-toggler::before,
.sp-megamenu-parent li:hover > .menu-separator > .menu-toggler::before,
.offcanvas-menu .menu-parent.menu-parent-open > a > .menu-toggler::before,
.offcanvas-menu .menu-parent.menu-parent-open > .menu-separator > .menu-toggler::before {
  transform: rotate(225deg) translate(-1px, -1px);
}

#offcanvas-toggler .burger-icon,
#modal-menu-toggler .burger-icon {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 25px;
  height: 25px;
}

#offcanvas-toggler .burger-icon > span,
#modal-menu-toggler .burger-icon > span {
  display: block !important;
  width: 25px;
  height: 2px;
  margin: 0 !important;
  background: #ff0000 !important;
  opacity: 1;
}

/* Codex fix: replace Helix FontAwesome submenu glyphs with CSS arrows. */
.sp-megamenu-parent .menu-toggler,
.offcanvas-menu .menu-toggler,
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 14px !important;
  height: 14px !important;
  min-width: 14px !important;
  margin-left: 6px !important;
  padding: 0 !important;
  font-size: 0 !important;
  line-height: 1 !important;
  vertical-align: middle !important;
  color: currentColor !important;
}

.sp-megamenu-parent .menu-toggler::before,
.offcanvas-menu .menu-toggler::before,
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler::before {
  content: none !important;
  display: none !important;
}

.sp-megamenu-parent .menu-toggler::after,
.offcanvas-menu .menu-toggler::after,
.offcanvas-menu .offcanvas-inner ul.menu .menu-toggler::after {
  content: "" !important;
  display: block !important;
  width: 7px !important;
  height: 7px !important;
  border-right: 2px solid currentColor !important;
  border-bottom: 2px solid currentColor !important;
  font-family: inherit !important;
  font-size: 0 !important;
  font-weight: normal !important;
  transform: rotate(45deg) translateY(-2px) !important;
  transition: transform .2s ease !important;
}

.sp-megamenu-parent li:hover > a > .menu-toggler::after,
.sp-megamenu-parent li:hover > .menu-separator > .menu-toggler::after,
.offcanvas-menu .menu-parent.menu-parent-open > a > .menu-toggler::after,
.offcanvas-menu .menu-parent.menu-parent-open > .menu-separator > .menu-toggler::after,
.offcanvas-menu .menu-parent.menu-parent-open > .nav-header > .menu-toggler::after {
  transform: rotate(225deg) translate(-1px, -1px) !important;
}