@creativecommons/vocabulary/scss/footer.scss

.main-footer {
  background-color: $color-black;
  color: $white;
  padding: $space-large 0;

  a {
    color: $color-dark-turquoise;

    &:hover {
      text-decoration: underline;
    }

    &.social:hover {
      text-decoration: none;
    }
  }

  .main-logo {
    display: block;

    svg {
      width: 13rem;
    }
  }

  address {
    font-style: normal;
  }

  .footer-navigation {
    .menu {
      li {
        display: inline-block;

        &:first-child {
          .menu-item {
            padding-left: 0;
          }
        }

        .menu-item {
          display: block;
          padding: $space-normal;
          font-size: $font-size-h4;
          font-style: normal;
          font-weight: bold;
        }
      }
    }
  }

  .subscription {
    h5 {
      margin-bottom: $space-normal;
      color: $color-white;
    }

    .newsletter {
      display: flex;
      width: 70%;

      .input {
        background-color: transparent;
        border-color: $color-dark-gray;
        color: $color-dark-gray;
        
        &::placeholder {
          color: $color-dark-gray;
          opacity: 0.8;
        }
      }

      .button {
        margin-left: -1rem;
        border: none;
        background-color: $color-dark-gray;
        color: $color-white;

        &:hover {
          background-color: lighten($color-dark-gray, 10);
        }
      }
    }
  }

  .donate-section {
    h5 {
      color: $color-white;
    }

    .donate {
      margin-top: $space-big;
      color: $color-black;

      svg {
        margin-right: 1rem;
        width: 2rem;
        height: 2rem;
      }
    }
  }

  @include tablet() {
    padding: $space-big;

    .footer-navigation {
      .menu {
        display: flex;
      }
    }
  }

  @include mobile() {
    padding: $space-normal;

    .footer-navigation {
      margin-bottom: $space-normal;

      .menu {
        li {
          display: block;

          .menu-item {
            padding-left: 0;
          }
        }
      }
    }
  }
}