/* Footer Styles */
.footer {
  background-color: var(--color-secondary-c);
  color: var(--color-white);
  padding: 4rem 2rem;

  a {
    color: var(--color-white);
    text-decoration: none;

    &:hover,
    &:focus-visible,
    &:active {
      color: var(--color-white);
      outline-offset: 4px;
      text-decoration: underline;
    }

    &:visited {
      color: var(--color-foundation-a);
      text-decoration: underline;
    }
  }

  li {
    list-style: none;
  }
}

.footer-socials {
  column-gap: 2.4rem;
  display: grid;
  grid-template-columns: repeat(3, 3rem) auto;
  margin-bottom: 4rem;

  .link {
    font-weight: 500;
    text-decoration: underline;
  }

  svg {
    height: 3rem;
    width: auto;
  }

  li:nth-child(5) {
    grid-column: span 4;
    line-height: 4.5rem;
  }
}

.footer-navigation {
  margin-bottom: 4rem;

  .footer-nav-link-item {
    margin-bottom: 1.6rem;
  }

  .footer-nav-heading {
    color: var(--color-white);
    font-size: 2rem;
    font-style: normal;
    font-weight: 700;
    line-height: 3rem;
    margin-bottom: 0.8rem;
  }
}

.footer-copyright {
  margin-bottom: 0;
}

.footer-contact {
  margin-bottom: 0;

  address {
    font-style: normal;

    .address-container {
      display: inline-flex;
      flex-direction: column;

      > a,
      .no-link {
        display: inline-flex;
        flex-direction: column;
      }
    }
  }
}

@media (--desktop) {
  .footer {
    padding: 8rem 13.5rem 10rem;
  }

  .footer-container {
    margin: 0 auto;
    max-width: 124rem;
  }

  .footer-socials {
    column-gap: 5rem;
    grid-template-columns: repeat(3, 5rem) repeat(2, max-content);

    svg {
      height: 5rem;
    }

    li:nth-child(5) {
      grid-column: span 1;
    }
  }

  .footer-navigation {
    column-gap: 2rem;
    display: grid;
    grid-auto-flow: column;

    .footer-nav-heading {
      line-height: 2.4rem;
      margin-bottom: 1rem;
    }
  }
}