@import "mixins";

body {
  header {
    background-color: var(--head-background-color, #ffffff);
    display: flex;
    flex-direction: row;
    flex-wrap: nowrap;
    align-content: center;
    justify-content: center;
    align-items: center;

    .ftm-header-content-wrapper {
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      /*justify-content: flex-start;*/
      justify-content: space-between;
      align-items: center;
      width: 100%;
      max-width: var(--head-wapper-max-width, 1140px);
      position: relative;

      .ftm-mobile-menu-trigger-wrapper {
        display: flex;
        transition: display 0.1s ease-in-out;
        margin-right: 20px;
        margin-left: 15px;
        align-items: center;
        flex-direction: row;
        justify-content: center;

        button#ftm-mobile-menu-trigger {
          rotate: 0deg;
          transition: rotate 0.1s ease-in-out;
          background-color: transparent;
          margin: 0;
          padding: 0;
          border: none;
          width: 40px;
          height: 40px;
          background-image: url("/app/themes/ftm-base/assets/images/burger-menu.svg");
          background-size: contain;

          &.show {
            rotate: 90deg;
            transition: rotate 0.1s ease-in-out, display 0.1s ease-in-out;
          }
        }
      }

      .ftm-site-logo-wrapper {
        display: block;
        width: 100%;
        max-width: 130px;
        padding: 5px 0px;

        > a {
          > img.ftm-site-logo {
            width: 100%;
          }
        }
      }

      nav#site-navigation {
        display: none;
        position: absolute;
        left: 0;
        top: 69px;
        background-color: #000;
        width: 100%;
        height: auto;
        z-index: 10;

        &.show {
          display: block;
        }

        ul#menu-gs-main-menu.menu {
          display: flex;
          flex-direction: column;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: center;
          align-items: center;
          column-gap: 1em;
          padding: 0;

          li.menu-item {
            --ftm-mobile-menu-text-color: #fff;
            color: var(--head-nav-text-color, #ffffff);
            position: relative;
            padding: 5px 10px;
            text-align: left;
            width: 100%;
            box-sizing: border-box;
            margin: 5px 0px;
            list-style: none;

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

              &::after {
                content: "";
                width: 40px;
                height: 40px;
                display: block;
                position: absolute;
                left: calc(100% - 50px);
                top: 0px;
                mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                mask-repeat: no-repeat;
                mask-position: 55%;
                -webkit-mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                -webkit-mask-repeat: no-repeat;
                -webkit-mask-position: 55%;
                background-color: var(--ftm-mobile-menu-text-color, #fff);
                rotate: 90deg;
              }

              &:hover {
                background-image: unset;
              }
            }

            > a {
              text-decoration: none;
              color: var(--head-nav-text-color, #ffffff);
              display: block;
              &:hover {
                color: var(--head-nav-hover-color, #ffffff);
              }
            }

            .sub-menu {
              position: relative;
              top: 0px;
              left: unset;
              display: block;
              margin: 0px;
              opacity: 0;
              display: none;
              transition: opacity 0.3s ease-in-out, visibility 0.3s ease-in-out;
              background-color: #ffffff;
              z-index: 10;
              padding: 5px;
              width: 100%;
              height: 0px;

              > li.menu-item {
                color: var(--first_sub-nav-text-color, #000000);
                padding: 8px 5px;
                list-style: none;

                &.menu-item-has-children {
                  color: var(--first_sub-nav-text-color, #000000);
                  background-image: url("/app/themes/ftm-base/assets/images/sub_menu_icon.svg");
                  background-position: 98% center;
                  background-repeat: no-repeat;
                  background-size: 6px;
                  position: relative;
                  background-image: unset;

                  &::after {
                    content: "";
                    width: 10px;
                    height: 16px;
                    display: block;
                    position: absolute;
                    left: calc(100% - 20px);
                    top: 5px;
                    mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                    mask-repeat: no-repeat;
                    mask-position: 98%;
                    -webkit-mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                    -webkit-mask-repeat: no-repeat;
                    -webkit-mask-position: 98%;
                    background-color: var(--first_sub-nav-text-color, #000000);
                    rotate: 90deg;
                  }

                  &:hover {
                    background-image: unset;
                  }
                }

                > a {
                  color: var(--first_sub-nav-text-color, #000000);
                  &:hover {
                    color: var(--first_sub-nav-hover-color, #000000);
                  }
                }


                //MOBILE SECOND LEVEL MENU
                &.subshow{
                  ul.sub-menu{
                    display: block;
                    position: relative;
                    top: 0px;
                    left: 0px;
                    height: 100%;
                    width: 100%;
                    opacity: 1;
                    background-color: var(--second_sub-nav-background-color, #000000);
                    padding:  0px;
                    margin:  0px;

                    > li.menu-item {
                      > a{
                        color: var(--second_sub-nav-text-color, #000000);
                        padding:  0px 0px 0px 5px;

                        &:hover {
                          color: var(--second_sub-nav-hover-color, #000000);
                        }
                      }
                    }
                  }
                }
              }

              //SECOND LEVEL MENU
              .sub-menu {
                display: none;
                top: auto;
                left: 0;
                width: 100%;
                max-width: unset;
                padding: 0;
                background-color: inherit;
                box-shadow: unset;

                > li.menu-item {
                  color: var(--second_sub-nav-text-color, #000000);

                  > a {
                    color: var(--second_sub-nav-text-color, #000000);
                    &:hover {
                      color: var(--second_sub-nav-hover-color, #000000);
                    }
                  }
                }
              }
            }

            &.show > .sub-menu {
              opacity: 1;
              display: block;
              height: auto;
              padding-left: 10px;
              padding-right: 0px;
              margin-top: 5px;
            }
          }
        }
      }

      .ftm-state-filter {
        display: flex;
        width: 100%;
        max-width: 200px;
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: flex-end;
        align-items: center;
        position: absolute;
        right: 10px;

        > a {
          text-decoration: none;
          color: #fff;
          margin: 0px 10px;
        }

        button.current_state_btn {
          display: flex;
          background: transparent;
          color: #fff;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-start;
          align-items: center;
          column-gap: 10px;
          border: none;
          text-decoration: underline;
          font-size: 15px;

          span.state_name {
            display: none;
          }

          span.state_code {
            display: block;
          }

          > img {
            width: 35px;
          }
        }
      }
    }

    ul,ol{
      li{
        list-style: none;
      }
    }
  }
}

@include xxs {
  body {
    header {
      .ftm-header-content-wrapper {
        .ftm-mobile-menu-trigger-wrapper {
          display: flex;
          transition: display 0.1s ease-in-out;

          button#ftm-mobile-menu-trigger {
            rotate: 0deg;
            transition: rotate 0.1s ease-in-out;

            &.show {
              rotate: 90deg;
              transition: rotate 0.1s ease-in-out, display 0.1s ease-in-out;
            }
          }
        }

        .ftm-site-logo-wrapper {
          display: block;
          width: 100%;
          max-width: 130px;
          padding: 5px 0px;

          > a {
            > img.ftm-site-logo {
              width: 100%;
            }
          }
        }

        nav#site-navigation {
          display: none;
          position: absolute;
          left: 0;
          top: 69px;
          background-color: #000;
          width: 100%;
          height: auto;
          z-index: 10;

          &.show {
            display: block;
          }

          ul#menu-gs-main-menu.menu {
            display: flex;
            flex-direction: column;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            column-gap: 1em;
            padding: 0;
            li.menu-item {
              --ftm-mobile-menu-text-color: #fff;
              color: var(--head-nav-text-color, #ffffff);
              position: relative;
              padding: 5px 10px;
              text-align: left;
              width: 100%;
              box-sizing: border-box;
              margin: 5px 0px;

              &.menu-item-has-children {
                position: relative;
                &::after {
                  content: "";
                  width: 10px;
                  height: 16px;
                  display: block;
                  position: absolute;
                  left: calc(100% - 30px);
                  top: 5px;
                  mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                  mask-repeat: no-repeat;
                  mask-position: 98%;
                  -webkit-mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                  -webkit-mask-repeat: no-repeat;
                  -webkit-mask-position: 98%;
                  background-color: var(--ftm-mobile-menu-text-color, #fff);
                  rotate: 90deg;
                }

                &:hover {
                  background-image: unset;
                }
              }

              > a {
                text-decoration: none;
                color: var(--ftm-mobile-menu-text-color, #fff);
                &:hover {
                  color: var(--ftm-mobile-menu-text-color, #fff);
                }
              }

              .sub-menu {
                position: relative;
                top: 0px;
                left: unset;
                display: block;
                margin: 0px;
                opacity: 0;
                display: none;
                transition: opacity 0.3s ease-in-out,
                  visibility 0.3s ease-in-out;
                background-color: #ffffff;
                z-index: 10;
                padding: 5px;
                width: 100%;
                height: 0px;

                > li.menu-item {
                  color: var(--first_sub-nav-text-color, #000000);
                  padding: 8px 5px;

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

                    &::after {
                      content: "";
                      width: 10px;
                      height: 16px;
                      display: block;
                      position: absolute;
                      left: calc(100% - 20px);
                      top: 5px;
                      mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                      mask-repeat: no-repeat;
                      mask-position: 98%;
                      -webkit-mask-image: url(/app/themes/ftm-base/assets/images/sub_menu_icon.svg);
                      -webkit-mask-repeat: no-repeat;
                      -webkit-mask-position: 98%;
                      background-color: var(
                        --first_sub-nav-text-color,
                        #000000
                      );
                      rotate: 90deg;
                    }

                    &:hover {
                      background-image: unset;
                    }
                  }

                  > a {
                    color: var(--first_sub-nav-text-color, #000000);
                    &:hover {
                      color: var(--first_sub-nav-hover-color, #000000);
                    }
                  }
                }

                //SECOND LEVEL MENU
                .sub-menu {
                  display: none;
                  top: auto;
                  left: 0;
                  width: 100%;
                  max-width: unset;
                  padding: 0;
                  background-color: inherit;
                  box-shadow: unset;

                  > li.menu-item {
                    color: var(--second_sub-nav-text-color, #000000);

                    > a {
                      color: var(--second_sub-nav-text-color, #000000);
                      &:hover {
                        color: var(--second_sub-nav-hover-color, #000000);
                      }
                    }
                  }
                }
              }

              &.show,
              .subshow > .sub-menu {
                opacity: 1;
                display: block;
                height: auto;
                padding-left: 10px;
                padding-right: 10px;
                margin-top: 5px;
              }
            }
          }
        }

        .ftm-state-filter {
          display: flex;
          width: 100%;
          max-width: 200px;
          flex-direction: row;
          flex-wrap: nowrap;
          justify-content: flex-end;
          align-items: center;
          position: absolute;
          right: 10px;

          button.current_state_btn {
            display: flex;
            background: transparent;
            color: #fff;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            column-gap: 10px;
            border: none;
            text-decoration: underline;
            font-size: 15px;

            span.state_name {
              display: none;
            }

            span.state_code {
              display: block;
            }

            > img {
              width: 35px;
            }
          }
        }
      }
    }
  }
}

@include md {
  body {
    header {
      background-color: var(--head-background-color, #ffffff);
      display: flex;
      flex-direction: row;
      flex-wrap: nowrap;
      align-content: center;
      justify-content: center;
      align-items: center;

      .ftm-header-content-wrapper {
        display: flex;
        flex-direction: row;
        flex-wrap: nowrap;
        align-content: center;
        justify-content: flex-start;
        align-items: center;
        width: 100%;
        max-width: var(--head-wapper-max-width, 1140px);
        position: relative;

        .ftm-mobile-menu-trigger-wrapper {
          display: none;
        }

        .ftm-site-logo-wrapper {
          display: block;
          width: 100%;
          max-width: var(--head-logo-max-width, 150px);

          > a {
            > img.ftm-site-logo {
              width: 100%;
            }
          }
        }

        nav#site-navigation {
          display: block;
          position: relative;
          left: unset;
          top: unset;
          background-color: unset;
          width: 70%;
          z-index: 10;

          ul#menu-gs-main-menu.menu {
            display: flex;
            flex-direction: row;
            flex-wrap: nowrap;
            align-content: center;
            justify-content: center;
            align-items: center;
            column-gap: 1em;
            margin: 0px;
            padding: unset;

            > li.menu-item {
              min-height: 60px;
              display: flex;
              flex-direction: column;
              align-items: center;
              justify-content: center;

              > a {
                text-decoration: none;
                color: var(--head-nav-text-color, #ffffff);
                display: block;
                &:hover {
                  color: var(--head-nav-hover-color, #ffffff);
                }
              }
            }

            li.menu-item {
              color: var(--head-nav-text-color, #ffffff);
              position: relative;
              margin: 0px;
              width: unset;

              &.menu-item-has-children {
                position: relative;
                &::after {
                  display: none;
                }

                &:hover {
                  background-image: unset;
                }
              }

              > a {
                text-decoration: none;
                color: var(--head-nav-text-color, #ffffff);
                display: block;
                &:hover {
                  color: var(--head-nav-hover-color, #ffffff);
                }
              }

              > .sub-menu {
                &::before {
                  content: "";
                  position: absolute;
                  top: -10px;
                  display: block;
                  width: 0px;
                  height: 0px;
                  border-top: 0px solid transparent;
                  border-left: 5px solid transparent;
                  border-right: 5px solid transparent;
                  border-bottom: 10px solid white;
                }
              }
              .sub-menu {
                /* Styles for the submenu */
                position: absolute;
                top: 50%;
                left: 0;
                opacity: 0;
                visibility: hidden;
                transition: opacity 0.3s ease-in-out,
                  visibility 0.3s ease-in-out;
                width: var(--sub-menu-max-width, 300px);
                background-color: var(--first_sub-nav-background-color);
                z-index: 10;
                box-shadow: -1px 0px 8px -1px #cccccc;
                padding: 5px;

                > li.menu-item {
                  color: var(--first_sub-nav-text-color, #000000);
                  padding: 8px 5px;

                  &.menu-item-has-children {
                    position: relative;
                    color: var(--first_sub-nav-text-color, #000000);
                    background-image: url("/app/themes/ftm-base/assets/images/sub_menu_icon.svg");
                    background-position: 98% center;
                    background-repeat: no-repeat;
                    background-size: 6px;

                    &::after {
                      display: none;
                    }

                    &:hover {
                      background-image: url("/app/themes/ftm-base/assets/images/sub_menu_icon_hover.svg");
                    }
                  }

                  > a {
                    color: var(--first_sub-nav-text-color, #000000);
                    &:hover {
                      color: var(--first_sub-nav-hover-color, #000000);
                    }
                  }
                }

                //SECOND LEVEL MENU
                .sub-menu {
                  top: -5px;
                  left: calc(100% + 5px);
                  width: 100%;
                  max-width: var(--sub-menu-max-width, 300px);
                  background-color: var(--second_sub-nav-background-color);

                  &::before {
                    display: none;
                  }

                  > li.menu-item {
                    color: var(--second_sub-nav-text-color, #000000);
                    padding-left: 10px;

                    > a {
                      color: var(--second_sub-nav-text-color, #000000);
                      &:hover {
                        color: var(--second_sub-nav-hover-color, #000000);
                      }
                    }
                  }
                }
              }

              &:hover > .sub-menu {
                display: block;
                height: auto;
                opacity: 1;
                visibility: visible;
                margin-top: 20px;

                .sub-menu {
                  margin-top: 0px;
                  left: 100%;
                }
              }
            }
          }
        }

        .ftm-state-filter {
          display: flex;
          width: 100%;
          max-width: 200px;
          flex-direction: row;
          flex-wrap: nowrap;
          align-content: center;
          justify-content: flex-end;
          align-items: center;
          position: absolute;
          right: 0px;

          > a {
            text-decoration: none;
            color: #fff;
            margin: 0px 10px;
          }

          button.current_state_btn {
            display: flex;
            background: transparent;
            color: #fff;
            flex-direction: row;
            flex-wrap: nowrap;
            justify-content: flex-start;
            align-items: center;
            column-gap: 10px;
            border: none;
            text-decoration: underline;
            font-size: 15px;

            span.state_name {
              display: block;
            }

            span.state_code {
              display: none;
            }

            > img {
              width: 46px;
            }
          }
        }
      }
    }
  }
}
