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

.hamburger-deluxe-style {
  @media (min-width: 1060px) {
    /* NOTE: verify 'notdevice' media translation */
    .not--device & {

      /* 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;
              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; (was @include font(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 {
  @media (min-width: 1060px) {
    /* NOTE: verify 'notdevice' media translation */
    .not--device & {
      .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,
      &.menu-is-closed .main-menu { /* main menu <ul> */
        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: var(--primary-alt); */
            /* 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); /* same as height of .main-menu */
              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;
        }

        /* a { Set baseline "a" styling -- reset
          @include font(15px, 1em); reset font-size for inline-block hack

          text-decoration: none;
          display: block;
          color: lightgreen; Set color for menu items
          &:hover,
          &:active,
          &:focus {
            background: 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); set to your own background color */
          /* border: 1px solid rgba(#000, .6); for visual purposes. can remove. */
          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;
              }
              &:hover, &:active, &:focus { /* show third level sub-menu */
                /* &: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 {
                padding-right: 36px; /* set this to the size of the arrows container */
              }
            }
            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-left: calc(40px + (50vw - (1060px / 2)));
            padding-right: calc(40px + (50vw - (1060px / 2)));
            padding-top: 20px;
            padding-bottom: 20px;
            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;

            @media (min-width: 1550px) {
              padding-left: calc(40px + (50vw - (1550px / 2)));
              padding-right: calc(40px + (50vw - (1550px / 2)));
              padding-top: 20px;
              padding-bottom: 20px;
            }

            > 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: #fff; remove
              &: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 {
    @media (min-width: 1060px) {
      display: none;
    }
  }
}