/*
Theme Name: KRASAVA Boxing
Description: Тема KRASAVA BOXING ACADEMY. Собрана Фабрикой сайтов 30.08.2026.
             Цвет и шрифт живут ТОЛЬКО в tokens.css — правило цеха №7.
Author: Factory-Sites
Version: 1.0.0
*/
html { -webkit-text-size-adjust: 100%; }
body { margin: 0; background: var(--bg); color: var(--ink);
       font-family: var(--font-text); font-size: var(--t-body); line-height: var(--lh-normal); }
img, video { max-width: 100%; height: auto; display: block; }
a { color: inherit; }
h1,h2,h3 { font-family: var(--font-display); line-height: var(--lh-tight); margin: 0; }

/* ── Служебные плашки допущений ─────────────────────────────────────────
   «ПОДСТАВИЛ САМ» и «НЕТ ВОВСЕ» помечают места, где на странице стоит
   наша догадка, а не слово клиента. Механика фабрики, не элемент дизайна.
   На боевой странице скрыты; чтобы увидеть — закомментировать это правило. */
span[style*="1px dashed var(--line)"] { display: none !important; }

/* ── Кириллица ───────────────────────────────────────────────────────────
   Archivo Black кириллицы НЕ содержит — на русской и украинской версиях
   заголовки посыпались бы квадратиками. Замена записана в tokens.css
   с кириллицей. Подменяем только на этих страницах, английская не трогается. */






/* ── Переключатель языков ────────────────────────────────────────────────
   Собран по разбору лучших практик (Linguise, 30.08.2026):
   · родные названия языков, не «Russian»
   · ⛔ без флагов: флаг — это страна, а не язык
   · тач-цель 44×44 — минимум для пальца
   · работает БЕЗ JavaScript через <details>: робот и человек с выключенным
     JS видят все три ссылки
   · aria-label, aria-current, hreflang и lang на каждой ссылке */
.kr-lang { position: relative; display: inline-block; flex: 0 0 auto; }
.kr-lang__btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px; min-width: 44px; padding: 0 12px;
  background: transparent; border: 1px solid var(--line); border-radius: 8px;
  color: var(--ink); cursor: pointer; list-style: none;
  font: 700 var(--t-label)/1 var(--font-text); letter-spacing: .08em; text-transform: uppercase;
  transition: border-color var(--d-fast) var(--e-out); }
.kr-lang__btn::-webkit-details-marker { display: none; }
.kr-lang__btn:hover { border-color: var(--accent); }
.kr-lang__btn:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
.kr-lang__globe { width: 14px; height: 14px; opacity: .7; }
.kr-lang__caret { width: 8px; height: 8px; opacity: .55;
  transition: transform var(--d-fast) var(--e-out); }
.kr-lang[open] .kr-lang__btn { border-color: var(--accent); }
.kr-lang[open] .kr-lang__caret { transform: rotate(180deg); }
.kr-lang__list { position: absolute; top: calc(100% + 6px); right: 0; min-width: 168px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 8px;
  padding: 5px; margin: 0; list-style: none !important; z-index: 60;
  box-shadow: 0 10px 28px rgba(0,0,0,.5); }
.kr-lang__list li { list-style: none !important; margin: 0; padding: 0; }
.kr-lang__list a { display: flex; align-items: center; justify-content: space-between; gap: 12px;
  min-height: 44px; padding: 0 12px; border-radius: 5px; text-decoration: none;
  color: var(--ink-2); font: 500 var(--t-small)/1.2 var(--font-text); }
.kr-lang__list a:hover { background: var(--surface-2); color: var(--ink); }
.kr-lang__list a[aria-current="page"] { color: var(--accent); font-weight: 700; }
.kr-lang__code { font-size: 10px; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); }
@media (max-width: 768px) { .kr-lang__list { min-width: 152px; } }


/* ── Шапка на мобильном ──────────────────────────────────────────────────
   Решено Eugene 30.08.2026: на узком экране кнопка «BOOK A SESSION» из шапки
   убирается — та же кнопка стоит на первом экране крупно, и два одинаковых
   призыва на одном экране это шум, а не забота.
   Переключатель облегчён: 42px в шапке 65px читались впритык, а рамка
   на фоне фотографии сливалась. */
