/*
Theme Name: Damify
Theme URI: https://damify.ru/
Description: Тема сайта damify.ru. Классический WordPress + библиотека типизированных Gutenberg-блоков (ТЗ §5). Произвольный HTML в контенте запрещён на уровне платформы, цвета и типографика — только через токены theme.json.
Author: Damify
Version: 0.6.1
Requires at least: 6.6
Tested up to: 6.8
Requires PHP: 8.2
License: Proprietary
Text Domain: damify
Tags: business, custom-blocks
*/

/* ------------------------------------------------------------------
 * Токены.
 *
 * Единственный источник цвета — theme.json; здесь только переименование
 * в короткие --dm-*. Литеральных hex в CSS темы быть не должно.
 *
 * Тема светлая. Контекст переключается на уровне секции: обычная секция —
 * белая, чередующаяся (.dm-section--band) тонированная, а .dm-footer и .dm-dark
 * переопределяют те же переменные тёмными значениями. Блоки не знают, в каком
 * контексте стоят, — они просто берут --dm-ink, --dm-surface и так далее.
 * ------------------------------------------------------------------ */
:root {
	/* Светлая корпоративная основа: белый фон, тёмный текст, редкий акцент. */
	--dm-bg:      var(--wp--preset--color--surface);
	--dm-surface: var(--wp--preset--color--surface);
	--dm-surface-band: var(--wp--preset--color--band);

	--dm-ink:           var(--wp--preset--color--ink);
	--dm-ink-body:      var(--wp--preset--color--ink-body);
	--dm-ink-secondary: var(--wp--preset--color--ink-body);
	--dm-ink-muted:     var(--wp--preset--color--ink-body);
	--dm-ink-subtle:    var(--wp--preset--color--muted);
	--dm-ink-faint:     var(--wp--preset--color--faint);

	--dm-border:        var(--wp--preset--color--line);
	--dm-border-light:  var(--wp--preset--color--line-light);
	--dm-border-strong: var(--wp--preset--color--line-strong);

	--dm-accent:            var(--wp--preset--color--accent);
	--dm-accent-hover:      var(--wp--preset--color--accent-hover);
	--dm-accent-ink:        var(--wp--preset--color--accent);
	--dm-accent-ink-strong: var(--wp--preset--color--accent-hover);
	--dm-accent-soft:       var(--wp--preset--color--accent);
	--dm-accent-surface:    var(--wp--preset--color--accent-soft);
	--dm-accent-border:     var(--wp--preset--color--line);

	--dm-on-accent: var(--wp--preset--color--surface);

	--dm-space-3xs: var(--wp--preset--spacing--10);
	--dm-space-2xs: var(--wp--preset--spacing--20);
	--dm-space-xs:  var(--wp--preset--spacing--30);
	--dm-space-s:   var(--wp--preset--spacing--40);
	--dm-space-m:   var(--wp--preset--spacing--50);
	--dm-space-l:   var(--wp--preset--spacing--60);
	--dm-space-xl:  var(--wp--preset--spacing--70);
	--dm-space-2xl: var(--wp--preset--spacing--80);
	--dm-space-3xl: var(--wp--preset--spacing--90);

	/*
	 * Скругления сдержанные. Прежние 22px у карточек и 100px у кнопок читались
	 * как потребительский лендинг; корпоративный вендор — это 8–12px.
	 */
	--dm-radius-s:    6px;
	--dm-radius-m:    8px;
	--dm-radius-l:    12px;
	--dm-radius-xl:   12px;
	--dm-radius-2xl:  16px;
	--dm-radius-band: 0px;
	--dm-radius-pill: 8px;

	--dm-card-padding: 28px 26px;
	--dm-btn-height: 48px;
	--dm-btn-height-sm: 40px;
	--dm-field-height: 48px;

	/* Контент в измеримой мере: сплошная ширина читается как лендинг. */
	--dm-container: 1200px;
	--dm-gutter: clamp(20px, 3.6vw, 40px);
	--dm-plate-inset: 0px;
	--dm-header-height: 72px;
}

/*
 * Чередующаяся секция — светло-серая полоса, а не отдельная плита.
 * Токены те же, меняется только фон и граница.
 */
