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

.page__footer-wrapper {
  margin-top: 100px;
}

.page-footer {
  $block-name: &;

  &__inner {
  }

  &__first {
  }

  &__f-inner {
    display: flex;
    align-items: center;

    @media (min-width: $screen-xxl) {
    }

    @media (min-width: $screen-xl) {
      justify-content: space-between;
    }

    @media (max-width: ($screen-xl - 1)) {
      flex-direction: column;
    }
  }

  &__f-first {
    line-height: 0;

    @media (min-width: $screen-xl) {
      width: 185px;
    }

    .logo {
    }
  }

  &__f-second {
    @media (min-width: $screen-xl) {
      padding-left: 85px;
      width: calc(100% - 185px);
    }

    @media (max-width: ($screen-xl - 1)) {
      margin-top: 25px;
    }
  }

  &__f-s-first {
    .simple-menu {
      @media (min-width: $screen-md) {
        justify-content: space-between;
        column-gap: 15px;
      }

      @media (max-width: ($screen-md - 1)) {
        flex-direction: column;
        align-items: center;
        gap: 2px;
      }
    }

    .simple-menu__i-link {
      font-size: 14px;
      color: var(--m-color-2);

      @media (min-width: $screen-xxl) {
        font-size: 16px;
      }

      @media (min-width: $screen-xl) {
      }
    }
  }

  &__f-s-second {
    margin-top: 25px;

    .feedback__list {
      @media (min-width: $screen-xxl) {
      }

      @media (min-width: $screen-xl) {
        justify-content: space-between;
      }

      @media (max-width: ($screen-xl - 1)) {
        gap: 5px 20px;
        justify-content: center;
      }
    }

    .feedback__content {
      color: var(--m-color-4);

      &:focus,
      &:hover {
        color: var(--m-color-4);
      }
    }
  }

  &__second {
    margin-top: 30px;
    padding: 20px 0;
    background-color: var(--m-color-1);

    @media (min-width: $screen-xl) {
      padding: 10px 0;
    }
  }

  &__s-inner {
    display: flex;
    font: 400 12px/160% $font-family;
    color: #fff;

    @media (min-width: $screen-xl) {
      font-size: 14px;
    }

    @media (min-width: $screen-md) {
      justify-content: space-between;
    }

    @media (max-width: ($screen-md - 1)) {
      flex-direction: column;
      align-items: center;
    }

    .simple-menu {
      @media (min-width: $screen-xl) {
        column-gap: 33px;
      }

      @media (max-width: ($screen-md - 1)) {
        margin-top: 5px;
        flex-direction: column;
        align-items: center;
        gap: 5px;
      }
    }

    .simple-menu__i-link {
      font-weight: 300;

      @media (max-width: ($screen-xl - 1)) {
        font-size: 12px;
      }
    }
  }

  &__copyright {
    margin-bottom: 0;
  }
}
