/* ==========================================================================
   Footer
   ========================================================================== */

footer
  border-top: 2px solid rgba($lightGrey, 0.5)
  padding: 120px 0 0

  .main
    .grid-row
      +flex(flex-start, flex-start)

    .contact-info
      margin-left: column(1, 12)
      width: column(4, 12)
      padding-bottom: 60px

      .logo
        position: relative
        left: -7px
        display: block
        width: 95%
        max-width: 215px
        margin-bottom: 40px

        svg
          width: 100%
          max-height: 52px

          &.netwerk-brabant-logo
            path
              fill: $black

      > a
        display: block
        color: $grey
        font-size: 0.7rem
        line-height: 1.2
        text-decoration: none

        + a
          margin-top: 5px

        &:hover
          text-decoration: underline

      .socials
        margin-top: 40px

    .menu
      width: column(3, 12)
      vertical-align: top
      +flex(space-between, flex-start)

      ul
        width: 50%
        list-style: none
        padding: 0
        margin: 0

        font-size: 0.7rem
        line-height: 1.2
        color: $grey
        font-weight: medium()

        li
          + li
            margin-top: 15px

          &.active
            a
              color: $black

        a
          color: $grey
          text-decoration: none

          &:hover
            text-decoration: underline

    .member
      margin-left: column(1, 12)
      width: column(2, 12)
      vertical-align: top

      > p
        max-width: 240px
        margin: 0
        font-size: 1rem
        line-height: 1.2
        font-weight: bold()
        color: $black

      .cta
        margin-top: 55px
        +flex(flex-start, center)
        font-size: 0.7rem
        line-height: 1.2
        color: $black


        &--logged
          display: block
          margin-top: 20px

        p
          color: $grey
          margin: 0 0 20px

        a:not(.button)
          display: inline-block
          margin-left: 4px
          color: $blue
          text-decoration: none

          &:hover
            text-decoration: underline

        .button
          margin-right: 7px
          padding: 10px 25px 8px
          background-color: transparent
          border: 1px solid rgba($grey, 0.25)
          border-radius: 20px

          font-size: 0.8rem
          line-height: 1.2
          font-weight: semibold()
          color: $black

          transition: border 0.3s

          &:hover
            border-color: $grey

  .sub
    .placeholder
      +flex(space-between, center)
      width: column(10, 12)
      margin: 0 auto
      border-top: 2px solid rgba($lightGrey, 0.5)

      .wrapper
        +flex(flex-start, center)
        padding: 20px 0
        font-size: 0.7rem
        line-height: 1
        font-weight: medium()
        color: rgba($grey, 0.6)

        p
          margin: 0

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

          li

            &:before
              content: '|'

            a
              color: rgba($grey, 0.6)
              padding: 0 5px
              text-decoration: none

              &:hover
                text-decoration: underline

            &.active
              a
                color: $black


    .komma
      position: relative
      +flex(space-between, center)
      font-size: 0.7rem
      line-height: 1
      width: 272px
      color: rgba($grey, 0.6)
      font-weight: medium()
      text-decoration: none

      &:hover
        text-decoration: underline

      span
        position: relative
        top: 1px
        display: inline-block

        svg
          *
            fill: rgba($grey, 0.6)

  +respond-to-width(1550)
    .main
      .contact-info
        margin-left: 0

      .menu
        width: column(4, 12)

      .member
        width: column(3, 12)

    .sub
      .placeholder
        width: 100%

  +respond-to-width(1200)
    .sub
      .placeholder
        .wrapper
          display: block
          padding: 25px 0

          ul
            margin: 12px 0 0

            li:first-child
              &:before
                display: none
              a
                padding-left: 0

        .komma
          display: block
          width: 200px
          text-align: right

          span
            display: block

  +respond-to-width(1000)
    .main
      .grid-row
        position: relative
        +flex-rows
        padding-bottom: 60px

      .contact-info
        width: 100%
        padding-bottom: 40px

        .logo
          margin-bottom: 0

        > a:not(.logo)
          display: none

        .socials
          position: absolute
          right: 0
          top: 180px
          margin-top: 0

      .menu
        width: 100%
        max-width: 280px

      .member
        position: absolute
        right: 0
        top: 0
        width: 240px

        > p
          text-align: right

        .cta
          +flex(flex-end, center)
          margin-top: 30px

          &--logged
            display: block
            margin-top: 20px
            text-align: right

  +respond-to-width(800)
    .sub
      padding-bottom: 20px
      .grid-row
        width: calc(100% - 40px)

      .placeholder
        display: block
        border-top: none

        .wrapper
          text-align: center

          ul

            +flex(center, center)

            +respond-to-width(600)
              margin-top: 24px
              display: block

              li
                + li
                  margin-top: 12px
                &:before
                  display: none

                a
                  padding: 0

        .komma
          margin: 20px auto 0
          text-align: center

          span
            margin-top: 8px


  +respond-to-width(700)
    padding: 60px 0 0
    border-top: none

    .main
      margin-bottom: 100px
      .grid-row
        width: calc(100% - 40px)
        padding-bottom: 40px
        border-bottom: 2px solid rgba($lightGrey, 0.5)

      .contact-info
        .logo
          left: 0
          margin: auto

        .socials
          width: 100%
          +flex(center, center)
          top: auto
          bottom: -80px


      .menu
        margin: auto
        max-width: 215px

        ul
          width: auto

      .member
        position: relative
        width: 100%
        margin-top: 30px
        margin-left: 0

        > p
          display: none
          margin: auto
          text-align: center

        .cta
          position: relative
          max-width: 215px
          margin: 0 auto
          left: -5px
          +flex(flex-start, center)

          &--logged
            display: block
            margin-top: 40px
            text-align: center

    .sub
      padding-bottom: 100px