.dm-section--band,
.dm-light {
	--dm-surface: var(--wp--preset--color--surface);
	--dm-surface-band: var(--wp--preset--color--band);
}

/*
 * Подвал держит низ страницы: на сплошном белом сайт «вытекает» вниз
 * без опоры. Тёмная подложка — обычный приём корпоративных вендоров.
 */
.dm-footer,
.dm-dark {
	--dm-surface: var(--wp--preset--color--dark-soft);
	--dm-surface-band: var(--wp--preset--color--dark);

	--dm-ink:           var(--wp--preset--color--on-dark);
	--dm-ink-body:      var(--wp--preset--color--on-dark);
	--dm-ink-secondary: var(--wp--preset--color--on-dark);
	--dm-ink-muted:     #B9C1C4;
	--dm-ink-subtle:    #B9C1C4;
	--dm-ink-faint:     #8E979A;

	--dm-border:        #2A3134;
	--dm-border-light:  #2A3134;
	--dm-border-strong: #3A4245;

	--dm-accent:            #4FBF8B;
	--dm-accent-hover:      #6BD0A1;
	--dm-accent-ink:        #4FBF8B;
	--dm-accent-ink-strong: #6BD0A1;
	--dm-accent-soft:       #4FBF8B;
	--dm-accent-surface:    var(--wp--preset--color--dark-soft);
	--dm-accent-border:     #2A3134;

	--dm-on-accent: var(--wp--preset--color--dark);

	background: var(--wp--preset--color--dark);
	color: var(--dm-ink-body);
}

/* ------------------------------------------------------------------
 * База
 * ------------------------------------------------------------------ */
