/* ============================================================
   SafePac — мостик к разметке Gutenberg

   Статика этот слой не подключает: он нужен только теме WordPress.
   Лежит здесь, чтобы правка токенов доходила до него так же, как
   до остальных четырёх слоёв.

   Ядровые блоки печатают свои классы (.wp-block-navigation,
   .wp-block-button__link и так далее). Наши компоненты рассчитаны
   на собственную разметку, поэтому здесь и только здесь описано,
   как одно ложится на другое.

   Правило: этот файл не вводит новых решений. Всё, что тут есть, —
   перенос уже принятого на чужие селекторы. Появилось новое —
   значит его место в components.css, а не тут.
   ============================================================ */

/* ---------- Сетка ----------
   Блочная тема сама расставляет отступы через layout. Наш .container
   продолжает работать, а ядровому constrained задаём те же величины. */
.wp-site-blocks > * { margin-block: 0; }

.wp-block-group.section > .wp-block-group,
main > .wp-block-group.section {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}

/* Шаблоны статей. Секция уже даёт отступ контейнера, и правило выше
   добавляло его второй раз: текст статьи начинался на полсотни пикселей
   правее, чем на остальных страницах. */
.wp-block-group.section > .statya-layout,
.wp-block-group.section > .statya-top,
.wp-block-group.section > .stati-wrap {
  max-width: none;
  padding-inline: 0;
}

/* ---------- Навигация ----------
   Блок навигации не даёт повесить свои классы на внутренние элементы,
   поэтому переносим оформление .nav на его разметку. */
.header__bottom .wp-block-navigation {
  max-width: var(--container);
  margin-inline: auto;
  padding-inline: var(--container-pad);
}
.header__bottom .wp-block-navigation__container {
  justify-content: space-between;
  width: 100%;
  gap: var(--s-5);
}
.header__bottom .wp-block-navigation-item__content {
  font-size: var(--fs-small);
  color: var(--ink);
  text-decoration: none;
  padding-block: var(--s-3);
}
.header__bottom .wp-block-navigation-item__content:hover { color: var(--accent-ink); }
.header__bottom .wp-block-navigation-item.current-menu-item > .wp-block-navigation-item__content {
  color: var(--accent-ink);
}

/* Выпадающее подменю: та же полость, что у .submenu. Тени нет — только
   волосяная линия и смена тона, как во всей системе. */
.header__bottom .wp-block-navigation__submenu-container {
  background: var(--paper);
  border: var(--hairline) solid var(--rule);
  border-radius: var(--cutter);
  box-shadow: none;
  padding: var(--s-3);
  min-width: 16rem;
}
.header__bottom .wp-block-navigation__submenu-container .wp-block-navigation-item__content {
  padding: var(--s-2) var(--s-3);
  border-radius: var(--cutter);
}
.header__bottom .wp-block-navigation__submenu-container .wp-block-navigation-item__content:hover {
  background: var(--paper-sunk);
}

/* Мобильное меню: ядро рисует оверлей на всю высоту — оставляем,
   но приводим к нашим цветам и убираем закругления по краям экрана. */
.wp-block-navigation__responsive-container.is-menu-open {
  background: var(--paper);
  color: var(--ink);
  padding: var(--s-6) var(--container-pad);
}
.wp-block-navigation__responsive-container-close,
.wp-block-navigation__responsive-container-open { color: var(--ink); }

/* ---------- Кнопки ----------
   Ядро оборачивает ссылку в .wp-block-button__link. Наши .btn--primary
   и .btn--link висят на обёртке, поэтому опускаем оформление внутрь.

   Сначала снимаем с обёртки базовый .btn: иначе поля считаются дважды —
   раз на обёртке, раз на вложенной ссылке, — и кнопка вырастает. */
.wp-block-button.btn {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  min-height: 0;
}
.wp-block-button.btn > .wp-block-button__link { line-height: 1.2; }
.wp-block-button.btn--primary > .wp-block-button__link {
  background: var(--accent-btn);
  color: var(--ink-invert);
  border: none;
  border-radius: var(--cutter);
  padding: var(--s-3) var(--s-6);
  font-size: var(--fs-small);
  font-weight: 500;
  text-decoration: none;
  transition: background var(--t-base) var(--ease-seat);
}
.wp-block-button.btn--primary > .wp-block-button__link:hover { background: var(--accent-btn-hov); }
.wp-block-button.btn--primary > .wp-block-button__link:active { background: var(--accent-ink); }

.wp-block-button.btn--link > .wp-block-button__link {
  background: transparent;
  color: var(--ink);
  border: none;
  padding: var(--s-3) 0;
  font-size: var(--fs-small);
  text-decoration: underline;
  text-underline-offset: 0.28em;
  text-decoration-thickness: var(--hairline);
}
.wp-block-button.btn--link > .wp-block-button__link:hover { color: var(--accent-ink); }

