/* Собственные правки поверх выгрузки Tilda.
   Подключается последним, после всех её стилей, — поэтому перебивает их
   без !important там, где хватает специфичности. Файл не приходит из Tilda
   и переживает новую выгрузку; подключает его scripts/postprocess.py. */

/* Шапки не было вовсе в промежутке 981–1200px. Десктопное меню Tilda показывает
   только от 1201px (.t-screenmin-1200px), мобильное — только до 980px
   (.t-screenmax-980px), и между ними страница оставалась без навигации: ни
   логотипа, ни пунктов, ни кнопок входа. Ширины эти вполне живые — небольшие
   ноутбуки, планшет в альбомной ориентации, окно в половину экрана.

   Диапазон отдаём мобильной шапке: она складывает меню в бургер и помещается
   на любой ширине. Десктопная тут не годится — логотип, шесть пунктов и две
   кнопки требуют около 1500px и на 1000px просто не улягутся. */
@media screen and (min-width: 981px) and (max-width: 1200px) {
  #rec27944576.t-screenmax-980px {
    display: block;
  }
}

/* Под шапкой оставалась пустая фиолетовая полоса. У блока обложки
   padding-top: 75px и тёмный фон: на десктопе эти 75px уходят под шапку,
   которая там position: fixed и накрывает их собой. На узких экранах шапка
   обычная, в потоке, накрывать нечем — и padding превращается в голую
   полосу между жёлтым баннером и картинкой. */
@media screen and (max-width: 1200px) {
  /* Tilda пишет этот отступ инлайном в style="", поэтому без !important
     внешнее правило до него не достаёт. */
  #rec39574206 {
    padding-top: 0 !important;
  }
}

/* Заголовок на обложке рвался посреди слова: «для обучения дет / ей».
   Это делает сам tilda-cover-1.0.min.js — если правый край обёртки шире
   вьюпорта, он инлайном ставит word-break: break-all. Условие срабатывает
   от одной ширины полосы прокрутки, а ломает слова уже по-настоящему.
   Инлайн-стиль перебивается только !important. Переносим по словам, а
   рвём лишь то, что длиннее строки и иначе не поместится. */
.t-cover__wrapper {
  word-break: normal !important;
  overflow-wrap: break-word;
}

/* Жёлтый баннер: на узких экранах обе фразы не помещаются в строку и вторую
   обрезает. Отдаём ей собственную строку. */
@media screen and (max-width: 1200px) {
  .site-banner__break {
    display: block;
  }
}

/* Кнопки входа в бургер-меню — на узких экранах их не было вовсе, хотя в
   десктопной шапке они есть. Цвета те же, что у десктопной пары. */
.t282__menu__item.site-auth {
  margin-top: 14px;
}

/* Цвет и размер пунктов меню Tilda задаёт правилом #rec… a.t282__menu__link,
   которое по специфичности сильнее классов, — поэтому здесь !important.
   Без него «Регистрация» выходила белым по белому, то есть пустой таблеткой. */
.site-auth__btn {
  display: inline-block;
  padding: 10px 28px;
  border: 2px solid #4dbceb;
  border-radius: 20px;
  background-color: #4dbceb;
  color: #ffffff !important;
  font-size: 16px !important;
  line-height: 1.2;
  text-decoration: none;
}

.site-auth__btn_signup {
  border-color: #ffffff;
  background-color: #ffffff;
  color: #ff4d41 !important;
}