/*=========================================
=            Hamburger Deluxe             =
=========================================*/

.not--device {
  .hamburger-deluxe-style {

    /* Desktop Styles */
    @media (width >= 1024px) {

      /* Start of Hamburger Deluxe */
      .menu-wrap {
        .nav-parent-underlay {
          display: block;
          position: absolute;
          width: var(--nav-panel-desktop-width);
          height: 100%;
          top: 0;
          left: 0;
          background-color: var(--menu-deluxe-bg-parent);
          /* background-color: navy; */
        }

        .nav-panel {
          width: var(--nav-panel-desktop-width);
        }

        .nav-close {
          left: 0;
          transform: translateX(0);
        }

        .main-menu {
          background: var(--secondary-color);
          /* background-color: purple; */
          width: var(--nav-panel-desktop-width);

          /* Parent Level Menu Styling */
          >li {
            >.sub-menu {
              height: 100%;
              padding: 100px 0;
              position: fixed;
              top: 0;
              left: 0;
              transform: translateX(0);
              transition: transform .5s;
              width: var(--nav-panel-desktop-width);
              overflow: scroll;
              scrollbar-width: none;

              &::-webkit-scrollbar {
                display: none;
              }
            }

            >a {
              font-size: var(--menu-deluxe-font-size-parent);
              color: var(--menu-deluxe-text-parent);
              padding: 14px 46px 14px 20px;
            }

            .nav-dropdown-button {
              height: calc(var(--menu-deluxe-font-size-parent) + calc(14px * 2));
            }

            &:hover {
              >a {
                background-color: var(--menu-deluxe-bg-hover-parent);
                color: var(--menu-deluxe-text-hover-parent);
              }
            }
          }

          /* General Sub-Menu Styling */
          .sub-menu {
            margin: 0;
            background-color: var(--menu-deluxe-bg-child);
            box-shadow: 1px 0 20px rgb(from var(--dark-color) r g b / 0.25);
            display: block;
            position: relative;
            z-index: -1;

            >li {

              /* Child */
              a {
                font-size: 26px;
                font-size: var(--menu-deluxe-font-size-child);
                padding: 14px 20px;
                color: var(--menu-deluxe-text-child);
              }

              .nav-dropdown-button {
                height: calc(var(--menu-deluxe-font-size-child) + calc(14px * 2));
              }

              &:hover {
                background-color: var(--menu-deluxe-bg-hover-child);

                a {
                  color: var(--menu-deluxe-text-hover-child);
                }
              }
            }

            .sub-menu {
              /* Grandchild */
              z-index: 0;
              background-color: var(--menu-deluxe-bg-grandchild);
              box-shadow: none;

              li {
                a {
                  font-size: var(--menu-deluxe-font-size-grandchild);
                  padding: 12px 20px 12px 40px;
                  color: var(--menu-deluxe-text-grandchild);
                }

                .nav-dropdown-button {
                  height: calc(var(--menu-deluxe-font-size-grandchild) + calc(12px * 2));
                }

                &:hover {
                  background-color: var(--menu-deluxe-bg-hover-grandchild);

                  a {
                    color: var(--menu-deluxe-text-hover-grandchild);
                    background-color: transparent;
                  }
                }
              }
            }
          }
        }
      }

      /* closing .touch-menu */

      &.menu-is-open {
        .menu-wrap {
          transform: translateX(0);
          width: 100vw;
        }

      }

      .menu-is-closed {
        .menu-wrap {
          transform: translateX(-100%);
        }
      }

      &.sub-menu-is-open {

        /* .nav-panel {
          width: calc( var(--nav-panel-desktop-width) + var(--nav-panel-desktop-width));
        } */
        .menu-item-has-children {
          >.sub-menu {
            transform: translateX(0);
          }

          /* GrandChildren */
          &.sub-menu-parent-open {
            >.sub-menu {
              transform: translateX(var(--nav-panel-desktop-width));

              /* padding: 100px 0; */
              .sub-menu {
                transform: translateX(0);
                position: relative;
                padding: 0;
                height: auto;

                a {
                  color: var(--menu-deluxe-text-grandchild);
                }
              }
            }
          }
        }
      }

      .sub-menu-parent-open {
        >a {
          background-color: var(--menu-deluxe-bg-hover-parent);
          /* background-color: orange; */
        }

        .sub-menu-parent-open {
          >a {
            background-color: var(--menu-deluxe-bg-hover-child);
            /* background-color: pink; */
          }
        }
      }

      /* End of Hamburger Deluxe */

    }
  }

  /*================================
  =            Top Menu            =
  ================================*/

  .menu-top-style {

    /* Desktop Styles */
    @media (width >= 1024px) {
      .nav-bar.nav-relative.transition-top {
        /* transition: all .15s ease-in-out .16s; */
        transition: background-color .3s .16s, top .3s;
      }

      .menu-trigger {
        display: none;
      }

      .menu-wrap {
        position: static;
        opacity: 1;
        background-color: transparent;
        backdrop-filter: none;
        width: auto;
        overflow: visible;
        height: auto;
        margin-left: 20px;
        margin-right: auto;
        transition: none;
      }

      .nav-panel {
        width: auto;
        min-height: 0;
        padding: 0;
        transform: none;
        transition: none;
        background-color: transparent;
      }

      /* From Basebuild */
      /* main menu <ul> */
      .main-menu,
      &.menu-is-closed .main-menu {
        text-align: center;
        display: flex;
        column-gap: 20px;
        align-items: center;
        height: var(--nav-desktop);
        padding-bottom: 0;
        transition: none;

        >li {
          display: flex;
          align-items: center;
          position: relative;
          height: 100%;
          padding: 0 10px;
          background-color: var(--menu-top-bg-parent);
          /* transition: none; */
          transition: all .15s ease-in-out;

          >.nav-dropdown-button {
            display: none;
          }

          /* show sub-menus on hover */
          &:hover,
          &:active,
          &:focus {
            cursor: pointer;
            /* background-color: $primaryAlt; */
            /* background-color: orange; */
            background-color: var(--menu-top-bg-hover-parent);
            transition: all .15s ease-in-out;

            >.sub-menu {
              opacity: 1;
              visibility: visible;
              z-index: 50;
              top: var(--nav-desktop);
              display: block;
            }

            >a {
              /* color: purple; */
              background-color: transparent;
              color: var(--menu-top-text-hover-parent);
              transition: all .15s ease-in-out;
            }
          }

          &.mega-menu {
            position: static;
          }

          &.nav-home-link {
            display: none;
          }

          a {
            font-size: var(--menu-top-font-size-parent);
            display: flex;
            align-items: center;
            width: 100%;
            height: 100%;
            text-decoration: none;
            padding: 0;
            transition: all .15s ease-in-out;
            /* color: orange; //set this color */
            color: var(--menu-top-text-parent);
            position: relative;

          }
        }

        /* .menu-item-has-children {
          padding-right: 20px;
        } */
        .mobile-only {
          display: none;
        }

        /* .nav-dropdown-button {
          display: none;
          border-top: 2px solid var(--secondary-alt);
          border-right: 2px solid var(--secondary-alt);
          position: absolute;
          width: 6px;
          height: 6px;
          right: 6px;
          top: 6px;
          width: 26px;
          top: 50%;
          padding-right: 0;
          transform: rotate(45deg) translateY(-50%);
        } */
        .sub-menu {
          /* background-color: var(--secondary-color); */
          /* border: 1px solid rgb(from var(--dark-color) r g b / 0.6); */
          background-color: var(--menu-top-bg-child);
          position: absolute;
          top: calc(var(--nav-desktop) - 3px);
          /* left: 50%; */
          left: 0;
          /* right: 50%; */
          /* transform: translate(-50%, 0); */
          opacity: 0;
          visibility: hidden;
          width: 250px;
          z-index: -5;
          transition: .15s ease-in-out top, .15s ease-in-out opacity;
          display: block !important;
          padding: 3px 0;

          >li {
            /* background-color: var(--secondary-color); */
            background-color: var(--primary-color);

            &.menu-item-has-children {
              position: relative;

              .sub-menu {
                left: 250px;
                top: -3px;
                padding: 0;
              }

              /* show third level sub-menu */
              &:hover,
              &:active,
              &:focus {

                /* &:after{
                	transform: translateY(-50%) rotate(90deg);
                } */
                /* background-color: var(--menu-top-bg-hover-child); */
                >.sub-menu {
                  opacity: 1;
                  visibility: visible;
                  right: inherit;
                  left: inherit;
                  transform: none;
                  left: 250px;
                  top: 0;
                  display: block;
                }
              }

              >a {
                /* set this to the size of the arrows container */
                padding-right: 36px;
              }
            }

            a {
              color: var(--light-color);
              color: var(--menu-top-text-child);
              font-size: var(--menu-top-font-size-child);
            }

            &:hover,
            &:active,
            &:focus {

              /* background-color: red; */
              >a {
                background-color: var(--menu-top-bg-hover-child);
                /* color: rgb(from var(--light-color) r g b / 0.5); */
                color: var(--menu-top-text-hover-child);
              }
            }
          }

          .nav-dropdown-button {
            border-color: rgb(from var(--light-color) r g b / 0.5);
            position: absolute;
            top: 50%;
            padding-right: 10px;
            transform: translateY(-50%);

            .nav-expander {
              width: 8px;

              span {
                &:nth-child(1) {
                  top: 8px;
                  transform: rotate(-45deg);
                  transform-origin: right bottom;
                }

                &:nth-child(2) {
                  top: 8px;
                  transform: rotate(45deg);
                  transform-origin: right top;
                }
              }
            }
          }

          a {
            text-align: left;
            /* padding: 10px!important; */
            padding: 10px;
            color: var(--light-color);
            transition: color 0s;
          }


          /* Grandchildren */
          .sub-menu {
            /* background-color: var(--secondary-color); */
            background-color: var(--menu-top-bg-grandchild);

            a {
              font-size: var(--menu-top-font-size-grandchild);
              color: var(--menu-top-text-grandchild);
            }

            li {
              &:hover {
                a {
                  background-color: var(--menu-top-bg-hover-grandchild);
                  color: var(--menu-top-text-hover-grandchild);
                }
              }
            }
          }
        }

        /* .nav-dropdown-button {
          .nav-expander {
            display: none;
          }
        } */
        .duplicate-item {
          display: none;
        }

        >li.mega-menu {

          &:hover,
          &:active,
          &:focus {
            >a {
              /* border-bottom: 5px solid var(--secondary-color); */
              position: relative;
              /* top: 5px; */
              display: flex;
              /* height: calc(100% - 5px); */
              align-items: center;
              /* margin-bottom: 5px; */
            }

            >.sub-menu {
              /* display: flex; */
              /* transform: translate(-50vw); */
              transform: translate(0);
              opacity: 1;
            }
          }

          &:after {
            display: none;
          }

          .nav-dropdown-button {
            display: none;
          }

          >.sub-menu {
            padding: 20px calc(40px + (50vw - (var(--desktop) / 2)));
            width: 100vw;
            /* display: flex; */
            /* flex-wrap: wrap; */
            display: grid !important;
            grid-template-columns: repeat(5, 1fr);
            align-items: flex-start;
            /* display: none; */
            transform: translate(-200vw);
            opacity: 0;
            /* overflow: scroll; */
            /* scrollbar-width: none; */

            /* Full Screen Styles */
            @media (width >= 1280px) {
              padding: 20px calc(40px + (50vw - (var(--full) / 2)));
            }

            >li>a {
              /* Mega Menu Child Headings */
              font-size: var(--mega-menu-font-size-child);
              font-weight: var(--fw-bold);
              line-height: 1.25em;
            }

            li {
              padding-right: 0;

              &:after {
                display: none;
              }
            }

            /* a{
              color: var(--light-color);
              &:hover, &:active, &:focus {
                color: rgb(from var(--light-color) r g b / 0.8);
              }
            } */
            .sub-menu {
              /* reset styling grandchildren */
              position: relative;
              opacity: 1;
              visibility: visible;
              /* visibility: hidden; */
              width: 100%;
              top: 0 !important;
              left: 0 !important;
              right: inherit;
              transform: none;
              z-index: 50;
              background: none;
              background-color: var(--menu-top-bg-grandchild);

              /* transition: all .3s ease-in-out; */
              a {
                font-size: var(--mega-menu-font-size-grandchild);
                color: var(--menu-top-text-grandchild);
                padding-left: 30px;
              }

              li {
                transition: all .3s ease-in-out;

                &:hover {
                  background-color: var(--menu-top-bg-hover-grandchild);

                  a {
                    color: var(--menu-top-text-hover-grandchild);
                    background-color: transparent;
                  }
                }
              }
            }
          }
        }
      }

      /* End Basebuild */

      /* Top Menu Switching State to Fixed */
      .change-state {
        &.nav-bar.nav-relative.transition-top {
          transition: background-color 0s, top .3s;
        }

        .main-menu,
        &.menu-is-closed .main-menu {
          >li {
            background-color: var(--menu-top-fixed-bg-parent);

            /* transition: none; */
            /* &.transition-top-style {
              transition: all 0s;
              > a {
                transition: all 0s;
              }
            } */
            >a {
              color: var(--menu-top-fixed-text-parent);
              /* transition: none; */
            }

            &:hover {
              background-color: var(--menu-top-fixed-bg-hover-parent);

              >a {
                color: var(--menu-top-fixed-text-hover-parent);
              }
            }
          }
        }
      }

      .menu-wrap {
        .nav-extra-content {
          display: none;
        }

        .nav-close {
          display: none;
        }
      }
    }

    .nav-expander {

      /* Desktop Styles */
      @media (width >= 1024px) {
        display: none;
      }
    }
  }
}