/* =============================================================================
   main.css — linux-doc.ru
   =============================================================================
   Дизайн в духе Google Material Design 3 (MD3), mobile-first.

   Принципы:
     * контент — главное; навигация и блоки лишь помогают его читать;
     * спокойные, малонасыщенные цвета, без чистого чёрного и белого
       (мягче для глаз, меньше утомляемости и «свечения» на OLED);
     * тёмная и светлая темы через CSS-переменные и атрибут data-theme;
     * единая сетка отступов (4/8 px), скругления и мягкие тени (elevation);
     * типографика: Roboto + системные шрифты, комфортный межстрочный интервал.

   Переключение темы: js/theme.js (сохраняется в localStorage, учитывает
   системную настройку prefers-color-scheme).
   ============================================================================= */

/* -----------------------------------------------------------------------------
   1. ЦВЕТОВЫЕ ТОКЕНЫ
   ----------------------------------------------------------------------------- */

:root {
	/* Светлая тема */
	--bg: #f4f5f7;                 /* фон страницы: тёплый серо-белый, не режет глаза */
	--surface: #ffffff;            /* карточки, панели */
	--surface-2: #eef0f4;          /* вложенные поверхности, инлайн-код */
	--surface-3: #e4e7ec;
	--on-surface: #1c1d1f;         /* основной текст: почти чёрный, но не #000 */
	--on-surface-variant: #575c64; /* второстепенный текст */
	--outline: #d8dce2;            /* границы */
	--primary: #3a6ea5;            /* акцент: спокойный синий */
	--on-primary: #ffffff;
	--primary-container: #dbe7f4;
	--on-primary-container: #16324f;
	--link: #2f6690;
	--code-bg: #1f2430;
	--code-fg: #e6e9ef;
	--shadow-1: 0 1px 2px rgba(16, 24, 40, .06), 0 1px 3px rgba(16, 24, 40, .10);
	--shadow-2: 0 2px 4px rgba(16, 24, 40, .06), 0 4px 10px rgba(16, 24, 40, .08);
	--shadow-3: 0 8px 20px rgba(16, 24, 40, .12);
}

/* Тёмная тема */
[data-theme="dark"] {
	--bg: #121316;
	--surface: #1b1d21;
	--surface-2: #24272c;
	--surface-3: #2d3137;
	--on-surface: #e3e5e8;         /* не чисто белый: меньше контрастной усталости */
	--on-surface-variant: #a7acb4;
	--outline: #34383f;
	--primary: #8fb8dc;
	--on-primary: #0e2a42;
	--primary-container: #24445f;
	--on-primary-container: #d6e6f5;
	--link: #9cc3e6;
	--code-bg: #0e1013;
	--code-fg: #dfe3e9;
	--shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
	--shadow-2: 0 2px 8px rgba(0, 0, 0, .50);
	--shadow-3: 0 8px 24px rgba(0, 0, 0, .55);
}

/* Фолбэк без JavaScript: если тема не выбрана явно и система тёмная */
@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) {
		--bg: #121316;
		--surface: #1b1d21;
		--surface-2: #24272c;
		--surface-3: #2d3137;
		--on-surface: #e3e5e8;
		--on-surface-variant: #a7acb4;
		--outline: #34383f;
		--primary: #8fb8dc;
		--on-primary: #0e2a42;
		--primary-container: #24445f;
		--on-primary-container: #d6e6f5;
		--link: #9cc3e6;
		--code-bg: #0e1013;
		--code-fg: #dfe3e9;
		--shadow-1: 0 1px 2px rgba(0, 0, 0, .40);
		--shadow-2: 0 2px 8px rgba(0, 0, 0, .50);
		--shadow-3: 0 8px 24px rgba(0, 0, 0, .55);
	}
}

