/* ==========================================================
   ОТ и ДО — общий слой поверх стилей страниц.
   Подключается ПОСЛЕ собственного <style> страницы, поэтому
   правит только то, что названо здесь. Палитра и типографика
   остаются в страницах: этот файл ничего не перекрашивает,
   он чинит доступность и добавляет сдержанное движение.
   ========================================================== */

:root {
  /* Акцент на мелком тексте.

     Фирменный #b24920 на фоне #faf7f2 даёт контраст 4.46 при
     норме 4.5 — промах крошечный, но систематический: под него
     попадают все надзаголовки и подписи. Для текста мельче 18px
     берём чуть более тёмный оттенок того же цвета. Кнопки,
     плашки и крупные заголовки остаются ровно фирменными:
     там контраста хватает с запасом. */
  --accent-text: #a5431d;

  /* Минимальная высота цели нажатия. Рекомендация Apple — 44,
     Google — 48. Берём 44: на этом сайте шапка низкая, и 48
     ломало бы её пропорции. */
  --tap: 44px;
}

/* ---------- Цели нажатия ----------

   Правила для пальца на этом сайте уже были, но лежали внутри
   @media (max-width: 720px) — то есть до планшета не доставали.
   На 768 пикселях шапка главной оставалась десктопной: ссылки
   по 21 пикселю, «Войти» 17, а экран при этом сенсорный.

   Ключимся не на ширину, а на тип указателя. pointer: coarse —
   это палец, независимо от размера экрана: телефон, планшет,
   ноутбук с сенсором. Мышь правило не задевает вовсе, поэтому
   десктопная шапка остаётся ровно такой, как была. */

@media (pointer: coarse) {
  header nav a,
  header nav button,
  .nav-btn,
  .back-link,
  .back-btn,
  .logo,
  .card-link,
  .hero-more,
  .footer-link,
  footer a,
  /* Телефон и почта — главные действия страницы реквизитов,
     и по ним звонят именно с телефона. */
  a[href^="mailto:"],
  a[href^="tel:"] {
    display: inline-flex;
    align-items: center;
    min-height: var(--tap);
  }

  /* В подвале ссылки идут столбиком: прирост высоты там же и разводит
     их друг от друга, попадать становится легче. */
  footer a,
  .footer-link { min-height: var(--tap); }

  /* В шапке место в обрез, поэтому высоту добираем внутренним отступом
     по вертикали, а не растягиванием строки: внешний вид не меняется. */
  header nav a,
  header nav button,
  .nav-btn {
    padding-block: calc((var(--tap) - 1.4em) / 2);
  }
}

/* ---------- Контраст мелкого акцентного текста ---------- */

/* Селекторы намеренно с запасом по весу: страницы объявляют эти же
   свойства своими правилами (.stamp .s2, .promo-more > summary), и
   короткая запись им проигрывает. Этот файл подключается последним
   и должен перекрывать — иначе он бесполезен. */

body .eyebrow,
body .page-label,
body .sec-no,
body .step-no,
body .calc-lbl,
body .review-result,
body .card-link,
body .back-link,
body .studio,
body .promo-more > summary,
body summary {
  color: var(--accent-text);
}

/* Цвет назначаем только там, где он и был акцентным.
   Если элемент унаследовал обычный цвет текста, не трогаем. */
.review-result { opacity: 1; }

/* ---------- Видимый фокус с клавиатуры ----------
   Без этого человек, идущий по сайту табом, не видит, где он. */

a:focus-visible,
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
summary:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--accent, #b24920);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- Мелкий шрифт ----------
   10 пикселей не читается на телефоне. Поднимаем до 12
   там, где текст действительно мелкий. */

body .s2,
body .stamp .s2 { font-size: 12px; }
body .logo-s,
body .logo-sub { font-size: 11px; }

/* ---------- Движение ----------
   Появление блоков при прокрутке, без библиотек.
   Работает на чистом CSS там, где браузер это умеет;
   где не умеет — блоки просто видны сразу. */

@supports (animation-timeline: view()) {
  @media (prefers-reduced-motion: no-preference) {
    .reveal {
      animation: otdo-in linear both;
      animation-timeline: view();
      animation-range: entry 0% entry 55%;
    }
  }
}

@keyframes otdo-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: none; }
}

/* Наведение и нажатие: короткие, без пружин.
   Родитель выбирает школу, а не смотрит демо. */
@media (prefers-reduced-motion: no-preference) {
  .btn, .btn-sec, .nav-btn, .tcard, .pupil, .review-card {
    transition: transform .16s ease, border-color .16s ease, background-color .16s ease;
  }
  .btn:active, .btn-sec:active, .nav-btn:active { transform: translateY(1px); }
}

/* Полное отключение по системной настройке. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Ссылка «сразу к содержанию» ----------

   Человек, который идёт по сайту с клавиатуры или через экранный
   диктор, каждый раз проходит шапку целиком, прежде чем добраться
   до текста. На главной это четыре пункта меню, вход и запись —
   шесть лишних нажатий на каждой странице.

   Ссылка невидима, пока на неё не встанет фокус. Мышью её не видно
   вовсе, поэтому вид сайта не меняется. */

.skip-link {
  position: absolute;
  left: 8px;
  top: -64px;
  z-index: 10000;
  padding: 12px 18px;
  background: var(--accent, #b24920);
  color: var(--paper, #fffdfa);
  border-radius: var(--r-btn, 12px);
  font: 600 15px/1.2 var(--font-body, system-ui, sans-serif);
  text-decoration: none;
  transition: top .12s ease;
}

.skip-link:focus {
  top: 8px;
}

/* Цель ссылки не должна получать рамку фокуса: она не интерактивна,
   обводка вокруг всей страницы выглядела бы поломкой. */
#main:focus,
#main:focus-visible { outline: none; }