/* Dark theme overrides
 *
 * Все правила завязаны на body.theme-dark, чтобы светлая и тёмная
 * темы могли сосуществовать, не мешая друг другу.
 */

body.theme-dark {
  background-color: #020617; /* slate-950 */
  color: #e5e7eb; /* slate-200 */
}

/* ---------- Общий фон, секции, белые блоки ---------- */

/* Светлый фон секций (bg-slate-50) в тёмной теме делаем тёмным */
body.theme-dark section.bg-slate-50 {
  background-color: #020617; /* чтобы не было светлой полосы */
}

/* Все "белые карточки" и панели (bg-white) затемняем */
body.theme-dark .bg-white {
  background-color: #0f172a; /* slate-900/800 */
}

/* Полупрозрачные белые карточки (bg-white/80) в тёмной теме тоже затемняем */
body.theme-dark .bg-white\/80 {
  background-color: rgba(15, 23, 42, 0.92); /* тёмная полупрозрачная карта */
}

/* Подчистим светлые голубые подложки, делаем их менее яркими */
body.theme-dark .bg-blue-50 {
  background-color: rgba(59, 130, 246, 0.12); /* мягкий синий оттенок */
}

/* Градиенты/фоны hero и других блоков, если используются bg-slate-* */
body.theme-dark .bg-slate-100,
body.theme-dark .bg-slate-200 {
  background-color: #020617;
}

/* ---------- Специально для hero-блока на главной (Home) ---------- */
/* Исходный класс: bg-gradient-to-r from-sky-50 via-white to-indigo-50 */
body.theme-dark .bg-gradient-to-r.from-sky-50.via-white.to-indigo-50 {
  background-image: linear-gradient(
    to right,
    #020617,
    #020617,
    #020617
  ); /* ровный тёмный фон вместо светлого градиента */
  border: 1px solid #1f2937;
}

/* ---------- Хедер и футер ---------- */

body.theme-dark header {
  background-color: rgba(15, 23, 42, 0.62); /* slate-900, более прозрачный */
  border-bottom-color: #1f2937; /* gray-800 */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Хедер (glass) — принудительно, чтобы перебить bg-* классы из разметки */
body.theme-dark header.site-header {
  background-color: rgba(15, 23, 42, 0.62) !important;
  border-bottom-color: #1f2937 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Мобильное меню (glass) — синхронизируем с хедером и перебиваем bg-* классы */
body.theme-dark #mobileMenu.site-mobile-menu {
  background-color: rgba(15, 23, 42, 0.62) !important;
  border-top-color: #1f2937 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

body.theme-dark header a {
  color: #e5e7eb;
}

body.theme-dark header a:hover {
  color: #60a5fa; /* blue-400 */
}

/* Футер (нижняя белая полоска) */
body.theme-dark footer {
  background-color: #020617;
  border-top-color: #1f2937;
  color: #9ca3af;
}

/* Если в футере есть доп. белые блоки */
body.theme-dark footer .bg-white {
  background-color: #020617;
}

/* ---------- Границы и разделители ---------- */

body.theme-dark .border-slate-100,
body.theme-dark .border-gray-100,
body.theme-dark .border-slate-200,
body.theme-dark .border-gray-200 {
  border-color: #1f2937; /* dark border */
}

body.theme-dark .border-dashed {
  border-style: dashed;
}

/* ---------- Текстовые цвета ---------- */

body.theme-dark .text-slate-900,
body.theme-dark .text-gray-900 {
  color: #e5e7eb; /* почти белый */
}

body.theme-dark .text-slate-800,
body.theme-dark .text-gray-800 {
  color: #e5e7eb;
}

body.theme-dark .text-slate-700,
body.theme-dark .text-gray-700 {
  color: #d1d5db; /* slate-300 */
}

body.theme-dark .text-slate-600,
body.theme-dark .text-gray-600 {
  color: #9ca3af; /* slate-400 */
}

body.theme-dark .text-slate-500,
body.theme-dark .text-gray-500 {
  color: #6b7280; /* slate-500 */
}

/* Подписи/второстепенный текст */
body.theme-dark small,
body.theme-dark .text-xs {
  color: #6b7280;
}

/* ---------- Навигация и меню ---------- */

/* Центральное меню в хедере */
body.theme-dark nav a {
  color: #e5e7eb;
}

body.theme-dark nav a:hover {
  color: #60a5fa;
}

/* Мобильное меню */
body.theme-dark #mobileMenu {
  background-color: rgba(15, 23, 42, 0.62); /* как у header */
  border-top-color: #1f2937; /* как у header border */
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Мобильное меню: внутренние панели (если в разметке используются bg-white/bg-white/60/bg-white/80) */
body.theme-dark #mobileMenu.site-mobile-menu .bg-white,
body.theme-dark #mobileMenu.site-mobile-menu .bg-white\/60,
body.theme-dark #mobileMenu.site-mobile-menu .bg-white\/80 {
  background-color: rgba(15, 23, 42, 0.62) !important; /* как у header */
  border-color: #1f2937 !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* Ссылки в мобильном меню: читаемый цвет и корректный hover в тёмной теме */
body.theme-dark #mobileMenu a {
  color: #d1d5db; /* slate-300 */
}

body.theme-dark #mobileMenu a:hover {
  color: #60a5fa; /* blue-400 */
}

