/**
 * header wagtail - CSS
 *
 * @link    https://joseflorez.co
 * @license For open source use: MIT
 * @author  Jose Florez https://joseflorez.co
 * @version 1.0.0
 *
 * See usage examples at https://joseflorez.co/
 */

/********************************************
Start Header
 */
.opacity {
  &.active {
    position: fixed;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    z-index: 998;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, .5);
  }
}

header {
  display: none;
  position: fixed !important;
  background-color: #fff;
  z-index: 999;
  padding-top: 15px;
  padding-bottom: 15px;
  left: 0;
  right: 0;

  &.active {
    display: block;

    .container {
      display: flex;
      justify-content: space-between;
      box-sizing: border-box;

      .brand {
        .logo {
          color: rgba(0, 0, 0, .9);
          text-decoration: none;
          display: inline-block;
          padding-top: .3125rem;
          padding-bottom: .3125rem;
          margin-right: 1rem;
          font-size: 1.25rem;
          line-height: inherit;
          white-space: nowrap;
        }

        .toggle {
          display: none;
          cursor: pointer;

          @media (max-width: 992px) {
            display: inline-block;

          }
        }
      }

      nav {
        display: flex;
        ul {
          display: flex;
          align-items: center;
          margin: 0;
          padding: 0;

          li {
            margin: 5px 10px;
            list-style: none;

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

            a {
              text-transform: uppercase;
              letter-spacing: 2px;
              padding-left: 15px !important;
              padding-right: 15px !important;
              font-family: 'Open Sans', sans-serif;
              font-size: 12px;
              color: #757575;
              text-decoration: none;
              cursor: pointer;
            }

            &.dropdown {
              ul {
                display: none;

                &.active {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  position: absolute;
                  z-index: 99;
                  background-color: #fff;
                  padding: 20px;
                  box-shadow: 0 4px 8px rgba(134, 151, 168, 0.1);
                }

                li {
                  margin: 10px auto;
                }
              }
            }
          }
        }
      }

      @media (max-width: 992px) {
        flex-direction: column;

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

          &.active {
            margin-top: 20px;
            display: flex;
            align-items: center;
            justify-content: center;

            ul {
              flex-wrap: wrap;
              justify-content: center;

              li {
                margin-top: 20px;
              }
            }
          }
        }
      }
    }
  }

  &.top {
    transform: translateX(100%);
    display: block;
    width: 400px;
    height: 100%;
    right: 0;
    left: auto;
    top: 0;
    box-shadow: 10px 10px 100px rgba(0, 0, 0, 0.2);

    nav {
      ul {
        li {
          a {
            cursor: pointer;
          }
        }
      }
    }

    &.activeTop {
      transform: translateX(0%);

      .toggle {
        left: 30px !important;

        i {
          font-size: 20px;
          color: #000000 !important;
        }
      }
    }

    .container {
      display: flex;
      flex-direction: column;

      .brand {
        width: 100%;
        text-align: center;
        padding: 50px 0;

        .logo {
          font-size: 30px;
          text-decoration: none;
          color: rgba(0, 0, 0, .9);
          white-space: nowrap;
        }

        .toggle {
          position: fixed;
          left: -50px;
          top: 30px;
          cursor: pointer;

          i {
            font-size: 20px;
            color: #ffffff;
          }
        }
      }

      nav {
        ul {
          display: flex;
          justify-content: center;
          flex-direction: column;
          margin: 0;
          padding: 0;

          li {
            margin: 20px auto;
            list-style: none;

            a {
              text-transform: uppercase;
              letter-spacing: 2px;
              padding-left: 15px !important;
              padding-right: 15px !important;
              font-family: 'Open Sans', sans-serif;
              font-size: 12px;
              color: #757575;
              text-decoration: none;
            }

            &.dropdown {
              ul {
                display: none;

                &.active {
                  display: flex;
                  flex-direction: column;
                  justify-content: center;
                  align-items: center;
                  padding: 20px 0;
                  box-shadow: 0 4px 8px rgba(134, 151, 168, 0.1);
                }

                li {
                  margin: 10px auto;
                }
              }
            }
          }
        }
      }
    }
  }


  &:after {
    @include line-title;
    bottom: 0;
  }
}

/*
End Header
 **************************************/