/*
 * Оформление инструкций (записей). Рассчитано на HTML, который получается из
 * Markdown: заголовки, списки, код с подсветкой (Prism/highlight.js), таблицы.
 * Работает и с выводом Hello Elementor (.page-content), и с классом .am-article
 * на виджете «Содержимое записи» в Elementor.
 */

.single-post .site-main,
.am-article-wrap {
	max-width: 860px;
	margin-inline: auto;
	padding-inline: var(--am-gutter);
	padding-block: 56px 96px;
	box-sizing: border-box;
}

.single-post .page-header .entry-title {
	font-family: var(--am-font-mono);
	font-weight: 800;
	font-size: clamp(30px, 4vw, 46px);
	line-height: 1.15;
	letter-spacing: -0.01em;
	margin: 0 0 32px;
}

.single-post .page-content,
.am-article {
	font-family: var(--am-font-sans);
	font-size: 18px;
	line-height: 1.7;
	color: var(--am-fg);
}

.single-post .page-content > * + *,
.am-article > * + * { margin-top: 1.1em; }

/* Заголовки с маркерами Markdown */
.single-post .page-content h2,
.am-article h2 {
	font-family: var(--am-font-mono);
	font-size: 27px;
	font-weight: 800;
	line-height: 1.25;
	margin: 2.2em 0 .6em;
	padding-top: .8em;
	border-top: 1px solid var(--am-line);
}
.single-post .page-content h3,
.am-article h3 {
	font-family: var(--am-font-mono);
	font-size: 21px;
	font-weight: 700;
	line-height: 1.3;
	margin: 1.8em 0 .5em;
}
.single-post .page-content h4,
.am-article h4 { font-family: var(--am-font-mono); font-size: 18px; margin: 1.5em 0 .4em; }

.single-post .page-content h2::before,
.am-article h2::before { content: "## "; color: var(--am-muted); font-weight: 400; }
.single-post .page-content h3::before,
.am-article h3::before { content: "### "; color: var(--am-muted); font-weight: 400; }

.single-post .page-content a,
.am-article a { text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }

.single-post .page-content ul,
.single-post .page-content ol,
.am-article ul,
.am-article ol { padding-left: 1.4em; }
.single-post .page-content li + li,
.am-article li + li { margin-top: .35em; }
.single-post .page-content ul > li::marker,
.am-article ul > li::marker { content: "› "; font-family: var(--am-font-mono); }

/* Встроенный код и клавиши */
.single-post .page-content :not(pre) > code,
.am-article :not(pre) > code {
	font-family: var(--am-font-mono);
	font-size: .88em;
	padding: .1em .35em;
	background: var(--am-surface);
	border: 1px solid var(--am-line);
	word-break: break-word;
}
.single-post .page-content kbd,
.am-article kbd {
	font-family: var(--am-font-mono);
	font-size: .85em;
	padding: .05em .4em;
	border: 1px solid var(--am-fg);
	border-bottom-width: 3px;
}

/* Блоки кода: theme.js оборачивает их в .am-code с полосой и кнопкой */
.am-code {
	margin: 1.4em 0;
	border: 1px solid var(--am-fg);
	background: var(--am-surface);
}
.am-code__bar {
	display: flex;
	justify-content: space-between;
	align-items: center;
	gap: 12px;
	min-height: 36px;
	padding: 0 6px 0 14px;
	background: var(--am-inv);
	color: var(--am-inv-fg);
	font: 700 13px/1 var(--am-font-mono);
}
/* Кнопка копирования: значок, в ч/б; перебивает розовый :hover из Hello Elementor */
body .am-code .am-code__copy {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 30px;
	height: 30px;
	min-height: 0;
	padding: 0;
	background: transparent;
	color: inherit;
	border: 1px solid transparent;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
	opacity: .75;
	transition: opacity .15s, border-color .15s;
}
body .am-code .am-code__copy:hover,
body .am-code .am-code__copy:focus-visible {
	background: transparent;
	color: inherit;
	border-color: currentColor;
	opacity: 1;
	outline: none;
}
body .am-code .am-code__copy.is-done { opacity: 1; }
.am-code__copy svg { width: 16px; height: 16px; display: block; }

