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

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

  &::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: column(10,12)

    // Main logo
    .logo
      display: inline-block
      width: 70px
      margin-right: 8%
      padding: 33px 0
      img
        width: 100%

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




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

.nav
  position: relative
  flex: auto


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


.nav__item
  flex: 0 0 auto

  & + &
    margin-left: 3.5%

  &:last-child
    margin-left: 7.5%


.nav__link
  position: relative
  display: block
  padding: 11px 18px
  font-size: 0.8rem
  line-height: 1.2
  color: #EFF1ED
  text-decoration: none
  transition: opacity 0.3s

  &::after
    position: absolute
    content: ''
    opacity: 0
    height: 1px
    width: 0
    bottom: 7px
    left: 16px
    background-color: #ffe2cc
    transition: all 200ms ease-out
    pointer-events: none

  &:hover, &.is-active
    position: relative
    opacity: 0.6
    transition: all 250ms ease-out

    &::after
      width: calc(100% - 2*(16px))
      opacity: 1

  &.is-active
    opacity: 1


.nav__link--boxed
  border: 1px solid #ffe2cc
  border-radius: 6px
  overflow: hidden

  &::after
    height: 200%
    width: 150%
    left: -200%
    bottom: -50%
    z-index: -1
    opacity: 0.2
    border-radius: 50%
    transform: rotate(17deg)
    transform-origin: center center

  &:hover
    opacity: 1

    &::after
      left: -25%
      width: 150%
      opacity: 0.15