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

/**
 * Logo and burger container
 * Ratio = 1 : 2
 *
 * 1. Applying a very large border radius to create round bottom (50% doesn't work here)
 */
.navigation-drip
  position: fixed
  top: 0
  left: 0
  z-index: 100

  width: column(1)
  max-width: $gridMaxWidth / 14
  height: columnVw(2)
  max-height: $gridMaxWidth / 7

  background: $pastelBlue
  border-radius: 0 0 500px 500px /* 1 */

  .logo
    display: block
    width: 50%
    margin: 25%

    .landscape
      display: none
    .portrait
      width: 100%

  // Add a square container at the bottom to center the button
  .burger-container
    +position(absolute, null null 0 0)
    width: 100%
    padding-bottom: 100%
    border-radius: 50%

  // White button containing the burger icon
  .burger-button
    +position(absolute, 25% null null 25%)
    width: 50%
    padding-bottom: 50%
    border-radius: 50%
    background: #fff
    cursor: pointer

    // The burger icon
    svg
      +position(absolute, 36% null null 30%)
      width: 40%
      fill: $blue
      overflow: hidden
      +transition(fill 200ms ease-out)

      html.ie &
        top: 0

      .line1,
      .line2,
      .line3
        +transition(width 200ms ease-out)

    &:hover
      svg
        fill: $black

        .line2
          width: 60%
        .line3
          width: 70%

  // Align bar to the top over the full width
  +respond-to-width($smGridBreakpoint)
    width: 100%
    max-width: none
    height: 60px
    max-height: none

    background: $pastelBlue
    border-radius: 0

    .burger-container
      width: 60px
      height: 60px
      padding-bottom: 0
      border-radius: 50%

    .burger-button
      top: 10px
      left: 10px
      padding-bottom: 0
      width: 40px
      height: 40px

    .logo
      margin: 10px auto
      width: 124px
      .landscape
        display: block
      .portrait
        display: none

/* Main navigation
  ========================================================================== */

// Close navigation
.close
  display: none
  +position(fixed, 0 0 null null )
  z-index: 510
  width: 60px
  height: 60px
  cursor: pointer
  &:after
    content: ''
    +position(absolute, 25px 25px null null )
    +sprite(-80px -40px)
    width: 10px
    height: 10px

  .navigation-is-open &
    display: block

/*
 * White plane on the right side
 *
 * 1. Don't use vw for it will include the scroll bar in its calculations
 */
nav.navigation-main
  position: fixed
  top: 0
  right: 0
  z-index: 500
  transform: translate3d(100%,0,0)

  width: 50% /* 1 */
  height: 100vh
  padding: 10vh column(1)

  background: #fff
  color: $blue



  // List
  ul
    position: relative
    display: flex
    flex-direction: column
    justify-content: space-between
    height: 60vh
    padding: 0
    margin: 0
    list-style: none

  li

    a
      text-decoration: none
      +transition(color 200ms ease-out)

    &.active > a
      text-decoration: line-through

    &:not(.active) a:hover
        color: $brightBlue

    // Links in main navigation
    & > a
      display: block
      color: $blue
      font-size: 1.4rem
      font-weight: semibold()
      line-height: 1

    /* Services sub list
      ========================================================================== */

    // Links in services
    & > ul
      display: inline-block
      width: 50%
      height: auto
      margin-top: columnVw(.38333 / 2)

      li
        padding-bottom: 10px

      a
        display: block
        color: $lightGrey
        font-size: 1.1rem
        font-weight: light()

    &.offer
      position: absolute
      top: 0
      right: 0

      .button
        font-size: 1rem
        line-height: 45px

  // Lower part of the navigation
  footer
    display: flex
    flex-direction: column
    justify-content: center
    height: 30vh

    .footer-content
      display: flex
      flex-direction: row
      justify-content: space-between
      align-items: center

    svg.logo-web-branding-agency
      width: column(2,5)
      fill: #D5DCE0

    .jobs
      position: relative
      display: inline-block
      padding: 15px 20px
      border-radius: 10px
      border: 2px solid $blue
      text-align: right
      line-height: 1.2
      color: #96A6B2
      background-color: transparent
      transition: background-color 0.2s
      text-decoration: none

      strong
        color: $darkBodyText

      .jobs-amount
        position: absolute
        z-index: 3
        right: -14px
        top: -10px
        width: 26px
        height: 26px
        border-radius: 14px
        @include flex(center, center)
        color: white
        font-size: 0.8rem
        line-height: 1
        font-weight: bold


        &:after
          content: ''
          position: absolute
          z-index: -1
          left: 0
          top: 0
          display: block
          width: 100%
          height: 100%
          border-radius: 14px
          background-color: $red
          transform: scale3d(1,1,1)
          transition: all 0.2s

      &:hover
        background-color: rgba($blue, 0.05)

        .jobs-amount
          &:after
            transform: scale3d(1.15, 1.15, 1)

  // Responsive navigation plane
  +respond-to-width($lgGridBreakpoint)
    width: column(8)

  +respond-to-width($mdGridBreakpoint)
    width: column(10)

  /* Mobile view
    ========================================================================== */

  +respond-to-width($smGridBreakpoint)
    padding: 0
    width: column(12)
    height: 100vh
    overflow-y: scroll
    -webkit-overflow-scrolling: touch /* 1: to add smooth scrolling to fixed element */

    // Main list
    ul
      justify-content: flex-start
      height: auto

    // Main items
    li:not(.offer)
      a
        display: block
        padding: 20px
        font-size: 1.1rem
        border-bottom: 1px solid #eaeaea

      &:not(.active) a:hover
        color: $blue

    // List item containing offer button
    li.offer
      position: relative
      padding: 20px

    // Sub list
    li > ul
      display: none

    // Footer
    footer
      display: block

      .footer-content
        display: block
        padding: 0 20px

      .jobs
        padding: 20px
        text-align: left

    svg.logo-web-branding-agency
      display: none

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

.navigation-overlay-container
  position: fixed
  z-index: 499
  top: 0
  left: 0

  .drip
    position: fixed
    top: -100vh
    left: 0

    width: 100vw
    height: 100vh

    background: $blue /* Old browsers */
    background: -moz-linear-gradient(top, $brightBlue 0%, $blue 100%) /* FF3.6-15 */
    background: -webkit-linear-gradient(top, $brightBlue 0%,$blue 100%) /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(to bottom, $brightBlue 0%,$blue 100%) /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    opacity: .8