/*#############################################################################
# HEADER
#############################################################################*/

$header-breakpoint: 1124px;

header#main-header {
  min-height: 83px;

  .header-container {
    background-color: #fff;
    padding: 15px 30px;
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    z-index: 3;
    @include pie-clearfix;

    @include responsive($header-breakpoint) {
      padding: 20px 40px;
    }
  }

  // Main content blocks

  .sempli-logo {
    width: 100px;
    margin: 0;
    @include float(left);
    position: relative;
    z-index: 4;

    a {
      display: block;
      background: url("/assets/swl/interface/sempli-logo.svg") no-repeat 50% 50%;
      background-size: 100px 26px;
      height: 0;
      width: 100px;
      padding-top: 40px;
      margin: 0;
      overflow: hidden;
    }

    @include responsive($header-breakpoint) {
      width: 130px;
      margin: 0 40px 0 0;

      a {
        background-size: 116px 30px;
        width: 130px;
        padding-top: 40px;
      }
    }
  }

  ul.header-nav {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;

    @include responsive($header-breakpoint) {
      display: block;
      @include float(left);
      @include pie-clearfix;
    }

    > li {
      margin-right: 30px;
      position: relative;
      @include float(left);

      &:last-child {
        margin-right: 0;
      }

      // Dropdown Container
      ul.dropdown-container {
        background: #fff;
        list-style: none;
        margin: 0;
        padding: 0;
        padding: 15px 25px;
        visibility: hidden;
        opacity: 0;
        z-index: 1;
        position: absolute;
        top: 0;
        left: 0;
        @include border-radius(5px);
        @include box-shadow(
          2px 2px 25px 0 rgba(black, 0.1),
          0 0 0 1px rgba(black,0.015)
        );
        @include transform(translate(0, 50px));
        @include transition(
          opacity 0.3s cubic-bezier(.7, 0, .175, 1) 0s,
          transform 0.3s cubic-bezier(.7, 0, .175, 1) 0s
        );

        &::after {
          content: "";
          display: block;
          border-style: solid;
          border-width: 0 8px 8px 8px;
          border-color: transparent transparent #ffffff transparent;
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: 20px;
          z-index: 2;
          @include transform(translateY(-100%));
        }

        &::before {
          content: "";
          display: block;
          border-style: solid;
          border-width: 0 9px 9px 9px;
          border-color: transparent transparent rgba(black,0.025) transparent;
          width: 0;
          height: 0;
          position: absolute;
          top: 0;
          left: 19px;
          z-index: 1;
          @include transform(translateY(-100%));
        }

        li {
          line-height: 30px;
          margin-bottom: 10px;

          &:last-child {
            margin-bottom: 0;
          }

          // LINK ITEM WITH ICON
          a.link-item {
            &.with-icon {
              display: grid;
              grid-template-columns: 40px 1fr;
              grid-template-rows: 20px 1fr;
              grid-column-gap: 20px;
              grid-row-gap: 5px;
              height: auto;
              padding: 15px;
              line-height: initial;
              white-space: normal;
              @include border-radius(5px);

              img.link-item-icon,
              picture.link-item-icon {
                grid-column: 1;
                grid-row: 1 / 3;
                align-self: center;
                display: block;
                width: 40px;
              }

              span.link-item-label {
                grid-column: 2;
                grid-row: 1;
                color: $color-text;
                font-weight: 900;
              }

              span.link-item-description {
                grid-column: 2;
                grid-row: 2;
                font-size: rem-calc(14px);
              }

              &:hover {
                background: #f5f6fa;
              }
            }
          }

          // Coming Soon / Disabled
          &.disabled {
            a.link-item {
              &.with-icon {
                img.link-item-icon {
                  opacity: 0.5;
                  @include filter(grayscale(100%));
                }

                span.link-item-label {
                  color: $color-secondary;
                }

                span.link-item-description {
                  color: $color-secondary;
                }
              }
            }
          }
        }

        // Dropdown Specific
        &.products {
          width: 480px;

          & > li {
            // margin-bottom: 25px;

            &:last-child {
              margin: 0;
            }
          }
        }
      }

      // With Dropdown State
      &.with-dropdown {
        &:hover {
          ul.dropdown-container {
            visibility: visible;
            opacity: 1;
            z-index: 2;
            @include transform(translate(0, 40px));
          }
        }

        > a.link-item {
          padding-right: 15px;

          &::after {
            content: "";
            display: block;
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 4px 0 4px;
            border-color: $color-secondary-dark transparent transparent transparent;
            position: absolute;
            top: 50%;
            right: 0;
            @include transform(translateY(-50%));
          }

          &:hover {
            &::after {
              border-width: 0 4px 5px 4px;
              border-color: transparent transparent $color-text transparent;
            }
          }
        }
      }
    }
  }

  ul.header-nav,
  .mobile-nav ul.links-group {
    li {
      a.link-item {
        span.coming-soon {
          background-color: $color-primary;
          color: #ffffff;
          font-size: rem-calc(10px);
          font-weight: 900;
          text-transform: uppercase;
          letter-spacing: 1px;
          margin-left: 3px;
          padding: 3px 8px;
          @include border-radius(3px);
        }
      }

      // Coming Soon / Disabled
      &.disabled {
        a.link-item {
          span.coming-soon {
            background-color: #00C8E1;
          }

          &:hover {
            background: transparent;
            cursor: no-drop;
          }
        }
      }
    }
  }

  ul.header-ctas {
    display: none;
    list-style: none;
    margin: 0;
    padding: 0;

    @include responsive($header-breakpoint) {
      display: block;
      @include float(right);
      @include pie-clearfix;
    }

    li {
      margin-right: 30px;
      @include float(left);

      &:last-child {
        margin-right: 0;
      }
    }

    a.button, button.button {
      margin: 0;
    }
  }

  a.link-item {
    display: block;
    color: $color-secondary-dark;
    font-weight: 400;
    line-height: 40px;
    height: 40px;
    white-space: nowrap;

    &:hover {
      color: $color-text;
    }

    // Active State
    // &.active {
    //   color: $color-text;
    //   border-bottom: 2px solid $color-text;
    // }
  }

  // Mobile Navigation
  .mobile-nav {
    @include responsive($header-breakpoint) {
      display: none;
    }
  }

  input#burger {
    opacity: 0;
  }

  input#burger + label {
    position: absolute;
    top: 25px;
    right: 30px;
    height: 20px;
    width: 15px;
    z-index: 1001;

    span {
      position: absolute;
      width: 100%;
      height: 2px;
      top: 50%;
      margin-top: -1px;
      left: 0;
      display: block;
      background: $color-secondary;
      transition: 0.5s;
      @include border-radius(2px);

      &:nth-child(2) {
        @include transform(translateY(-50%));
      }

      &:first-child {
        top: 3px;
      }

      &:last-child {
        top: 15px;
      }
    }
  }

  label:hover {
    cursor: pointer;
  }

  input#burger:checked + label {
    span {
      opacity: 0;
      top: 50%;
    }
    span:first-child {
      opacity: 1;
      transform: rotate(405deg);
    }
    span:last-child {
      opacity: 1;
      transform: rotate(-405deg);
    }
  }

  input#burger ~ nav {
    background: white;
    padding-top: 35px;
    width: 100%;
    height: 100px;
    transition: 0.5s;
    transition-delay: 0.5s;
    overflow: hidden;
    opacity: 0;
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;

    .links-group-wrapper {
      padding: 20px 0;

      &.action-buttons {
        display: flex;
        align-items: center;
        flex-direction: column !important;
      }

      &:last-child {
        border: none;
      }
    }

    .nav-title {
      text-align: center;
      opacity: 0;
      transition: 0.5s;
      transition-delay: 0s;
      margin: 0 0 10px;
    }

    ul {
      text-align: center;
      list-style: none;
      margin: 0;
      padding: 0;

      > li {
        opacity: 0;
        transition: 0.5s;
        transition-delay: 0s;

        a.button, button.button {
          display: block;
          margin: 10px 20px 0;
        }

        a.link-item {
          line-height: 30px;
          height: 30px;
        }
      }
    }
  }

  input#burger:checked ~ nav {
    height: 100%;
    opacity: 1;
    transition-delay: 0s;
    .nav-title {
      opacity: 1;
      transition-delay: 0.5s;
    }
    ul {
      > li {
        opacity: 1;
        transition-delay: 0.75s;
      }
    }
  }

  @include responsive-max(1000px){
    min-height: 70px;
  }
}

