/* ==========================================================================
   Main footer
   ========================================================================== */

header

  /* Orange sub header
   ========================================================================== */
  .sub
    background-color: $orange
    padding: 13px 0

    .grid-row
      +flex(space-between, center)

      .cta
        +flex(flex-start, center)
        width: calc(100% - 150px)

        .ie.v10 &
          width: calc(100% - 300px)

        p + p
          margin-left: 40px

          +respond-to-width(1240)
            margin-left: 25px

        p
          +flex(flex-start, center)
          margin: 0
          font-size: 0.8rem
          line-height: 1
          font-weight: bold
          color: white

          span
            display: inline-block
            +sprite(-122px -38px, 17px, 13px)
            margin-right: 10px

          +respond-to-width(1120)
            &:nth-of-type(2)
              display: none

          +respond-to-width(875)
            margin-left: 0 !important
            &:nth-of-type(1)
              display: none

      .right-placeholder
        +flex(flex-end, center)

      .phone, .account
        +flex(flex-end, center)
        font-size: 0.8rem
        line-height: 1
        font-weight: bold
        text-decoration: none
        color: white

        span
          display: inline-block
          margin-right: 11px

      .phone
        width: 160px

        .ie &
          width: 180px

        span
          +sprite(-183px -75px, 12px, 18px)

      .account
        width: 100px
        span
          +sprite(-32px -13px, 12px, 15px)

    +respond-to-width(1150)
      .grid-row
        width: 100%
        padding: 0 30px

    +respond-to-width(615)
      .grid-row
        .cta
          display: none

        .right-placeholder
          width: 100%
          +flex(space-between, center)

          .phone
            +flex(flex-start, center)



  /* Main header
   ========================================================================== */
  .main
    +flex(flex-start, center)
    min-height: 80px

    .menu
      display: inline-block
      width: column(1, 12)
      margin-left: column(-1, 12)

      .placeholder
        position: relative
        width: 100%
        padding-bottom: 100%

        .icon-placeholder
          position: absolute
          left: 0
          top: 0
          width: 100%
          height: 100%
          +flex(center, center)
          cursor: pointer

          .icon
            width: 20px

            span + span
              margin-top: 4px

            span
              width: 100%
              height: 2px
              display: block
              transform: scale3d(1, 1, 1)
              transform-origin: 0 50%
              background-color: $greyBluer
              transition: transform 0.6s

              &:nth-of-type(2)
                transform: scale3d(0.8, 1, 1)

              &:nth-of-type(3)
                transform: scale3d(0.45, 1, 1)

          &:hover
            .icon
              span
                transform: scale3d(1, 1, 1) !important

    .logo-wrapper
      width: column(2.5, 12)

      .logo
        width: 100%
        max-width: 280px
        display: inline-block
        svg
          width: 100%
          max-height: 45px

    .feedback-score
      width: column(1.5, 12)
      +flex(flex-end, center)
      text-decoration: none

      .stars
        display: block
        width: 70px
        margin-right: 10px
        +flex(space-between, center)

        .full-star
          display: block
          +sprite(0 0, 12px, 12px)

        .half-star, .empty-star
          +sprite(-20px 0, 12px, 12px)
          +flex(flex-start, center)

          .inner-star
            display: block
            +sprite(-13px 0, 6px, 12px)

      .score
        display: block
        margin: 0
        font-size: 1.2rem
        line-height: 1
        font-weight: 600
        color: $greyBluer

        sup
          opacity: 0.5
          font-size: 0.7rem

    nav
      width: column(8, 12)
      +flex(flex-end, center)

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

        li + li
          margin-left: 40px

        +respond-to-width(1500)
          +flex(center, center)
          li + li
            margin-left: 30px

            +respond-to-width(1180)
              margin-left: 25px


        li
          padding: 0
          margin: 0
          a
            text-decoration: none
            font-size: 0.75rem
            line-height: 1.2
            font-weight: 600
            color: $greyBluer
            transition: color 0.3s

            +respond-to-width(1300)
              font-size: 0.7rem


            &:hover
              color: $grey

          &.active
            a
              color: $orange

      .start-sale
        +flex(center, center)
        height: 40px
        margin-left: 40px

        font-size: 0.8rem
        line-height: 1
        color: white
        text-decoration: none
        transition: background-color 0.4s

        &:hover
          background-color: darken($neonGreen, 10%)

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


    +respond-to-width(1550)
      .feedback-score
        width: column(2.5)
        +flex(center, center)

      nav
        width: column(7.5, 12)

    +respond-to-width(1150)
      width: 100%
      padding-right: column(1, 14)

      .menu
        margin-left: 0
        margin-right: 30px

        width: 100px

      nav
        width: 140px
        ul
          display: none

        .start-sale
          width: 100%
          margin-left: 0

      .logo-wrapper
        width: calc((100% - 130px - 130px) / 2)

      .feedback-score
        width: calc((100% - 130px - 130px) / 2)

      .feedback-score
        +flex(center, center)

    +respond-to-width(740)
      padding-right: 30px

      nav
        display: none

      .menu
        width: 80px
        border-right: 1px solid rgba($greyBluer, 0.3)

      .logo-wrapper
        width: 180px

      .feedback-score
        width: calc(100% - 290px)
        +flex(flex-end, center)

    +respond-to-width(520)
      +flex(space-between, center)
      .logo-wrapper
        width: calc(100% - 110px)
        +flex(center, center)

        .logo
          max-width: 180px

      .feedback-score
        display: none

    &.clean
      min-height: 120px
      +flex(space-between, center)

      .ie &
        height: 120px

      +respond-to-width(1150)
        padding-left: 30px
        padding-right: 30px

        .feedback-score
          +flex(flex-end, center)

      +respond-to-width(520)
        .feedback-score
          display: none

        .logo-wrapper
          width: 100%