// GLOBAL FOOTER
.main-footer {
  background: $base-black;
  color: $base-white;
  font-family: $base-font-family;
  font-weight: 500;
  font-size: $base-font-size * 0.75; // 12px
  line-height: $base-font-size * 0.75;
  letter-spacing: 0.5px;
  padding-top: $base-spacing-3x; // 48px
  padding-bottom: $base-spacing-4x; // 64px

  .section-header {
    color: $nobel-300;
    font-family: $base-font-family;
    font-size: $base-font-size * 1.125; // 18px
    line-height: $base-font-size * 1.125; // 18px
    margin-bottom: unset; // removed existing margin from main.css to maintain spacing as in spec
  }

  .section-list {
    list-style: none;
    margin: 0;
    margin-top: $base-spacing-3-4th;
    padding: 0;
  }

  .section-link {
    color: $base-white;
    font-family: $base-font-family;
    font-weight: 500;
    font-size: $base-font-size * 0.875; // 14px
    line-height: $base-font-size * 0.875; // 14px
    padding-top: $base-spacing-3-4th;
    padding-bottom: $base-spacing-3-4th;
    float: left;
    clear: both;
  }

  .social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    border-radius: 50% !important;
    background: $tundra-500;
    text-align: center;
    float: left;
    margin-right: $base-spacing-3-4th; // 12px
    margin-top: $base-spacing-1-half; // 24px
    text-decoration: none;

    &:hover {
      background: $baltic-sea-600;
    }

    img {
      width: 24px;
      height: 24px;
    }

    &:last-child {
      margin-right: 0;
    }
  }
}

.sub-footer {
  background: $baltic-sea-600;
  color: $base-white;
  font-family: $base-font-family;
  font-size: $base-font-size * 0.75; // 12px
  line-height: $base-font-size * 0.75;
  letter-spacing: 0.5px;
  padding-top: $base-spacing; // 16px
  padding-bottom: $base-spacing; // 16px

  .copyright-section {
    margin-right: $base-spacing-3x; // 48px
  }

  .additional-link-section {
    a {
      float: left;
      margin-right: $base-spacing-2x;
      color: $base-white;
      font-family: $base-font-family;
      font-weight: 500;
    }
  }
}

.region-footer {
  padding-top: $base-spacing-3x;
  padding-bottom: $base-spacing-3x;
  border-top: 1px solid $alto-200;

  h4 {
    margin-bottom: 0;
  }

  .social-links {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 36px;
    height: 36px;
    float: left;
    margin-right: $base-spacing-1-8th;
    margin-top: $base-spacing;
    margin-bottom: $base-spacing;
    border-radius: 100%;

    &:hover {
      background: $sky-blue-100;
      border-radius: $base-border-radius !important;
    }
  }

  .connect-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    border-bottom: 1px solid $alto-200;

    .button-primary-solid {
      margin-top: 9px;
      margin-bottom: 9px;
    }
  }
}

@media only screen and (max-width: map-get($base-breakpoints, 'md')) {
  .businesses-link-section,
  .about-link-section,
  .main-footer .connect-section {
    margin-top: $base-spacing-3x;
  }

  .sub-footer .container {
    display: flex;
    flex-direction: column-reverse;

    .additional-link-section {
      margin-left: 0;

      a {
        width: 100%;
        padding-top: $base-spacing;
        padding-bottom: $base-spacing;
      }
    }

    .copyright-section {
      padding-top: $base-spacing;
      padding-bottom: $base-spacing;
    }
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'md')) and (max-width: map-get($base-breakpoints, 'lg')) {
  .main-footer .connect-section {
    margin-top: $base-spacing-3x;
  }

  // prevent additional margin at the bottom for last col
  .about-link-section {
    margin-right: 0 !important;
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'md')) and (max-width: 783px) {
  .additional-link-section {
    margin-top: $base-spacing; // 16px
  }
}

@media only screen and (min-width: map-get($base-breakpoints, 'lg')) {
  // prevent additional margin at the bottom for last col
  .connect-section {
    margin-right: 0 !important;
  }
}

@media only screen and (max-width: 413px) {
  .region-footer .connect-section {
    flex-direction: column;
    align-items: flex-start;

    .button-primary-solid {
      margin-top: $base-spacing;
      margin-bottom: $base-spacing;
    }
  }
}