/*
 * Обвязка сайта: шапка, мегаменю, футер, главная-каталог, шапка страницы.
 * Разметку печатает inc/site.php. Цвета и шрифты — токенами --sk-* из плагина
 * cl-calculators (includes/ui/tokens.php): один источник на сайт и калькуляторы.
 */

/* ——— Общее —————————————————————————————————————————————————————— */

body {
	background: var(--sk-page, #f1f2f3);
	font-family: var(--sk-font-sans, system-ui, sans-serif);
	color: var(--sk-ink, #16181a);
	-webkit-font-smoothing: antialiased;
}

/* Родительская тема зажимает контент в 645px — калькулятору нужна вся ширина. */
.wp-site-blocks > * { margin-block-start: 0; }

.sk-wrap {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 0 28px;
}

@media (max-width: 640px) {
	.sk-wrap { padding: 0 14px; }
	/* СТРАНИЦА КАЛЬКУЛЯТОРА НА ТЕЛЕФОНЕ — ПОЛЯ 10 PX (29.09.2026, замечание
	   заказчика: «полоски по бокам на мобильном не нужны, только сужают
	   значимую часть»). Родительская тема даёт контенту ~30 px с каждой
	   стороны, калькулятор добавлял свои 12 — на экране 390 px чертёж
	   получал 304. Переопределяется переменная темы, а не padding блока: её
	   читают все `has-global-padding`. */
	body:has(.cl-calc-wrap) {
		--wp--style--root--padding-left: 10px;
		--wp--style--root--padding-right: 10px;
	}
}

/* ——— Шапка ——————————————————————————————————————————————————————— */

/* ШАПКА САЙТА НЕ ЛИПКАЯ (правка 31.08.2026).

   Была: `position: sticky` на ОБЁРТКЕ блочной части (не на .sk-hdr — липкий
   элемент ездит только в пределах родителя, а родитель тут ровно той же
   высоты). Держали её ради мегаменю посреди длинной страницы.

   Убрана: на странице калькулятора верх экрана нужен не меню, а самой работе —
   вкладкам чертежей и шапке таблицы. Полоса в 63 px отнимала у них место и
   двигала вниз каждый липкий элемент страницы. Меню — на своём месте вверху
   страницы и в футере, до него один Home.

   Токен --sk-sticky-top ОСТАЁТСЯ (см. ниже): это «сколько занято сверху
   постоянно видимым», и от него по-прежнему отсчитываются липкие элементы
   страниц. Просто теперь занято ноль. */
.sk-hdr {
	background: var(--sk-paper, #fff);
	border-bottom: 1px solid var(--sk-line, #dcdfe1);
}

/* Сколько занято сверху ПОСТОЯННО ВИДИМЫМ элементом сайта. Отсюда отступ
   берут липкие элементы страниц: панель вкладок чертежей и шапка таблицы
   (includes/ui/layout.css), карточка с 3D, прокрутка якорных кнопок.

   Шапка сайта больше не липкая (см. выше), значит занято ноль. Число остаётся
   ОДНО и в одном месте: вернётся липкая полоса — сюда же вернётся её высота, и
   все липкие элементы страниц отступят сами. */
:root { --sk-sticky-top: 0px; }
/* Вошедшему поверх страницы висит админ-панель WordPress (position: fixed,
   32 px; на ≤782 — 46 px; на ≤600 она уже не фиксирована и уезжает с
   прокруткой). Без этого шапка таблицы и вкладки липли под неё и были не
   видны (13.10.2026, «сделай приклеенный заголовок таблицы» — он был, но
   под панелью).
   Ставится на корень: токен читают и скрипты (anchors.js, tabs.js,
   goto-part.js) — с documentElement. */
:root:has(> body.admin-bar) { --sk-sticky-top: 32px; }
@media screen and (max-width: 782px) { :root:has(> body.admin-bar) { --sk-sticky-top: 46px; } }
@media screen and (max-width: 600px) { :root:has(> body.admin-bar) { --sk-sticky-top: 0px; } }

.sk-hdr__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 0 28px;
	min-height: 62px;
	display: flex;
	align-items: center;
	gap: 28px;
	flex-wrap: wrap;
}

.sk-logo {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 12px 0;
	text-decoration: none;
	color: inherit;
}

.sk-logo__mark {
	width: 24px;
	height: 24px;
	border: 2px solid var(--sk-ink);
	display: grid;
	grid-template-columns: 1fr 1fr;
	grid-template-rows: 1fr 1fr;
}

.sk-logo__mark i:nth-child(1) { background: var(--sk-ink); }
.sk-logo__mark i:nth-child(4) { background: var(--sk-accent); }

.sk-logo__text {
	font-weight: 800;
	font-size: 18px;
	letter-spacing: -0.02em;
}

.sk-logo__text span { color: var(--sk-faint); }

.sk-nav {
	display: flex;
	align-items: center;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 14px;
	font-weight: 600;
}

.sk-nav__mega {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	padding: 7px 13px;
	font-family: inherit;
	font-size: 14px;
	font-weight: 600;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-ink);
	cursor: pointer;
}

.sk-nav__mega[aria-expanded="true"] {
	color: var(--sk-paper);
	background: var(--sk-ink);
}

.sk-nav__arrow {
	width: 8px;
	height: 5px;
	background: currentColor;
	clip-path: polygon(0 0, 100% 0, 50% 100%);
}

.sk-nav__link {
	color: var(--sk-muted);
	text-decoration: none;
}

.sk-nav__link:hover { color: var(--sk-ink); }

/* Поиск: по умолчанию только лупа, поле выезжает по клику. Строка ввода
   в шапке съедала ряд экрана, а на странице калькулятора первое, что должно
   быть видно, — 3D-модель. */
.sk-hdr__find {
	margin-left: auto;
	display: flex;
	align-items: center;
	gap: 6px;
	padding: 10px 0;
}

.sk-hdr__findbtn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 34px;
	height: 34px;
	flex: none;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-line);
	cursor: pointer;
}

