/* Noovia — общие стили сайта.
 *
 * Разметка страниц несёт инлайн-стили из дизайн-хендоффа: значения там
 * финальные, и переписывать их в классы значило бы вносить расхождение с
 * макетом ради красоты исходника.
 *
 * Здесь лежит только то, что инлайном не выражается: глобальные стили и
 * брейкпоинты. В референсе брейкпоинты были сделаны на window.innerWidth с
 * обработчиком resize — то есть страница без JS оставалась в десктопной
 * раскладке. Ниже те же перепады на media-запросах.
 *
 * Файл подключается относительным путём (assets/, ../assets/, ../../assets/),
 * а не от корня: страницы часто открывают прямо с диска на вычитке, и при
 * /assets/... браузер ищет стили в корне файловой системы, не находит — и
 * документ разваливается в неразмеченный текст.
 */

body { margin: 0; background: #F5F3EC; }
html { scroll-behavior: smooth; }
a { color: #24422D; text-decoration: none; }
a:hover { color: #1E3626; }

/* Десктопные стили отзывчивых блоков: подняты из инлайна, чтобы media-запросы
 * ниже перекрывали их без !important. */
.nv-nav-links { flex: 1 1 0%; display: flex; align-items: center; gap: 26px; }
.nv-hero-phone { position: relative; justify-self: center; }
.nv-doc-nav { flex: 1 1 0%; display: flex; align-items: center; gap: clamp(12px, 2vw, 20px); flex-wrap: wrap; }
.nv-doc-grid { max-width: 1080px; margin: 0px auto; padding: 64px 40px 0px; display: grid; gap: 56px; grid-template-columns: 214px minmax(0px, 1fr); align-items: start; }
.nv-toc { display: flex; gap: 9px; position: sticky; top: 96px; flex-direction: column; }

/* Лендинг: в шапке остаются логотип и кнопка загрузки. */
@media (max-width: 899.98px) {
  .nv-nav-links { display: none; }
}

/* Юридические страницы: содержание из липкой колонки слева превращается в
 * горизонтальную ленту якорей над текстом. */
@media (max-width: 859.98px) {
  .nv-doc-grid {
    display: flex; flex-direction: column; gap: 22px;
    padding: clamp(30px, 6vw, 64px) clamp(20px, 5vw, 40px) 0;
  }
  .nv-toc {
    position: static; top: auto;
    flex-direction: row; flex-wrap: wrap; align-items: center;
    gap: 10px 16px;
    border-bottom: 1px solid #E4E0D2; padding-bottom: 20px;
  }
}

/* Шапка юридических страниц на телефоне.
 *
 * В макете этот случай не закрыт: перелом на 860px описан только для
 * содержания, а шапка осталась на flex-wrap и на узком экране разваливает три
 * ссылки в столбик высотой в треть экрана. Эти страницы читают с телефона чаще,
 * чем с ноутбука, — в том числе рецензент магазина, — поэтому ссылки уводятся
 * в одну прокручиваемую строку. Значения из макета не меняются, меняется только
 * поведение переноса.
 */
@media (max-width: 760px) {
  .nv-doc-nav {
    min-width: 0;
    flex-basis: 100%;
    order: 3;
    flex-wrap: nowrap;
    overflow-x: auto;
    scrollbar-width: none;
    gap: 16px;
    padding-bottom: 2px;
  }
  .nv-doc-nav::-webkit-scrollbar { display: none; }
  .nv-doc-nav > a, .nv-doc-nav > span { white-space: nowrap; }
}

/* Плавный скролл ломает ориентацию тем, кто просил уменьшить движение. */
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

/* Фокус с клавиатуры: в макете его нет, а без него страницей нельзя
 * пользоваться без мыши. */
:focus-visible {
  outline: 2px solid #24422D;
  outline-offset: 3px;
  border-radius: 6px;
}