/*
 * Дизайн-система «КолодецПром».
 *
 * До этого на главной шли двадцать секций с одинаковым белым фоном и
 * одинаковыми отступами 60/60 — страница читалась сплошной стеной. Здесь
 * заданы ритм, палитра, тени и типографическая шкала; дальше все блоки
 * опираются на эти переменные, а не на числа в разных местах.
 */

:root {
	/* ── цвет ─────────────────────────────────────────────────────────── */
	--kp-lime: #a4d020;          /* единственный акцент */
	--kp-lime-soft: #eef6dc;
	--kp-green: #4d9b42;
	--kp-deep: #2b8750;
	--kp-forest: #37701f;

	--kp-ink: #1c2410;           /* заголовки */
	--kp-text: #3a4232;          /* основной текст */
	--kp-muted: #7c8571;         /* подписи */
	--kp-line: #e7ece0;          /* границы */
	--kp-tint: #f7faf1;          /* подложка чётных секций */
	--kp-white: #fff;

	--kp-grad: linear-gradient(135deg, #a6d120 0%, #7ab52f 45%, #2b8750 100%);
	--kp-navgrad: linear-gradient(100deg, #37701f 0%, #2f7d3b 55%, #1f6f45 100%);

	/* ── тени: тонированы зеленью, а не чистым чёрным ────────────────── */
	--kp-sh-sm: 0 2px 8px rgba(28, 46, 12, .06);
	--kp-sh-md: 0 8px 26px rgba(28, 46, 12, .09);
	--kp-sh-lg: 0 18px 46px rgba(20, 40, 10, .14);
	--kp-sh-btn: 0 6px 18px rgba(77, 155, 66, .28);

	/* ── радиусы: контейнеры мягче, внутренние элементы жёстче ───────── */
	--kp-r-sm: 8px;
	--kp-r-md: 12px;
	--kp-r-lg: 18px;
	--kp-r-xl: 24px;
	--kp-r-pill: 999px;

	/* ── ритм ─────────────────────────────────────────────────────────── */
	--kp-section: 72px;
	--kp-gap: 24px;

	/* ── слои: вместо случайных 9999 ─────────────────────────────────── */
	--kp-z-header: 100;
	--kp-z-float: 900;
	--kp-z-modal: 1000;
	--kp-z-city: 1100;
}

@media (max-width: 767px) {
	:root {
		--kp-section: 44px;
		--kp-gap: 16px;
	}
}

/* ── вертикальный ритм и чередование фона ─────────────────────────────
 * Секции получают одинаковые отступы, а каждая вторая — светлую подложку.
 * Это даёт ритм без резких тёмных вставок посреди светлой страницы.
 */

section.block, div.block {padding-top: var(--kp-section); padding-bottom: var(--kp-section);}

#inf, #prem2, #block4, #price, #about, #kak, #etap, #trust, #reviews {background: var(--kp-tint);}
#gall {padding-bottom: var(--kp-section);}
#prem-pod-ban {padding-top: var(--kp-section);}

/* ── типографика ──────────────────────────────────────────────────────
 * Капслок в заголовках делал текст трудночитаемым и «кричащим», особенно
 * на телефоне, где H1 занимал пол-экрана.
 */

h1, h2, h3 {text-transform: none; text-wrap: balance; color: var(--kp-ink);}
h1 {font-size: clamp(27px, 4.4vw, 52px); line-height: 1.1; letter-spacing: -.02em; font-weight: 700;}
h2 {font-size: clamp(23px, 3vw, 38px); line-height: 1.15; letter-spacing: -.015em; font-weight: 700; margin-bottom: .6em;}
h3 {font-size: clamp(19px, 2vw, 24px); line-height: 1.25; letter-spacing: -.01em; font-weight: 600;}
p {text-wrap: pretty;}
.text p, .desc p, .geolead, article p {max-width: 68ch;}

/* цифры в прайсе и калькуляторе — табличными, чтобы колонки не плясали */
table td, table th, .price, .num, .geostat b {font-variant-numeric: tabular-nums;}

/* ── состояния ────────────────────────────────────────────────────────
 * Не было ни нажатия, ни видимого фокуса с клавиатуры.
 */

html {scroll-behavior: smooth;}

a, button, .button, .cbutton, .but, .hbtn {transition: background-color .18s, color .18s, border-color .18s, box-shadow .18s, transform .15s;}
.button:active, .cbutton:active, .but:active, .hbtn:active, button:active {transform: translateY(1px);}

:focus-visible {outline: 3px solid var(--kp-lime); outline-offset: 2px; border-radius: 4px;}
:focus:not(:focus-visible) {outline: none;}

/* ── ссылка «к содержимому» для клавиатуры ───────────────────────────── */

.skiplink {position: absolute; left: -9999px; top: 0; z-index: 9999; padding: 12px 20px; background: var(--kp-ink); color: #fff; border-radius: 0 0 var(--kp-r-md) 0;}
.skiplink:focus {left: 0; color: #fff !important;}

/* ── картинки ─────────────────────────────────────────────────────────── */

img {max-width: 100%; height: auto;}

/* ── согласие в форме: обязательная галочка ───────────────────────────────
 * Contact Form 7 заворачивает поле в три вложенных span; своя разметка
 * галочки рисуется на псевдоэлементах, чтобы вид не зависел от браузера.
 */

.form-consent {margin: 14px 0 6px; font-size: 12.5px; line-height: 1.5; color: var(--kp-muted);}
.form-consent a {color: var(--kp-green) !important; text-decoration: underline; text-underline-offset: 2px;}
.form-consent a:hover {color: var(--kp-forest) !important;}
.modal .form-consent {color: #8a8a8a;}

.form-consent .wpcf7-list-item {margin: 0;}
.form-consent label {display: flex; align-items: flex-start; gap: 10px; cursor: pointer; margin: 0; font-weight: 400;}
.form-consent input[type="checkbox"] {position: absolute; opacity: 0; width: 0; height: 0;}
.form-consent .wpcf7-list-item-label {position: relative; display: block; padding-left: 28px;}
.form-consent .wpcf7-list-item-label::before {content: ""; position: absolute; left: 0; top: 0; width: 19px; height: 19px; border: 2px solid #c6cfb8; border-radius: 5px; background: #fff; transition: border-color .15s, background .15s;}
.form-consent .wpcf7-list-item-label::after {content: ""; position: absolute; left: 6px; top: 3px; width: 6px; height: 11px; border-right: 2.5px solid #fff; border-bottom: 2.5px solid #fff; transform: rotate(45deg) scale(.4); opacity: 0; transition: opacity .15s, transform .15s;}
.form-consent label:hover .wpcf7-list-item-label::before {border-color: var(--kp-lime);}
.form-consent input[type="checkbox"]:checked + .wpcf7-list-item-label::before {background: var(--kp-green); border-color: var(--kp-green);}
.form-consent input[type="checkbox"]:checked + .wpcf7-list-item-label::after {opacity: 1; transform: rotate(45deg) scale(1);}
.form-consent input[type="checkbox"]:focus-visible + .wpcf7-list-item-label::before {outline: 3px solid var(--kp-lime); outline-offset: 2px;}
.form-consent .wpcf7-not-valid-tip {margin-top: 6px; font-size: 12px;}

/* ── юридические ссылки в подвале ─────────────────────────────────────── */

.legal-links {display: flex; flex-direction: column; gap: 7px;}
.legal-links a {font-size: 14px; line-height: 1.4;}

/* ── текстовые страницы ───────────────────────────────────────────────────
 * `the_content()` выводился без контейнера: на десктопе строки политики
 * растягивались на всю ширину экрана — по двести знаков, читать невозможно.
 */

/* Ширину строки задаём прямым текстовым детям: часть страниц приносит
   в контенте свои .block > .container, и ограничивать их нельзя. */
.entry {padding: 8px 0 var(--kp-section); font-size: 16.5px; line-height: 1.65; color: var(--kp-text);}
.entry > p, .entry > ul, .entry > ol, .entry > h2, .entry > h3, .entry > h4, .entry > blockquote {max-width: 78ch;}
.entry > *:first-child {margin-top: 0;}
.entry p {margin: 0 0 1.1em; max-width: none;}
.entry h2 {margin: 1.9em 0 .6em; font-size: clamp(20px, 2.2vw, 27px);}
.entry h3 {margin: 1.6em 0 .5em;}
.entry ul, .entry ol {margin: 0 0 1.2em; padding-left: 1.3em;}
.entry li {margin-bottom: .45em;}
.entry a {color: var(--kp-green);}
.entry p a, .entry li a, .entry td a {text-decoration: underline; text-underline-offset: 2px;}
.entry a:hover {color: var(--kp-forest);}
.entry strong {color: var(--kp-ink);}
.entry table {width: 100%; margin: 0 0 1.4em; border-collapse: collapse;}
.entry th, .entry td {padding: 10px 12px; border: 1px solid var(--kp-line); text-align: left;}
.entry th {background: var(--kp-tint); font-weight: 600;}

/* заголовок страницы и крошки */
.pagetitle {padding: 22px 0 6px;}
.pagetitle .breadcrumbs {margin-bottom: 10px;}
.breadcrumbs {font-size: 14px; color: var(--kp-muted);}
.breadcrumbs a {color: var(--kp-muted);}
.breadcrumbs a:hover {color: var(--kp-green);}
.breadcrumbs__current {color: var(--kp-text);}
.breadcrumbs__sep {padding: 0 2px; color: #c3ccb6;}

@media (max-width: 767px) {
	.entry {font-size: 16px; line-height: 1.6;}
	.pagetitle {padding: 16px 0 4px;}
}