.sk-hdr__findbtn:hover { border-color: var(--sk-ink); }

.sk-hdr__findbtn[aria-expanded="true"] {
	color: var(--sk-paper);
	background: var(--sk-ink);
	border-color: var(--sk-ink);
}

.sk-hdr__search { display: none; }

.sk-hdr__find.is-open .sk-hdr__search { display: block; }

.sk-hdr__search input {
	width: 210px;
	height: 34px;
	padding: 0 11px;
	font-family: inherit;
	font-size: 13px;
	color: var(--sk-ink);
	background: var(--sk-wash);
	border: 1px solid var(--sk-line);
	outline: none;
	box-sizing: border-box;
}

.sk-hdr__search input:focus { border-color: var(--sk-accent); background: var(--sk-paper); }

/* Открытое поле на узком экране занимает всю ширину ряда — лупа остаётся
   справа от него. Пока поле закрыто, ряд не переносится: лупа узкая. */
@media (max-width: 900px) {
	.sk-hdr__find.is-open { margin-left: 0; width: 100%; }
	.sk-hdr__search { flex: 1 1 auto; min-width: 0; }
	.sk-hdr__search input { width: 100%; }
}

/* На телефоне быстрые ссылки-разделы уводят шапку в три строки — они есть
   в меню «Калькуляторы», поэтому здесь прячутся. */
@media (max-width: 720px) {
	.sk-hdr__in { gap: 12px; padding: 0 14px; }
	.sk-nav__link { display: none; }
	/* Лупа должна поместиться в один ряд с логотипом и «Калькуляторами» —
	   иначе она занимает целую строку, ради экономии которой и заводилась.
	   Уступает домен в логотипе: марка и название остаются. */
	.sk-hdr__in { gap: 10px; }
	.sk-logo__text { font-size: 17px; }
	.sk-logo__text span { display: none; }
	.sk-nav__mega { padding: 7px 10px; }
	.sk-hdr__find { padding: 0; }
	.sk-hdr__find.is-open { padding: 0 0 10px; }
	.sk-hdr__findbtn { width: 40px; height: 40px; }
	.sk-hdr__search input { height: 40px; }
}

