/* Menu mobile */

@media (max-width: 991px) {
  body {
    &:has(.menu.open) {
      overflow: hidden;
      max-height: 100vh;

      main.dis_none,
      footer.dis_none {
        display: none !important;
      }
    }
  }

  .header {
    padding: 15px 0;

    .header__main {
      &:has(.menu.open) {
        .header__logo {
          img {
            z-index: 2;
            position: relative;
          }

          &:after {
            content: "";
            opacity: 1;
            background: var(--dark-blue);
            width: 110vw;
            height: 100px;
            position: absolute;
            top: -35px;
            left: -20px;
            z-index: 1;
            transform: translateX(0);
            pointer-events: none;
          }
        }

        .menu_mobile {
          z-index: 9999999999;
          position: relative;
          width: 50px;
          height: 50px;
          pointer-events: all;

          .menu__toggle {
            opacity: 0;
          }

          &:before,
          &:after {
            content: "";
            position: absolute;
            top: 25px;
            left: 0;
            display: inline-block;
            width: 35px;
            height: 3px;
            background: var(--light-blue);
            z-index: 99999999999999999999999999999999;
            border-radius: var(--border-radius);
            pointer-events: all;
          }

          &:before {
            transform: rotate(45deg);
          }

          &:after {
            transform: rotate(-45deg);
          }
        }
      }

      .menu {
        flex-direction: column;
        left: 0;
        padding-bottom: 24px;
        position: fixed;
        overflow: auto;
        transition: transform 0.3s ease;
        width: 100%;
        z-index: 9;
        top: 0;
        transform: translateX(100%);

        &.open {
          display: flex;
          width: 100vw;
          height: 100vh;
          padding-bottom: 0px;
          transform: translateX(0px);

          &:has(> .menu__main > li.sub-menu-open) {
            background: var(--dark-blue);

            .menu__main {
              justify-content: flex-start;
            }
          }
        }

        .menu__main {
          background: var(--dark-blue);
          margin: 0;
          padding: 150px 12px 60px 12px;
          display: flex;
          flex-direction: column;
          justify-content: center;
          min-height: 100vh;
          overflow-x: hidden;
          overflow-y: scroll;

          li {
            list-style: none;
            position: relative;
            z-index: 1;

            &.menu-search {
              justify-content: start;
            }

            &.pll-parent-menu-item {
              margin-top: 20px;
            }

            &:before,
            &:marker {
              display: none;
            }

            &>a {
              img {
                display: none;
              }
            }
          }

          &>.menu-item {
            transition: var(--transition);

            &:not(:last-child) {
              margin-bottom: 20px;
            }

            &.menu-item-has-children {
              scroll-margin-top: 120px;

              &>a {
                display: flex;
                justify-content: space-between;
                align-items: center;

                &:after {
                  content: "";
                  background-image: url(../img/triangle.svg);
                  width: 12px;
                  height: 12px;
                  display: inline-block;
                  background-size: cover;
                  background-repeat: no-repeat;
                  transform: rotate(90deg);
                  transition: var(--transition);
                }

                span {
                  margin-right: 20px;
                }
              }

              &.sub-menu-open {
                border: 0px;
                margin-bottom: 0 !important;

                &>.sub-menu {
                  max-height: unset;
                  opacity: 1;
                  transform: translateY(0px);
                  padding: 20px 0 20px 0;
                  margin: 15px 0;
                  border-bottom: 1px solid var(--hover);
                  position: relative;
                  overflow: visible;

                  &:after {
                    content: "";
                    background: var(--hover);
                    width: 130vw;
                    height: 101%;
                    position: absolute;
                    top: 0;
                    left: -60px;
                    z-index: 0;
                  }

                  &>li {
                    &:not(:last-child) {
                      border-bottom: 1px solid var(--dark-blue);
                      padding-bottom: 15px;
                      margin-bottom: 15px;
                    }

                    &>a {
                      display: flex;
                      flex-direction: column;

                      span {
                        color: var(--white);

                        &:not(.desc) {
                          font-weight: var(--bold);
                          padding-bottom: 10px;
                        }
                      }
                    }
                  }
                }

                &>a {
                  &:after {
                    transform: rotate(-90deg);
                  }
                }
              }
            }

            &>a {
              color: var(--white);
              font-size: 24px;
              font-weight: var(--bold);

              span {
                color: var(--white);
              }
            }

            &>.sub-menu {
              max-height: 0;
              opacity: 0;
              transition:
                transform 0.3s ease,
                opacity 0.3s ease;
              transform: translateY(30px);
              overflow: hidden;

              &>.menu-item {

                &.img_left,
                &.img_right {
                  display: none;
                }

                &>.sub-menu {
                  padding: 0;

                  &>.menu-item {
                    &:first-child {
                      padding-top: 10px;
                    }

                    &:not(:last-child) {
                      padding-bottom: 10px;
                    }

                    &>a {
                      span {
                        color: var(--white);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .menu__toggle {
        display: block;
        cursor: pointer;
        width: 50px;
        height: 50px;
        filter: brightness(0) saturate(100%) invert(62%) sepia(61%) saturate(424%) hue-rotate(335deg) brightness(101%) contrast(101%);
      }
    }
  }
}

/* Menu */

.header {
  position: fixed;
  transition: var(--transition);
  z-index: 1000;
  width: 100%;

  &:not(.scrolling) {
    top: 20px;

    .header__logo {
      transition: none !important;

      .logo {
        display: block;
      }

      .logo_alt {
        display: none;
      }

      img {
        transition: none !important;
      }
    }
  }

  &:not(.scrolling) {
    @media (min-width: 992px) {
      .menu {
        .menu__main {
          &>.menu-item {
            &:not(.pll-parent-menu-item) {
              &:hover {

                &>a,
                &>span {
                  color: var(--hover) !important;
                  border: 1px solid rgba(255, 255, 255, 0.33);
                }
              }
            }
          }
        }
      }
    }
  }

  &.scrolling {
    background: rgba(255, 255, 255, 0.92);
    backdrop-filter: blur(24px);

    .header__logo {
      .logo {
        display: none;
      }

      .logo_alt {
        display: block;
      }
    }

    .menu {
      background: transparent !important;

      .menu__main {
        &>.menu-item {
          &.pll-parent-menu-item {
            &>a {
              color: var(--dark-blue);

              &:after {
                filter: brightness(0) saturate(100%) invert(11%) sepia(96%) saturate(3151%) hue-rotate(238deg) brightness(84%) contrast(135%) !important;
              }
            }
          }

          &:not(.pll-parent-menu-item) {

            &>a,
            &>span {
              color: var(--dark-blue);
            }

            &:hover,
            &.current-menu-item {

              &>a,
              &>span {
                color: var(--hover) !important;
                border: 1px solid var(--hover) !important;
              }
            }
          }
        }

        .menu-search {
          &.open {
            .search {
              form {
                input[type="text"] {
                  border: 1px solid var(--dark-blue);
                }
              }
            }
          }
        }
      }
    }
  }

  .header__main {
    align-items: center;
    display: flex;
    justify-content: space-between;
    transition: all 0.3s;
    width: 100%;

    @media (min-width: 992px) {
      padding: 24px 15px;

      &:has(.menu__main .menu-search.open) {
        .header__logo {
          max-width: 150px !important;
        }
      }
    }

    &.container {
      display: flex;
      align-items: center;
      justify-content: space-between;

      .header__logo {
        align-self: center;
        display: block;
        position: relative;
        width: 220px;
        min-height: 48px;
        z-index: 9999;
        cursor: pointer;

        @media (min-width: 992px) {
          width: unset;
          min-width: 192px;
        }

        &:after {
          opacity: 0;
          transition: var(--transition);
          transform: translateX(100%);
        }

        @media (min-width: 992px) {
          &:hover {
            img {
              opacity: 0.7;
            }
          }
        }
      }

      .cta {
        &:before {
          background-image: url("../img/contact_expert.svg") !important;
        }
      }
    }

    .menu-search {
      display: flex;
      flex-direction: row-reverse;
      margin-left: 10px;
      cursor: pointer;

      * {
        pointer-events: all;
      }

      &.open {
        .search {
          width: 100%;
          opacity: 1;
        }

        .togglesearch {
          width: 0;
          opacity: 0;
          transform: translateX(-20px) scale(-1, 1);
        }
      }

      .search {
        width: 0;
        opacity: 0;
        transition: var(--transition);

        form {
          display: flex;
          align-items: center;

          input[type="text"] {
            background: var(--white) !important;
            border-radius: 50px !important;
            height: 36px !important;
            padding: 0px 15px !important;
            font-size: 14px !important;
            font-family: var(--main-font) !important;

            &:focus,
            &:focus-visible {
              border: 0px !important;
              outline: 1px solid var(--peach) !important;
            }
          }
        }

        button[type="submit"] {
          margin: 0 !important;
          background-color: var(--peach) !important;
          border-radius: 50px !important;
          transform: scale(-1, 1) !important;
          display: grid !important;
          place-items: center !important;
          height: 32px !important;
          border: 0px !important;
          width: 32px !important;
          margin-left: -35px !important;

          img {
            filter: brightness(400) !important;
          }
        }
      }

      .togglesearch {
        background-color: var(--peach);
        padding: 7px 8px 1px 8px;
        border-radius: 50px;
        transform: translateX(0px) scale(-1, 1);
        display: grid;
        place-items: center;
        width: fit-content;
        max-height: 32px;
        pointer-events: all;
        z-index: 10;
        cursor: pointer;

        img {
          filter: brightness(200);
        }
      }
    }

    @media (min-width: 992px) {
      .menu {
        flex-direction: row;
        overflow: visible;
        gap: 24px;
        margin-top: 0;
        padding: 0 0 0 16px;
        height: 48px;
        display: flex;
        position: static;

        &.open i {
          transform: rotate(180deg);
        }

        &.open .sub-menu {
          border-color: var(--light-blue);
          max-height: 500px;
        }

        .menu__main {
          position: static;
          display: flex;
          margin: 0;
          padding: 0;
          align-items: center;
          order: -1;
          overflow: visible;
          gap: 5px;

          li {
            list-style: none;
          }

          &>li {
            &:before {
              display: none;
            }
          }

          &>.menu-item {
            overflow: hidden;
            height: fit-content;
            width: auto;
            position: unset;
            padding: 12px 0;

            &.current-menu-item {
              &>a {
                border: 1px solid var(--hover) !important;
                color: var(--hover) !important;
              }
            }

            &.pll-parent-menu-item {
              position: relative;

              &>a {
                padding: 8px !important;
              }

              .sub-menu {
                opacity: 0;
                max-height: 0;
              }

              &:hover {
                overflow: visible;

                .sub-menu {
                  opacity: 1;
                  max-height: fit-content;
                }
              }

              .sub-menu {
                width: fit-content;
                padding: 3px 3px 3px 4px;
                border-radius: var(--border-radius);
                position: absolute;
                top: 15px;
                right: 22px;
                background: var(--white);

                &>li {

                  &:hover,
                  &.current-lang {
                    &>a {
                      color: var(--hover) !important;
                    }
                  }

                  &>a {
                    font-size: 14px;
                    color: var(--dark);
                    font-weight: var(--bold);
                  }
                }
              }
            }

            &>a,
            &>span {
              padding: 8px 16px;
              align-items: center;
              transition: all 0.3s;
              color: #fff;
              font-family: var(--main-font);
              font-size: 14px;
              line-height: 16px;
              font-weight: var(--medium);
              border: 1px solid transparent;
              border-radius: 50px;
              transition: var(--transition);
              white-space: nowrap;
            }

            &.menu-item-has-children {
              &>a {
                display: flex;
                justify-content: space-between;
                align-items: center;
                position: relative;

                &:after {
                  content: "";
                  background-image: url(../img/chevron_down.svg);
                  width: 12px;
                  height: 12px;
                  display: inline-block;
                  background-size: cover;
                  background-repeat: no-repeat;
                  transition: var(--transition);
                  filter: brightness(0) saturate(100%) invert(100%) sepia(0%) saturate(0%) hue-rotate(268deg) brightness(103%) contrast(101%);
                  margin-left: 5px;
                }
              }
            }

            &:not(.pll-parent-menu-item) {
              &:hover {
                overflow: visible;

                .sub-menu {
                  opacity: 1;
                  max-height: unset;
                  visibility: visible;
                }
              }

              &>.sub-menu {
                visibility: hidden;
                max-height: 0;
                opacity: 0;
                margin: 0;
                padding: 0;
                position: absolute;
                overflow: hidden;
                background-color: var(--white);
                /* left: -343px; */
                top: 100%;
                display: grid;
                padding: 32px 48px;
                grid-template-columns: repeat(2, minmax(auto, 328px));
                width: max-content;
                border-radius: var(--border-radius);
                /* box-shadow: 0 4px 32px 0 rgba(0, 0, 0, 0.3); */
                box-shadow: 0px 30px 30px 0px rgba(0, 0, 0, 0.16);
                left: 46%;
                transform: translateX(-50%);

                @media (min-width: 992px) {
                  gap: 47px 30px;
                }

                @media (min-width: 1200px) {
                  gap: 30px;
                }

                &:has(> .img_left) {
                  @media (min-width: 992px) {
                    grid-template-columns: 230px repeat(2, minmax(auto, 250px));
                  }

                  @media (min-width: 1200px) {
                    grid-template-columns: 270px repeat(2, minmax(auto, 328px));
                  }
                }

                &:has(> .img_right) {
                  @media (min-width: 992px) {
                    grid-template-columns: repeat(2, minmax(auto, 250px)) 230px;
                  }

                  @media (min-width: 1200px) {
                    grid-template-columns: repeat(2, minmax(auto, 328px)) 270px;
                  }
                }

                &.four_col {
                  grid-template-columns: repeat(4, minmax(auto, 190px));

                  &:has(> .img_left, > .img_right) {
                    @media (min-width: 992px) {
                      grid-template-columns: 230px repeat(3,
                          minmax(auto, 160px));
                    }

                    @media (min-width: 1200px) {
                      grid-template-columns: 200px repeat(4,
                          minmax(auto, 190px));
                    }

                    @media (min-width: 1400px) {
                      grid-template-columns: 270px repeat(4,
                          minmax(auto, 190px));
                    }
                  }
                }

                &>.menu-item {
                  min-height: 50px;

                  &:not(:has(> .sub-menu)) {
                    &:hover {
                      a {
                        color: var(--light-blue) !important;

                        span {
                          color: var(--light-blue) !important;
                        }
                      }
                    }
                  }

                  &>a {
                    display: flex;
                    flex-direction: column;
                    gap: 12px;
                    transition: var(--transition);

                    &:has(+ .sub-menu) {
                      span {
                        &:not(.desc) {
                          border-bottom: 1px solid var(--dark-grey);
                          padding-bottom: 12px;
                        }
                      }
                    }

                    span {
                      color: var(--dark-blue);
                      transition: var(--transition);

                      &:not(.desc) {
                        font-weight: var(--bold);

                        &:has(+ .desc) {
                          border-bottom: 1px solid var(--dark-grey);
                          padding-bottom: 12px;
                        }
                      }
                    }

                    img {
                      width: 20px;
                      height: 20px;
                      object-fit: contain;
                    }
                  }

                  &:has(> .sub-menu) {
                    &>.sub-menu {
                      padding: 12px 0 0 0;

                      &>li {
                        display: flex;
                        align-items: center;
                        transition: var(--transition);

                        &:not(:last-child) {
                          margin-bottom: 16px;
                        }

                        &>a {
                          color: var(--dark-blue);
                          transition: var(--transition);

                          span {
                            color: var(--dark-blue);
                            transition: var(--transition);
                          }
                        }

                        &:hover {
                          a {
                            color: var(--light-blue);

                            span {
                              color: var(--light-blue);
                            }
                          }
                        }
                      }
                    }
                  }

                  &.img_left {
                    left: -50px;
                    grid-row: span 2;
                  }

                  &.img_right {
                    grid-row: 1 / 3;
                    grid-column: 3;
                  }

                  &.img_left,
                  &.img_right {
                    height: calc(100% + 68px);
                    position: relative;
                    top: -34px;
                    width: 280px;
                    background-repeat: no-repeat;
                    background-size: cover;
                    display: flex;
                    align-items: end;
                    padding: 40px;
                    border: 0px;
                    z-index: 1;
                    background-position: right;
                    pointer-events: none;

                    @media (min-width: 1200px) {
                      width: 250px;
                    }

                    @media (min-width: 1400px) {
                      width: 320px;
                    }

                    &:after {
                      content: "";
                      background: linear-gradient(0deg,
                          rgba(0, 20, 60, 1) 0%,
                          rgba(0, 20, 60, 0) 100%);
                      position: absolute;
                      top: 0;
                      left: 0;
                      width: 100%;
                      height: 100%;
                      z-index: 0;
                    }

                    &>a {
                      font-family: var(--title-font);
                      color: var(--white);
                      font-size: 36px;
                      line-height: 44px;
                      font-style: normal;
                      z-index: 2;

                      &>span {
                        color: var(--white);
                      }
                    }
                  }
                }
              }
            }
          }
        }
      }

      .menu_mobile,
      .menu__toggle {
        display: none;
      }
    }
  }
}

@media (min-width: 992px) {
  @keyframes fadeInFromTop {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }

    to {
      opacity: 1;
      transform: translateY(0);
    }
  }

  .menu .menu__main>.menu-item:hover>.sub-menu {
    animation: fadeInFromTop 0.3s ease-out;
  }
}