@media (max-width: 768px) {
  header { padding-left: 18px !important; padding-right: 18px !important;
           justify-content: space-between !important; }

  .kr-lang__btn {
    min-height: 34px; height: 34px; min-width: 0; padding: 0 10px; gap: 5px;
    font-size: 10px; letter-spacing: .06em; border-radius: 7px;
    /* собственный фон: на фоне кадра одна рамка теряется */
    background: rgba(255,255,255,.06);
    border-color: rgba(255,255,255,.14);
  }
  /* тач-цель остаётся 44px, но невидимой — палец попадает, глаз не спотыкается */
  .kr-lang__btn::after { content: ""; position: absolute; inset: -6px -4px; }
  .kr-lang { display: inline-flex; align-items: center; }
  .kr-lang__globe { width: 12px; height: 12px; }
  .kr-lang__caret { width: 7px; height: 7px; }
  .kr-lang__list { min-width: 150px; right: 0; top: calc(100% + 9px); }
}

/* ── ОДИН ШРИФТ НА ВСЕ ТРИ ЯЗЫКА ───────────────────────────────────────────
   Здесь стояла подмена: .lang-ru, .lang-ua получали Oswald, потому что в
   Archivo Black нет кириллицы. Работало, но давало ровно то, что Eugene
   назвал главной претензией 30.08.2026: «мне не нравится, что переключение
   меняется» — человек жал RU и попадал будто на другой сайт.

   Теперь весь сайт на Montserrat: латиница и кириллица одними буквами,
   весь диапазон 100–900. Подменять нечего и незачем — блок снят намеренно,
   не забыт. Возвращать нельзя: форма букв и есть лицо бренда. */

/* ══ Правки 30.08.2026 по замечаниям Eugene ═══════════════════════════════
   Один блок на все правки этого дня. Раньше их было три, дописанных подряд,
   и каждый следующий перебивал предыдущий тем же селектором с !important —
   выигрывало последнее, а выглядело как «CSS не применяется» (Г-112). */

/* ШАПКА НЕ ЛИПНЕТ.
   Было: position:fixed — шапка ехала полосой через всю страницу до низа
   («залипала и ехала полосой по скролу»). Умный вариант — прячется вниз,
   возвращается вверх — прочитался как «шапку снесли»: переключатель языка
   доставался только неочевидным жестом (Г-119).
   Стало: обычная шапка, уезжает с контентом. Язык не пропадает — он
   продублирован в футере. */
header[data-dc-tpl] { position: absolute !important; }

/* ПЕРЕКЛЮЧАТЕЛЬ ЯЗЫКА В ФУТЕРЕ — второе предсказуемое место */
.kr-lang-foot {
  max-width: var(--wrap); margin: 0 auto;
  padding: 0 var(--gutter) var(--s-6);
  display: flex; justify-content: flex-start;
}
.kr-lang-foot .kr-lang__list { bottom: 100%; top: auto; }

@media (max-width: 768px) {
  /* ПОРТРЕТ ТРЕНЕРА край в край.
     Был 350px в отступах, а соседние секции — 390 край в край: он один
     выбивался и читался как поехавшая вёрстка. Ширина в 100vw, а не
     calc(100% + отступы): .coach — флекс с align-items:center, там процентная
     ширина не растягивает элемент. */
  /* Селектор .coach > .coach-photo, а не просто .coach-photo: в самом макете
     есть своё .coach-photo{width:100% !important} внутри инлайнового <style>,
     и он печатается ПОСЛЕ файла темы. При равном !important спор решает
     специфичность, а не порядок — два класса бьют один (Г-112). */
  .coach > .coach-photo {
    width: 100vw !important;
    max-width: none !important;
    flex: 0 0 auto !important;
    margin-left: calc(var(--gutter) * -1);
    margin-right: calc(var(--gutter) * -1);
  }
  .coach > .coach-photo img { width: 100%; }

  /* тач-цель: родитель тыкает пальцем, 36px мимо (правило системы — от 44) */
  .kr-lang-foot { justify-content: center; }
  .kr-lang-foot .kr-lang__btn { min-height: 44px; }
}