/* ——— Мегаменю ————————————————————————————————————————————————————— */

.sk-mega {
	border-top: 1px solid var(--sk-line);
	background: var(--sk-paper);
	box-shadow: 0 14px 28px rgb(22 24 26 / 0.07);
	max-height: min(72vh, 640px);
	overflow-y: auto;
}

.sk-mega[hidden] { display: none; }

.sk-mega__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 26px 28px 30px;
}

.sk-mega__grid {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(min(210px, 100%), 1fr));
	gap: 26px 34px;
}

.sk-mega__title {
	display: block;
	padding-bottom: 9px;
	margin-bottom: 11px;
	border-bottom: 1px solid var(--sk-line);
	font-family: var(--sk-font-mono);
	font-size: 11px;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: var(--sk-accent-cap);
	text-decoration: none;
}

.sk-mega__items { display: flex; flex-direction: column; gap: 8px; }

.sk-mega__items a {
	font-size: 14px;
	line-height: 1.3;
	color: var(--sk-muted);
	text-decoration: none;
	text-wrap: pretty;
}

.sk-mega__items a:hover { color: var(--sk-ink); }

.sk-mega__more { font-weight: 700; color: var(--sk-accent) !important; }

.sk-mega__foot {
	margin-top: 24px;
	padding-top: 18px;
	border-top: 1px solid var(--sk-line-2);
	display: flex;
	justify-content: space-between;
	gap: 18px;
	flex-wrap: wrap;
	font-size: 13px;
	color: var(--sk-muted-2);
}

.sk-mega__foot a { font-weight: 700; color: var(--sk-ink); text-decoration: none; }

/* ——— Шапка страницы —————————————————————————————————————————————— */

.sk-pagehead {
	background: var(--sk-paper);
	border-bottom: 1px solid var(--sk-line);
}

.sk-pagehead__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 20px 28px 22px;
}

.sk-crumbs {
	font-size: 12.5px;
	color: var(--sk-faint);
	margin-bottom: 12px;
	display: flex;
	gap: 7px;
	flex-wrap: wrap;
}

.sk-crumbs a { color: var(--sk-faint); text-decoration: none; }
.sk-crumbs a:hover { color: var(--sk-ink); }
.sk-crumbs__here { color: var(--sk-muted); }

.sk-pagehead__title {
	margin: 0;
	font-size: 34px;
	font-weight: 800;
	letter-spacing: -0.03em;
	line-height: 1.1;
	text-wrap: balance;
}

.sk-pagehead__norm {
	margin: 8px 0 0;
	font-size: 13px;
	line-height: 1.4;
	color: var(--sk-muted);
}

@media (max-width: 640px) {
	.sk-pagehead__in { padding: 14px 14px 16px; }
	.sk-pagehead__title { font-size: 24px; }
	.sk-pagehead__norm { margin-top: 6px; font-size: 12px; }
}

/* ——— Главная ————————————————————————————————————————————————————— */

.sk-hero {
	background: var(--sk-paper);
	border-bottom: 1px solid var(--sk-line);
}

.sk-hero__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 54px 28px 44px;
}

.sk-hero h1 {
	margin: 0 0 16px;
	font-size: 50px;
	line-height: 1.03;
	letter-spacing: -0.035em;
	font-weight: 800;
	text-wrap: balance;
}

.sk-hero p {
	margin: 0 0 26px;
	font-size: 16.5px;
	line-height: 1.55;
	color: var(--sk-muted);
	max-width: 560px;
	text-wrap: pretty;
}