/* ---------- Переключатель языка (десктоп) ---------- */

body.theme-dark .lang-switcher button {
  background-color: rgba(15, 23, 42, 0.65);
  border-color: rgba(255, 255, 255, 0.08);
  color: #e5e7eb;
}

body.theme-dark .lang-switcher button:hover {
  background-color: rgba(15, 23, 42, 0.85);
}

body.theme-dark .lang-dropdown {
  background-color: #0b1120; /* глубже, чем slate-900 */
  border-color: rgba(255, 255, 255, 0.08);
}

body.theme-dark .lang-dropdown a {
  color: #e5e7eb;
}

body.theme-dark .lang-dropdown a:hover {
  background-color: rgba(59, 130, 246, 0.12);
}

/* ---------- Пустой список блог-постов (empty state) ---------- */

/* Пустой блок "пока нет постов" */
body.theme-dark .border-dashed.border-slate-200 {
  border-color: #1f2937;
}

body.theme-dark .fade-in-up-delay.bg-white {
  background-color: #020617;
}

/* ---------- Кнопки, ссылки, primary-элементы ---------- */

body.theme-dark .text-blue-600 {
  color: #60a5fa;
}

body.theme-dark .text-blue-600:hover {
  color: #93c5fd;
}

body.theme-dark .bg-blue-600 {
  background-color: #2563eb;
}

body.theme-dark .bg-blue-600:hover {
  background-color: #1d4ed8;
}

/* Теги постов (bg-blue-50 text-blue-600) */
body.theme-dark .bg-blue-50.text-blue-600,
body.theme-dark .inline-flex.bg-blue-50.text-blue-600 {
  background-color: rgba(37, 99, 235, 0.18);
  color: #bfdbfe;
}

/* ---------- Переключатель темы (визуальное приведение к тёмному) ---------- */

body.theme-dark .switch .slider {
  background-color: #0b1120;
}

body.theme-dark .switch input:checked + .slider {
  background-color: #0284c7;
}

/* ---------- Прочие полезные исправления ---------- */

/* Лёгкое затемнение теней в тёмной теме */
body.theme-dark .shadow-sm,
body.theme-dark .shadow {
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.7);
}

/* Если где-то есть bg-gray-50, тоже затемним */
body.theme-dark .bg-gray-50 {
  background-color: #020617;
}

/* Обрамление блоков с dashed-границами */
body.theme-dark .border-dashed {
  border-color: #1f2937;
}

/* ---------- Логотип: кружок с code-иконкой (чуть более контрастный в тёмной теме) ---------- */

body.theme-dark .logo-code-badge {
  border-color: rgba(255, 255, 255, 0.14);
  box-shadow: 0 14px 30px rgba(0, 0, 0, 0.65);
}

/* ---------- Логотип: переключение GIF-иконки светлая/тёмная ---------- */

/* В тёмной теме прячем светлую (чёрную) иконку и показываем тёмную (белую) */
body.theme-dark .logo-icon-light {
  opacity: 0 !important;
  visibility: hidden !important;
}

body.theme-dark .logo-icon-dark {
  opacity: 1 !important;
  visibility: visible !important;
}

/* На тёмной теме делаем бургер-иконку более контрастной */
body.theme-dark .hamburger .line {
  stroke: #e5e7eb; /* slate-200 */
}

/* ---------- Иконка пустого списка блог-постов (empty state) ---------- */

body.theme-dark .empty-icon-light {
  opacity: 0 !important;
}

body.theme-dark .empty-icon-dark {
  opacity: 1 !important;
}