:root {
	--font-sans: "Roboto", -apple-system, BlinkMacSystemFont, "Segoe UI",
		"Helvetica Neue", Arial, sans-serif;
	--font-mono: "Roboto Mono", Consolas, Monaco, "Ubuntu Mono", monospace;
	--layout-max: 960px;
	--radius: 12px;
	--radius-sm: 8px;
	--app-bar-h: 56px;
}

/* -----------------------------------------------------------------------------
   2. БАЗА
   ----------------------------------------------------------------------------- */

* {
	box-sizing: border-box;
}

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background-color: var(--bg);
	color: var(--on-surface);
	font-family: var(--font-sans);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
	transition: background-color .25s ease, color .25s ease;
}

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

a {
	color: var(--link);
}

:focus-visible {
	outline: 2px solid var(--primary);
	outline-offset: 2px;
	border-radius: 4px;
}

/* -----------------------------------------------------------------------------
   3. ВЕРХНЯЯ ПАНЕЛЬ (app bar)
   ----------------------------------------------------------------------------- */

.app_bar {
	position: sticky;
	top: 0;
	z-index: 110;
	background-color: var(--surface);
	border-bottom: 1px solid var(--outline);
	box-shadow: var(--shadow-1);
}

.app_bar_inner {
	max-width: var(--layout-max);
	margin: 0 auto;
	min-height: var(--app-bar-h);
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 6px 12px;
}

.brand {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	font-size: 1.35rem;
	font-weight: 500;
	color: var(--primary);
	text-decoration: none;
	letter-spacing: .2px;
	white-space: nowrap;
}

.brand_logo {
	height: 36px;
	width: auto;
	display: block;
}

.brand:hover {
	opacity: .85;
}

.brand_tagline {
	color: var(--on-surface-variant);
	font-size: .85rem;
	margin-right: auto;
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
}

/* Кнопка-иконка (переключатель темы) */
.icon_button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	margin-left: auto;
	padding: 0;
	border: none;
	border-radius: 50%;
	background: transparent;
	color: var(--on-surface-variant);
	cursor: pointer;
	transition: background-color .2s ease, color .2s ease;
}

.icon_button:hover {
	background-color: var(--surface-2);
	color: var(--on-surface);
}

.icon_button svg {
	width: 22px;
	height: 22px;
	fill: currentColor;
}

/* В светлой теме показываем луну (переход в тёмную), в тёмной — солнце */
.theme_toggle .icon_sun { display: none; }
.theme_toggle .icon_moon { display: block; }

[data-theme="dark"] .theme_toggle .icon_sun { display: block; }
[data-theme="dark"] .theme_toggle .icon_moon { display: none; }

@media (prefers-color-scheme: dark) {
	:root:not([data-theme="light"]) .theme_toggle .icon_sun { display: block; }
	:root:not([data-theme="light"]) .theme_toggle .icon_moon { display: none; }
}

/* -----------------------------------------------------------------------------
   4. НАВИГАЦИЯ (mobile-first: скрыта, раскрывается «гамбургером»)
   ----------------------------------------------------------------------------- */

.nav_wrapper {
	width: 100%;
	background-color: var(--bg);
	padding: 8px 10px 0;
}

.main_navigation {
	max-width: var(--layout-max);
	margin: 0 auto;
	background-color: var(--surface);
	border: 1px solid var(--outline);
	border-radius: var(--radius);
	box-shadow: var(--shadow-1);
	position: relative;
	z-index: 100;
	font-family: var(--font-sans);
}

/* «Гамбургер» — иконка Material «menu». Размещён справа: большинство правши. */
.nav_toggle {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 52px;
	height: 52px;
	margin-left: auto;
	padding: 0;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--on-surface);
	border-radius: 50%;
	transition: background-color .2s ease;
}

.nav_toggle:hover {
	background-color: var(--surface-2);
}

.nav_toggle svg {
	width: 26px;
	height: 26px;
	fill: currentColor;
}

.nav_toggle .icon_close { display: none; }

.main_navigation.open .nav_toggle .icon_menu { display: none; }
.main_navigation.open .nav_toggle .icon_close { display: block; }