/*=============== HEADER & NAV SEMPLI 2.0 ===============*/
.header {
  position: fixed;
  width: 100%;
  top: 0;
  background-color: #fff;
  z-index: 2;
}

.nav-container {
  position: relative;
  height: 3.5rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-inline: 1.5rem;

  @media screen and (min-width: 1023px) {
    height: calc(3.5rem + 1rem);
    column-gap: 2rem;
    display: flex;
  }

  .nav-logo {
    width: 100px;

    @media screen and (min-width: 1023px) {
      width: 150px;
      margin-left: 15px;
    }
  }
}

.hidden-toggle {
  z-index: -1 !important;
}

.show-toggle {
  z-index: 1 !important;
}

.hidden-close {
  z-index: -1 !important;
}

.show-close {
  z-index: 1 !important;
}

.nav-toggle,
.nav-close {
  z-index: 1;
  display: inline-flex;
  font-size: 1.25rem;
  color: #434448;
  cursor: pointer;
}

.nav-list {
  background-color: #f7f8fb;
  border-top-left-radius: 20px;
  border-top-right-radius: 20px;
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
  display: flex;
  flex-direction: column;
  text-align: center;

  @media screen and (max-width: 1023px) {
    gap: 1rem;
  }

  @media screen and (min-width: 1023px) {
    background-color: #fff;
    max-width: 800px;
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 10px;
  }

  .dropdown-item {
    width: 100%;

    @media screen and (max-width: 1023px) {
      min-height: max-content;
    }

    @media screen and (min-width: 1023px) {
      min-width: min-content;
      max-width: max-content;
    }

    .nav-link {
      display: flex;
      text-align: center;
      justify-content: space-between;
      align-items: center;
      transition: background-color 0.3s;
      transition: color 0.3s;

      &:hover {
        color: #4335f9;
      }

      @media screen and (max-width: 1023px) {
        padding: 1.25rem 1.5rem !important;
      }
    }
  }
}

