/*------------------------------------
  Headers
------------------------------------*/
.u-header {
  position: relative;
  left: 0;
  right: 0;
  width: 100%;
  @include px-to-rem(font-size, 13px);
  z-index: 101; // because ".u-carousel-indicators-v22 li.slick-active span, .u-carousel-indicators-v22--white li.slick-active span" has "z-index: 100"
  // transition: .2s ease;

  //
  // Positions

  // Position Absolute
  &--abs {
    &-top,
    &-bottom,
    &-top-2nd-screen {
      position: absolute;
    }
    &-top-2nd-screen {
      top: 100%;
      bottom: auto;
    }
    &-top {
      top: 0;
      bottom: auto;
    }
    &-bottom {
      top: auto;
      bottom: 0;

      .dropdown-menu {
        top: auto;
        bottom: 100%;

        margin-top: 0;
        margin-bottom: .125rem;
      }
    }
  }

  // Position Sticky
  &--sticky {
    &-top,
    &-bottom {
      position: fixed;
    }
    &-top {
      bottom: auto;
      top: 0;
    }
    &-bottom {
      top: auto;
      bottom: 0;

      .dropdown-menu {
        top: auto;
        bottom: 100%;
        margin-top: 0;
        margin-bottom: .125rem;
      }
    }
  }

  &--invisible {
    display: none;
  }

  &--moved-up {
    transform: translate3d(0, -100%, 0);
  }

  &--faded {
    opacity: 0;
    visibility: hidden;
  }

  &--untransitioned {
    transition: none !important;
  }

  &__section--hidden {
    position: relative;
  }

  &--floating {
    position: absolute;
    left: 0;
    right: 0;

    &.js-header-fix-moment {
      margin-top: 0 !important;

      // .navbar-brand {
      //   transform: scale3d(.85, .85, .85);
      // }

      .navbar {
        padding-left: 0;
        padding-right: 0;
      }
    }
  }

  &[data-header-fix-effect] {
    transition: .3s ease;
  }

  &-reduced--shift.js-header-change-moment {
    padding-top: 0 !important;
    padding-bottom: 0 !important;
  }

  &.js-header-fix-moment {
    position: fixed;
    top: 0;
    bottom: auto;
  }

}

.u-header__section {
  position: relative;
  z-index: 1;

  @for $i from 1 through 5 {
    &:nth-child(#{$i}) {
      z-index: 6 - $i;
    }
  }
}

.u-header__sections-container {
  position: relative;
  z-index: 1;
}

.u-header__logo {
  position: relative;
  z-index: 1;

  &-img {
    top: 0;
    left: 0;
    /*transition: .3s ease;*/
  }

  &-img:not(.u-header__logo-img--main) {
    position: absolute;
    opacity: 0;
  }
}

.dropdown-menu.u-dropdown--reverse-position {
  left: auto;
  right: 0;
}

//
// Colors

// BG Light
.js-header-change-moment.g-bg-white--shift {
  background-color: $g-color-white;
}
.js-header-change-moment.g-bg-light-semi-transparent--shift {
  background-color: rgba(255,255,255, .9);
}

// BG Dark
.js-header-change-moment.g-bg-black--shift {
  background-color: $g-color-black;
}
.js-header-change-moment.g-bg-dark-semi-transparent--shift {
  background-color: rgba($g-color-black, .9);
}

// BG Primary
.js-header-change-moment.g-bg-primary--shift {
  background-color: $g-color-primary;
}
.js-header-change-moment.g-bg-primary-semi-transparent--shift {
  background-color: rgba($g-color-primary, .9);
}