/* Простое меню без списка (используется в админке) */
.main_navigation > a {
	display: inline-block;
	padding: 14px 16px;
	color: var(--on-surface);
	text-decoration: none;
	border-radius: var(--radius-sm);
}

.main_navigation > a:hover {
	background-color: var(--surface-2);
}

/* Меню */
.main_menu {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	border-top: 1px solid var(--outline);
}

.main_navigation.open .main_menu {
	display: block;
}

.main_menu > li {
	position: relative;
	border-bottom: 1px solid var(--outline);
}

.main_menu a {
	display: block;
	padding: 14px 16px;
	color: var(--on-surface);
	text-decoration: none;
	text-transform: capitalize;
	border-radius: var(--radius-sm);
	transition: background-color .15s ease;
}

.main_menu a:hover {
	background-color: var(--surface-2);
}

.main_menu a.active {
	background-color: var(--primary-container);
	color: var(--on-primary-container);
	font-weight: 500;
}

/* «Домик» — иконка Material «home» */
.main_menu > li.home > a {
	display: flex;
	align-items: center;
	gap: 12px;
	padding-left: 16px;
}

.main_menu > li.home .icon_home {
	width: 22px;
	height: 22px;
	fill: currentColor;
	flex: 0 0 auto;
}

/* Подменю-аккордеон */
.main_menu ul {
	list-style: none;
	margin: 0;
	padding: 0;
	display: none;
	background-color: var(--surface-2);
}

.main_menu li.open > ul {
	display: block;
}

.main_menu ul a {
	padding-left: 32px;
	font-size: .95em;
}

/* Кнопка раскрытия подменю (добавляется js/nav.js) */
.submenu_toggle {
	position: absolute;
	right: 4px;
	top: 4px;
	width: 44px;
	height: 44px;
	background: none;
	border: none;
	cursor: pointer;
	color: var(--on-surface-variant);
	font-size: 1rem;
	line-height: 44px;
	text-align: center;
	border-radius: 50%;
}

.submenu_toggle:hover {
	background-color: var(--surface-2);
}

.submenu_toggle::after { content: "\25BE"; }
li.open > .submenu_toggle::after { content: "\25B4"; }

.main_menu > li.has_children > a { padding-right: 56px; }

/* -----------------------------------------------------------------------------
   5. ПОДМЕНЮ РАЗДЕЛА (Asterisk и др.)
   ----------------------------------------------------------------------------- */

.sub_navigation {
	display: none;
	background-color: var(--surface-2);
	border-top: 1px solid var(--outline);
	border-radius: 0 0 var(--radius) var(--radius);
}

.main_navigation.open .sub_navigation {
	display: block;
}

.sub_navigation ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.sub_navigation > ul > li {
	position: relative;
	border-bottom: 1px solid var(--outline);
}

.sub_navigation a {
	display: block;
	padding: 12px 16px 12px 28px;
	color: var(--on-surface);
	text-decoration: none;
}

.sub_navigation a:hover {
	background-color: var(--surface-3);
}

.sub_navigation a.active {
	background-color: var(--primary-container);
	color: var(--on-primary-container);
	font-weight: 500;
}

.sub_navigation ul ul {
	display: none;
	background-color: var(--surface-3);
}

.sub_navigation li.open > ul {
	display: block;
}

.sub_navigation ul ul a {
	padding-left: 44px;
	font-size: .92em;
}

.sub_navigation .submenu_toggle {
	height: 42px;
	line-height: 42px;
}

.sub_navigation > ul > li.has_children > a { padding-right: 56px; }

/* -----------------------------------------------------------------------------
   6. КОНТЕНТ
   ----------------------------------------------------------------------------- */

.page {
	width: 100%;
	max-width: var(--layout-max);
	margin: 0 auto;
	padding: 0 10px;
}

.content {
	padding: 16px 0 24px;
}