.single-post .page-content pre,
.am-article pre,
.am-code pre {
	margin: 0;
	padding: 18px 20px;
	overflow-x: auto;
	background: var(--am-surface);
	color: var(--am-fg);
	font: 400 15px/1.6 var(--am-font-mono);
	tab-size: 4;
	border: 0;
	border-radius: 0;
}
.single-post .page-content > pre,
.am-article > pre { border: 1px solid var(--am-fg); }
.am-code pre code,
.single-post .page-content pre code,
.am-article pre code { font: inherit; background: none; border: 0; padding: 0; }

/* Подсветка Prism / highlight.js в оттенках серого: насыщенность через начертание */
.token.comment, .token.prolog, .token.doctype, .token.cdata,
.hljs-comment, .hljs-quote { color: var(--am-muted); font-style: italic; }
.token.keyword, .token.selector, .token.important, .token.atrule,
.hljs-keyword, .hljs-selector-tag, .hljs-built_in { font-weight: 700; }
.token.string, .token.char, .token.attr-value,
.hljs-string, .hljs-attr { color: var(--am-fg); text-decoration: underline dotted var(--am-muted); text-underline-offset: 3px; }
.token.number, .token.boolean, .token.constant,
.hljs-number, .hljs-literal { font-weight: 500; }
.token.punctuation, .token.operator { color: var(--am-muted); }
.token.function, .hljs-title { font-weight: 700; }
.token.variable, .hljs-variable { font-style: italic; }

/* Таблицы: theme.js оборачивает в .am-table для прокрутки на телефоне */
.am-table { overflow-x: auto; margin: 1.4em 0; border: 1px solid var(--am-fg); }
.single-post .page-content table,
.am-article table {
	width: 100%;
	border-collapse: collapse;
	font-size: 15px;
	margin: 0;
}
.single-post .page-content th,
.am-article th {
	background: var(--am-inv);
	color: var(--am-inv-fg);
	font-family: var(--am-font-mono);
	text-align: left;
	padding: 10px 14px;
	border: 0;
}
.single-post .page-content td,
.am-article td { padding: 10px 14px; border: 0; border-top: 1px solid var(--am-line); vertical-align: top; }

/* Цитаты и примечания */
.single-post .page-content blockquote,
.am-article blockquote {
	margin: 1.4em 0;
	padding: 16px 20px;
	border: 1px dashed var(--am-fg);
	background: var(--am-surface);
	font-style: normal;
}
.single-post .page-content blockquote > :first-child,
.am-article blockquote > :first-child { margin-top: 0; }
.single-post .page-content blockquote > :last-child,
.am-article blockquote > :last-child { margin-bottom: 0; }

/* Картинки и скриншоты */
.single-post .page-content img,
.am-article img { max-width: 100%; height: auto; border: 1px solid var(--am-line); }
.single-post .page-content figure,
.am-article figure { margin: 1.4em 0; }
.single-post .page-content figcaption,
.am-article figcaption { font: 13px/1.5 var(--am-font-mono); color: var(--am-muted); margin-top: 8px; }

.single-post .page-content hr,
.am-article hr { border: 0; border-top: 1px dashed var(--am-line); margin: 2.4em 0; }

/* Список записей и архивы Hello Elementor */
.blog .site-main,
.archive .site-main,
.search .site-main { max-width: var(--am-wrap); margin-inline: auto; padding: 56px var(--am-gutter) 96px; box-sizing: border-box; }
.blog .post .entry-title,
.archive .post .entry-title,
.search .post .entry-title { font-family: var(--am-font-mono); font-size: 20px; }

/* =========================================================
   Страница инструкции (single.php)
   ========================================================= */