// Header Light
.u-header__section--light {
  & .navbar-brand,
  & .navbar-toggler,
  &--shift.js-header-change-moment .navbar-brand,
  &--shift.js-header-change-moment .navbar-toggler {
    color: rgba($g-color-main, 1);
  }
  & .navbar-brand:focus,
  & .navbar-brand:hover,
  & .navbar-toggler:focus,
  & .navbar-toggler:hover,
  &--shift.js-header-change-moment .navbar-brand:focus,
  &--shift.js-header-change-moment .navbar-brand:hover,
  &--shift.js-header-change-moment .navbar-toggler:focus,
  &--shift.js-header-change-moment .navbar-toggler:hover {
    color: rgba($g-color-main, 1);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link {
    color: rgba($g-color-main, 1);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:focus,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:hover,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:focus,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:hover {
    color: rgba($g-color-main, 1);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.disabled,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.disabled {
    color: rgba($g-color-main, .5);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
  & .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active {
    color: rgba($g-color-primary, 1);
  }
  & .navbar-toggler,
  &--shift.js-header-change-moment .navbar-toggler {
    border-color: rgba($g-color-main, .3);
  }
  & .navbar-toggler-icon,
  &--shift.js-header-change-moment .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba($g-color-main, .5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  & .navbar-text,
  &--shift.js-header-change-moment .navbar-text {
    color: rgba($g-color-main, .7);
  }
}

// Header Dark
.u-header__section--dark,
.u-header__section--primary {
  & .navbar-brand,
  & .navbar-toggler,
  &--shift.js-header-change-moment .navbar-brand,
  &--shift.js-header-change-moment .navbar-toggler {
    color: $g-color-white;
  }
  & .navbar-brand:focus,
  & .navbar-brand:hover,
  & .navbar-toggler:focus,
  & .navbar-toggler:hover,
  &--shift.js-header-change-moment .navbar-brand:focus,
  &--shift.js-header-change-moment .navbar-brand:hover,
  &--shift.js-header-change-moment .navbar-toggler:focus,
  &--shift.js-header-change-moment .navbar-toggler:hover {
    color: $g-color-white;
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link {
    color: rgba($g-color-white, .8);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:focus,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:hover,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:focus,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link:hover {
    color: $g-color-white;
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.disabled,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.disabled {
    color: rgba($g-color-white, .5);
  }
  & .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
  & .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
  & .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .open > .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .active > .nav-link,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.open,
  &--shift.js-header-change-moment .navbar-nav:not([class*="u-main-nav-v"]) .nav-link.active {
    color: $g-color-white;
  }
  & .navbar-toggler,
  &--shift.js-header-change-moment .navbar-toggler {
    border-color: rgba($g-color-white, .3);
  }
  & .navbar-toggler-icon,
  &--shift.js-header-change-moment .navbar-toggler-icon {
    background-image: url("data:image/svg+xml;charset=utf8,%3Csvg viewBox='0 0 32 32' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath stroke='rgba($g-color-white, .5)' stroke-width='2' stroke-linecap='round' stroke-miterlimit='10' d='M4 8h24M4 16h24M4 24h24'/%3E%3C/svg%3E");
  }
  & .navbar-text,
  &--shift.js-header-change-moment .navbar-text {
    color: rgba($g-color-white, .7);
  }
}

.navbar {
  & > .container {
    position: relative;
  }
}

@media all and (min-width: $g-sm) {
  .u-header {
    // Position Absolute
    &--abs {
      &-top--sm,
      &-bottom--sm,
      &-top-2nd-screen--sm {
        position: absolute;
      }
      &-top-2nd-screen--sm {
        top: 100%;
      }
      &-top--sm {
        bottom:  auto;
        top: 0;
      }
      &-bottom--sm {
        top: auto;
        bottom: 0;
      }
    }

    // Position Sticky
    &--sticky {
      &-top--sm,
      &-bottom--sm {
        position: fixed;
      }
      &-top--sm {
        bottom: auto;
        top: 0;
      }
      &-bottom--sm {
        top: auto;
        bottom: 0;
      }
    }

    &--floating--sm {
      position: absolute;
      left: 0;
      right: 0;

      &.js-header-fix-moment {
        margin-top: 0 !important;

        // .navbar-brand {
        //   transform: scale3d(.85, .85, .85);
        // }

        .navbar {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}

@media all and (min-width: $g-md) {
  .u-header {
    // Position Absolute
    &--abs {
      &-top--md,
      &-bottom--md,
      &-top-2nd-screen--md {
        position: absolute;
      }
      &-top-2nd-screen--md {
        top: 100%;
      }
      &-top--md {
        bottom: auto;
        top: 0;
      }
      &-bottom--md {
        top: auto;
        bottom: 0;
      }
    }

    // Position Sticky
    &--sticky {
      &-top--md,
      &-bottom--md {
        position: fixed;
      }
      &-top--md {
        bottom: auto;
        top: 0;
      }
      &-bottom--md {
        top: auto;
        bottom: 0;
      }
    }

    &--floating--md {
      position: absolute;
      left: 0;
      right: 0;

      &.js-header-fix-moment {
        margin-top: 0 !important;

        // .navbar-brand {
        //   transform: scale3d(.85, .85, .85);
        // }

        .navbar {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}

@media all and (min-width: $g-lg) {
  .u-header {
    // Position Absolute
    &--abs {
      &-top--lg,
      &-bottom--lg,
      &-top-2nd-screen--lg {
        position: absolute;
      }
      &-top-2nd-screen--lg {
        top: 100%;
      }
      &-top--lg {
        bottom: auto;
        top: 0;
      }
      &-bottom--lg {
        top: auto;
        bottom: 0;
      }
    }

    // Position Sticky
    &--sticky {
      &-top--lg,
      &-bottom--lg {
        position: fixed;
      }
      &-top--lg {
        bottom: auto;
        top: 0;
      }
      &-bottom--lg {
        top: auto;
        bottom: 0;
      }
    }

    &--floating--lg {
      position: absolute;
      left: 0;
      right: 0;

      &.js-header-fix-moment {
        margin-top: 0 !important;

        // .navbar-brand {
        //   transform: scale3d(.85, .85, .85);
        // }

        .navbar {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}

@media all and (min-width: $g-xl) {
  .u-header {
    // Position Absolute
    &--abs {
      &-top--xl,
      &-bottom--xl,
      &-top-2nd-screen--xl {
        position: absolute;
      }
      &-top-2nd-screen--xl {
        top: 100%;
      }
      &-top--xl {
        bottom: auto;
        top: 0;
      }
      &-bottom--xl {
        top: auto;
        bottom: 0;
      }
    }

    // Position Sticky
    &--sticky {
      &-top--xl,
      &-bottom--xl {
        position: fixed;
      }
      &-top--xl {
        bottom: auto;
        top: 0;
      }
      &-bottom--xl {
        top: auto;
        bottom: 0;
      }
    }

    &--floating--xl {
      position: absolute;
      left: 0;
      right: 0;

      &.js-header-fix-moment {
        margin-top: 0 !important;

        // .navbar-brand {
        //   transform: scale3d(.85, .85, .85);
        // }

        .navbar {
          padding-left: 0;
          padding-right: 0;
        }
      }
    }
  }
}

@media all and (max-width: #{$g-xl}-1) {
  .navbar-expand-xl > .container,
  .navbar-expand-xl > .container-fluid {
    justify-content: flex-start;
  }

  .navbar-expand-xl .navbar-collapse {
    width: 100%;
    order: 10;
  }
}

@media all and (max-width: #{$g-lg}-1) {
  .navbar-expand-lg > .container,
  .navbar-expand-lg > .container-fluid {
    justify-content: flex-start;
  }

  .navbar-expand-lg .navbar-collapse {
    width: 100%;
    order: 10;
  }
}

@media all and (max-width: #{$g-md}-1) {
  .navbar-expand-md > .container,
  .navbar-expand-md > .container-fluid {
    justify-content: flex-start;
  }

  .navbar-expand-md .navbar-collapse {
    width: 100%;
    order: 10;
  }
}

@media all and (max-width: #{$g-sm}-1) {
  .navbar-expand-sm > .container,
  .navbar-expand-sm > .container-fluid {
    justify-content: flex-start;
  }

  .navbar-expand-sm .navbar-collapse {
    width: 100%;
    order: 10;
  }
}