/* ---------- Кнопка "Читать далее" в тёмной теме ---------- */

body.theme-dark .btn-read-more {
  --primary-color: #1d4ed8;   /* более тёмный синий */
  --hover-color: #020617;     /* почти чёрный фон при hover */
  --secondary-color: #ffffff; /* текст и стрелка остаются белыми */
  box-shadow: 0 10px 25px rgba(0, 0, 0, 0.6);
}

/* --- Language hint banner (device RU, site non-RU) — dark theme --- */

body.theme-dark .lang-hint {
  --lh-bg: rgba(15, 23, 42, 0.62);          /* glass like header */
  --lh-border: rgba(96, 165, 250, 0.22);    /* blue-400 */
  --lh-title: rgba(226, 232, 240, 0.96);    /* slate-200 */
  --lh-text: rgba(226, 232, 240, 0.78);
  --lh-btn-bg: rgba(2, 6, 23, 0.26);        /* slate-950 */
  --lh-btn-border: rgba(96, 165, 250, 0.22);
  --lh-btn-hover: rgba(2, 6, 23, 0.40);
  --lh-focus: rgba(147, 197, 253, 0.35);    /* blue-300 */
}

body.theme-dark .lang-hint__inner {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

body.theme-dark .lang-hint__icon {
  background: rgba(96, 165, 250, 0.10);
}

body.theme-dark .lang-hint__card {
  position: relative;
  overflow: visible;
}

body.theme-dark .lang-hint__close {
  background: rgba(2, 6, 23, 0.26); /* как у кнопки */
  border-color: rgba(96, 165, 250, 0.22);
  color: rgba(226, 232, 240, 0.92);
}

body.theme-dark .lang-hint__close:hover {
  background: rgba(2, 6, 23, 0.40);
}

/* --- Site warning banner (temporary, under construction) --- */

body.theme-dark .site-warning {
  /* Dark theme tokens */
  --sw-bg: rgba(15, 23, 42, 0.82);          /* slate-900 with transparency */
  --sw-border: rgba(251, 191, 36, 0.18);    /* amber-400 */
  --sw-title: rgba(253, 230, 138, 0.98);    /* amber-200 */
  --sw-text: rgba(226, 232, 240, 0.82);     /* slate-200 */
  --sw-hint: rgba(226, 232, 240, 0.62);
  --sw-accent-1: rgba(251, 191, 36, 0.95);
  --sw-accent-2: rgba(245, 158, 11, 0.92);
  --sw-cta-bg: rgba(2, 6, 23, 0.30);        /* slate-950 */
  --sw-cta-border: rgba(251, 191, 36, 0.18);
  --sw-cta-hover: rgba(2, 6, 23, 0.46);
  --sw-focus: rgba(147, 197, 253, 0.35);    /* blue-300 */
}

body.theme-dark .site-warning__card {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

body.theme-dark .site-warning__icon {
  background: rgba(251, 191, 36, 0.08);
}

body.theme-dark .site-warning__cta {
  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.40);
}

body.theme-dark .site-warning__cta-icon {
  background: rgba(2, 6, 23, 0.22);
}
/* ---------- Социальные иконки (SVG) в тёмной теме ---------- */

/*
  Без рамок и фоновых "кнопок".
  В тёмной теме задаём читаемый базовый цвет иконки,
  а при наведении — брендовый цвет (через --brand).
*/

body.theme-dark .social-link {
  color: rgba(226, 232, 240, 0.88); /* slate-200 */
}

body.theme-dark .social-link:hover {
  color: var(--brand);
}

/* Для X и GitHub в тёмной теме используем светлый "бренд" */
body.theme-dark .social-link[data-social="x"] {
  --brand: #ffffff;
}

body.theme-dark .social-link[data-social="github"] {
  --brand: #f8fafc;
}

/* --- Cookies consent banner — dark theme --- */

body.theme-dark .cookies-consent {
  /* сохраняем поведение из light: клики только по карточке */
  pointer-events: none;
}

body.theme-dark .cookies-card {
  /* tokens (dark) */
  --cc-bg: rgba(15, 23, 42, 0.62);          /* glass like header */
  --cc-border: rgba(96, 165, 250, 0.18);    /* blue-400 */
  --cc-title: rgba(226, 232, 240, 0.96);    /* slate-200 */
  --cc-text: rgba(226, 232, 240, 0.82);
  --cc-muted: rgba(226, 232, 240, 0.62);

  --cc-btn-primary: #2563eb;                /* blue-600 */
  --cc-btn-primary-hover: #1d4ed8;          /* blue-700 */
  --cc-btn-secondary: rgba(2, 6, 23, 0.26); /* slate-950 */
  --cc-btn-secondary-hover: rgba(2, 6, 23, 0.40);

  box-shadow: 0 18px 40px rgba(0, 0, 0, 0.55);
}

body.theme-dark .cookies-card .cookie-heading {
  color: var(--cc-title);
}

body.theme-dark .cookies-card .cookie-para {
  color: var(--cc-text);
}

body.theme-dark .cookies-card .cookies-note {
  color: var(--cc-muted);
}

body.theme-dark .cookies-card .cookies-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;

  margin-top: 2px;

  font-size: 0.85rem;
  font-weight: 700;
  letter-spacing: -0.01em;

  color: rgba(96, 165, 250, 0.92); /* blue-400 */
  text-decoration: none;
  text-underline-offset: 4px;

  transition: color 0.2s ease;
}