.am-post__title { font-size: clamp(30px, 4vw, 48px); max-width: 960px; }
.am-post__title::after { content: none; }
.am-post .am-label a { text-decoration: none; }
.am-post .am-label a:hover { text-decoration: underline; }
.am-post__meta {
	display: flex;
	flex-wrap: wrap;
	gap: 6px 20px;
	margin: 0;
	font: 14px var(--am-font-mono);
	color: var(--am-muted);
}
.am-post__meta a { text-decoration: none; color: var(--am-fg); }

/* Лист для чтения: серый фон страницы + карточка с текстом (как в BookStack, но в ч/б) */
.am-post__main { background: var(--am-read-page); padding-bottom: 8px; }
.am-post__layout { padding-top: 40px; padding-bottom: 56px; }
.am-post__body {
	--am-fg: var(--am-read-fg);
	--am-muted: var(--am-read-muted);
	--am-line: var(--am-read-line);
	--am-surface: var(--am-read-code);
	max-width: 780px;
	padding: 44px 52px 48px;
	background: var(--am-read-card);
	border: 1px solid var(--am-read-line);
	color: var(--am-read-fg);
	box-sizing: border-box;
}
@media (max-width: 640px) {
	.am-post__body { padding: 24px 18px 28px; margin-inline: calc(var(--am-gutter) * -0.5); }
}
.am-post .am-toc { background: var(--am-read-card); }
.am-post__nav-link { background: var(--am-read-card); }

/* Заголовки инструкций всегда слева: так «##» читается как разметка, а не как декор.
   Перебивает выравнивание по центру, пришедшее из BookStack. */
.am-article h1, .am-article h2, .am-article h3, .am-article h4 { text-align: left !important; }
.am-article > h2:first-child { margin-top: 0; padding-top: 0; border-top: 0; }

/* Две колонки: текст 780px слева (по одной линии с заголовком) + боковая панель справа.
   В панели: содержание (если в тексте от трёх заголовков ##/###), «Ещё в рубрике», PDF и ссылка. */
@media (min-width: 1100px) {
	.am-post__layout {
		display: grid;
		grid-template-columns: minmax(0, 780px) 280px;
		justify-content: space-between;
		gap: 56px;
		align-items: start;
	}
	.am-post__layout .am-side {
		order: 2;
		position: sticky;
		top: calc(var(--am-sticky-h, 0px) + 24px);
		max-height: calc(100vh - var(--am-sticky-h, 0px) - 48px);
		overflow-y: auto;
		scrollbar-width: thin;
	}
	body.admin-bar:not(.am-sticky) .am-post__layout .am-side { top: 56px; }
	.am-post__layout .am-post__body { order: 1; }
	.am-side .am-toc { max-height: none; }
}
/* Телефон и планшет: в панели остаётся только содержание (над текстом);
   «Ещё в рубрике» заменяют ссылки «Предыдущая / Следующая» под текстом */
@media (max-width: 1099px) {
	.am-side .am-related, .am-side .am-tools { display: none; }
}

.am-side__box {
	margin-bottom: 24px;
	border: 1px solid var(--am-line);
	background: var(--am-read-card);
	font: 14px/1.45 var(--am-font-mono);
}
.am-side__head {
	margin: 0;
	padding: 10px 14px;
	border-bottom: 1px solid var(--am-line);
	font-weight: 700;
}
.am-related__list { margin: 0; padding: 8px 14px; list-style: none; }
.am-related__list li { padding: 6px 0; border-bottom: 1px dashed var(--am-line); }
.am-related__list li:last-child { border-bottom: 0; }
.am-related__list a { text-decoration: none; }
.am-related__list a:hover { text-decoration: underline; opacity: 1; }
.am-related__all { display: block; padding: 10px 14px; border-top: 1px solid var(--am-line); color: var(--am-muted) !important; text-decoration: none; }
.am-tools { display: grid; }
body .am-tools .am-tools__btn {
	display: block;
	width: 100%;
	padding: 10px 14px;
	background: transparent;
	color: var(--am-fg);
	border: 0;
	border-bottom: 1px solid var(--am-line);
	border-radius: 0;
	font: inherit;
	text-align: left;
	cursor: pointer;
}
body .am-tools .am-tools__btn:last-child { border-bottom: 0; }
body .am-tools .am-tools__btn::before { content: "> "; color: var(--am-muted); }
body .am-tools .am-tools__btn:hover,
body .am-tools .am-tools__btn:focus-visible { background: var(--am-inv); color: var(--am-inv-fg); }

