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

header
  padding: 45px 0 110px
  position: relative
  background-color: $blue

  .grid-row
    overflow: visible

  .grid-col
    vertical-align: top

  .logo-container, nav
    width: column(22, 24)
    margin-left: column(1, 24)

  .logo-container
    +flex(space-between, flex-start)

    // Phone button
    .phone
      text-decoration: none
      color: white
      font-size: 0.75rem
      +flex(flex-start, center)
      width: 200px

      .icon
        +flex(center, center)
        width: 32px
        height: 32px
        border: 2px solid rgba($brown, 0.8)
        border-radius: 100%
        margin-right: 12px
        background-color: transparent
        transition: all 0.3s

        span
          position: relative
          //right: -1px
          +phenomena
          font-size: 0.75rem

      &:hover
        .icon
          background-color: $brown
          border-color: $brown


    // Main logo
    .logo
      width: calc(100% - 440px)
      max-width: 260px

      a
        width: 100%
        img
          width: 100%

    // Language selector
    .languages
      width: 200px
      +flex(flex-end, center)

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

        li
          text-align: center
          +order(5)
          margin-left: 5px
          a
            text-decoration: none

            span
              +flex(center, center)
              width: 37px
              height: 37px
              border: 2px solid transparent
              border-radius: 100%
              transition: border 0.2s
              &:before
                content: ''
                display: inline-block
                opacity: 0.6

            p
              margin: 5px 0 0
              +phenomena
              font-size: 0.8rem
              color: $lightGray
              opacity: 0.6


          &:hover
            a
              span
                border-color: rgba($brown, 0.5)

              p
                opacity: 0.8

          &.active
            a
              span
                border-color: $brown
                &:before
                  opacity: 1

              p
                opacity: 1

          &.nl
            +order(1)
            margin-left: 0
            a
              span
                &:before
                  +sprite(-30px 0, 25px, 25px)

          &.de
            a
              span
                &:before
                  +sprite(-56px 0, 25px, 25px)


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

  nav
    position: relative
    margin-top: 30px
    border-top: 1px solid $brown
    overflow: visible !important

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

      li
        font-size: 0.9rem

        +respond-to-width(1200)
          font-size: 0.75rem

        +respond-to-width(1080)
          font-size: 0.9rem
          line-height: 1.25
          text-align: center

        a
          position: relative
          display: inline-block
          padding: 30px 25px
          text-decoration: none
          color: $lightGray

          .wave
            +flex(center, center)
            position: absolute
            height: 8px
            width: 100%
            bottom: 15px
            left: 0

            svg
              width: 35px

              path
                fill: none
                stroke-miterlimit: 10
                stroke-dasharray: 60px
                stroke-dashoffset: 0
                transition: all 0.4s

              .main-wave
                stroke: transparent
                transition-delay: 0.2s

              .background-wave
                //stroke: $lightGray
                opacity: 0.5
                stroke: $lightBlue
                stroke-dashoffset: 60px
                transition-delay: 0s

          &:hover
            .wave
              svg
                .main-wave
                  stroke-dashoffset: -30px
                  transition-delay: 0s


                .background-wave
                  stroke-dashoffset: 30px


        &.active
          a
            .wave
              svg
                .background-wave
                  opacity: 1
                  stroke: white
                .main-wave
                  stroke: white

            &:hover
              .wave
                svg
                  .background-wave
                    transition-delay: 0.2s

  +respond-to-width(950)
    padding: 0
    height: 220px

    .grid-row
      display: none

  +respond-to-width(750)
    height: 168px