/* Основа темы Kiddie English.
   Вёрстка 1 в 1 по suggest/prototype.pen. Нарисованы два состояния: 1440 и 390.
   Планшет - брейкпоинт, а не третий дизайн.

   Брейкпоинты:
     >= 1440        ровно как в макете
     1160 … 1439    десктопная шапка ужимается: прячутся мессенджеры, затем телефон
     861 … 1159     содержимое десктопное, шапка уже с бургером
     <= 860         мобильный макет

   Размеры шрифта и высоты строк проставлены в пикселях там, где в макете
   высота строки не задана: pen считает её по метрикам шрифта (Inter 1.21,
   Manrope 1.36), и опора на line-height: normal дала бы расхождение в 1 px
   на другой сборке шрифта. */

*,
*::before,
*::after { box-sizing: border-box; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--white);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--body);
  line-height: var(--body-lh);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

img,
svg { display: block; max-width: 100%; }

a { color: inherit; text-decoration: none; }

button {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

h1, h2, h3, h4, p { margin: 0; }

:focus-visible {
  outline: 2px solid var(--magenta);
  outline-offset: 3px;
}

/* Ссылка "К содержимому" - первый фокусируемый элемент на странице.
   Обычное состояние - готовая утилита .visually-hidden выше: точка 1x1,
   спрятана clip-path'ом, а не display/visibility, иначе таб её
   перескочит и доступность пропадёт. В точке 1x1 она ничего не сдвигает
   в раскладке, поэтому пиксельная сверка с макетом не меняется. У шапки
   (theme/css/header.css) своего z-index нет - кнопка при фокусе берёт
   запас выше самого высокого известного в теме (.header__call модалка
   формы - 90), чтобы остаться над шапкой при любом её будущем
   позиционировании. */
.skip:focus-visible {
  top: 12px;
  left: 12px;
  width: auto;
  height: auto;
  margin: 0;
  clip: auto;
  clip-path: none;
  overflow: visible;
  z-index: 100;
  padding: 10px 20px;
  background: var(--magenta);
  color: var(--white);
  border-radius: 8px;
  font-family: var(--font-body);
  font-weight: 600;
}

/* Полоса страницы: ровно 1440 с полями 56, ниже - тянется. */
.wrap {
  width: 100%;
  max-width: var(--page-w);
  margin-inline: auto;
  padding-inline: var(--gutter);
}

@media (max-width: 860px) {
  .wrap { padding-inline: var(--gutter-m); }
}

/* Кнопка действия - одна на весь сайт, малиновая. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--r-btn);
  background: var(--magenta);
  color: var(--white);
  font-weight: 700;
  text-align: center;
  cursor: pointer;
  transition: background-color .15s ease;
}

.btn:hover { background: #C92A7C; }

.btn--line {
  background: none;
  color: var(--ink);
  box-shadow: inset 0 0 0 1.5px #16233D26;
}

.btn--line:hover { background: #16233D0A; }

/* Иконка из спрайта: размер задаётся на месте применения. */
.ico {
  flex: none;
  fill: currentColor;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
}

/* Если внутри спрятанного блока есть ссылка, таб всё равно на неё
   встанет - а показать нечего, и человек с клавиатуры теряется: фокус
   есть, а где он, не видно. Такая ссылка в теме одна (chunks/ab-principy.tpl,
   её требует паспорт страницы), но правило общее: любой .visually-hidden
   с фокусом внутри всплывает плашкой.
   Плашка приклеена к окну (position: fixed), а не раскрывается на месте:
   раскрытие на месте сдвинуло бы соседние блоки, и пиксельная сверка с
   макетом поехала бы на каждой странице, где такой текст есть. z-index
   тот же 100, что и у кнопки "К содержимому" выше - запас над шапкой. */
.visually-hidden:focus-within {
  position: fixed;
  bottom: 12px;
  left: 12px;
  width: auto;
  height: auto;
  max-width: calc(100% - 24px);
  margin: 0;
  overflow: visible;
  clip-path: none;
  white-space: normal;
  z-index: 100;
  padding: 10px 20px;
  background: var(--ink);
  color: var(--white);
  border-radius: 8px;
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.4;
}

.visually-hidden:focus-within a {
  color: var(--sun);
  text-decoration: underline;
}

/* Сверочный режим: гасим анимации, чтобы снимок был стабильным. */
.qa-static *,
.qa-static *::before,
.qa-static *::after {
  transition: none !important;
  animation: none !important;
}

/* Шапка страницы: заголовок и вводный абзац. Собирается из полей
   "Заголовок на странице" и "Вводный текст", html в них нет. */
.page-head {
  padding-block: 72px 80px;
}

.page-head h1 {
  font-family: var(--font-head);
  font-weight: 800;
  font-size: 38px;
  line-height: 43px;
  letter-spacing: -1.2px;
  color: var(--ink);
}

.page-head__lead {
  margin-top: 14px;
  font-family: var(--font-body);
  font-size: 16px;
  line-height: 27px;
  color: var(--muted);
}

@media (max-width: 860px) {
  .page-head { padding-block: 40px 48px; }
  .page-head h1 { font-size: 27px; line-height: 31px; letter-spacing: -0.9px; }
  .page-head__lead { font-size: 15px; }
}

/* ─── Видео на фоне страницы (параллакс) ─────────────────────────

   Видео на странице одно и прибито к окну: блоки едут поверх него, а
   видно его в прорезях - на первом экране и в двух "окнах в видео". Так
   это и описано в макете: "контент едет поверх" и "то же видео на фоне ·
   видно между блоками".

   z-index: -1 ставит слой под фоны блоков, но над фоном страницы -
   поэтому все блоки со своей заливкой его закрывают, а окна (у них
   заливки нет, только полупрозрачная подложка) показывают.

   Разметку рисует сниппет kVideoFon, зовут его шаблоны страниц. Пока
   слой на странице есть, собственные заставки окон не нужны: их прячет
   правило ниже. Нет слоя (школа очистила поля видео, и пиксельная
   сверка снимает именно это состояние) - заставки возвращаются сами. */

.fon-video {
  position: fixed;
  inset: 0;
  z-index: -1;
  overflow: hidden;
}

.fon-video__kadr,
.fon-video__video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* Кадр лежит под видео и виден, пока видео грузится. */
.fon-video__video { z-index: 1; }

body:has(.fon-video) [data-video-kadr] { display: none; }

/* На телефоне видео не играет: трафик мобильный, а фон декоративный.
   Параллакс остаётся - кадр так же прибит к окну. */
@media (max-width: 860px) {
  .fon-video__video { display: none; }
}

/* ─── Движение ─────────────────────────────────────────────────────
   Всё, что на сайте появляется, выезжает и раскрывается, сделано
   переходами css, а не прыжком: шторка меню и подменю в ней
   (mobile-menu.css), баннер cookie (cookie.css), окно заявки и его
   панели "спасибо"/"не получилось" (form.css), ответы в блоке вопросов
   (pg-faq.css), карточки видеоотзывов при наведении (hm-deti.css,
   su-video.css).

   Здесь - общее правило на всех: человеку, который в настройках системы
   попросил убрать анимацию (укачивает, мешает сосредоточиться,
   вестибулярные нарушения), движение не показываем совсем. Переходы не
   выключаются в ноль - нулевая длительность в части браузеров отменяет
   и само событие окончания перехода, на которое может быть завязан код;
   1 мс для глаза то же самое, а для кода переход остаётся переходом. */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 1ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 1ms !important;
    scroll-behavior: auto !important;
  }
}