/* Значок приватной инструкции */
.am-badge {
	display: inline-block;
	font: 400 .8em/1 var(--am-font-mono);
	color: var(--am-muted);
	letter-spacing: .02em;
	white-space: nowrap;
	vertical-align: middle;
}

.am-toc {
	margin-bottom: 32px;
	border: 1px solid var(--am-fg);
	font-family: var(--am-font-mono);
	font-size: 14px;
	max-height: calc(100vh - 80px);
	overflow: auto;
}
.am-toc__head {
	padding: 10px 14px;
	background: var(--am-inv);
	color: var(--am-inv-fg);
	font-weight: 700;
	cursor: pointer;
	list-style: none;
}
.am-toc__head::-webkit-details-marker { display: none; }
.am-toc__head::before { content: "[-] "; }
.am-toc details:not([open]) .am-toc__head::before { content: "[+] "; }
.am-toc__list { margin: 0; padding: 12px 14px 14px; list-style: none; counter-reset: toc; }
.am-toc__item { margin: 0; padding: 4px 0; line-height: 1.4; }
.am-toc__item a { text-decoration: none; }
.am-toc__item a:hover { text-decoration: underline; }
.am-toc__item--h2 { counter-increment: toc; }
.am-toc__item--h2::before { content: counter(toc, decimal-leading-zero) " "; color: var(--am-muted); }
.am-toc__item--h3 { padding-left: 28px; color: var(--am-muted); }

.am-article h2[id], .am-article h3[id] { scroll-margin-top: calc(var(--am-sticky-h, 0px) + 24px); }

.am-post__tags { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 40px; font: 14px var(--am-font-mono); }
.am-post__tags a { text-decoration: none; color: var(--am-muted); }

.am-post__cta {
	margin-top: 48px;
	padding: 24px 28px;
	border: 1px dashed var(--am-fg);
	background: var(--am-surface);
}
.am-post__cta p { margin: 0 0 8px; }
.am-post__cta-title { font: 700 18px var(--am-font-mono); }
.am-post__cta .am-post__cta-btn {
	display: inline-flex;
	align-items: center;
	min-height: 48px;
	margin-top: 8px;
	padding: 0 24px;
	background: var(--am-inv);
	color: var(--am-inv-fg);
	font: 700 15px var(--am-font-mono);
	text-decoration: none;
}

.am-post__nav {
	display: grid;
	grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
	gap: 16px;
	padding-bottom: 96px;
}
.am-post__nav-link {
	display: flex;
	flex-direction: column;
	gap: 6px;
	padding: 18px 20px;
	border: 1px solid var(--am-line);
	font: 700 16px var(--am-font-mono);
	text-decoration: none;
}
.am-post__nav-link:hover { opacity: 1; border-color: var(--am-fg); }
.am-post__nav-link span { font-size: 13px; font-weight: 400; color: var(--am-muted); }
.am-post__nav-link--next { text-align: right; }
.am-post__nav-link--list { border-style: dashed; font-weight: 400; }

/* =========================================================
   Печать / «Сохранить как PDF» из браузера
   ========================================================= */

