/*
  footer.css
  Footer layout, profile section, columns, and address.
*/

footer {
  padding: 25px 0;

  @media screen and (min-width: 768px) {
    padding-top: 50px;
  }

  & .footer-content {
    display: flex;
    flex-direction: column;

    @media screen and (min-width: 768px) {
      flex-direction: row;
      max-width: 1440px;
      margin: 0 auto;
    }

    @media screen and (min-width: 768px) and (max-width: 1023px) {
      gap: 2%;
    }

    @media screen and (min-width: 1023px) {
      gap: 3%;
    }

    & .col {
      flex: 1;
      flex-shrink: 0;

      @media screen and (min-width: 768px) and (max-width: 1023px) {
        width: calc(96% / 3);
      }

      @media screen and (min-width: 1023px) {
        width: calc(94% / 3);
      }
    }

    & .col2 {
      @media screen and (max-width: 600px) {
        order: 3;
        padding-top: 25px;
      }
    }

    & .col3 {
      @media screen and (max-width: 600px) {
        order: 2;
      }

      &.nav .footer-nav-wrap--site {
        @media screen and (max-width: 600px) {
          padding-top: 0;
        }
      }
    }

    & .logo {
      display: flex;
      align-items: start;
      justify-content: center;
      margin-top: 0;

      & img {
        bottom: unset;
      }
    }

    & .profile {
      display: flex;
      flex-direction: column;
      align-items: center;
    }

    & .profile-circle {
      max-width: 150px;
      border-radius: 50%;
      overflow: hidden;
    }

    & .profile-content {

      & > p {
        margin: 0;
      }

      & .profile__name,
      & .profile__title {
        font-weight: bold;
      }

      & .profile__title {
        font-style: italic;
      }

      & .profile__org {
        padding-top: 40px;
        font-weight: bold;
      }

      & a {
        color: white;
        text-decoration: underline;
      }
    }

    & .nav,
    & + .nav {
      padding: 0 20px;

      @media screen and (min-width: 1024px) {
        padding: 0;
      }
    }
  }

  & .footer-address {
    font-size: 14px;
  }
}