/* nav.css — выпадающее меню «Услуги», разложенное по группам.

   Общий файл: подключается и главной, и всеми внутренними страницами.
   Базовые стили шапки живут в landing.css и dark.css по отдельности (так
   исторически сложилось), но эти правила должны совпадать везде до пикселя —
   меню одно на весь сайт, и любое расхождение сразу заметно при переходе со
   страницы на страницу. Поэтому они здесь, а не продублированы в двух местах.

   Файл подключается ПОСЛЕ landing.css и dark.css: он переопределяет
   раскладку .nav-dropdown с колонки на сетку групп.
*/

/* Список из десяти пунктов подряд приходилось прочитывать целиком, чтобы
   понять, есть ли нужное. Тремя колонками с подписями то же содержимое
   разбирается взглядом за секунду.

   auto-fit, а не жёсткие три колонки: на промежуточных ширинах — планшет в
   альбомной ориентации, узкое окно на ноутбуке — меню само сложится в две
   колонки или одну, вместо того чтобы вылезти за край экрана. */
.nav-dropdown {
  display: grid !important;
  grid-template-columns: repeat(auto-fit, minmax(206px, 1fr));
  gap: 6px 8px;
  width: max-content;
  /* 700px — та ширина, при которой самые длинные названия («Таргетированная
     реклама», «Промостраницы Яндекса») встают в одну строку. С более узкими
     колонками половина пунктов переносилась, и меню вытягивалось вдвое выше
     нужного. */
  max-width: min(700px, calc(100vw - 40px));
  padding: 16px 14px 14px !important;
}

.nav-drop-col { display: flex; flex-direction: column; gap: 1px; min-width: 0; }

/* Подпись группы — не ссылка и не должна выглядеть как ссылка: это указатель,
   а не пункт назначения. Отсюда мелкий кегль, разрядка и приглушённый цвет. */
