/*!
 * Linux UI — переключатель тёмной темы и адаптивные правки.
 * Работает поверх блочной темы Twenty Twenty-Five, не ломая светлую тему.
 */

/* ------------------------------------------------------------------ *
 * Палитра
 * ------------------------------------------------------------------ */
:root {
	--linux-bg: var(--wp--preset--color--base, #ffffff);
	--linux-fg: var(--wp--preset--color--contrast, #111111);
	--linux-surface: var(--wp--preset--color--accent-5, #fbfaf3);
	--linux-border: color-mix(in srgb, var(--linux-fg) 15%, transparent);
	--linux-muted: color-mix(in srgb, var(--linux-fg) 55%, transparent);
}

html[data-theme="dark"] {
	--wp--preset--color--base: #16181d;
	--wp--preset--color--contrast: #e8e8e8;
	--wp--preset--color--accent-1: #ffd54f;
	--wp--preset--color--accent-2: #8f6fd1;
	--wp--preset--color--accent-3: #b7a2ff;
	--wp--preset--color--accent-4: #b8b8b8;
	--wp--preset--color--accent-5: #1f2228;
	--wp--preset--color--accent-6: #ffffff26;

	--linux-bg: #16181d;
	--linux-fg: #e8e8e8;
	--linux-surface: #1f2228;
	--linux-border: #3a3d44;
	--linux-muted: #a6a6a6;

	color-scheme: dark;
}

html[data-theme="dark"] body {
	background-color: var(--linux-bg);
	color: var(--linux-fg);
}

/* Встроенные фоны/бордеры блоков в тёмной теме. */
html[data-theme="dark"] .has-base-background-color {
	background-color: var(--wp--preset--color--base) !important;
}

html[data-theme="dark"] .has-contrast-background-color {
	background-color: var(--wp--preset--color--contrast) !important;
}

html[data-theme="dark"] .has-accent-5-background-color {
	background-color: var(--wp--preset--color--accent-5) !important;
}

html[data-theme="dark"] .custom-logo,
html[data-theme="dark"] .wp-block-site-logo img {
	/* Бейдж-логотип уже цветной со скруглением — лишнюю белую плашку не рисуем. */
	border-radius: 10px;
	background: transparent;
}

html[data-theme="dark"] .wp-block-post-content a,
html[data-theme="dark"] .entry-content a {
	color: var(--wp--preset--color--accent-1);
}

html[data-theme="dark"] .wp-block-post-content a:hover,
html[data-theme="dark"] .entry-content a:hover {
	color: var(--wp--preset--color--accent-3);
}

/* ------------------------------------------------------------------ *
 * Кнопка переключателя темы
 * ------------------------------------------------------------------ */
.linux-theme-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-start: 0.75rem;
	padding: 0;
	border: 1px solid var(--linux-border);
	border-radius: 50%;
	background: transparent;
	color: var(--linux-fg);
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

/* Тема обнуляет margin у прямых flex-детей шапки — возвращаем отступ
   между «Войти» и переключателем темы, как у остальных кнопок. */
header .linux-theme-toggle {
	margin-inline-start: 0.75rem;
}

.linux-theme-toggle:hover,
.linux-theme-toggle:focus-visible {
	background: color-mix(in srgb, var(--linux-fg) 10%, transparent);
	border-color: var(--linux-muted);
	outline: none;
}

.linux-theme-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.linux-theme-toggle .linux-icon-moon {
	display: none;
}

html[data-theme="dark"] .linux-theme-toggle .linux-icon-sun {
	display: none;
}

html[data-theme="dark"] .linux-theme-toggle .linux-icon-moon {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Поиск в шапке: иконка + раскрывающаяся форма
 * ------------------------------------------------------------------ */
.linux-search-toggle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-start: 0.75rem;
	padding: 0;
	border: 1px solid var(--linux-border);
	border-radius: 50%;
	background: transparent;
	color: var(--linux-fg);
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

.linux-search-toggle:hover,
.linux-search-toggle:focus-visible {
	background: color-mix(in srgb, var(--linux-fg) 10%, transparent);
	border-color: var(--linux-muted);
	outline: none;
}

.linux-search-toggle svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

.linux-search-toggle .linux-icon-close {
	display: none;
}

header.linux-search-open .linux-search-toggle .linux-icon-search {
	display: none;
}

header.linux-search-open .linux-search-toggle .linux-icon-close {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Плавное раскрытие поиска: меню плавно уходит, поле растёт до логотипа.
 * ------------------------------------------------------------------ */
@media (min-width: 861px) {
	header .linux-header-collapse .linux-menu {
		max-width: 100%;
		opacity: 1;
		/* Свой stacking context + z-index, чтобы подменю было выше контента. */
		position: relative;
		z-index: 100;
		/* Режем по горизонтали при сжатии, но выпускаем подменю снизу. */
		clip-path: inset(0 0 -200vh 0);
		/* Закрытие: ширина возвращается, затем проявляются рубрики. */
		transition: max-width 0.35s ease, opacity 0.15s ease 0.2s;
	}

	/* Одна строка во время анимации — без вертикального «прыжка». */
	header .linux-header-collapse .linux-menu__list {
		flex-wrap: nowrap;
	}

	html.linux-search-js header .linux-header-collapse .wp-block-search {
		display: block;
		flex: 1 1 auto;
		min-width: 0;
		max-width: 0;
		opacity: 0;
		overflow: hidden;
		visibility: hidden;
		transition: max-width 0.4s ease, opacity 0.3s ease, visibility 0s linear 0.4s;
	}

	header .linux-header-collapse .wp-block-search__inside-wrapper,
	header .linux-header-collapse .wp-block-search__input {
		min-width: 0;
	}

	header.linux-search-open .linux-header-collapse .is-content-justification-right {
		flex: 1 1 auto;
		justify-content: flex-end;
	}

	header.linux-search-open .linux-header-collapse .linux-menu {
		max-width: 0%;
		opacity: 0;
		/* Открытие: сначала рубрики гаснут, потом меню сжимается. */
		transition: opacity 0.1s ease, max-width 0.35s ease 0.1s;
	}

	html.linux-search-js header.linux-search-open .linux-header-collapse .wp-block-search {
		order: 1;
		max-width: 100%;
		opacity: 1;
		visibility: visible;
		transition: max-width 0.4s ease, opacity 0.3s ease, visibility 0s linear 0s;
	}

	html.linux-search-js header.linux-search-open .linux-header-collapse .wp-block-search__inside-wrapper {
		width: 100% !important;
	}

	header.linux-search-open .linux-search-toggle {
		order: 2;
		margin-inline-start: 0.5rem;
		margin-inline-end: 0;
	}

	header.linux-search-open .linux-auth {
		order: 3;
	}

	header.linux-search-open .linux-theme-toggle {
		order: 4;
	}
}

@media (prefers-reduced-motion: reduce) {
	header .linux-header-collapse .linux-menu,
	html.linux-search-js header .linux-header-collapse .wp-block-search {
		transition: none;
	}
}

/* Без JS иконки нет — форма поиска остаётся видимой, как раньше. */
html:not(.linux-search-js) .linux-search-toggle {
	display: none;
}

/* Свёрнуто: форма скрыта, показана иконка. Раскрыто — наоборот. */
html.linux-search-js header .wp-block-search {
	display: none;
}

html.linux-search-js header.linux-search-open .wp-block-search {
	display: block;
}

/* ------------------------------------------------------------------ *
 * Брендинг шапки (стиль haipai): бейдж-монограмма + название сайта
 * ------------------------------------------------------------------ */
header .wp-block-site-logo.linux-brand-logo {
	line-height: 0;
}

header .wp-block-site-logo.linux-brand-logo .custom-logo {
	display: block;
	width: 48px;
	height: 48px;
	max-width: 48px;
	border-radius: 11px;
}

/* Название сайта рядом с бейджем. */
header .wp-block-site-title {
	display: block;
	margin: 0;
	font-size: clamp(1rem, 2.5vw, 1.25rem);
	font-weight: 700;
	line-height: 1.15;
	letter-spacing: -0.01em;
}

header .wp-block-site-title a {
	text-decoration: none;
}

@media (max-width: 600px) {
	header .wp-block-site-logo.linux-brand-logo .custom-logo {
		width: 40px;
		height: 40px;
		max-width: 40px;
	}

	header .wp-block-site-title {
		font-size: 1rem;
	}
}

/* ------------------------------------------------------------------ *
 * Логотип-название: при наведении «Linux» плавно заливается красным,
 * «Windows» — цветом логотипа (заливка слева направо).
 * ------------------------------------------------------------------ */
@supports ((-webkit-background-clip: text) or (background-clip: text)) {
	header .wp-block-site-title .linux-word {
		--linux-word-base: var(--linux-fg, #111111);
		background-image: linear-gradient(90deg, var(--linux-word-fill, var(--linux-word-base)) 50%, var(--linux-word-base) 50%);
		background-repeat: no-repeat;
		background-size: 200% 100%;
		background-position: 100% 0;
		-webkit-background-clip: text;
		background-clip: text;
		-webkit-text-fill-color: transparent;
		color: transparent;
		transition: background-position 0.5s ease;
	}

	header .wp-block-site-title .linux-word--linux {
		--linux-word-fill: #ef4444;
	}

	header .wp-block-site-title .linux-word--windows {
		--linux-word-fill: #38bdf8;
	}

	/* Наведение на логотип (бейдж + название) или фокус с клавиатуры. */
	header .alignwide > .wp-block-group:hover .linux-word,
	header .wp-block-site-title a:focus-visible .linux-word {
		background-position: 0 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	header .wp-block-site-title .linux-word {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Шапка в тёмной теме: поиск и вход в тон интерфейсу
 * ------------------------------------------------------------------ */
html[data-theme="dark"] header .wp-block-search__inside-wrapper {
	background: var(--linux-surface);
	border: 1px solid var(--linux-border);
}

html[data-theme="dark"] header .wp-block-search__input {
	background: transparent;
	border-color: transparent;
	color: var(--linux-fg);
}

html[data-theme="dark"] header .wp-block-search__input::placeholder {
	color: var(--linux-muted);
}

html[data-theme="dark"] header .wp-block-search__button {
	background: color-mix(in srgb, var(--linux-fg) 10%, var(--linux-surface));
	border: 1px solid var(--linux-border);
	color: var(--linux-fg);
}

html[data-theme="dark"] header .wp-block-search__button:hover,
html[data-theme="dark"] header .wp-block-search__button:focus-visible {
	background: color-mix(in srgb, var(--linux-fg) 16%, var(--linux-surface));
	border-color: var(--linux-muted);
	outline: none;
}

html[data-theme="dark"] header .linux-auth a.linux-auth-link,
html[data-theme="dark"] header .linux-auth a.linux-auth-in {
	background: var(--linux-surface);
	border-color: var(--linux-border);
	color: var(--linux-fg);
}

html[data-theme="dark"] header .linux-auth a.linux-auth-link:hover,
html[data-theme="dark"] header .linux-auth a.linux-auth-in:hover {
	background: color-mix(in srgb, var(--linux-fg) 12%, var(--linux-surface));
	border-color: var(--linux-muted);
}

/* ------------------------------------------------------------------ *
 * Светлые картинки в тёмной теме: мягкая инверсия (ставит JS)
 * ------------------------------------------------------------------ */
.wp-block-post-content img,
.entry-content img,
.wp-post-image,
.wp-block-post-featured-image img {
	transition: filter 0.2s ease;
}

img[data-linux-invert] {
	filter: invert(1) hue-rotate(180deg);
}

/* ------------------------------------------------------------------ *
 * Просмотры в списках: иконка-глаз в линию с заголовком
 * ------------------------------------------------------------------ */
.wp-block-post-template .wp-block-post-title {
	flex: 1 1 auto;
	min-width: 0;
	margin-bottom: 0;
}

.linux-post-views {
	display: inline-flex;
	align-items: center;
	gap: 0.35em;
	flex: 0 0 auto;
	color: var(--linux-muted);
	font-size: var(--wp--preset--font-size--small, 0.875rem);
	line-height: 1;
	white-space: nowrap;
}

.linux-post-views svg {
	width: 1em;
	height: 1em;
	display: block;
}

.linux-post-views__count {
	font-variant-numeric: tabular-nums;
}

/* ------------------------------------------------------------------ *
 * «Читать далее» — акцентная кнопка
 * ------------------------------------------------------------------ */
.wp-block-post-excerpt__more-link {
	display: block;
	width: fit-content;
	margin-top: 0.65em;
	padding: 0.32em 1em;
	border-radius: 999px;
	background: #38bdf8;
	color: #0b1220;
	font-weight: 700;
	font-size: 0.9em;
	line-height: 1.5;
	text-decoration: none;
	white-space: nowrap;
	transition: background-color 0.2s ease, transform 0.2s ease;
}

.wp-block-post-excerpt__more-link::after {
	content: ' →';
	font-weight: 700;
}

.wp-block-post-excerpt__more-link:hover,
.wp-block-post-excerpt__more-link:focus-visible {
	background: #0ea5e9;
	color: #0b1220;
	text-decoration: none;
	transform: translateX(2px);
	outline: none;
}

html[data-theme="dark"] .wp-block-post-excerpt__more-link {
	background: #38bdf8;
	color: #0b1220;
}

html[data-theme="dark"] .wp-block-post-excerpt__more-link:hover,
html[data-theme="dark"] .wp-block-post-excerpt__more-link:focus-visible {
	background: #7dd3fc;
	color: #0b1220;
}

@media (prefers-reduced-motion: reduce) {
	.wp-block-post-excerpt__more-link,
	.wp-block-post-excerpt__more-link:hover {
		transition: none;
		transform: none;
	}
}

/* Скрытый H1 (главная/лента) — доступен скринридерам, не виден визуально. */
.linux-visually-hidden {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* ------------------------------------------------------------------ *
 * Шапка: меню рубрик в строке (десктоп) и группа-бургер (мобильные)
 * ------------------------------------------------------------------ */

/* Обёртка «меню + действия»: на десктопе растворяется — меню встаёт в строку
   шапки; на мобильных становится раскрывающейся группой под шапкой. */
header .linux-header-collapse {
	display: contents;
}

/* Меню рубрик в строке шапки: растягивается и центрирует пункты. */
header .linux-header-collapse .linux-menu {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
	margin-top: 0;
	border-top: 0;
}

/* Кнопка-бургер — только для мобильных. */
header .linux-burger {
	display: none;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	width: 2.75rem;
	height: 2.75rem;
	margin-inline-start: 0.5rem;
	padding: 0;
	border: 1px solid var(--linux-border);
	border-radius: 50%;
	background: transparent;
	color: var(--linux-fg);
	cursor: pointer;
	line-height: 1;
	transition: background-color 0.2s ease, border-color 0.2s ease;
}

header .linux-burger:hover,
header .linux-burger:focus-visible {
	background: color-mix(in srgb, var(--linux-fg) 10%, transparent);
	border-color: var(--linux-muted);
	outline: none;
}

header .linux-burger svg {
	width: 1.25rem;
	height: 1.25rem;
	display: block;
}

header .linux-burger .linux-icon-close {
	display: none;
}

header.linux-header-open .linux-burger .linux-icon-burger {
	display: none;
}

header.linux-header-open .linux-burger .linux-icon-close {
	display: block;
}

/* Мобильные: в строке — только логотип и бургер, остальное — в группе. */
@media (max-width: 860px) {
	header .alignwide {
		display: grid;
		grid-template-columns: minmax(0, 1fr) auto;
		grid-template-areas: "brand burger";
		align-items: center;
		column-gap: 0.5rem;
		row-gap: 0.7rem;
		padding-top: var(--wp--preset--spacing--20, 1rem);
		padding-bottom: var(--wp--preset--spacing--20, 1rem);
	}

	header.linux-header-open .alignwide {
		grid-template-areas:
			"brand burger"
			"panel panel";
	}

	header .alignwide > .wp-block-group:not(.is-content-justification-right):not(.linux-header-collapse) {
		grid-area: brand;
		min-width: 0;
	}

	header .linux-burger {
		display: inline-flex;
		grid-area: burger;
	}

	/* Раскрывающаяся группа: меню рубрик, поиск, вход, тема. */
	header .linux-header-collapse {
		grid-area: panel;
		display: none;
		flex-direction: column;
		gap: 0.75rem;
		width: 100%;
		min-width: 0;
		padding-top: 0.75rem;
		border-top: 1px solid var(--linux-border);
	}

	header.linux-header-open .linux-header-collapse {
		display: flex;
	}

	header .linux-header-collapse .linux-menu {
		flex: 0 0 auto;
		width: 100%;
		margin-top: 0;
		border-top: 0;
	}

	/* Блок действий: поиск во всю ширину, вход и тема — в строку под ним. */
	header .linux-header-collapse .is-content-justification-right {
		display: flex;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		gap: 0.5rem;
	}

	header .linux-header-collapse .wp-block-search {
		flex: 1 1 100%;
		width: 100%;
		max-width: 100%;
	}

	header .linux-header-collapse .wp-block-search__inside-wrapper {
		width: 100% !important;
		min-width: 0;
	}

	header .linux-header-collapse .wp-block-search__input {
		min-width: 0;
	}

	/* В группе поиск всегда как поле — иконка-переключатель не нужна. */
	header .linux-search-toggle {
		display: none;
	}

	html.linux-search-js header .linux-header-collapse .wp-block-search {
		display: block;
	}

	header .linux-theme-toggle,
	header .linux-auth {
		margin-inline-start: 0;
	}
}

@media (max-width: 420px) {
	header .wp-block-site-title {
		font-size: 0.95rem;
	}
}

/* На телефонах тема задаёт крупные боковые отступы (двойные 30px).
   Ужимаем их, чтобы контенту доставалось больше ширины. */
@media (max-width: 600px) {
	:root,
	body,
	.wp-site-blocks {
		--wp--style--root--padding-left: 1rem;
		--wp--style--root--padding-right: 1rem;
	}
}

@media (max-width: 400px) {
	:root,
	body,
	.wp-site-blocks {
		--wp--style--root--padding-left: 0.85rem;
		--wp--style--root--padding-right: 0.85rem;
	}
}

/* Эксперпты/заголовки: неразрывно длинные слова (URL, идентификаторы)
   не должны растягивать страницу по горизонтали на телефонах. */
.wp-block-post-excerpt__excerpt,
.wp-block-post-excerpt__excerpt *,
.wp-block-post-title {
	overflow-wrap: anywhere;
	word-break: break-word;
}

/* ------------------------------------------------------------------ *
 * Адаптивные правки контента
 * ------------------------------------------------------------------ */

/* Картинки в записях не должны вылезать за контейнер (граббер отдаёт фикс. width). */
.entry-content img,
.wp-block-post-content img,
.wp-block-post-content p img {
	max-width: 100%;
	height: auto;
}

/* Длинные строки кода — горизонтальный скролл вместо переполнения страницы. */
.wp-block-post-content pre,
.entry-content pre {
	max-width: 100%;
	overflow-x: auto;
	-webkit-overflow-scrolling: touch;
}

/* Кнопка поиска не должна распирать шапку на узких экранах. */
@media (max-width: 900px) {
	header .wp-block-search__inside-wrapper {
		width: auto !important;
		min-width: 0;
	}

	header .wp-block-search {
		max-width: 100%;
		min-width: 0;
	}

	.wp-block-search__input {
		min-width: 0;
	}
}

@media (prefers-reduced-motion: reduce) {
	.linux-theme-toggle {
		transition: none;
	}
}

/* ------------------------------------------------------------------ *
 * Верхние полоски под шапкой: убираем разделители на всех шаблонах
 * ------------------------------------------------------------------ */

/* Разделитель сразу под шапкой (single, страница, 404, ленты записей). */
header.wp-block-template-part + .wp-block-separator {
	display: none;
}

/* Верхний разделитель первой записи в списках — чтобы над первым заголовком
   не оставалось линии. Разделители между записями при этом сохраняются. */
.wp-block-post-template > li:first-child .wp-block-separator {
	display: none;
}

/* Лента записей: убираем лишний отступ между карточками (li + li).
   Воздух задаёт padding карточки, а записи отделяет разделитель,
   поэтому двойной отступ не нужен — он делал зазор слишком большим. */
.wp-block-post-template > li {
	margin-block-start: 0;
}