/* Карточка статьи */
.article {
	background-color: var(--surface);
	border: 1px solid var(--outline);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 16px;
	box-shadow: var(--shadow-1);
	overflow-x: auto;
	transition: box-shadow .2s ease;
}

.article:hover {
	box-shadow: var(--shadow-2);
}

.article:last-of-type {
	margin-bottom: 0;
}

.article > h1 { margin-top: 0; }

.article > h1,
.article > h2,
.article > h3 {
	font-weight: 500;
	line-height: 1.3;
	letter-spacing: .1px;
}

h1 { font-size: 1.6rem; }
h2 { font-size: 1.3rem; }
h3 { font-size: 1.1rem; }

.article h1 a,
.article h2 a {
	color: inherit;
	text-decoration: none;
}

.article dt { font-weight: 500; }

.article-img {
	max-width: 300px;
	width: 100%;
	padding: 20px;
}

.left { float: left; }
.clear { clear: both; }

/* Ссылки в тексте: подчёркивание только при наведении */
.content a {
	text-decoration: none;
}

.content a:hover {
	text-decoration: underline;
}

/* --- Код ------------------------------------------------------------------- */

code {
	font-family: var(--font-mono);
	font-size: .92em;
	color: var(--on-surface);
	background-color: var(--surface-2);
	padding: .1em .35em;
	border-radius: 4px;
}

pre {
	overflow-x: auto;
}

pre code {
	display: block;
	padding: 0;
	background: none;
}

/* Терминальные блоки */
div.console, div.cli {
	background-color: var(--code-bg);
	color: var(--code-fg);
	padding: 12px;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono) !important;
	margin-top: 8px;
	white-space: pre-wrap;
	overflow-x: auto;
	line-height: 1.5;
}