/* ---------- Мелочи ядра, которые спорят с системой ---------- */
.wp-block-image img { border-radius: var(--cutter); }
.wp-block-table table { border-collapse: collapse; }
.wp-block-separator { border-color: var(--rule); opacity: 1; }
.wp-block-quote { border-left: var(--hairline) solid var(--accent); padding-left: var(--s-5); }

/* Ядро любит тени на всплывающих элементах. В системе теней нет. */
.wp-block-navigation__submenu-container,
.wp-block-search__button,
.wp-block-file__button { box-shadow: none !important; }

/* ============================================================
   Паттерны: подгонка под то, что умеет печатать редактор

   Статика ставила <dl>/<dt>/<dd>, <a> на всю карточку и голые <span>.
   Ядровые блоки так не умеют, поэтому паттерны собраны из групп,
   заголовков и абзацев. Ниже эти теги получают то же оформление,
   что и исходные. Ни одного нового решения здесь нет.
   ============================================================ */

/* Абзац внутри блока не должен приносить свои поля: ритм задаёт сетка. */
.eyebrow, .facts__value, .facts__label,
.stat__value, .stat__label,
.step__num, .step__text,
.sfera-card__name, .sfera-card__go, .sfera-card__text,
.props__title, .accordion__body { margin-block: 0; }

/* Свойство: в статике это <dt> и <dd>, здесь — заголовок и абзац. */
.props__item > h4 {
  position: relative;
  margin: 0 0 var(--s-2);
  padding-inline-start: var(--s-5);
  font-family: var(--font-sans);
  font-size: var(--fs-body);
  font-weight: 500;
  letter-spacing: var(--track-body);
}
.props__item > h4::before {
  content: "";
  position: absolute;
  inset-block-start: 0.5em;
  inset-inline-start: 0;
  width: var(--bullet); height: var(--bullet);
  background: var(--accent);
}
.props__item > p { margin: 0; font-size: var(--fs-small); color: var(--ink-muted); }

/* Карточка: в статике вся плитка была ссылкой. Здесь ссылка внутри имени,
   поэтому растягиваем её область нажатия на всю карточку. */
.sfera-card { position: relative; }
.sfera-card__name a { text-decoration: none; color: inherit; }
.sfera-card__name a::after { content: ""; position: absolute; inset: 0; }
.sfera-card:hover .sfera-card__name a { color: var(--accent-ink); }

/* Снимок в блоке image приходит завёрнутым в figure со своими полями. */
.step__media.wp-block-image,
.sfera-card__media.wp-block-image,
.hero__media .wp-block-image { margin: 0; }
.hero__media .wp-block-image img { width: 100%; height: auto; }

/* Аккордеон ядра. Стрелку маркера убираем: у нас свой знак в components.css. */
.accordion__item.wp-block-details > summary { list-style: none; }
.accordion__item.wp-block-details > summary::-webkit-details-marker { display: none; }

/* Таблицы приходят внутри figure.wp-block-table. */
.wp-block-table.table-scroll { margin: 0; overflow-x: auto; }
.wp-block-table.table-scroll > table { width: 100%; border-collapse: collapse; font-size: var(--fs-small); }

/* Колонки ядра вместо .split: те же пропорции и то же выравнивание. */
.wp-block-columns.split { gap: var(--s-8); align-items: center; }
.wp-block-columns.request__grid { gap: var(--s-8); align-items: start; }

/* Флекс-раскладка ядра печатает `> * { margin: 0 }` и этим сносит
   margin-inline-start:auto, которым контакты в шапке прижимаются вправо.
   Возвращаем, подняв специфичность до уровня их правила. */
.header__top-inner > .header__contact { margin-inline-start: auto; }

/* Блок логотипа приходит завёрнутым в .wp-block-site-logo со своими полями. */
.header__logo.wp-block-site-logo,
.footer__col .wp-block-site-logo { margin: 0; line-height: 0; }
.header__logo.wp-block-site-logo img { height: 24px; width: auto; }
.footer__col .wp-block-site-logo img { height: 28px; width: auto; }

/* Кнопка в шапке не должна тянуться: у ядра .wp-block-buttons — флекс-контейнер. */
.header__contact .wp-block-buttons { flex: none; margin: 0; }

/* Размерные модификаторы кнопки. На статике .btn--sm — это поля самой ссылки;
   у ядра ссылка вложена в обёртку, на которой висит класс, поэтому опускаем. */
.wp-block-button.btn--sm > .wp-block-button__link { padding: 0.625rem 1rem; }