/* ── СКРУГЛЕНИЕ: 16px, как в Telegram (решено Eugene 30.08.2026) ───────────
   Замер их веб-клиента: доминанта 16px (42 совпадения в CSS), крупные блоки
   24px, мелочь 12px, кнопка на telegram.org — капсула.
   ⚠️ Это осознанная отмена прежнего решения системы («углы почти нулевые:
   бетонный блок, стальная рама, прямой ринг» — tokens.css). Отменено не
   случайно: Eugene смотрит на нынешний тренд и хочет мягче. --r-1 в токенах
   обновлён следом, чтобы система и сайт не спорили. */
:where(a, button, input, textarea, select, .tap, [class*="btn"], [class*="button"]) {
  border-radius: var(--r-1) !important;
}
/* инлайн-стили макета ставят border-radius: var(--r-1) — значение приходит
   из токенов, поэтому отдельных правок разметки не нужно */

/* ── ПОЛОСА РЕГАЛИЙ НА ТЕЛЕФОНЕ ────────────────────────────────────────────
   Было: пять достижений колонкой, каждое на всю ширину 350px при коротком
   тексте — пустота справа, полоса 593px, «Golden Gloves» висел в пустоте
   (Eugene, 30.08.2026: «сразу идёт пустое место, Golden Gloves и пустое»).
   Причина арифметическая: сетка просит minmax(170px), две колонки по 170
   плюс отступ 32 = 372 > 350 доступных, поэтому auto-fit падал в одну колонку.

   Стало: «Golden Gloves · CHAMPION 2026» поднят наверх, растянут на ширину
   и собран в одну строку — заголовок слева, подпись справа. Он самый свежий
   и весомый титул и он же нечётный пятый: внизу оставлял дыру, наверху
   работает заголовком. Остальные четыре — ровный квадрат 2×2.

   ⚠️ <br> внутри заголовка скрыт намеренно: он в разметке макета не для
   красоты, а потому что на десктопе колонка 205px и «Golden Gloves» туда
   не влезает. На телефоне элемент растянут на 350 — тексту нужно 167,
   и перенос лепит пустоту на пустоте. Скрываем ТОЛЬКО в этом медиазапросе. */
@media (max-width: 768px) {
  [style*="minmax(170px"] {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
    gap: var(--s-4) var(--s-3) !important;
  }
  [style*="minmax(170px"] > :last-child {
    grid-column: 1 / -1;
    order: -1;
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-bottom: var(--s-3);
    border-bottom: 1px solid var(--line);
  }

  [style*="minmax(170px"] > :last-child > * { margin: 0 !important; }
}


/* ── Кнопка первого экрана ──────────────────────────────────────────────────
   Была 350×78 — 90% ширины телефона: не кнопка, а плашка во весь экран.

   Как правильно и почему именно так: весь первый экран построен по ЛЕВОЙ оси —
   логотип, заголовок, подпись и девиз стоят на 20px от края, выравнивание start.
   Кнопка — часть той же колонки, значит она:
     · стоит на той же оси, а не по центру;
     · шириной по своему тексту, а не по экрану;
     · в одну строку — перенос ломает её форму и растит высоту вдвое.
   Это не «как у Тони», а следствие сетки самого макета (Eugene, 30.08.2026). */
@media (max-width: 768px) {
  #hero a[style*="inline-flex"] {
    box-sizing: border-box !important;
    width: auto !important;
    align-self: flex-start !important;
    margin-right: auto !important;
    padding: 0 22px !important;
    height: 52px !important;
    min-height: 52px !important;
    font-size: 0.72rem !important;
    letter-spacing: 0.1em !important;
    white-space: nowrap !important;
  }
}

/* ── Шапка без кнопки записи ────────────────────────────────────────────────
   Красная «Book a session» стояла в шапке между меню и переключателем языка
   и разрывала строку: до языка оставалась дыра в 195px, а сама кнопка спорила
   с главной кнопкой первого экрана — два одинаковых призыва на одном экране.
   Убрана на всех размерах (Eugene, 30.08.2026).

   Записаться есть куда: кнопка первого экрана, форма ниже, телефон в подвале.

   Заодно собираем меню и язык в одну группу справа — иначе после удаления
   кнопки они разъезжаются по краям на space-between. */
header[data-dc-tpl] > a[style*="inline-flex"] { display: none !important; }
header[data-dc-tpl] .navlinks { margin-left: auto; }
header[data-dc-tpl] > .kr-lang { margin-left: var(--s-5); }