span.arg { color: #ffd479; }
span.value { color: #8ee08e; }
span.command { color: #ffb37a; }

div.mc {
	padding: 12px;
	background-color: #3465a4;
	color: #e6e9ef;
	border-radius: var(--radius-sm);
	font-family: var(--font-mono) !important;
	white-space: pre-wrap;
	overflow-x: auto;
}

div.mc span {
	background-color: #06989a;
	color: #10231f;
	font-family: var(--font-mono) !important;
}

/* --- Таблицы --------------------------------------------------------------- */

table.common {
	border-collapse: collapse;
	background-color: var(--surface);
	text-align: center;
}

table.common th {
	background-color: var(--surface-3);
	color: var(--on-surface);
	border: 1px solid var(--outline);
	padding: 8px;
	font-weight: 500;
}

table.common td {
	border: 1px solid var(--outline);
	padding: 6px 8px;
}

.article table {
	border-collapse: collapse;
}

.article table td,
.article table th {
	border: 1px solid var(--outline);
	padding: 6px 10px;
}

/* --- Кнопки ---------------------------------------------------------------- */

a.button { text-decoration: none; }

.button {
	display: inline-block;
	font-size: 1rem;
	font-family: inherit;
	padding: 10px 20px;
	border: none;
	background-color: var(--primary);
	border-radius: 999px;
	color: var(--on-primary);
	box-shadow: var(--shadow-1);
	cursor: pointer;
	transition: box-shadow .2s ease, filter .2s ease;
}

.button:hover {
	box-shadow: var(--shadow-2);
	filter: brightness(1.05);
}

/* --- Информационные блоки -------------------------------------------------- */

.warning,
.info,
p.info {
	position: relative;
	border: 1px solid var(--outline);
	border-radius: var(--radius-sm);
	padding: 12px 14px 12px 44px;
	background-color: var(--surface-2);
}

.warning {
	border-left: 4px solid #c65a3a;
}

.info,
p.info {
	border-left: 4px solid var(--primary);
	margin-top: 8px;
}

.warning::before,
.info::before,
p.info::before {
	content: "";
	position: absolute;
	left: 14px;
	top: 13px;
	width: 20px;
	height: 20px;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* Material «warning» */
.warning::before {
	color: #c65a3a;
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M1 21h22L12 2 1 21zm12-3h-2v-2h2v2zm0-4h-2v-4h2v4z'/%3E%3C/svg%3E");
}

/* Material «info» */
.info::before,
p.info::before {
	color: var(--primary);
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm1 15h-2v-6h2v6zm0-8h-2V7h2v2z'/%3E%3C/svg%3E");
}

.developing { color: var(--on-surface-variant); }

.comment {
	background-color: var(--surface);
	border: 1px solid var(--outline);
	border-radius: var(--radius);
	padding: 16px;
	margin-bottom: 16px;
}

.ib150l {
	display: inline-block;
	width: 150px;
	text-align: left;
}

/* Иконки у ссылок — Material Design, через маску (цвет наследуется от текста) */
a[href$=".pdf"]::before,
.pdf_file::before,
a[href^="http://"]:not(.button)::before,
a[href^="https://"]:not(.button)::before {
	content: "";
	display: inline-block;
	width: 1em;
	height: 1em;
	margin-right: .35em;
	vertical-align: -.15em;
	background-color: currentColor;
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	-webkit-mask-size: contain;
	mask-size: contain;
}

/* PDF — Material «insert_drive_file» */
a[href$=".pdf"]::before,
.pdf_file::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M6 2c-1.1 0-1.99.9-1.99 2L4 20c0 1.1.89 2 1.99 2H18c1.1 0 2-.9 2-2V8l-6-6H6zm7 7V3.5L18.5 9H13z'/%3E%3C/svg%3E");
}

/* Внешняя ссылка — Material «public» */
a[href^="http://"]:not(.button)::before,
a[href^="https://"]:not(.button)::before {
	-webkit-mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
	mask-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M12 2C6.48 2 2 6.48 2 12s4.48 10 10 10 10-4.48 10-10S17.52 2 12 2zm-1 17.93c-3.95-.49-7-3.85-7-7.93 0-.62.08-1.21.21-1.79L9 15v1c0 1.1.9 2 2 2v1.93zm6.9-2.54c-.26-.81-1-1.39-1.9-1.39h-1v-3c0-.55-.45-1-1-1H8v-2h2c.55 0 1-.45 1-1V7h2c1.1 0 2-.9 2-2v-.41c2.93 1.19 5 4.06 5 7.41 0 2.08-.8 3.97-2.1 5.39z'/%3E%3C/svg%3E");
}

/* -----------------------------------------------------------------------------
   7. ПОДВАЛ
   ----------------------------------------------------------------------------- */

.site_footer {
	margin-top: 32px;
	padding: 24px 16px 32px;
	background-color: var(--surface);
	border-top: 1px solid var(--outline);
	color: var(--on-surface-variant);
	font-size: .9rem;
}

.site_footer_inner {
	max-width: var(--layout-max);
	margin: 0 auto;
	text-align: center;
}

.site_footer p {
	margin: 4px 0;
}

.site_footer a {
	color: var(--link);
}

/* -----------------------------------------------------------------------------
   8. ПЛАНШЕТЫ И ШИРЕ (>= 768px): горизонтальное меню
   ----------------------------------------------------------------------------- */

@media (min-width: 768px) {

	.page {
		padding: 0 20px;
	}

	.nav_wrapper {
		position: sticky;
		top: var(--app-bar-h);
		z-index: 100;
		padding: 12px 20px 0;
	}

	.nav_toggle { display: none; }

	.main_menu {
		display: flex;
		flex-wrap: wrap;
		border-top: none;
	}

	.main_menu > li {
		border-bottom: none;
	}

	.main_menu > li > a {
		padding: 16px;
		border-radius: 0;
		border-left: 1px solid var(--outline);
	}

	.main_menu > li:first-of-type > a {
		border-left: none;
	}

	.main_menu > li.has_children > a { padding-right: 16px; }

	.submenu_toggle { display: none; }

	/* Выпадающие подменю */
	.main_menu ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 200px;
		background-color: var(--surface);
		border: 1px solid var(--outline);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		box-shadow: var(--shadow-3);
		z-index: 1000;
		padding: 4px;
	}

	.main_menu > li:hover > ul,
	.main_menu li:focus-within > ul {
		display: block;
	}

	.main_menu ul a {
		padding: 10px 14px;
		border-radius: 6px;
		font-size: 1rem;
	}

	/* «Домик» на широком экране — только иконка */
	.main_menu > li.home > a {
		width: 54px;
		height: 54px;
		padding: 0;
		justify-content: center;
	}

	/* Подпись «Главная» видна только на мобильных */
	.main_menu > li.home .home_label {
		position: absolute;
		width: 1px;
		height: 1px;
		overflow: hidden;
		clip: rect(0 0 0 0);
		white-space: nowrap;
	}

	/* Подменю раздела — горизонтальная полоса */
	.sub_navigation { display: block; }

	.sub_navigation > ul {
		display: flex;
		flex-wrap: wrap;
	}

	.sub_navigation > ul > li { border-bottom: none; }

	.sub_navigation a { padding: 10px 14px; }

	.sub_navigation ul ul {
		display: none;
		position: absolute;
		top: 100%;
		left: 0;
		min-width: 180px;
		background-color: var(--surface);
		border: 1px solid var(--outline);
		border-radius: 0 0 var(--radius-sm) var(--radius-sm);
		box-shadow: var(--shadow-3);
		z-index: 1000;
		padding: 4px;
	}

	.sub_navigation li:hover > ul,
	.sub_navigation li:focus-within > ul {
		display: block;
	}

	.sub_navigation > ul > li.has_children > a { padding-right: 14px; }
}

/* -----------------------------------------------------------------------------
   9. ТЁМНАЯ ТЕМА ДЛЯ ПОДСВЕТКИ КОДА (Prism)
   ----------------------------------------------------------------------------- */

[data-theme="dark"] code[class*="language-"],
[data-theme="dark"] pre[class*="language-"] {
	color: var(--code-fg);
	text-shadow: none;
}

[data-theme="dark"] :not(pre) > code[class*="language-"],
[data-theme="dark"] pre[class*="language-"] {
	background: var(--code-bg);
}

[data-theme="dark"] .token.comment,
[data-theme="dark"] .token.prolog,
[data-theme="dark"] .token.doctype,
[data-theme="dark"] .token.cdata { color: #8a929e; }

[data-theme="dark"] .token.punctuation { color: #a6acb5; }

[data-theme="dark"] .token.property,
[data-theme="dark"] .token.tag,
[data-theme="dark"] .token.boolean,
[data-theme="dark"] .token.number,
[data-theme="dark"] .token.constant,
[data-theme="dark"] .token.symbol,
[data-theme="dark"] .token.deleted { color: #e29aa6; }

[data-theme="dark"] .token.selector,
[data-theme="dark"] .token.attr-name,
[data-theme="dark"] .token.string,
[data-theme="dark"] .token.char,
[data-theme="dark"] .token.builtin,
[data-theme="dark"] .token.inserted { color: #a8d08d; }

[data-theme="dark"] .token.operator,
[data-theme="dark"] .token.entity,
[data-theme="dark"] .token.url,
[data-theme="dark"] .language-css .token.string,
[data-theme="dark"] .style .token.string {
	color: #d9b98a;
	background: none;
}

[data-theme="dark"] .token.atrule,
[data-theme="dark"] .token.attr-value,
[data-theme="dark"] .token.keyword { color: #8fc1e8; }

[data-theme="dark"] .token.function,
[data-theme="dark"] .token.class-name { color: #e8a0b4; }

[data-theme="dark"] .token.regex,
[data-theme="dark"] .token.important,
[data-theme="dark"] .token.variable { color: #e8c07a; }

/* На узких экранах уменьшаем внутренние отступы карточек */
@media (max-width: 767px) {
	.article { padding: 14px; }
	.brand_tagline { display: none; }
}