/* Выпадающее меню.

   На статике это разворот в две колонки с подписями групп («Материалы»,
   «Конструкции»). Блок навигации WordPress печатает плоский список
   с display:flex, поэтому columns на нём не работают, а подписи групп
   он не поддерживает в принципе. Двухколоночную имитацию без подписей
   я убрал: одиннадцать ссылок в две колонки без заголовков читаются хуже,
   чем в одну. Осталось привести цвет и не дать вылезти за экран.

   Цвет рамки ядро ставит своей переменной с высокой специфичностью,
   поэтому переопределяем адресно. */
.header__bottom .wp-block-navigation__submenu-container {
  border-color: var(--rule) !important;
  padding: var(--s-3);
  max-width: calc(100vw - 2 * var(--container-pad));
}
/* Два последних раздела раскрываются влево: иначе упираются в правый край. */
@media (min-width: 62rem) {
  .header__bottom .wp-block-navigation__container > li:nth-last-child(-n+2)
    > .wp-block-navigation__submenu-container {
    left: auto;
    right: 0;
  }
}

/* ============================================================
   Отступы потока внутри наших сеток

   WordPress вешает на каждый второй и последующий элемент группы
   `margin-block-start: var(--wp--style--block-gap)`. В обычном потоке
   это межблочный отступ, но у нас .stats, .sfera-cards, .tech и прочее —
   это grid и flex, где расстояние задаёт gap. Там чужой margin сдвигает
   ячейку вниз и отнимает у неё высоту: первая плитка оказывается выше
   остальных, карточки съезжают лесенкой и не заполняют контейнер.

   Поэтому у детей наших раскладок отступы потока снимаем: расстояние
   между ними уже описано в sections.css через gap.
   ============================================================ */

/* Специфичность важна: свои отступы ядро печатает инлайном в <head>,
   то есть ПОСЛЕ наших файлов. Побеждаем классом обёртки и !important —
   это не стилистическая правка, а отмена чужого правила. */
.wp-block-group.stats > *,
.wp-block-group.sfera-cards > *,
.wp-block-group.tech > *,
.wp-block-group.steps > *,
.wp-block-group.clients > *,
.wp-block-group.facts > *,
.wp-block-group.sferas > *,
.wp-block-group.props > *,
.wp-block-group.props__list > *,
.wp-block-group.accordion > *,
.wp-block-group.hero__grid > *,
.wp-block-group.footer__grid > *,
.wp-block-group.header__top-inner > *,
.wp-block-group.header__contact > *,
.wp-block-columns.request__grid > *,
.wp-block-columns.split > * { margin-block: 0 !important; }

/* Внутри карточки поток нужен, но шаг задаёт её собственная сетка. */
.wp-block-group.sfera-card > *,
.wp-block-group.cavity > *,
.wp-block-group.step > *,
.wp-block-group.stat > *,
.wp-block-group.props__item > * { margin-block: 0 !important; }

/* Исключение из правила выше. У снимка в карточке отрицательный отступ
   несущий: он выводит картинку под самый край полости, за поля карточки.
   Обнуление отступов, которое чинит сетку, здесь ломает кадрирование —
   поэтому возвращаем именно эти значения, а не отменяем правило целиком. */
.wp-block-group.cavity > .tech__media,
.wp-block-group.cavity > .cavity__media,
.cavity > .wp-block-image.tech__media,
.cavity > .wp-block-image.cavity__media {
  margin: calc(var(--s-5) * -1) calc(var(--s-5) * -1) var(--s-5) !important;
}

/* Плашки первого экрана. Здесь снимается только чужой отступ потока,
   который WordPress вешает на каждый второй элемент группы. Своё
   расстояние до кнопок задаёт sections.css.

   Раньше тут стоял отрицательный отступ: он подтягивал плашки на нижний
   край ролика, пока они лежали поверх видео. После того как плашки
   переехали в поток текстовой колонки, тот же минус начал натягивать их
   на кнопку «Отправить чертёж или ТЗ» — главное действие первого экрана
   оказывалось перекрыто. */
@media (min-width: 62rem) {
  .hero__text > .hero__cards { margin-top: var(--s-7); }
}

/* Пустые обёртки от переносов строк в разметке: в grid они занимают
   полноценную ячейку и ломают раскладку. */
.stats > :empty,
.sfera-cards > :empty,
.tech > :empty,
.steps > :empty { display: none; }


/* ============================================================
   Расстояние между секциями

   Секции задают ритм собственными внутренними полями. WordPress же
   добавляет между соседними блоками потока свои 1.5rem, и на стыке
   утопленной секции со светлой в этот зазор просвечивает фон страницы —
   получается белая полоса поперёк экрана.

   Правило ядра записано через :where() и потому почти невесомо
   (специфичность 0-1-0). Нашего класса хватает, чтобы его перебить,
   без !important: инлайновые отступы отдельных блоков должны
   по-прежнему побеждать.
   ============================================================ */
.wp-site-blocks .wp-block-group.section,
.wp-site-blocks .wp-block-group.request { margin-block: 0; }