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

header
  position: relative
  z-index: 4
  background-color: $darkblue

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

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

    // Main logo
    .logo
      display: inline-block
      width: 140px
      img
        width: 100%

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

    nav
      +flex(flex-end, center)
      position: relative
      flex: 1 1 auto

      ul
        +flex(flex-end, center)
        list-style: none
        margin: 0
        padding: 0
        width: calc(100% - 3vw)

        li
          margin-right: 6%
          white-space: nowrap

          a
            display: inline-block
            padding: 42px 0
            font-size: 0.9rem
            font-family: $fontPrimary
            line-height: 1.2
            color: $light
            text-decoration: none
            transition: opacity 0.3s

          +respond-to-width(1024)
            margin-right: 5%

            +respond-to-width(900)
              a
                font-size: 0.8rem

            +respond-to-width(830)
              margin-right: 4%
              a
                font-size: 0.75rem


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

          &:hover
            a
              opacity: 0.6

          &.active
            a
              position: relative
              font-weight: bold()
              opacity: 1

              &::after
                position: absolute
                left: 0
                bottom: 32px
                content: ""
                display: block
                width: 100%
                height: 2px
                border-radius: 2px
                background: linear-gradient(45deg, $blue 0%, $red 100%)

      .language-menu
        width: 100px


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