*,
*::before,
*::after { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: var(--dm-bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4, h5, h6, p, ul, ol, figure { margin: 0; }

/*
 * Страховка для крупной типографики: на 390px H1 набирается 40px, и одно
 * длинное слово («импортонезависимость») шире колонки — без переноса оно
 * вылезает за контейнер и даёт горизонтальную прокрутку всей страницы.
 */
h1, h2, h3 { overflow-wrap: break-word; }

a { color: var(--dm-accent); text-decoration: none; }
a:hover { color: var(--dm-accent-hover); }

:where(a, button, input, textarea, select, summary):focus-visible {
	outline: 2px solid var(--dm-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

.dm-visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.dm-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100;
	background: var(--dm-surface);
	color: var(--dm-ink);
	padding: 12px 20px;
	font-weight: 700;
}
.dm-skip-link:focus { left: var(--dm-gutter); }

/* ------------------------------------------------------------------
 * Каркас страницы
 * ------------------------------------------------------------------ */
.dm-container {
	max-width: var(--dm-container);
	margin-inline: auto;
	padding-inline: var(--dm-gutter);
}

/*
 * scroll-margin — под липкую шапку: без него переход по #cta ставит верх
 * секции ровно под шапку, и заголовок формы оказывается закрыт.
 */
.dm-section {
	padding-block: var(--dm-space-3xl);
	scroll-margin-top: var(--dm-header-height);
}
.dm-section--tight { padding-block: var(--dm-space-xl); }

/* Чередующаяся секция — тонированная полоса с границами. */
.dm-section--band {
	background: var(--wp--preset--color--band);
	border-top: 1px solid var(--dm-border);
	border-bottom: 1px solid var(--dm-border);
}

/*
 * Плита сдвинута внутрь на --dm-plate-inset, поэтому её собственное поле
 * уменьшено ровно на столько же: колонка текста внутри плиты остаётся на
 * одной вертикали с текстом соседних тёмных секций.
 */
/*
 * Несколько светлых секций подряд — это одна плита: у верхней снимаем нижние
 * скругления, у нижней верхние, и стыкуем их вплотную.
 */
.dm-section--band + .dm-section--band { border-top: none; }

.dm-section__head { text-align: left; }
.dm-section__title {
	text-wrap: balance;
	max-width: 20ch;
}
.dm-section__lead {
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.6;
	color: var(--dm-ink-muted);
	margin-top: var(--dm-space-s);
	max-width: 700px;
	text-wrap: pretty;
}
.dm-section__body { margin-top: var(--dm-space-xl); }

/*
 * Рубрика секции — моно-подпись над заголовком (передача, §2).
 */
.dm-rubric {
	display: block;
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 700;
	letter-spacing: .1em;
	text-transform: uppercase;
	color: var(--dm-accent);
	margin-bottom: var(--dm-space-2xs);
}

/* ------------------------------------------------------------------
 * Кнопки — три варианта: акцент, светлая, контурная. Радиус 100px.
 * ------------------------------------------------------------------ */
.dm-btn {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: var(--dm-space-2xs);
	font-size: var(--wp--preset--font-size--base);
	font-weight: 600;
	line-height: 1.2;
	min-height: var(--dm-btn-height);
	padding: 16px 30px;
	border-radius: var(--dm-radius-pill);
	border: 1px solid transparent;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease, color .15s ease;
	text-align: center;
}

.dm-btn--primary {
	background: var(--dm-accent);
	color: var(--dm-on-accent);
}
.dm-btn--primary:hover {
	background: var(--dm-accent-hover);
	color: var(--dm-on-accent);
}

.dm-btn--secondary {
	background: transparent;
	border-color: var(--dm-border-strong);
	color: var(--dm-ink);
}
.dm-btn--secondary:hover {
	border-color: var(--dm-accent);
	color: var(--dm-accent);
}

/* Светлая кнопка на тёмном — вторая по силе после акцентной. */
.dm-btn--paper {
	background: var(--wp--preset--color--surface);
	color: var(--dm-ink);
}
.dm-btn--paper:hover {
	background: var(--wp--preset--color--surface);
	color: var(--dm-ink);
}

.dm-btn--sm {
	font-size: var(--wp--preset--font-size--sm);
	min-height: var(--dm-btn-height-sm);
	padding: 12px 24px;
}

/* ------------------------------------------------------------------
 * Значок соответствия — пилюля с точкой и вложенным ярлыком
 * ------------------------------------------------------------------ */
.dm-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: var(--dm-space-2xs);
	border: 1px solid var(--dm-border);
	background: var(--dm-surface);
	color: var(--dm-ink);
	font-size: var(--wp--preset--font-size--sm);
	font-weight: 600;
	padding: 9px 11px 9px 18px;
	border-radius: var(--dm-radius-pill);
}
.dm-eyebrow svg { color: var(--dm-accent); }

/* Точка-акцент вместо иконки, если её нет. */
.dm-eyebrow::before {
	content: "";
	width: 7px;
	height: 7px;
	border-radius: 50%;
	background: var(--dm-accent);
	flex-shrink: 0;
}
.dm-eyebrow:has(svg)::before { content: none; }

/* Вложенный ярлык второй части значка. */
.dm-eyebrow__meta {
	font-size: var(--wp--preset--font-size--xs);
	font-weight: 500;
	color: var(--dm-ink-muted);
	background: var(--dm-bg);
	border-radius: var(--dm-radius-pill);
	padding: 5px 11px;
}
.dm-section--band .dm-eyebrow__meta { background: var(--wp--preset--color--surface); }

/* ------------------------------------------------------------------
 * Карточка — базовый примитив блоков §5
 * ------------------------------------------------------------------ */
.dm-card {
	border: 1px solid var(--dm-border);
	border-radius: var(--dm-radius-l);
	padding: var(--dm-card-padding);
	background: var(--dm-surface);
	/*
	 * Отступы у карточки одинаковые со всех сторон — «текст упирается в край»
	 * даёт не padding, а длинное неразрывное слово: имя файла вроде
	 * «Финал_2_ИСПРАВЛЕНО(3).psd» в узкой колонке шире, чем поле текста,
	 * и вылезает за padding под самую рамку.
	 */
	overflow-wrap: anywhere;
}
.dm-card__icon { color: var(--dm-accent); display: block; }
.dm-card__title {
	font-family: var(--wp--preset--font-family--display);
	font-size: var(--wp--preset--font-size--xl);
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	color: var(--dm-ink);
	margin: var(--dm-space-xs) 0 var(--dm-space-3xs);
	text-wrap: pretty;
}
.dm-card__text {
	font-size: var(--wp--preset--font-size--base);
	line-height: 1.6;
	color: var(--dm-ink-muted);
	text-wrap: pretty;
}

/* Шаг сетки карточек — 16px (передача, §1). */
.dm-grid { display: grid; gap: var(--dm-space-xs); }
.dm-grid--auto { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.dm-grid--wide { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.dm-grid--narrow { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }

/* ------------------------------------------------------------------
 * Шапка
 * ------------------------------------------------------------------ */
.dm-header {
	position: sticky;
	top: 0;
	z-index: 50;
	background: var(--dm-bg);
	border-bottom: 1px solid var(--dm-border-strong);
}

.dm-header__inner {
	height: var(--dm-header-height);
	display: flex;
	align-items: center;
	gap: var(--dm-space-l);
}

.dm-logo {
	display: inline-flex;
	align-items: center;
	gap: var(--dm-space-2xs);
	color: var(--dm-ink);
	flex-shrink: 0;
}
.dm-logo:hover { color: var(--dm-ink); }
.dm-logo__mark { color: var(--dm-accent); display: block; }
.dm-logo__text {
	font-family: var(--wp--preset--font-family--display);
	font-weight: 600;
	font-size: 25px;
	letter-spacing: -0.03em;
	line-height: 1;
}

.dm-header__actions {
	display: flex;
	align-items: center;
	gap: var(--dm-space-xs);
	flex-shrink: 0;
	margin-left: auto;
}

.dm-nav ul {
	display: flex;
	align-items: center;
	gap: 26px;
	list-style: none;
	margin: 0;
	padding: 0;
	font-size: var(--wp--preset--font-size--base);
	font-weight: 500;
}
.dm-nav a { color: var(--dm-ink-muted); }
.dm-nav a:hover,
.dm-nav .current-menu-item > a,
.dm-nav .current_page_ancestor > a { color: var(--dm-ink); }

/* ------------------------------------------------------------------
 * Подменю
 *
 * Раскрывается и по наведению, и по фокусу с клавиатуры (:focus-within),
 * иначе пункты второго уровня недостижимы без мыши.
 * ------------------------------------------------------------------ */
.dm-nav li { position: relative; }

.dm-nav .menu-item-has-children > a::after {
	content: "";
	display: inline-block;
	width: 6px;
	height: 6px;
	margin-left: 7px;
	border-right: 1.5px solid currentColor;
	border-bottom: 1.5px solid currentColor;
	transform: translateY(-2px) rotate(45deg);
}

.dm-nav .sub-menu {
	position: absolute;
	top: 100%;
	left: -18px;
	z-index: 60;
	display: none;
	min-width: 268px;
	flex-direction: column;
	gap: 0;
	padding: 8px;
	margin: 0;
	list-style: none;
	background: var(--dm-surface);
	border: 1px solid var(--dm-border);
	border-radius: var(--dm-radius-m);
	box-shadow: 0 12px 28px rgb(20 24 26 / 10%);
}

.dm-nav li:hover > .sub-menu,
.dm-nav li:focus-within > .sub-menu { display: flex; }

.dm-nav .sub-menu a {
	display: block;
	padding: 10px 12px;
	border-radius: var(--dm-radius-s);
	font-weight: 500;
	color: var(--dm-ink-body);
	white-space: nowrap;
}

.dm-nav .sub-menu a:hover,
.dm-nav .sub-menu .current-menu-item > a {
	background: var(--wp--preset--color--band);
	color: var(--dm-ink);
}

.dm-header__toggle {
	display: none;
	background: none;
	border: 1px solid var(--dm-border);
	border-radius: var(--dm-radius-s);
	padding: 10px;
	color: var(--dm-ink);
	cursor: pointer;
	line-height: 0;
}

@media (max-width: 980px) {
	.dm-header__toggle { display: inline-flex; }
	.dm-nav {
		display: none;
		position: absolute;
		left: 0;
		right: 0;
		top: var(--dm-header-height);
		background: var(--dm-bg);
		border-bottom: 1px solid var(--dm-border);
		padding: var(--dm-space-s) var(--dm-gutter);
	}
	.dm-header[data-nav-open="true"] .dm-nav { display: block; }
	.dm-nav ul {
		flex-direction: column;
		align-items: stretch;
		gap: 0;
		font-size: var(--wp--preset--font-size--lg);
	}
	.dm-nav li { border-bottom: 1px solid var(--dm-border-light); }
	.dm-nav li:last-child { border-bottom: none; }
	.dm-nav a { display: block; padding: 16px 0; min-height: 44px; }

	/* В шторке подменю раскрыто сразу: выпадание пальцем неудобно. */
	.dm-nav .sub-menu {
		position: static;
		display: flex;
		min-width: 0;
		padding: 0 0 8px var(--dm-space-xs);
		border: none;
		box-shadow: none;
		background: transparent;
	}
	.dm-nav .sub-menu li { border-bottom: none; }
	.dm-nav .sub-menu a { padding: 12px 0; font-size: var(--wp--preset--font-size--base); }
	.dm-nav .menu-item-has-children > a::after { display: none; }
}

/* ------------------------------------------------------------------
 * Футер — одна строка реквизитов и ссылка на политику
 * ------------------------------------------------------------------ */
.dm-footer {
	border-top: none;
	font-size: var(--wp--preset--font-size--sm);
	color: var(--dm-ink-body);
	background: var(--wp--preset--color--dark);
}
.dm-footer__inner {
	padding-block: 32px;
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: var(--dm-space-s);
	flex-wrap: wrap;
}
.dm-footer__nav ul {
	display: flex;
	gap: var(--dm-space-m);
	flex-wrap: wrap;
	list-style: none;
	margin: 0;
	padding: 0;
}
.dm-footer a { color: var(--dm-ink-muted); }
.dm-footer a:hover { color: var(--dm-accent); }

/* Реквизиты организации — моноширинный, как технические подписи макета. */
.dm-footer__legal {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	line-height: 1.9;
	color: var(--dm-ink-faint);
	padding-bottom: 32px;
	margin-top: calc(-1 * var(--dm-space-2xs));
}

/* ------------------------------------------------------------------
 * Хлебные крошки (SEO §8)
 * ------------------------------------------------------------------ */
.dm-breadcrumbs {
	font-family: var(--wp--preset--font-family--mono);
	font-size: var(--wp--preset--font-size--xs);
	letter-spacing: .04em;
	color: var(--dm-ink-faint);
	padding-block: var(--dm-space-s);
}
.dm-breadcrumbs ol {
	display: flex;
	flex-wrap: wrap;
	gap: var(--dm-space-3xs);
	list-style: none;
	margin: 0;
	padding: 0;
}
.dm-breadcrumbs li::after { content: "/"; margin-left: var(--dm-space-3xs); color: var(--dm-border-strong); }
.dm-breadcrumbs li:last-child::after { content: none; }
.dm-breadcrumbs a { color: var(--dm-ink-faint); }
.dm-breadcrumbs a:hover { color: var(--dm-accent); }

/* ------------------------------------------------------------------
 * Проза (юридические и текстовые страницы) — 19px, колонка 720px
 * ------------------------------------------------------------------ */
.dm-prose {
	max-width: 720px;
	color: var(--dm-ink-body);
	font-size: var(--wp--preset--font-size--lg);
	line-height: 1.7;
}
.dm-prose > * + * { margin-top: var(--dm-space-m); }
.dm-prose h2 { margin-top: var(--dm-space-xl); }
.dm-prose h3 { margin-top: var(--dm-space-m); }
.dm-prose ul,
.dm-prose ol { padding-left: 1.25em; }
.dm-prose li + li { margin-top: var(--dm-space-2xs); }
.dm-prose blockquote {
	border-left: 3px solid var(--dm-accent);
	padding-left: var(--dm-space-m);
	color: var(--dm-ink-secondary);
}
.dm-prose table { width: 100%; border-collapse: collapse; font-size: var(--wp--preset--font-size--base); }
.dm-prose th,
.dm-prose td { border: 1px solid var(--dm-border); padding: 14px 18px; text-align: left; }
.dm-prose th { background: var(--dm-surface); color: var(--dm-ink); font-weight: 700; }

.dm-prose > figure,
.dm-prose > .wp-block-table { overflow-x: auto; }

/* Кнопки на всю ширину на мобильном (передача, §5). */
@media (max-width: 767px) {
	.dm-btn { width: 100%; }
	.dm-header__actions .dm-btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	* { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}