/* ============================================================
   08-ФУТЕР И ФОРМА ЗАЯВКИ

   Нижний блок страницы: заголовок, форма, ссылки на почту и
   мессенджеры, копирайт.

   ХИТРОСТЬ С РАСКЛАДКОЙ ФОРМЫ.
   На десктопе поля стоят в две колонки, но в разметке они идут
   подряд одним списком. Сделано так: колонка с полями занимает
   левую половину, а большое поле «расскажите о проекте»
   вырывается из потока (position: absolute) и встаёт в правую
   половину. Поэтому в коде оно последнее, а на экране - сбоку.

   На мобильном всё возвращается в один столбик.

   ЛИНИИ МЕЖДУ ПОЛЯМИ.
   У каждого поля есть рамка сверху и снизу. Чтобы соседние поля
   не давали двойную линию, каждое поле сдвинуто вверх на 1px
   (margin-bottom: -1px) - линии накладываются друг на друга.
   ============================================================ */


/* ------------------------------------------------------------
   БЛОК ФУТЕРА
   ------------------------------------------------------------ */

.footer {
  position: relative;
  margin-top: auto;               /* прижимает футер к низу,
                                     если страница короткая */
  padding: calc(100 / var(--device-size) * 100vw) 0
           calc(150 / var(--device-size) * 100vw);
  background-color: #fff;
  overflow: hidden;
}

@media (max-width: 767px) {
  .footer {
    padding: calc(20 / var(--device-size) * 100vw) 0
             calc(25 / var(--device-size) * 100vw);
  }
}