.nav-close {
  width: calc(100% - 40px);
  display: flex;
  justify-content: space-between;
  position: absolute;
  top: 1rem;
}

.nav-logo-menu-mobile {
  width: 100px;
}

/*=============== DROPDOWN ===============*/
.dropdown-custom-title-payments {
  display: flex;
  gap: 10px;
}

.span-soon {
  pointer-events: none;
  background-color: #4d4cfc;
  color: #fff;
  font-size: .625rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 1px;
  margin-left: 3px;
  padding: 3px 8px;
  border-radius: 30px;
}

.dropdown-button {
  cursor: pointer;
  padding: 10px 10px;

  @media screen and (min-width: 1023px) {
    column-gap: 0.25rem;
  }
}

.dropdown-arrow {
  display: flex;
  align-self: flex-end;
  font-size: 1rem;
  font-weight: initial;
  transition: transform 0.4s;

  @media screen and (min-width: 1023px) {
    display: none;
  }

  @media screen and (max-width: 1023px) {
    display: initial;
  }
}

.dropdown-group,
.dropdown-list {
  display: grid;
}

.dropdown-group {
  row-gap: 0.2rem;
}

.dropdown-container {
  width: 100%;
  margin: 0 auto;
  background-color: #f7f8fb;
  height: 0;
  overflow: hidden;
  transition: height 0.4s;

  @media screen and (max-width: 1023px) {
    border: 1px solid #f7f8fb;
    border-radius: 20px;
    width: 90%;
  }

  @media screen and (min-width: 1023px) {
    position: absolute;
    height: max-content;
    width: max-content;
    max-width: 450px;
    border-radius: 10px;
    background-color: transparent;
    transition: height 0.4s, opacity 0.3s;
    pointer-events: none;
    opacity: 0;
  }

  .dropdown-content {
    display: grid;
    row-gap: 1.75rem;

    @media screen and (max-width: 1023px) {
      border-radius: 20px;
      margin: 0 auto;
      width: 100%;
    }

    @media screen and (min-width: 1023px) {
      padding: 20px;
      margin: 10px;
      border-radius: 10px;
      background-color: #fff;
      row-gap: 1.5rem;
      box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.3);
    }
  }

  .links-container {
    display: flex;
    flex-direction: column;
    align-items: center;

    @media screen and (max-width: 1023px) {
      height: max-content;
      min-height: max-content;
      gap: 1rem;
    }

    .dropdown-link-a {
      width: 100%;
      padding: 15px;

      &:hover {
        color: #1414ea;
      }

      @media screen and (max-width: 1023px) {
        border-radius: 20px;
        background-color: #fff;
      }
    }
  }
}

