/* Дополнения к основной таблице стилей сайта.
 *
 * Основной CSS (/assets/main-*.css) собирается Vite из исходников статической
 * версии и здесь не правится. Всё, что нужно поменять со стороны темы, живёт
 * тут: файл лежит в репозитории и подключается из functions.php после основного.
 */

/* ---------------------------------------------------------------------------
 * Шапка белая.
 *
 * Раньше она была полупрозрачной с размытием. Цвета ссылок и бургера не
 * трогаем: в базовом CSS они уже тёмные (--vq-mid / --vq-navy) и заданы через
 * !important, так что читаемость на белом не страдает.
 * ------------------------------------------------------------------------- */
.site-header,
.site-header.nav-over-hero,
.site-header.nav-over-hero.scrolled {
  background: #fff;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border-bottom: 1px solid var(--vq-line, rgba(67, 81, 146, 0.12));
}

/* ---------------------------------------------------------------------------
 * Главная: шапка видна всегда, линия снизу - только при прокрутке.
 *
 * Пока страница в самом верху, шапка стоит поверх 3D-сцены и граница под ней
 * выглядит лишней чертой поперёк героя. Как только страница сдвинулась -
 * под шапкой едет контент, и линия нужна, чтобы шапка от него отделялась.
 * Класс header-scrolled вешает assets/theme-extra.js (только на главной).
 *
 * Селектор с .nav-over-hero - этот класс есть только у шапки главной,
 * поэтому внутренних страниц правило не касается: там граница как была.
 *
 * Меняется цвет границы, а не её наличие: ширина всегда 1px, иначе высота
 * шапки прыгала бы на пиксель и контент под ней дёргался.
 * ------------------------------------------------------------------------- */
.site-header.nav-over-hero {
  border-bottom-color: transparent;
  transition: border-bottom-color 0.3s ease;
}

.site-header.nav-over-hero.header-scrolled {
  border-bottom-color: var(--vq-line, rgba(67, 81, 146, 0.12));
}

/* ---------------------------------------------------------------------------
 * Карточки «Что мы производим» — без иллюстраций.
 *
 * Фотографий двух из трёх продуктов не существует, а смесь «фото + векторный
 * рисунок» смотрелась разнобоем. Вместо иллюстрации карточку держит крупный
 * порядковый номер - тот же приём, что в секции «Направления» выше по странице,
 * поэтому главная читается как одно целое.
 * ------------------------------------------------------------------------- */
.product-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: var(--vq-blue, #435192);
  opacity: 0.55;
  margin-bottom: 18px;
}

/* Акцентная полоска слева при наведении.
 * Именно ::before: ::after у .product-card уже занят радиальным бликом. */
.product-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--vq-aqua, #9fd6e8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
  z-index: 1;
}

.product-card:hover::before {
  transform: scaleY(1);
}

@media (max-width: 600px) {
  .product-num {
    font-size: 34px;
    margin-bottom: 14px;
  }
}

/* ---------------------------------------------------------------------------
 * Каталог «Продукция» — те же номера вместо векторных рисунков.
 *
 * Карточки с настоящей фотографией эта правка не трогает: номер подставляется
 * только там, где раньше был рисунок (см. vaqua_block_catalog в inc/blocks.php).
 * ------------------------------------------------------------------------- */
.catalog-num {
  font-family: "Instrument Serif", Georgia, serif;
  font-size: 40px;
  line-height: 1;
  color: var(--vq-blue, #435192);
  opacity: 0.55;
  margin-bottom: 18px;
}

.catalog-card {
  position: relative;
  overflow: hidden;
}

.catalog-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: var(--vq-aqua, #9fd6e8);
  transform: scaleY(0);
  transform-origin: top;
  transition: transform 0.3s ease;
  z-index: 1;
}

.catalog-card:hover::before {
  transform: scaleY(1);
}

/* ---------------------------------------------------------------------------
 * Длинные слова не должны распирать вёрстку на узких экранах.
 * В технических текстах попадаются слова вроде «окислительно-восстановительного»;
 * на экране 320px такое слово способно вызвать горизонтальную прокрутку.
 * ------------------------------------------------------------------------- */
.rich-p,
.rich-list li,
.catalog-desc,
.spec-val,
.spec-key,
.hc-channel-val {
  overflow-wrap: break-word;
}

/* ---------------------------------------------------------------------------
 * Списки в текстовых блоках.
 *
 * В контенте перечисления набраны строками с тире. Раньше каждая такая строка
 * выводилась отдельным абзацем и страница выглядела сплошным текстом; теперь
 * идущие подряд пункты собираются в <ul> (см. vaqua_block_richText).
 * ------------------------------------------------------------------------- */
.rich-list {
  list-style: none;
  padding: 0;
  margin: 0 0 22px;
  max-width: 62ch;
}

.rich-list li {
  position: relative;
  padding: 9px 0 9px 26px;
  border-bottom: 1px solid var(--vq-line, rgba(67, 81, 146, 0.12));
  font-size: 15px;
  line-height: 1.6;
  color: var(--vq-mid, #6a89ae);
}

.rich-list li:last-child {
  border-bottom: none;
}

/* Маркер — короткая линия вместо точки: спокойнее и в духе остальной вёрстки. */
.rich-list li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 1.05em;
  width: 12px;
  height: 1px;
  background: var(--vq-blue, #435192);
  opacity: 0.5;
}

/* ---------------------------------------------------------------------------
 * Контакты: телефон, почта и адрес - основным шрифтом.
 *
 * Они были набраны Instrument Serif - это антиква с крупными засечками,
 * хороша для заголовков, но телефон и email ей читаются тяжело. Переводим
 * на основной гротеск; табличные цифры выравнивают телефон по разрядам.
 * ------------------------------------------------------------------------- */
.hc-channel-val {
  font-family: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, Arial, sans-serif;
  font-size: 20px;
  font-weight: 500;
  letter-spacing: 0;
  font-variant-numeric: tabular-nums;
}

.hc-channel-val.hc-addr {
  font-size: 17px;
  line-height: 1.45;
  font-weight: 400;
}

@media (max-width: 600px) {
  .catalog-num {
    font-size: 34px;
    margin-bottom: 14px;
  }

  .hc-channel-val {
    font-size: 18px;
  }

  .hc-channel-val.hc-addr {
    font-size: 16px;
  }
}