// В этом файле должны быть стили для БЭМ-блока page-footer, его элементов,
// модификаторов, псевдоселекторов, псевдоэлементов, @media-условий...
// Очередность: http://nicothin.github.io/idiomatic-pre-CSS/#priority

.footer {
  color: #ffffff;
  display: flex;

  @media (max-width: 768px) {
    flex-direction: column;

    .footer-left {
      align-items: flex-start;

      .footer-left__devs {
        display: none;
      }

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

      .footer-left__heading,
      .footer-left__nav,
      .footer-left__subscribe {
        max-width: 100%;
        width: 100%;
        justify-content: space-between;

        .left__subscribe-form {
          justify-content: space-between;

          input,
          button {
            flex: 1 1 auto;
          }
        }
      }
    }
  }

  @media (max-width: 576px) {
    flex-direction: column;

    .footer-left {
      align-items: center;

      .footer-left__nav ul li {
        flex: 0 1 50%;
      }
    }
  }

  .footer-left {
    display: flex;
    align-items: flex-end;
    flex-direction: column;
    flex-basis: 50%;
    background: #f9f9f9;
    padding: 50px 60px;

    @media (max-width: 992px) {
      padding: 50px 20px;
    }

    .footer-left__heading {
      max-width: 540px;
      display: flex;
      flex-wrap: wrap;

      .left__heading-logo {
        padding-right: 175px;
        margin-bottom: 20px;
      }

      .left__heading-socials {
        display: flex;
        align-items: center;

        li:first-child {
          .heading-socials__item {
            margin-left: 0;
          }
        }

        .heading-socials__item {
          display: block;
          position: relative;
          height: 40px;
          width: 40px;
          margin-left: 30px;
          background: #6dacde;
          transition: 0.3s ease;

          &::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0;
            height: 100%;
            width: 100%;
            background-repeat: no-repeat;
            background-position: center;
          }

          &:hover {
            background: #b1c72e;
          }

          &._fb::before {
            background-image: url("../img/footer-fb.svg");
          }

          &._inst::before {
            background-image: url("../img/footer-inst.svg");
          }

          &._telegram::before {
            background-image: url("../img/footer-telegram.svg");
          }
        }
      }
    }

    .footer-left__nav {
      margin: 30px 0 60px;
      max-width: 540px;

      ul {
        display: flex;
        flex-wrap: wrap;

        li {
          font-size: 16px;
          line-height: 21px;
          color: #1a1a1a;
          padding-top: 30px;
          flex: 0 1 33.3333%;

          a {
            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .footer-left__subscribe {
      // === НА ВРЕМЯ СКРЫЛИ ===
      display: none;
      
      max-width: 540px;
      font-size: 16px;
      line-height: 21px;
      color: #1a1a1a;

      .left__subscribe-title {
        margin-bottom: 20px;
      }

      .left__subscribe-form {
        display: flex;
        flex-wrap: wrap;

        @media (max-width: 576px) {
          flex-direction: column;

          input {
            width: 100%;
            margin-right: 0;
          }
        }

        input {
          background: linear-gradient(0deg, #ffffff, #ffffff);
          border: 1px solid #dcddde;
          height: 60px;
          width: 309px;
          padding-left: 29px;
          font-size: 16px;
          line-height: 21px;
          color: #cccdcf;
          margin-right: 30px;
          margin-bottom: 15px;
        }

        button {
          max-height: 60px;
          min-width: 200px;
          background: #6dacde;
          padding: 20px 48px;
          font-size: 16px;
          line-height: 21px;
          color: #ffffff;
          font-weight: 700;
          transition: 0.3s ease;

          &:hover {
            color: #ffffff;
            background: #b1c72e;
            box-shadow: 0 0 25px rgba(177, 199, 46, 0.5);
          }
        }
      }
    }

    .footer-left__devs {
      max-width: 540px;
      width: 100%;
      // margin-top: 60px;

      span {
        font-size: 15px;
        line-height: 130%;
        color: #1a1a1a;
        padding-right: 6px;
      }
    }
  }

  .footer-right {
    padding: 50px 100px 120px;
    flex-basis: 50%;
    background: #025ea1;

    @media (max-width: 768px) {
      padding-bottom: 0;
    }

    @media (max-width: 992px) {
      padding: 50px 20px 120px;
    }

    .footer-right__contacts {
      font-size: 16px;
      line-height: 21px;

      .right__contacts-item {
        margin-bottom: 40px;

        .contacts-item__title {
          font-weight: 700;
        }

        .contacts-item__list {
          margin-top: 20px;
          font-weight: 300;
        }
      }
    }

    .footer-right__copyright {
      margin-top: 90px;
      font-size: 15px;
      line-height: 130%;
      font-weight: 300;
      max-width: 460px;
    }
  }
}