@media print {
	:root, :root[data-theme] {
		--am-bg: #FFFFFF; --am-surface: #F4F4F4; --am-fg: #000000; --am-muted: #444444;
		--am-line: #CCCCCC; --am-inv: #000000; --am-inv-fg: #FFFFFF;
		--am-read-page: #FFFFFF; --am-read-card: #FFFFFF; --am-read-fg: #000000;
		--am-read-muted: #444444; --am-read-line: #CCCCCC; --am-read-code: #F4F4F4;
	}
	/* Шапка и подвал UAE — это header#masthead и footer#colophon.
	   (Не .ehf-header: так называется класс у <body>, и вся страница печаталась пустой.) */
	#wpadminbar, #masthead, #colophon, footer.site-footer, .elementor-location-header, .elementor-location-footer,
	.am-toc, .am-side, .am-post__cta, .am-post__nav, .am-code__copy, .am-search, .am-chips,
	.am-cookie, .am-help, .am-progress, .am-admin-btn, .post-edit-link, .am-post__tags { display: none !important; }
	html, body { background: #fff !important; color: #000 !important; }
	.am-grid-bg { background-image: none !important; }
	.am-post__main { background: #fff !important; padding: 0 !important; }
	.am-post__body { max-width: none !important; padding: 0 !important; border: 0 !important; background: #fff !important; }
	.am-archive__wrap { max-width: none !important; padding: 0 !important; }
	.am-post__title { font-size: 26px !important; }
	.am-code__bar { background: #fff !important; color: #000 !important; border-bottom: 1px solid #000; }
	/* в конце распечатки — откуда она */
	.am-post__body::after { content: "Источник: ALIMUSAEV — " attr(data-am-url); display: block; margin-top: 24px; padding-top: 8px; border-top: 1px solid #ccc; font: 11px var(--am-font-mono); color: #444; }
	.am-archive__head { padding: 0 0 16px; background: none; }
	.am-post__layout { display: block !important; padding: 16px 0 0; }
	.am-article pre { white-space: pre-wrap; word-break: break-word; }
	.am-article a[href^="http"]::after { content: " (" attr(href) ")"; font-size: 11px; color: #444; }
	.am-code, .am-table, .am-article img, .am-article blockquote { break-inside: avoid; }
}

/* Чек-листы: <ol class="checklist"> из BookStack и «- [ ] пункт» в Markdown.
   Перебивает синие галочки из вставленного в статью <style>. Отметки запоминаются в браузере. */
.am-article .checklist,
.am-article .am-tasklist { list-style: none !important; padding-left: 0 !important; }
.am-article .checklist li,
.am-article .am-tasklist li { margin: 6px 0 !important; }
.am-article .checklist label,
.am-article .am-task { display: flex !important; align-items: baseline; gap: 10px; cursor: pointer; }
.am-article input[type="checkbox"] {
	flex: 0 0 auto;
	width: 15px !important;
	height: 15px !important;
	margin: 0 !important;
	accent-color: var(--am-fg) !important;
	transform: translateY(2px);
	cursor: pointer;
}
.am-article .checklist input:checked + span,
.am-article .am-task input:checked + span {
	color: var(--am-muted) !important;
	text-decoration: line-through;
	opacity: 1 !important;
}

/* Цветные выделения <mark style="…"> из BookStack — в ч/б */
.am-article mark {
	background: var(--am-read-code) !important;
	color: inherit !important;
	border: 1px dashed var(--am-read-line);
	border-radius: 0 !important;
	padding: 1px 6px !important;
}

/* Водяной знак закрытых материалов */
.am-watermark {
	margin: 0 0 24px;
	padding: 8px 12px;
	border: 1px dashed var(--am-read-line);
	color: var(--am-read-muted);
	font: 12px/1.5 var(--am-font-mono);
	user-select: none;
}
@media print {
	/* на каждой странице PDF, внизу */
	.am-watermark { position: fixed; left: 0; right: 0; bottom: 0; margin: 0; border: 0; border-top: 1px solid #ccc; background: #fff; color: #555 !important; text-align: center; }
}

/* Документы (политика, согласие): один столбец, без боковой панели */
@media (min-width: 1100px) { .am-doc__layout { display: block; } }
.am-doc__body { max-width: 860px; }
.am-doc__body h2 { font-size: 20px; }
.am-doc__body .am-fill { padding: 0 4px; background: var(--am-read-code); border: 1px dashed var(--am-read-line); }
.am-doc__edit { margin-top: 32px; font: 14px var(--am-font-mono); }