@use "hugo:vars" as v;

footer {
  border-top: 1px solid #D9E2EF;
  background-color: #F1F4F8;
}

.footer__content {
  max-width: v.$max_content_width;
  display: flex;
  text-align: start;
  flex-wrap: wrap;
  gap: 4px;
  align-items: start;
  justify-content: start;
  padding: 20px 1.25rem;

  margin-top: 1rem;
  margin-left: auto;
  margin-right: auto;
  margin-bottom: 0 auto 1rem auto;

  font-family: "Assistant";
  font-size: 17px;
  font-weight: 500;

  .footer__column {
    flex: 1 1 33%;
  }

  .footer__column-right-aligned {
    flex: 1 1 33%;
    justify-items: end;
    a {
      display: block;
    }
  }

  .footer__logo {
    flex: 0 0 250px;
    max-width: 250px;
  }

  .footer__address {
    font-style: normal;
    color: v.$color_tertiary;
    white-space: pre;
    margin-bottom: 1rem;
  }

  .footer__duns {
    color: v.$color_muted;
    white-space: pre;
    font-size: 0.88rem;
    margin-bottom: 1rem;
  }

  .footer__menu__title {
    color: v.$color_tertiary;
    display: block;
    text-transform: uppercase;
    margin: 0 0 0.5rem 0;
  }

  .footer__menu__link {
    display: block;
    color: v.$color_muted;
  }

  .footer__menu__caption {
    color: v.$color_tertiary;
    display: block;
    font-size: 0.59rem;
  }

  .footer__menu__logo {
    display: block;
    max-width: 180px;
    margin: 16px 0;
  }

  .footer__menu__link__icon {
    width: 0.9rem;
    height: 0.9rem;
  }

  .footer__menu__link+.footer__menu__title {
    margin-top: 1rem;
  }

  .footer__legal {
    margin-top: 2rem;
    color: v.$color_tertiary;
    font-size: 0.88rem;
    flex: 0 0 100%;
    white-space: pre-wrap;
    a {
      color: v.$color_tertiary_emphasis;
    }
    a:hover {
      text-decoration: underline;
    }
  }
}