@if not-imported("import_once_func") { @import "import_once_func"; }
@if not-imported("framework") { @import "framework"; }

/*
 ------ HEADER ------
*/
$header-height-desktop: 50px;
$header-height-mobile: 50px;
#header {
  height: $header-height-desktop;
  position: fixed;
  left: 0;
  right: 0;
  top: 0;
  z-index: 10;
  @include transition(all 0.25s);

  > .inside {
    @include centered-1200;
    position: relative;
    z-index: 1;
  }

  + #container {
    padding-top: $header-height-desktop + 20px;
    height: 100vh;
  }

  body:not(.-mobile-menu-active) .hide& {
    @include transform(translate(0,-100%));
  }
  .scrolled& {
    background-color: $color-bg-secondary;
  }
}

#main-nav {
  position: absolute;
  right: 0;
  top: 0;
  &,
  .level_1 {
    height: $header-height-desktop;
  }
  .level_1 {
    display: flex;
    align-items: center;

    > li {
      flex: 1 0 0;
      padding: 0 60px 0 0;

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

      > {
        span,
        strong,
        a {
          font-size: font-size(18px);
          font-weight: 300;
          color: $color-nav;
          line-height: 1.5;
          position: relative;

          &:before {
            position: absolute;
            left: 50%;
            right: 50%;
            top: 100%;
            content: '';
            height: 2px;
            background-color: $color-bg-secondary;
            opacity: 0;
            visibility: hidden;
            @include transition(all 0.25s cubic-bezier(0,0,0,1));
          }

          &.trail,
          &.active {
            &:before {
              left: 0;
              right: 0;
              opacity: 1;
              visibility: visible;
            }
          }

          .scrolled & {
            color: $color-nav-invert;

            &:before {
              background-color: $color-bg-tertiary;
            }
          }
        }
        a {
          &:hover {
            &:before {
              left: 0;
              right: 0;
              opacity: 1;
              visibility: visible;
            }
          }
        }
      }
    }
  }
}

#nav-bar {

  .bar-logo {
    opacity: 0;
    visibility: hidden;
    position: absolute;
    left: 0;
    top: 5px;
    @include transition(all 0.25s);
    z-index: 1;

    .scrolled &,
    .-mobile-menu-active & {
      opacity: 1;
      visibility: visible;
    }
    .-mobile-menu-active & {
      top: 45px;
      left: 50%;
      @include transform(translate(-50%,-50%));
    }
  }

  .close {
    display: none;
  }

  @include for-tablet {
    .nav {
      position: fixed;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;
      background: rgba(#000, 30%);
      opacity: 0;
      visibility: hidden;
      @include transition(all 0.5s cubic-bezier(0.25, 1, 0.5, 1));

      .panel {
        position: absolute;
        top: 50%;
        left: 50%;
        background: rgba($color-bg-secondary, 95%);
        padding: 50px;
        @include box-sizing(border-box);
        @include transform(translate(-50%, -50%));
        max-width: 1200px;
        width: 80%;
        max-height: 90%;
        overflow-y: auto;
        font-size: font-size(20px);

        @include for-mobile {
          width: 100%;
          height: 100%;
          max-height: none;
          padding: 90px 55px 30px 55px;
          font-size: font-size(18px);
        }

        .close {
          cursor: pointer;
          position: absolute;
          right: 20px;
          top: 5px;
          line-height: 1;
          width: 40px;
          height: 40px;
          @include box-sizing(border-box);
          z-index: -1;
          text-align: center;
          display: flex;
          align-items: center;
          justify-content: center;
          font-size: 40px;
          background: url('data:image/svg+xml;utf8,%3Csvg width="100%" height="100%" viewBox="0 0 30 30" version="1.1" stroke="%23ffffff" stroke-width="2px" fill="none" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" style="fill-rule:evenodd;clip-rule:evenodd;"%3E%3Cpath d="M25,5L5,25"/%3E%3Cpath d="M25,25L5,5"/%3E%3C/svg%3E') no-repeat;

          span {
            visibility: hidden;
          }
        }
      }
    }
  }
}

#hamburger {
  z-index: 1;
  display: none;
  position: absolute;
  top: 0;
  right: 0;
  -webkit-transform: translate3d(0, 0, 0);
  -moz-transform: translate3d(0, 0, 0);
  -ms-transform: translate3d(0, 0, 0);
  -o-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  cursor: pointer;

  @include for-mobile {
    z-index: 0;
  }

  //display: block;
  width: 50px;
  height: 50px;
  //position: relative;


  .line {
    position: absolute;
    left: 5px;
    height: 2px;
    width: 40px;
    background: $color-text-invert;
    display: block;
    transition: 0.5s;
    transform-origin: center;
    //@include box-shadow(1px 1px 2px rgba(0,0,0,0.7));

    &:nth-child(1) { top: 14px; }
    &:nth-child(2) { top: 24px; }
    &:nth-child(3) { top: 34px; }
  }
  .-mobile-menu-active & {
    .line {
      //@include box-shadow(1px 1px 2px rgba(0,0,0,0));
      &:nth-child(1){
        transform: translateY(10px) rotate(-45deg);
      }
      &:nth-child(2){
        opacity:0;
      }
      &:nth-child(3){
        transform: translateY(-10px) rotate(45deg);
      }
    }
    ~ .nav {
      //display: block;
      opacity: 1;
      visibility: visible;
    }
  }
}
.-mobile-menu-active {
  #header {
    position: fixed !important;
    left: 0;
    right: 0;
    top: 0;
  }
  /*#main-nav {
    display: block;
  }*/
}

@include for-tablet {
  #main-nav {
    position: relative;
    height: auto;
    > .level_1 {
      display: block;
      padding: 0 15px;
      overflow-y: auto;
      /*position: absolute;
      top: 150px;
      bottom: 0;
      left: 0;
      right: 0;*/
      height: auto;


      > li {
        flex: none;
        padding: 0;
        text-align: center;

        > a,
        > span,
        > strong {
          color: $color-text-invert;
          line-height: 2.25;
          font-size: font-size(25px);

          &.active,
          &.trail {
            &:before {
              visibility: visible;
              opacity: 1;
              right: 35%;
              left: 35%;
            }
          }
        }

        &.submenu {
          ul {
            position: relative;
            display: block;
            overflow: hidden;
            height: 0;
            padding: 0;
          }

          .-mobile-menu-active & {
            &.trail,
            &:hover {
              ul {
                visibility: visible;
                opacity: 1;
                padding: 15px;
                height: auto;
              }
            }

            &:hover,
            &:focus-within {
              ul {
                visibility: visible;
                opacity: 1;
                padding: 15px;
                height: auto;
              }
            }
          }
        }
      }
    }
  }

  #hamburger {
    display: block;
  }
}