.dropdown-title {
  font-size: 0.813rem;
  font-weight: 600;

  @media screen and (min-width: 1023px) {
    width: 100%;
    display: flex;
    text-align: left;
  }

  @media screen and (max-width: 1023px) {
    width: 100%;
    display: flex;
    text-align: left;
  }
}

.dropdown-custom-title {
  font-size: 0.813rem;
  font-weight: 600;
  display: flex;
  text-align: left;
}

.dropdown-list {
  row-gap: 0.25rem;
}

.dropdown-icon-link {
  display: none;

  @media screen and (min-width: 1023px) {
    display: unset;
    font-size: 24px;
    padding: 5px 10px 5px 0px;
  }
}

.dropdown-link {
  font-size: 0.813rem;
  font-weight: 500;
  transition: color 0.3s;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 10px 0px;

  &:hover {
    color: #1414ea;
  }

  @media screen and (min-width: 1023px) {
    width: 100%;
  }
}

.dropdown-link-texts {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}

.dropdown-link-content {
  display: flex;
  align-items: center;

  @media screen and (max-width: 1023px) {
    padding: 10px;
    border-radius: 20px;
    background-color: #fff;
  }
}

.show-dropdown .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-item:hover .dropdown-arrow {
  transform: rotate(180deg);
}

.dropdown-space-top {
  margin-top: 40px;

  @media screen and (min-width: 1023px) {
    margin-top: 0px;
  }
}

.nav-button-link {
  display: inline-block;
  color: #4335f9 !important;

  @media screen and (max-width: 1023px) {
    width: 100%;
    padding-left: 15px;
    display: flex;
    align-items: center;
    gap: 10px;
    color: #434448;
    font-weight: 600;
  }
}

.nav-icon-link {
  display: none;

  @media screen and (max-width: 1023px) {
    display: initial;
    font-size: 28px;
    animation: change-icon-color 9s infinite;
  }
}

.dropdown-description {
  width: 100%;
  display: flex;
  text-align: left;
}

@keyframes change-icon-color {
  0%, 100% {
    color: #4335f9;
  }
  16.67% {
    color: #3F3D56;
  }
  33.33% {
    color: #4335f9;
  }
  50% {
    color: #3F3D56;
  }
  66.67% {
    color: #4335f9;
  }
  83.33% {
    color: #3F3D56;
  }
}

@media screen and (max-width: 1023px) {
  .nav-menu {
    position: fixed;
    top: -150%;
    left: 0;
    background-color: #fff;
    width: 100%;
    box-shadow: 0 1px 16px hsla(210, 55%, 24%, 0.1);
    padding-block: 3.5rem 2rem;
    display: flex;
    flex-direction: column;
    overflow: auto;
    transition: top 0.4s;
    height: 100vh;
    padding: 70px 20px;
  }

  .nav-menu::-webkit-scrollbar {
    width: 0.5rem;
  }

  .nav-menu::-webkit-scrollbar-thumb {
    background-color: hsl(220, 12%, 70%);
  }

  .dropdown-item-title {
    font-weight: 600;
  }

  .nav-button-login {
    margin: 0 auto;
    width: 80%;
  }

  .button-width {
    width: 100%;
  }

  .show-menu {
    top: 0;
  }

  .dropdown-group-container {
    display: flex;
    flex-direction: column;
    gap: 1rem;
  }

  .nav-buttons {
    padding: 30px 10px;
    display: flex;
    flex-direction: column;
    row-gap: 3rem;
    background-color: #f7f8fb;
    border-top-left-radius: 0px;
    border-top-right-radius: 0px;
    border-bottom-left-radius: 20px;
    border-bottom-right-radius: 20px;
  }

  .nav-link-with-icon {
    display: flex;
    align-items: center;
    gap: 10px;
  }
}

@media screen and (min-width: 1023px) {
  .nav-toggle,
  .nav-close {
    display: none;
  }

  .nav-menu {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
  }

  .dropdown-pointer-event {
    pointer-events: none;
  }

  .nav-buttons {
    display: flex;
    flex-direction: row;
    align-items: center;
    gap: 2rem;
  }

  .dropdown-item:hover > .dropdown-container {
    opacity: 1;
    pointer-events: initial;
    cursor: initial;
  }
}
/*=============== END HEADER & NAV SEMPLI 2.0 ===============*/