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

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

  padding: 40px 0;
  background-color: $color-d-blue;
  color: #fff;

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

  @media (min-width: $screen-xl) {
    padding-top: 48px;
    padding-bottom: 48px;
  }

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

  .feedback__content,
  .logo__first,
  .logo__second {
    color: #fff;
  }

  a.feedback__content {
    &:focus {
      color: #fff;
    }

    &:hover {
      color: $color-cyan;
    }
  }

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

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

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

  &__first {
    .copyright {
      margin-top: 16px;

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

      @media (min-width: $screen-xl) {
        margin-top: 85px;
      }

      @media (min-width: $screen-lg) {
        margin-top: 66px;
      }
    }
  }

  &__second {
    @media (max-width: ($screen-lg - 1)) {
      margin-top: 32px;
    }

    .search__form .field-text {
      @media (min-width: $screen-xxl) {
      }

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

      @media (min-width: $screen-lg) {
        width: 215px;
      }
    }
  }

  &__s-first {
  }

  &__s-second {
    display: none;

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

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

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

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

    @media (min-width: $screen-xl) {
      display: flex;
      justify-content: center;
      margin-top: 28px;
    }

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

  &__third {
    @media (max-width: ($screen-lg - 1)) {
      margin-top: 32px;
    }

    .btn {
      margin-top: 24px;
    }
  }

  &__title {
    margin-bottom: 24px;
    font: 500 15px/110% $font-family;
    letter-spacing: 0.05em;

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

    @media (min-width: $screen-xl) {
      margin-bottom: 32px;
      font-size: 18px;
    }

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

.copyright {
  margin-bottom: 0;
  font: 300 12px/100% $font-family;

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

/* ----- .block-name ----- */

.simple-menu {
  $block-name: &;

  display: flex;
  flex-wrap: wrap;
  gap: 15px 165px;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;

  &__item {
    width: calc(100% / 2 - (165px * 1 / 2));
  }

  &__i-link {
    font: 500 14px/110% $font-family;
    letter-spacing: 0.05em;
    color: #fff;
    text-decoration: none;
    @include field-focus;
    border-radius: 4px;
    transition: color $transition-time, outline-color $transition-time;

    &:focus {
      outline-color: $color-cyan;
      color: #fff;
    }

    &:hover {
      color: $color-cyan;
    }
  }
}