.sk-hero__search { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }

.sk-hero__search input {
	flex: 1;
	min-width: 240px;
	max-width: 540px;
	height: 50px;
	padding: 0 15px;
	font-family: inherit;
	font-size: 15px;
	color: var(--sk-ink);
	background: var(--sk-paper);
	border: 1px solid var(--sk-ink);
	outline: none;
	box-sizing: border-box;
}

.sk-hero__count {
	font-family: var(--sk-font-mono);
	font-size: 12.5px;
	color: var(--sk-faint-2);
}

@media (max-width: 640px) {
	.sk-hero__in { padding: 28px 14px 26px; }
	.sk-hero h1 { font-size: 30px; }
}

.sk-home__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 44px 28px 80px;
}

@media (max-width: 640px) {
	.sk-home__in { padding: 22px 14px 40px; }
}

.sk-stats {
	display: flex;
	gap: 34px;
	flex-wrap: wrap;
	padding-bottom: 26px;
	border-bottom: 1px solid var(--sk-line);
	margin-bottom: 30px;
}

.sk-stats b {
	display: block;
	font-family: var(--sk-font-mono);
	font-size: 28px;
	font-weight: 600;
	line-height: 1.1;
}

.sk-stats span { font-size: 13px; color: var(--sk-muted-2); }

/* Каталог: колонки-разделы, между ними линии — как в макете. */
.sk-cat {
	display: grid;
	grid-template-columns: repeat(auto-fill, minmax(min(320px, 100%), 1fr));
	gap: 1px;
	background: var(--sk-line);
	border: 1px solid var(--sk-line);
}

.sk-cat__group {
	background: var(--sk-paper);
	padding: 20px 22px 24px;
	scroll-margin-top: 80px;   /* липкая шапка не должна накрывать заголовок раздела */
}

.sk-cat__group[hidden] { display: none; }

.sk-cat__head {
	display: flex;
	align-items: baseline;
	gap: 9px;
	margin-bottom: 14px;
	padding-bottom: 11px;
	border-bottom: 1px solid var(--sk-line-2);
}

.sk-cat__head h2 {
	margin: 0;
	font-size: 16px;
	font-weight: 800;
	letter-spacing: -0.01em;
}

.sk-cat__n {
	font-family: var(--sk-font-mono);
	font-size: 12px;
	color: var(--sk-faint-2);
}

.sk-cat__items { display: flex; flex-direction: column; gap: 9px; }

.sk-cat__items a {
	font-size: 14px;
	line-height: 1.35;
	color: var(--sk-muted);
	text-decoration: none;
	text-wrap: pretty;
}

.sk-cat__items a:hover { color: var(--sk-ink); }
.sk-cat__items a[hidden] { display: none; }

.sk-cat__empty {
	border: 1px solid var(--sk-line);
	background: var(--sk-paper);
	padding: 40px;
	text-align: center;
	font-size: 14.5px;
	color: var(--sk-muted-2);
}

.sk-cat__empty[hidden] { display: none; }

/* ——— Футер ——————————————————————————————————————————————————————— */

.sk-ftr {
	background: var(--sk-paper);
	border-top: 1px solid var(--sk-line);
}

.sk-ftr__in {
	max-width: var(--sk-wrap, 1340px);
	margin: 0 auto;
	padding: 30px 28px 26px;
}

.sk-ftr__sections {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 22px;
	padding-bottom: 22px;
	border-bottom: 1px solid var(--sk-line-2);
}

.sk-ftr__sections a {
	font-size: 13.5px;
	color: var(--sk-muted);
	text-decoration: none;
}

.sk-ftr__sections a:hover { color: var(--sk-ink); }
.sk-ftr__sections span { font-family: var(--sk-font-mono); font-size: 11px; color: var(--sk-faint-2); }

.sk-ftr__disclaimer { padding: 22px 0 18px; }

