/*==========================================================================
  Contact page
  ========================================================================== */

$contact-data--icon-width: 13px
$contact-data--offset: 18px

#contact

  #map
    width: 100%
    height: 450px

  .contact-content
    position: relative
    background-color: $neutral

    +respond-to-width-beyond(840)
      &:after
        content: ''
        position: absolute
        right: 0
        top: 0
        display: block
        width: 50%
        height: 100%
        background: $blue

    .contact-info, .contact-form
      position: relative
      z-index: 1


    .contact-info
      width: column(5, 12)
      padding: 72px 0 100px
      padding-left: calc(#{$contact-data--icon-width} + #{$contact-data--offset})

      // extra dynamic content blok
      .content
        text-align: left
        margin: 0 // reset margin needed
        margin-bottom: 60px

      h1
        font-size: 2rem
        line-height: 1.2
        margin: 0 0 48px
        color: $darkblue
        font-family: $fontPrimary
        font-weight: extrabold()

      h3
        font-size: 0.8rem
        line-height: 1.2
        font-weight: semibold()
        margin: 80px 0 30px

      p, a
        margin-bottom: 0
        font-size: 0.8rem
        color: darken($blue, 9%)

      a
        text-decoration: none
        transition: color 0.2s

        &:hover
          color: $darkblue

      .contact-data
        display: flex
        margin-top: 0
        margin-left: calc(-#{$contact-data--icon-width} - #{$contact-data--offset})

        &::before
          content: ''
          display: block
          width: $contact-data--icon-width
          height: 15px
          margin-right: $contact-data--offset
          transform: translateY(7px)
          background-repeat: no-repeat
          background-image: url(/img/contact-address.svg)
          opacity: 0.75

      .contact-data--phone
        margin-top: 20px

        &::before
          background-image: url(/img/contact-phone.svg)

      .contact-data--mail
        &::before
          background-image: url(/img/contact-mail.svg)
          transform: translateY(9px)
          height: 10px

      .contact-data--download
        &::before
          background-image: url(/img/icon-pdf.svg)
          transform: translateY(6px)


      .opening-hours
        list-style: none
        margin: 0
        padding: 0

        li

          font-size: 0.8rem

          .day
            display: inline-block
            width: 60px

          &.active
            color: lighten($darkblue, 15%)
            font-weight: bold()

      +respond-to-width(1100)
        width: column(5, 12)
        margin-left: 0

    .contact-form
      position: relative
      display: inline-block
      margin-left: column(1, 12)
      width: column(6, 12)
      padding: 72px 0 100px column(1, 12)
      vertical-align: top

      h2
        margin: 0 0 40px
        font-size: 2rem
        line-height: 1.2
        color: $light
        font-family: $fontPrimary
        font-weight: semibold()

      > p
        font-size: 0.9rem
        line-height: 1.2

      label
        color: $light

    +respond-to-width(840)
      .grid-row
        width: 100%

      .background
        display: none

      .contact-info
        width: 100%
        padding-left: calc(#{column(1, 12)} + #{$contact-data--icon-width} + #{$contact-data--offset})
        padding-right: 40px
        background-color: $neutral

        h3
          margin-top: 60px

      .contact-form
        width: 100%
        padding-right: column(1, 12)
        margin-left: 0
        background-color: $blue

    +respond-to-width(750)
      .contact-info
        padding-top: 72px + 60px