body.theme-dark .cookies-card .cookies-more:hover {
  color: rgba(147, 197, 253, 0.98); /* blue-300 */
  text-decoration: underline;
}

body.theme-dark .cookies-card .cookies-more:focus {
  outline: none;
}

body.theme-dark .cookies-card .cookies-more:focus-visible {
  outline: 3px solid rgba(147, 197, 253, 0.28);
  outline-offset: 3px;
  border-radius: 10px;
}

body.theme-dark .cookies-card .accept {
  background-color: var(--cc-btn-primary);
  color: rgba(255, 255, 255, 0.96);
}

body.theme-dark .cookies-card .accept:hover {
  background-color: var(--cc-btn-primary-hover);
}

body.theme-dark .cookies-card .reject {
  background-color: var(--cc-btn-secondary);
  color: var(--cc-title);
  border-color: rgba(96, 165, 250, 0.18);
}

body.theme-dark .cookies-card .reject:hover {
  background-color: var(--cc-btn-secondary-hover);
}

body.theme-dark .cookies-card .exit-button {
  background: rgba(2, 6, 23, 0.26);
  border-color: rgba(96, 165, 250, 0.18);
}

body.theme-dark .cookies-card .exit-button:hover {
  background: rgba(2, 6, 23, 0.40);
}

body.theme-dark .cookies-card .svgIconCross {
  color: rgba(226, 232, 240, 0.92);
}

/* --- Legal pages typography (Cookies Policy page) — dark theme --- */

/* The cookies policy page uses `.prose` styles defined in main.css; here we override colors for dark mode. */
body.theme-dark .prose {
  color: rgba(226, 232, 240, 0.82); /* slate-200 */
}

body.theme-dark .prose h2,
body.theme-dark .prose h3 {
  color: rgba(226, 232, 240, 0.96);
}

body.theme-dark .prose a {
  color: #60a5fa; /* blue-400 */
}

body.theme-dark .prose a:hover {
  color: #93c5fd; /* blue-300 */
}

body.theme-dark .prose strong {
  color: rgba(226, 232, 240, 0.96);
}

body.theme-dark .prose code {
  background: rgba(148, 163, 184, 0.18);
  color: rgba(226, 232, 240, 0.92);
}

/* The cookies page uses glass blocks with Tailwind opacity utilities. Provide dark equivalents. */
body.theme-dark .bg-white\/70 {
  background-color: rgba(15, 23, 42, 0.62) !important; /* like header glass */
}

body.theme-dark .bg-slate-50\/70,
body.theme-dark .bg-slate-50\/80 {
  background-color: rgba(15, 23, 42, 0.62) !important;
}

body.theme-dark .border-slate-200\/60 {
  border-color: rgba(255, 255, 255, 0.08) !important;
}

/* --- Error pages (page_error) — dark theme watermark --- */

/*
  В светлой теме watermark использует text-slate-900/10.
  В тёмной теме это становится почти незаметно на тёмном фоне.
  Поэтому делаем watermark светлым и очень деликатным.
*/
body.theme-dark .page-error-card .page-error-watermark-code {
  color: rgba(226, 232, 240, 0.10) !important; /* slate-200 @ 10% */
}

/* Чуть мягче рендер больших цифр на OLED/Retina */
body.theme-dark .page-error-card .page-error-watermark {
  filter: saturate(0.9);
}