.footer__header {
  margin-bottom: calc(144 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .footer__header {
    margin-bottom: calc(80 / var(--device-size) * 100vw);
  }
}

.footer__form {
  margin-bottom: calc(60 / var(--device-size) * 100vw);
}


/* ------------------------------------------------------------
   ФОРМА
   ------------------------------------------------------------ */

.request-form {
  position: relative;             /* точка отсчёта для большого
                                     поля справа */
}

/* Колонка с обычными полями - левая половина */
@media (min-width: 768px) {
  .request-form__block {
    width: calc(50% - 40 / var(--device-size) * 100vw);
  }
}

/* Сдвиг на 1px вверх - чтобы линии соседних полей слились */
.request-form__field {
  margin-bottom: calc(-1 / var(--device-size) * 100vw);
}

/* Последнее поле в левой колонке: нижнюю линию убираем,
   иначе она задвоится с линией кнопки */
@media (min-width: 768px) {
  .request-form__field_email {
    margin-bottom: 0;
  }

  .request-form__field_email .field-text__input {
    border-bottom: none;
  }
}

/* Большое поле - вырывается в правую половину */
@media (min-width: 768px) {
  .request-form__field_textarea {
    position: absolute;
    top: 0;
    right: 0;
    width: 50%;
  }

  /* на иврите правая половина становится левой */
  [lang="he"] .request-form__field_textarea {
    left: 0;
    right: auto;
  }
}

.request-form__button {
  position: relative;
  z-index: 2;
  white-space: nowrap;
}


/* ------------------------------------------------------------
   ПОЛЕ ВВОДА
   ------------------------------------------------------------ */

.field-text {
  display: block;
}

.field-text__input-wrap {
  display: block;
}

.field-text__input {
  display: inline-block;
  width: 100%;
  min-height: calc(64 / var(--device-size) * 100vw);
  margin: 0;
  padding: calc(15 / var(--device-size) * 100vw) 0;
  border-top: calc(1 / var(--device-size) * 100vw) solid #cfcfcf;
  border-bottom: calc(1 / var(--device-size) * 100vw) solid #cfcfcf;
  border-radius: 0;
  background-color: transparent;
  color: #8f8f8f;
  font-family: inherit;
  font-size: calc(24 / var(--device-size) * 100vw);
  line-height: 1;
  outline: none;
  position: relative;
  vertical-align: middle;
  appearance: textfield;
}

/* На иврите текст в поле прижат вправо и начертание тоньше */
[lang="he"] .field-text__input {
  font-weight: 300;
  text-align: right;
}

@media (hover: hover) {
  .field-text__input {
    border-color: #8f8f8f;
  }
}

@media (max-width: 767px) {
  .field-text__input {
    min-height: calc(48 / var(--device-size) * 100vw);
    font-size: calc(19 / var(--device-size) * 100vw);

    /* ЗДЕСЬ НАМЕРЕННО НЕТ letter-spacing.
       В старом сайте на этом месте стояло
           letter-spacing: calc(-1px / var(--device-size) * 100vw);
       но это выражение неверное: пиксели поделили на число и
       умножили на vw, получилась бессмыслица, и браузер правило
       просто выбрасывал. То есть на живом сайте никакого
       уплотнения букв в полях формы нет.

       Мы это повторяем один в один. Если захочешь уплотнить
       по-настоящему - надо писать calc(-1 / var(--device-size) * 100vw),
       без px. Но тогда поля станут отличаться от нынешнего сайта. */
  }
}

/* z-index при фокусе - чтобы чёрная линия активного поля
   легла поверх серых линий соседей */
.field-text__input:focus {
  z-index: 2;
  border-color: #010101;
}

.field-text__input::placeholder {
  opacity: 1;
}

/* Большое поле для описания проекта */
textarea.field-text__input {
  height: auto;
  min-height: calc(190 / var(--device-size) * 100vw);
  resize: none;               /* тянуть за уголок нельзя */
}

@media (max-width: 767px) {
  textarea.field-text__input {
    min-height: calc(130 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   ОШИБКА ЗАПОЛНЕНИЯ

   Поле с ошибкой краснеет - и текст, и подсказка внутри.
   Никаких сообщений под полем не выводится: так было
   в оригинале.
   ------------------------------------------------------------ */

.field-text.is-error .field-text__input {
  color: #d41318;
}

.field-text.is-error .field-text__input::placeholder {
  color: #d41318;
}


/* ------------------------------------------------------------
   НИЖНЯЯ ЧАСТЬ: КОНТАКТЫ И КОПИРАЙТ
   ------------------------------------------------------------ */

.footer__bottom {
  display: flex;
  color: #8f8f8f;
}

@media (min-width: 768px) {
  .footer__bottom {
    align-items: flex-end;
    justify-content: space-between;
  }
}

@media (max-width: 767px) {
  .footer__bottom {
    flex-direction: column;
  }
}

@media (min-width: 768px) {
  .footer__social {
    width: calc(50% - 40 / var(--device-size) * 100vw);
  }
}

@media (max-width: 767px) {
  .footer__social {
    margin-bottom: calc(60 / var(--device-size) * 100vw);
  }
}

.footer-social__title {
  margin-bottom: calc(20 / var(--device-size) * 100vw);
  font-size: calc(24 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .footer-social__title {
    margin-bottom: calc(34 / var(--device-size) * 100vw);
    font-size: calc(20 / var(--device-size) * 100vw);
  }
}

.footer-social__list {
  display: flex;
  gap: calc(10 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .footer-social__list {
    flex-direction: column;
    gap: 0;
  }
}

/* Ссылка-плашка: иконка плюс подпись, линии сверху и снизу */
.footer-social__link {
  display: flex;
  flex: 1;
  align-items: center;
  justify-content: center;
  gap: calc(8 / var(--device-size) * 100vw);
  height: calc(64 / var(--device-size) * 100vw);
  border-top: calc(1 / var(--device-size) * 100vw) solid #8f8f8f;
  border-bottom: calc(1 / var(--device-size) * 100vw) solid #8f8f8f;
  font-size: calc(16 / var(--device-size) * 100vw);
}

/* На иврите иконка справа от подписи */
@media (min-width: 768px) {
  [lang="he"] .footer-social__link {
    flex-direction: row-reverse;
  }
}

@media (hover: hover) {
  .footer-social__link {
    transition: 0.3s ease-out;
  }

  .footer-social__link:hover {
    border-color: #252525;
    box-shadow:
      inset 0 calc(1 / var(--device-size) * 100vw) 0 #252525,
      inset 0 calc(-1 / var(--device-size) * 100vw) 0 #252525;
    color: #252525;
  }

  .footer-social__link:active {
    opacity: 0.2;
  }
}

@media (max-width: 767px) {
  .footer-social__link {
    flex: none;
    height: calc(48 / var(--device-size) * 100vw);
    justify-content: flex-start;
  }

  [lang="he"] .footer-social__link {
    flex-direction: row;
    justify-content: flex-start;
  }

  /* линии соседних плашек сливаются в одну */
  .footer-social__link:not(:last-child) {
    border-bottom: none;
  }
}


/* --- копирайт и ссылка на политику --- */

.footer__info {
  display: flex;
  gap: calc(40 / var(--device-size) * 100vw);
  font-size: calc(16 / var(--device-size) * 100vw);
}

@media (max-width: 767px) {
  .footer__info {
    flex-direction: column;
    gap: calc(10 / var(--device-size) * 100vw);
  }

  [lang="he"] .footer__copy {
    max-width: calc(254 / var(--device-size) * 100vw);
  }
}


/* ------------------------------------------------------------
   ЛОВУШКА ДЛЯ СПАМ-РОБОТОВ

   Невидимое поле в форме. Прячем не через display:none -
   умные роботы такие поля пропускают. Убираем за границу
   экрана: для робота поле обычное, для человека его нет.
   ------------------------------------------------------------ */

.ловушка {
  position: absolute;
  left: -9999px;
  width: 1px;
  height: 1px;
  overflow: hidden;
}