/*==========================================================================
  Navigation / Header
  ========================================================================== */

header
  position: relative
  z-index: 4
  background-color: $purple
  padding: 10px 0

  //&:after
  //  $gradientSize: 20px
  //  content: ''
  //  position: absolute
  //  left: 0
  //  bottom: -#{$gradientSize}px
  //  right: 0
  //  display: block
  //  width: 100%
  //  height: $gradientSize
  //  background: linear-gradient($blackGradient)
  //  opacity: 0.4

  .grid-row
    padding: 0
    +flex(center, center)

    >.grid-col
      +flex(space-between, center)
      width: 100%

    // Main logo
    .logo
      display: inline-block
      width: 120px
      img
        width: 100%
        max-height: 68px

    /* Navigation
     ========================================================================== */

    nav
      position: relative
      +flex(flex-end, center)
      width: calc(100% - 140px)
      padding-left: 40px

      ul
        +flex(flex-end, center)
        list-style: none
        margin: 0
        padding: 0

        li
          margin-right: 45px

          a
            position: relative
            display: inline-block
            padding: 42px 0
            font-size: 0.8rem
            line-height: 1.2
            color: white
            text-decoration: none
            transition: opacity 0.3s

            &:before
              content: ''
              position: absolute
              bottom: 38px
              left: 0
              display: none
              width: 100%
              height: 1px
              background-color: $semiLightBlue

          +respond-to-width(1360)
            margin-right: 30px

            a
              +respond-to-width(1300)
                font-size: 0.7rem

              +respond-to-width(1150)
                font-size: 0.6rem

          &:last-of-type
            margin-right: 0

          &:hover
            a
              opacity: 0.6

          &.active
            a
              opacity: 1

            &:not(.nav-item--contact)
              a
                &:before
                  display: block

          &.nav-item--contact
            //margin-left: auto
            a
              border: 2px solid $semiLightBlue
              border-radius: 4px
              padding: 10px 20px
              transition: opacity 0.2s, background-color 0.2s, color 0.2s

              &:hover
                opacity: 1
                background-color: $semiLightBlue
                color: white

            &.active
              a
                background-color: $semiLightBlue
                color: $purple
                font-weight: 600

      .language-menu
        width: 100px

  +respond-to-width(1050)
    display: none