/**
 * Оформление обвязки сайта: шапка, хлебные крошки, фон и карточка страницы.
 *
 * Стиль взят с grandline.ru/roofcalc: светло-серый фон, белые карточки,
 * прямые углы (радиус 4px), тонкие серые линии вместо теней. Акцент оставлен
 * наш, синий — красным на сайте помечаются ошибки ввода.
 *
 * Здесь ТОЛЬКО обвязка. Внутренности калькуляторов не трогаются, их стили
 * живут в plugins/cl-calculators/includes/ (calc-result.css, calc-field.css и др.).
 *
 * Подключается из inc/cl-design.php.
 */

:root {
	--cl-bg: #f6f6f6;
	--cl-surface: #fff;
	--cl-line: #e4e7ea;
	--cl-line-hover: #c9d1d9;
	--cl-muted: #6b7280;
	--cl-accent: #2b5876;
	--cl-accent-dark: #1f4159;
	--cl-r: 4px;
}

/* Фон страницы. `html body` — чтобы перебить background из theme.json,
   не трогая палитру темы (иначе поплывёт редактор блоков). */
html body { background-color: var(--cl-bg); }

/* Страховка от страницы шире экрана. Одна длинная ссылка в «Смотрите также»
   растягивала страницу на телефоне до 502px при экране 360 — и вместе с ней
   всё, что прибито к экрану (кнопка «К расчёту» уезжала за край). Причину
   починили, а это — чтобы следующий вылезающий элемент обрезался, а не тащил
   за собой страницу. Именно clip, а не hidden: hidden делает предка
   прокручиваемым контейнером и отменяет position:sticky у потомков. */
html, body { overflow-x: clip; }

/* ================= Шапка ================= */

.cl-header {
	position: relative; /* якорь для выпадающего поиска на телефоне */
	z-index: 50;
	background: var(--cl-surface);
	border-bottom: 1px solid var(--cl-line);
}

.cl-header__bar {
	min-height: 64px;
	gap: 16px;
	align-items: center;
}

/* Знак сайта + название. Знак — та же иконка, что во вкладке браузера
   (Внешний вид → Редактор → шапка, блок «Логотип сайта»). */
.cl-header__brand {
	gap: 10px;
	align-items: center;
}
.cl-header .wp-block-site-logo { line-height: 0; }
.cl-header .wp-block-site-logo img {
	display: block;
	width: 36px;
	height: 36px;
}

.cl-header .wp-block-site-title {
	margin: 0;
	font-size: 22px;
	line-height: 1;
	font-weight: 800;
	letter-spacing: -.015em;
}
.cl-header .wp-block-site-title a {
	color: #0f2740;
	text-decoration: none;
}
.cl-header .wp-block-site-title a:hover { color: var(--cl-accent); }

.cl-header__tools {
	gap: 12px;
	align-items: center;
}

@media (max-width: 780px) {
	.cl-header__bar { min-height: 56px; }
	.cl-header .wp-block-site-title { font-size: 19px; }
	.cl-header__brand { gap: 8px; }
	.cl-header .wp-block-site-logo img { width: 30px; height: 30px; }
}

/* ================= Хлебные крошки ================= */
/* Раньше крошки жили на чёрной полосе во всю ширину — она резала страницу
   надвое. Теперь это обычная строка на сером фоне над заголовком, как у
   grandline. Разделитель «→» подставляет фильтр bcn_display_separator. */

.cl-crumbs { padding-top: 14px; }
.cl-crumbs .breadcrumbs {
	font-size: 13px;
	line-height: 1.5;
	font-weight: 400;
	color: var(--cl-muted);
}
.cl-crumbs .breadcrumbs a {
	color: var(--cl-muted);
	text-decoration: none;
}
.cl-crumbs .breadcrumbs a:hover {
	color: var(--cl-accent);
	text-decoration: underline;
}
.cl-crumbs .breadcrumbs .current-item { color: #3f4650; }
/* Breadcrumb NavXT открывает вывод пустым <span> — он ломает отступ первой стрелки. */
.cl-crumbs .breadcrumbs > span:empty { display: none; }
.cl-bc-sep {
	margin: 0 .45em;
	color: #b9c0c8;
	font-size: 12px;
}

/* ================= Карточка страницы ================= */
/* alignwide (1340px) + внутренние отступы: содержимое внутри всё равно
   ограничено contentSize 1200px, поэтому ширина калькуляторов не изменилась. */

.cl-card {
	background: var(--cl-surface);
	border: 1px solid var(--cl-line);
	border-radius: var(--cl-r);
	padding: 26px 28px 44px;
	margin-top: 14px;
	margin-bottom: 44px;
}
.cl-card > .wp-block-post-title {
	margin-top: .1em;
	margin-bottom: .5em;
}

/* Телефон: никаких рамок и вложенных полей. На узком экране каждая рамка
   съедает ширину у полей ввода дважды (слева и справа), а их было четыре
   вложенных: отступ сайта 30px, карточка, рамка калькулятора, серая форма —
   до поля ввода набегало под 90px с каждой стороны. Теперь страница белая,
   карточка растворена, отступ сайта 16px (как у ecalc.ru). Рамку и отступы
   самого калькулятора убирает calc-layout.css плагина. */
@media (max-width: 780px) {
	html body {
		background-color: var(--cl-surface);
		--wp--style--root--padding-left: 16px;
		--wp--style--root--padding-right: 16px;
	}
	.cl-card {
		background: none;
		border: 0;
		border-radius: 0;
		padding: 0 0 28px;
		margin-top: 14px;
		margin-bottom: 0;
	}
	/* Заголовок 26px вместо ~40: «Калькулятор пиломатериалов: сколько доски
	   в кубе» занимал 4 строки и сталкивал форму во второй экран
	   (spec_otkaz_analiz.md, П4). */
	.cl-card > .wp-block-post-title {
		font-size: 26px;
		line-height: 1.2;
		margin-bottom: .6em;
	}
	/* Крошки на телефоне занимали три строки над заголовком. Путь назад
	   в раздел и так есть — в бутерброде меню и в «Смотрите также». */
	.cl-crumbs { display: none; }
}

/* ================= Подвал ================= */

.wp-site-blocks > footer {
	background: var(--cl-surface);
	border-top: 1px solid var(--cl-line);
}

@media print {
	html body { background: #fff; }
	.cl-header,
	.cl-crumbs,
	.wp-site-blocks > footer { display: none !important; }
	.cl-card { border: 0; padding: 0; margin: 0; }
}