/*
 * Оформление по брендбуку «В паре» (версия 1.0, май 2026).
 *
 * Файл подключается ПОСЛЕ основных стилей темы отдельной строкой — чтобы откат
 * был одним движением, а не разбором, где чьи правки.
 *
 * Здесь НЕТ изменений текстов, структуры и адресов: только цвет, шрифт,
 * скругления, размеры и порядок показа блоков на телефоне.
 *
 * Значения взяты из брендбука: раздел 5 «Цветовая палитра», раздел 6
 * «Типографика», раздел 8.1 «Сайт». Селекторы — фактические, снятые с живой
 * вёрстки, а не предполагаемые.
 */

:root {
  --vp-zelenyy:       #003C37;  /* основной цвет бренда */
  --vp-zelenyy-svet:  #0E3A2E;
  --vp-kremovyy:      #F4F1E8;  /* фон страниц вместо белого */
  --vp-yantar:        #C8943C;  /* акцент: кнопки призыва */
  --vp-yantar-navod:  #B8862E;  /* при наведении */
  --vp-tekst:         #0F2A1F;
  --vp-seryy:         #7A7770;  /* подписи */
  --vp-blok:          #E8E5DE;  /* карточки и светлые блоки */
}

/* ---------- 1. Шрифт ---------------------------------------------------- */
/* Manrope лежит на нашем сервере: прежний Open Sans тянулся с внешнего
   сервиса и подгружался уже под конец загрузки страницы. */
body, button, input, select, textarea, h1, h2, h3, h4, h5, h6,
.button--default, .btn, .header, .footer {
  font-family: 'Manrope', system-ui, -apple-system, 'Segoe UI', sans-serif;
}

/* ---------- 2. Фон и текст ---------------------------------------------- */
body { background-color: var(--vp-kremovyy); color: var(--vp-tekst); }

/* блоки с собственным белым фоном — брендбук просит кремовый.
   Классы взяты с живой страницы, а не наугад. */
.wrapper, .content, .container-fluid.bg-white, .bg-white { background-color: transparent; }
.rating-to-services, .read_more, .maintext, .maintext_white,
section[class*="white"], div[class*="_white"] {
  background-color: var(--vp-kremovyy) !important;
}
.card-review, .card, .price-card, .teacher-card { background-color: var(--vp-blok); border-radius: 14px; }

/* ссылки: синий #007BFF в палитре бренда отсутствует */
a { color: var(--vp-zelenyy); }
a:hover, a:focus { color: var(--vp-yantar-navod); }

/* ---------- 3. Кнопки призыва ------------------------------------------- */
/* Было: жёлтая заливка #FFE42A, текст #333, скругление 30px, подпись капсом.
   Брендбук: янтарный фон, тёмный текст, скругление 8–12px. */
.button--default,
.button--default--mini,
.sale.input-button,
.input-button,
input[type="submit"] {
  background-color: var(--vp-yantar) !important;
  color: var(--vp-tekst) !important;
  border-radius: 10px !important;
  text-transform: none !important;
  font-weight: 600;
  font-size: 16px;
  letter-spacing: 0;
  box-shadow: none;
}
.button--default--mini { font-size: 15px; }
.button--default:hover,
.button--default--mini:hover,
.sale.input-button:hover,
.input-button:hover,
input[type="submit"]:hover {
  background-color: var(--vp-yantar-navod) !important;
  color: var(--vp-tekst) !important;
}

/* ---------- 4. Заголовки ------------------------------------------------ */
/* Брендбук: капс — только для очень коротких смысловых акцентов.
   Меняем НАЧЕРТАНИЕ, сами тексты не трогаем. */
h1, h2, h3, h4,
.main-advantages__title,
.section-title, .block-title {
  text-transform: none !important;
  letter-spacing: 0;
}
/* тему перебиваем явно: у неё свои правила выше по весу */
h2, h3, .main-advantages__title { color: var(--vp-zelenyy) !important; }
/* на тёмных подложках заголовки остаются светлыми */
.header h2, .header h3,
[class*="promo"] h2, [class*="promo"] h3,
[style*="003C37"] h2, .dark h2, .dark h3 { color: var(--vp-kremovyy) !important; }
/* на тёмном фоне заголовок остаётся светлым */
.header h1, .promo h1, [class*="promo"] h1, .main-screen h1 { color: #fff; }

/* бирюзовый #1EA2B9 — не цвет бренда */
.main-advantages__title, .main-advantages svg, .main-advantages i,
[class*="advantages"] [class*="icon"] {
  color: var(--vp-zelenyy) !important;
  fill: var(--vp-zelenyy) !important;
  border-color: var(--vp-zelenyy) !important;
}
.main-advantages__text { color: var(--vp-tekst); }

/* ---------- 5. Воздух ---------------------------------------------------- */
/* Брендбук: между секциями 60–120px, внутри карточек 24–32px. */
.main-advantages { padding-top: 56px; padding-bottom: 56px; }
.card-review { padding: 28px; }

/* ---------- 6. Баннер о cookies ----------------------------------------- */
/* Был белым с ярко-синей кнопкой — синего в палитре нет вовсе. */
#cookie_note {
  background: var(--vp-zelenyy) !important;
  color: var(--vp-kremovyy) !important;
  font-size: 14px;
  border-radius: 12px;
}
#cookie_note a { color: var(--vp-yantar) !important; text-decoration: underline; }
#cookie_note .cookie_accept,
.cookie_accept.btn-primary {
  background-color: var(--vp-yantar) !important;
  border-color: var(--vp-yantar) !important;
  color: var(--vp-tekst) !important;
  border-radius: 8px !important;
  font-weight: 600;
}

/* ---------- 7. Телефон --------------------------------------------------- */
@media (max-width: 600px) {
  /* Кликабельное не мельче 44 пикселей: сейчас часть ссылок по 17–22. */
  .button--default, .button--default--mini, .input-button, input[type="submit"] {
    min-height: 48px; font-size: 16px;
  }
  .main-advantages { padding-top: 36px; padding-bottom: 36px; }

  /* Самый мелкий текст на сайте — 12px, брендбук просит от 16. */
  small, .small, figcaption, .cookie_note__text, #cookie_note { font-size: 14px; }

  /* Баннер о cookies занимал треть экрана. */
  #cookie_note { padding: 10px 12px !important; }
}