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

footer.main

  width: 100%
  background-color: $blue

  color: $pastelBlue
  font-size: 1.125rem
  line-height: 2.125rem
  overflow: hidden

  h4
    color: white
    font-size: 1.5rem
    font-weight: bold
    line-height: 2rem
    margin-bottom: 30px

  a
    color: $pastelBlue
    font-size: 1.125rem
    line-height: 2.125rem
    text-decoration: none
    +transition(color 100ms ease-out)

    &:hover
      color: white

  .grid-row
    position: relative
    .diagonal-line
      left: -16%
      bottom: 0
      width: 400px

      &.second
        left: -25%
        bottom: -50px
        width: 300px

    .grid-col
      vertical-align: top

      p
        font-size: 1.125rem
        line-height: 2.125rem
        margin: 0.5rem 0

      ul
        list-style: none
        padding: 0
        margin: 0
        margin-top: 18px

        li.active
          a
            color: white



      // Position logo at the bottom left
      &.logo-container
        width: column(3, 12)

        .logo
          display: block
          background: transparent url('/img/svg/Logo_on_dark.svg') no-repeat
          background-size: contain
          width: 225px
          height: 106px

          &:hover
            fill: white

          +respond-to-width(1300)
            width: column(3,4)

      &.menu-container
        width: column(2, 12)

      &.cat-container
        width: column(2, 12)

      &.contact-container
        width: column(5, 12)

        .logo
          display: none
          background: transparent url('/img/svg/Logo_on_dark.svg') no-repeat
          background-size: contain
          width: 128px
          height: 60px

      +respond-to-width(1250)
        &.menu-container
          width: column(2.5, 12)

        &.cat-container
          width: column(2.5, 12)

        &.contact-container
          width: column(4, 12)


  >.menu
    padding: 60px 0 30px

    h4
      margin-top: 0

    p
      span
        color: white
        font-size: 1.125rem
        font-weight: bold
        line-height: 2rem

        &.letter
          color: $pastelBlue
          font-weight: normal
          margin-right: 20px

      a[href^="mailto"],
      a[href^="tel"]
        color: white
        font-size: 1.125rem
        font-weight: bold
        line-height: 2rem
        transition: text-decoration 0.3s

        &:hover
          text-decoration: underline


    a.button
      margin: 30px 0 0 0
      background-color: $pastelBlue
      color: white
      text-decoration: none
      font-size: 1rem
      font-weight: 500
      line-height: 1.1875rem
      padding: 15.5px 20px
      z-index: 25
      &:hover
        background-color: lighten($pastelBlue, 10%)

      &:last-child
        margin: 18px 0 0 0
        background-color: $blue
        border: 1px solid white

        &:hover
          background-color: lighten($pastelBlue, 10%)
          border-color: transparent

  .subfooter
    padding: 0 0 16px
    background-color: $blue

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

      .grid-col
        &.logo-container,
        &.menu-container
          position: relative
          width: auto

          span
            margin: 0 15px

        &.menu-container
          text-align: right

          .certificates
            +flex(flex-end, center)
            margin-bottom: 25px

            .logo-wrapper

              &.metaalunie
                width: 150px
                margin-bottom: 5px

              &.nevat
                width: 130px

              &.iso-9001
                width: 50px

              &.sbb
                width: 67px

              + .logo-wrapper
                margin-left: 40px

              img
                width: 100%


    a
      font-size: 1rem
      opacity: 0.5
      transition: opacity 0.2s

      &:hover
        opacity: 1

    .komma
      position: relative
      cursor: pointer

      span
        position: relative
        top: 10px
        left: 2px
        display: inline-block
        width: 88px
        height: 31px
        background-image: url('/img/svg/komma.svg')
        background-position: center
        background-size: contain
        background-repeat: no-repeat


html.ie
  footer.main
    .grid-row
      .grid-col
        ul.refs
          li
            &.ref-3
              .ref-holder
                background-position: 18.5px -67px

            &.ref-4
              .ref-holder
                background-position: -91px -67px

            &.ref-5
              .ref-holder
                background-position: -195px -67px

+respond-to-width(1000)
  footer.main

    .diagonal-line
      display: none

    .menu
      .grid-row
        .logo-container
          display: none

        .contact-container
          width: column(5, 12)

          .logo
            display: block
            margin-bottom: 30px

        .menu-container, .cat-container
          width: column(3, 12)


    .subfooter
      > .col-12
        > .grid-row
          +flex()
          flex-wrap: wrap
          flex-direction: column-reverse
          > .grid-col
            &.logo-container,
            &.menu-container
              width: 100%

            &.menu-container
              text-align: left

              .certificates
                +flex(flex-start, center)



+respond-to-width(840)
  footer.main
    .menu
      .grid-row
        .menu-container, .contact-container
          width: 50%

        .cat-container
          display: none


+respond-to-width(645)
  footer.main
    .subfooter
      .menu-container
        text-align: center

        a
          display: block
          width: 100%

        .menu > span
          display: none

      .logo-container
        top: 0
        margin-top: 30px

        .komma
          display: block

          span
            top: 0
            left: 0
            display: block
            margin: 0



+respond-to-width(600)
  footer.main
    .menu
      .grid-row
        display: block

        .menu-container, .contact-container
          width: 100%

        .menu-container
          display: none
          //margin-top: 60px

    .subfooter
      > .col-12
        > .grid-row

          .grid-col
            width: 100%
            margin-left: 0

            &.logo-container
              .komma
                text-align: center

                span
                  margin-left: auto
                  margin-right: auto

            &.menu-container
              text-align: center

              .certificates
                display: block
                padding: 40px 0  

                .logo-wrapper
                  margin-left: auto
                  margin-right: auto

                  + .logo-wrapper
                    margin-top: 40px
                    margin-left: auto


+respond-to-width(425)
  footer.main
    .menu
      .grid-row
        .grid-col.contact-container,
        .grid-col.ref-container
          width: 100%

        .grid-col.contact-container
          .button-holder
            width: 100%
            a.button
              width: 100%

+respond-to-width(405)
  footer.main
    .menu
      .grid-row
        .grid-col
          &.contact-container
            .link-holder
              padding-top: 0
              margin-bottom: 30px