.sk-ftr__disclaimer p {
	margin: 9px 0 0;
	max-width: 960px;
	font-size: 12.5px;
	line-height: 1.6;
	color: var(--sk-faint);
	text-wrap: pretty;
}

.sk-ftr__disclaimer p a { color: inherit; }

/* Правовая информация: подпись и ссылки одной строкой с переносом. */
.sk-ftr__legal {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
	gap: 6px 18px;
	padding: 0 0 18px;
	font-size: 12.5px;
}
.sk-ftr__legal .sk-cap { margin-right: 4px; }
.sk-ftr__legal a { color: var(--sk-muted); text-decoration: none; }
.sk-ftr__legal a:hover { color: var(--sk-ink); text-decoration: underline; }
.sk-ftr--slim .sk-ftr__legal { padding-top: 0; }

.sk-ftr__bottom {
	display: flex;
	justify-content: space-between;
	gap: 20px;
	flex-wrap: wrap;
	padding-top: 18px;
	border-top: 1px solid var(--sk-line-2);
	font-size: 13px;
	color: var(--sk-muted-2);
}

/* ——— Печать —————————————————————————————————————————————————————— */

@media print {
	.sk-hdr,
	.sk-mega,
	.sk-ftr,
	.sk-crumbs { display: none; }
	/* Обёртка шапки остаётся в потоке (её печатает WordPress), а липкой ей на
	   бумаге быть незачем — гасим вместе с содержимым. */
	.wp-site-blocks > header.wp-block-template-part { position: static; }
	body { background: #fff; }
}

/* ——— Цели касания в мегаменю на телефоне (29.09.2026, аудит юзабилити,
   spec_usability_lestn.md, п. 17). Пункты каталога были строками в 20 px —
   поднимается ВЫСОТА КАСАНИЯ (padding), шрифт прежний. */
@media (pointer: coarse) {
	.sk-mega__items { gap: 0; }
	.sk-mega__items a { padding: 10px 0; }
	.sk-mega__foot a { display: inline-block; padding: 10px 0; }
	.sk-crumbs a { display: inline-block; padding: 8px 0; }
}

/* НА ТЕЛЕФОНЕ У КАЛЬКУЛЯТОРА НЕТ ХЛЕБНЫХ КРОШЕК (10.10.2026, решение
   заказчика: «скрой хлебные крошки на мобильной версии для облегчения
   интерфейса, на всех калькуляторах»). Над калькулятором остаётся один
   заголовок; раздел каталога доступен из меню. Прочие страницы (кабинет,
   статьи) крошки сохраняют — там они показывают, где человек находится. */
@media (max-width: 640px) {
	body:has(.cl-calc-wrap) .sk-crumbs { display: none; }
}

/* СТРАНИЦА «ЛЁГКОГО» КАЛЬКУЛЯТОРА — ВСЯ В ОДНОЙ КОЛОНКЕ (10.10.2026,
   просьба заказчика: узкая колонка, «а то цифры
   растекаются по странице»). Сам калькулятор сужает ui/board.css; здесь —
   заголовок с крошками, статья и комментарии, чтобы их левый край совпал с
   краем калькулятора. */
body:has(.sk-calc--board) .sk-pagehead__in { max-width: calc(var(--sk-board-w, 1126px) + 56px); }
body:has(.sk-calc--board) .cl-comments,
body:has(.sk-calc--board) .sk-card--article {
	max-width: var(--sk-board-w, 1126px);
	margin-left: auto;
	margin-right: auto;
}
/* то же у конвертера единиц (ui/conv.css, --sk-conv-w) */
body:has(.sk-calc--conv) .sk-pagehead__in { max-width: calc(var(--sk-conv-w, 760px) + 56px); }
body:has(.sk-calc--conv) .cl-comments,
body:has(.sk-calc--conv) .sk-card--article {
	max-width: var(--sk-conv-w, 760px);
	margin-left: auto;
	margin-right: auto;
}