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

header
  position: relative
  z-index: 4
  background-color: $color-primary-500

  &:after
    $gradientSize: 20px
    content: ''
    position: absolute
    left: 0
    bottom: -#{$gradientSize}
    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: 140px
      img
        width: 100%
        max-height: 70px

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

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

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

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

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


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

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


          &:hover
            a
              color: $color-secondary-300

          &.active
            a
              border-bottom: 1px solid $color-secondary-300
              color: $color-secondary-300
              //text-shadow: 0px 1px 2px rgba(255, 255, 255, 0.2)


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