.nav-drop-title {
  padding: 4px 12px 7px;
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--txt-3, var(--muted, #82828a));
  border-bottom: 1px solid var(--line, rgba(255,255,255,.08));
  margin-bottom: 5px;
}

/* Перенос вместо nowrap: «Таргетированная реклама» в колонке 172px не
   помещается в строку, а расширять колонку под самый длинный пункт — значит
   отдать ему треть ширины меню. */
.nav-dropdown .nav-drop-link {
  white-space: normal;
  padding: 8px 12px;
  line-height: 1.35;
}

/* ── Мобильное меню внутренних страниц ───────────────────────────────────
   Здесь всё в один столбец, колонок нет, и подпись группы — единственное,
   что отделяет одну группу от другой. */
.nav-mobile-group {
  display: block; padding: 16px 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase;
  color: var(--txt-3, var(--muted, #82828a));
}
.nav-mobile .nav-mobile-sub {
  padding-left: 18px; font-size: 16px;
  color: var(--lime-bright, var(--accent-bright, #c4f53e));
}


/* ── Шапка не должна прыгать между страницами ────────────────────────────
   При прокрутке шапка «прилипала»: съезжала с 18px до 10px и обзаводилась
   фоном. На одной странице это читается как приятная мелочь, но при
   переходе на другую страница открывается сверху — и шапка отскакивает
   обратно на 18px. Замер: были проскроллены, шапка на 10px, перешли —
   стало 18px, разница в восемь пикселей на каждом переходе. Владелец сайта
   описал это как «шапка скачет», и он прав.

   Само прилипание остаётся: фон, граница и тень при прокрутке появляются
   по-прежнему. Убрано только смещение по вертикали — оно и давало скачок,
   а к сути эффекта отношения не имеет. */
.nav.scrolled { top: 18px; }
@media (max-width: 900px) {
  .nav, .nav.scrolled { top: 10px; }
}

/* ── Быстрая связь на телефоне ───────────────────────────────────────────
   Две кнопки, закреплённые внизу: слева Telegram, справа звонок. На
   телефоне это два самых коротких пути до разговора, и оба обычно
   находятся в самом низу страницы — то есть за десятком экранов прокрутки.

   Только для телефонов: на десктопе номер и мессенджеры и так стоят в
   шапке, а плавающие кнопки поверх контента там читаются как баннер.

   Размер 54px — заметно больше порога в 24px, ниже которого палец
   промахивается, и достаётся большим пальцем при хвате одной рукой. */
.mob-dock { display: none; }
@media (max-width: 640px) {
  .mob-dock {
    display: flex; justify-content: space-between; align-items: flex-end;
    position: fixed; z-index: 60; pointer-events: none;
    left: 14px; right: 14px;
    /* safe-area — чтобы кнопки не заезжали под полосу жестов на iPhone. */
    bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
  .mob-dock-btn {
    pointer-events: auto;
    width: 54px; height: 54px; border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    box-shadow: 0 10px 28px rgba(0,0,0,.55);
    transition: transform .18s cubic-bezier(.32,.72,0,1);
  }
  .mob-dock-btn:active { transform: scale(.93); }
  .mob-dock-tg {
    background: rgba(18,18,20,0.94); border: 1px solid var(--line-strong, rgba(255,255,255,.14));
    color: var(--accent-bright, var(--lime-bright, #c4f53e));
    backdrop-filter: blur(14px); -webkit-backdrop-filter: blur(14px);
  }
  .mob-dock-call {
    background: var(--accent-bright, var(--lime-bright, #c4f53e)); border: none; color: #0c1402;
  }
  .mob-dock-btn svg { width: 24px; height: 24px; display: block; }

  /* Кнопка квиза («Рассчитать проект») на телефоне и так скрыта штатным
     правилом в landing.css — за место с доком они не спорят.

     Подвал получает запас снизу: без него последние ссылки и строка с
     копирайтом уходят под кнопки, а это единственное место страницы, где
     док реально что-то перекрывает. */
  .footer { padding-bottom: calc(78px + env(safe-area-inset-bottom, 0px)); }
}


/* ── Одинаковая шапка на всех страницах ──────────────────────────────────
   Кнопки в шапке различались по ширине и высоте при переходе между
   страницами. Причин было две, и обе неочевидные.

   Первая: .btn-sm описан в двух файлах по-разному — 10px/18px в landing.css
   (главная) против 11px/20px в dark.css (все остальные). Кнопка «Обсудить
   задачу» выходила 173×40 на главной и 161×42 на внутренних.

   Вторая: шрифт подключён с font-display: optional. Если он не успел
   загрузиться до первой отрисовки, страница остаётся на системном — и та же
   кнопка выходит на один-два пикселя уже. Успел или нет, зависит от кэша и
   скорости, то есть меняется от перехода к переходу.

   Поэтому геометрия шапки задаётся здесь, в файле, который грузят все
   страницы и который идёт последним. Ширина кнопок фиксирована: текст в них
   не меняется никогда, так что запас безопасен, а дрожание от подмены шрифта
   он снимает полностью. */
.nav .btn-sm {
  padding: 11px 20px;
  font-size: 15px;
  height: 42px;
  justify-content: center;
  /* Рамка объявлена явно: в landing.css у кнопки был прозрачный контур в
     1px, в dark.css — никакого. При box-sizing: border-box это давало ровно
     пиксель разницы в ширине между главной и остальными страницами. */
  border-width: 1px; border-style: solid;
}
.nav .btn-fill { border-color: transparent; }
.nav .nav-cta { min-width: 162px; }
.nav .nav-dzen { min-width: 144px; }
.nav-actions { display: flex; align-items: center; gap: 8px; }
.nav-ic { width: 38px; height: 38px; flex: none; }

@media (max-width: 900px) {
  /* На телефоне в шапке остаются только иконки и бургер — фиксировать
     ширину нечему, а запас в 162px сжал бы им место. */
  .nav .nav-cta, .nav .nav-dzen { min-width: 0; }
}

/* Пункты меню тоже задаются здесь. В landing.css у них не был указан вес, то
   есть наследовался обычный 400, а в dark.css стоял 500 — и один и тот же
   «Контакты» выходил 66px на главной против 76px на остальных страницах.
   Вся строка меню съезжала на тридцать с лишним пикселей.

   Значение 500 — то, что уже стоит на тридцати страницах из тридцати одной;
   менять их все ради главной смысла нет. Высота строки задана явно по той же
   причине: без неё пункты выходили 20px против 18px, и шапка «дышала» по
   вертикали при переходе. */
/* display здесь НЕ задаём. На телефоне меню прячется правилом
   `@media (max-width: 900px) { .nav-links { display: none } }` из landing.css
   и dark.css. Этот файл грузится позже, специфичность та же — и `display: flex`
   отсюда перебивал то правило: пункты меню вылезали поверх шапки на телефоне,
   да ещё и с зоной касания 18px при норме в 24. Задаём только то, что
   действительно расходилось между страницами. */
.nav-links { align-items: center; gap: 30px; }
.nav-links > a, .nav-links .nav-drop-trigger {
  font-size: 15px; font-weight: 500; line-height: 1.2; letter-spacing: -0.01em;
}


/* ── Бургер ──────────────────────────────────────────────────────────────
   На главной это кнопка с иконкой (padding 9px), на остальных — три полоски
   в столбик (padding 8px, gap 5px). Разные способы нарисовать одно и то же
   давали разный размер: 40×40 против 38×32, и вся правая группа в шапке
   съезжала по вертикали на два пикселя при переходе.

   Размер задан явно, а внутренности выравниваются по центру — так обе
   реализации занимают одну и ту же коробку. */
.nav-burger {
  width: 40px; height: 40px; padding: 0;
  align-items: center; justify-content: center;
  flex: none;
}


/* ── Кнопка «Рассчитать проект» ──────────────────────────────────────────
   Стили лежали в landing.css, то есть только на главной, — на остальных
   страницах кнопки не было вовсе. Перенесены сюда, в файл, который грузят
   все страницы.

   Слева внизу, чтобы не спорить с кнопкой «наверх» и с чатами, которые
   принято вешать справа. На телефоне скрыта: там внизу уже стоят звонок и
   Telegram, третья плавающая кнопка перекрыла бы текст. */
.quiz-fab {
  position: fixed; left: 24px; bottom: 24px; z-index: 60;
  display: inline-flex; align-items: center; gap: 9px;
  padding: 14px 22px; border: none; cursor: pointer; text-decoration: none;
  background: var(--accent-bright, var(--lime-bright, #c4f53e)); color: #0c1402;
  font-family: inherit; font-weight: 700; font-size: 15px;
  border-radius: var(--r-pill, 999px);
  box-shadow: 0 8px 28px rgba(0,0,0,0.45), 0 0 0 1px rgba(0,0,0,0.05);
  transition: transform .18s cubic-bezier(.32,.72,0,1), box-shadow .2s ease, background .2s ease;
  animation: quizFabIn .4s ease both .6s;
}
.quiz-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 34px rgba(0,0,0,0.55); }
.quiz-fab:active { transform: translateY(0) scale(0.98); }
.quiz-fab-ic { display: inline-flex; }
.quiz-fab-ic svg { display: block; }
@keyframes quizFabIn { from { opacity: 0; transform: translateY(16px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 900px) { .quiz-fab { display: none; } }