/* Copyright (C) 2025-2026 adcitymag.ru */
/* adcm-plus / foundation: общие переменные, типографика, адаптивность */

:root {
  /* ===== Переменные, которые ждут шаблоны, но тема их нигде не задавала =====
     Без них в тёмной теме карточки были прозрачными, а рамки белыми. Значения следуют теме:
     lightColor, mainColor, hoverColor уже переключаются между светлой и тёмной. */
  --headColor: var(--mainColor);
  --textColor: var(--mainColor);
  --bgColor: var(--lightColor);
  --bgLight: var(--greyBg);
  --accentColor: var(--hoverColor);
  --accent-color: var(--hoverColor);
  --darkCard: var(--adcm-c-card-dark, #181818);
  --darkBorder: #303030;
  --darkText: var(--adcm-c-gray-100, #ededed);
  --darkBg: var(--adcm-c-ink-dark, #0f0f0f);

  /* подписи мелким шрифтом: серый темы в тёмном режиме слишком тусклый */
  --adcmMuted: var(--greyColor);
  /* приглушённый акцент вместо ярких цветов */
  --adcmAccent: #8c4a3c;

  /* ===== Типографика: единый стандарт =====
     Интерфейс и текст: Commissioner (в теме загружены только начертания 400, 500, 600).
     Шрифт заголовков по умолчанию тот же. Чтобы вернуть шрифт с засечками, достаточно заменить
     значение --headFont на var(--serifFont). */
  --serifFont: Georgia, 'PT Serif', 'Times New Roman', serif;
  --monoFont: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --headFont: var(--primeFont);

  /* шкала размеров по ролям. Корневой размер темы 19px (18px на ноутбуках, 17px на планшетах, 15px на телефонах),
     поэтому размеры в rem масштабируются вместе со страницей. Назначение ролей: assets/plus/typography.css */
  --t-label: .65rem;    /* метки над заголовками, бейджи */
  --t-meta: .78rem;     /* даты, города, счётчики, подписи */
  --t-ui: .88rem;       /* кнопки, меню, фильтры, текст в карточках */
  --t-body: 1rem;       /* основной текст */
  --t-card: .95rem;     /* заголовок карточки */
  --t-card-lg: 1.15rem; /* крупная карточка */
  --t-h3: 1.2rem;       /* подраздел */
  --t-h2: 1.5rem;       /* заголовок раздела */
  --t-h1: clamp(1.7rem, 3.4vw, 2.4rem);      /* заголовок страницы */
  --t-display: clamp(2rem, 4.6vw, 3.2rem);   /* обложки и главные заголовки */
  --t-c-h2: 1.35rem;    /* h2 внутри статьи */
  --t-c-h3: 1.15rem;    /* h3 внутри статьи */
  --t-c-h4: 1rem;       /* h4–h6 внутри статьи */

  /* прежние названия остаются для совместимости */
  --fs-xs: var(--t-label);
  --fs-sm: var(--t-meta);
  --fs-md: var(--t-body);
  --fs-lg: var(--t-card-lg);
  --fs-xl: var(--t-h3);
  --fs-2xl: var(--t-h2);
  --fs-3xl: var(--t-h1);
  --fs-display: var(--t-display);

  /* межстрочные интервалы */
  --lh-tight: 1.15;
  --lh-snug: 1.3;
  --lh-base: 1.6;
  --lh-read: 1.7;
}

/* ===== Тёмная тема: контрастная палитра =====
   Палитра нейтральная (чёрный, графит, белый), как у крупных платформ; без фиолетового оттенка. Прежняя палитра сливалась: серый текст имел контраст 3:1 (нужно от 4.5:1), рамки 1.4:1, карточки почти не
   отличались от фона. Теперь: текст 15:1, подписи 7.5:1, акцентные ссылки 7.4:1, рамки видны на фоне.
   Селектор html:root[...] сильнее правил, которые тема выводит из настроек в <head>. */
html:root[data-theme="dark"] {
  --bodyBg: var(--adcm-c-ink-dark, #0f0f0f);       /* фон страницы: нейтральный почти-чёрный */
  --lightColor: var(--adcm-c-card-dark, #181818);   /* карточки и панели: светлее фона */
  --sectionBg: #1f1f1f;
  --greyBg: var(--adcm-c-ink, #222222);       /* вторичные блоки */
  --borderColor: #303030;  /* рамки и разделители */
  --mainColor: var(--adcm-c-gray-100, #ededed);    /* основной текст */
  --greyColor: #a3a3a3;    /* подписи и вторичный текст */
  --placeholder: #8a8a8a;
  --hoverColor: #7fb0ff;   /* ссылки при наведении, акценты */
  --likesColor: #8a8a8a;
  --adcmMuted: #a3a3a3;
  --adcmAccent: #d08a7c;
  --navDropBg: #1f1f1f;
  --navDropColor: var(--adcm-c-gray-100, #ededed);
  --navDropHover: #2a2a2a;
  --stickyNavBg: var(--adcm-c-card-dark, #181818);
  --stickyNavColor: var(--adcm-c-gray-100, #ededed);
}
html[data-theme="dark"] body { background-color: var(--bodyBg); }

/* места, где цвета были заданы жёстко и не имели тёмного варианта */
html[data-theme="dark"] .tag-post-card { background: var(--lightColor); border: 1px solid var(--borderColor); box-shadow: none; }
html[data-theme="dark"] .card-title { color: var(--mainColor); }
html[data-theme="dark"] .load-more-btn { background: var(--greyBg); color: var(--mainColor); border: 1px solid var(--borderColor); }
html[data-theme="dark"] .load-more-btn:hover { background: var(--sectionBg); }

/* карточки и панели в тёмной теме получают видимую рамку */
html[data-theme="dark"] .re-card,
html[data-theme="dark"] .adcm-card,
html[data-theme="dark"] .adcm-tcard,
html[data-theme="dark"] .adcm-fact-card,
html[data-theme="dark"] .kk-card { border-color: var(--borderColor); }

/* поля форм */
html[data-theme="dark"] input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]),
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
  background-color: var(--greyBg);
  color: var(--mainColor);
  border-color: var(--borderColor);
}
html[data-theme="dark"] ::placeholder { color: var(--placeholder); opacity: 1; }

/* ссылки внутри текста статей читаются на тёмном фоне */
html[data-theme="dark"] .post-content a:not([class]) { color: var(--hoverColor); }

/* кнопки и поля форм по умолчанию не наследуют шрифт */
button, input, select, textarea { font-family: inherit; }

/* ===== Широкие экраны: ноутбуки 1600+, Full HD, 2K/4K, ультраширокие ===== */
@media (min-width: 1600px) {
  :root { --width: 1320px; }
}
@media (min-width: 1920px) {
  :root { --width: 1560px; }
  .blog-grid,
  .home-category__list,
  .feat-posts__list,
  .random-list,
  .re-grid { grid-template-columns: repeat(4, 1fr); }
  .container--single { max-width: 860px; } /* текст статьи остаётся читаемым */
}
@media (min-width: 2560px) {
  html { font-size: var(--t-c-h2, 22px); }
  :root { --width: 1900px; }
  .site-wrapper { max-width: 2560px; }
  .container--single { max-width: 960px; }
}

/* ===== Планшеты в альбомной ориентации: не сжимаем контент до 800px ===== */
@media (min-width: 901px) and (max-width: 1100px) {
  .container { max-width: 980px; }
}

/* ===== Телефоны: вырез камеры ===== */
@media (max-width: 1100px) {
  @supports (padding: max(0px)) {
    .container {
      padding-left: max(2rem, env(safe-area-inset-left));
      padding-right: max(2rem, env(safe-area-inset-right));
    }
  }
}

/* ===== Сенсорные экраны: без hover-подпрыгиваний карточек ===== */
@media (hover: none) {
  .re-card:hover,
  .adcm-card:hover { transform: none; }
}

/* ===== Для тех, кто отключил анимации в системе ===== */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .01ms !important;
    scroll-behavior: auto !important;
  }
}

/* заголовок раздела: главная, витрины, блоки вовлечения */
.adcx-section-title {
  margin: 0 0 1.2rem;
  font-family: var(--headFont, var(--primeFont));
  font-size: var(--fs-2xl, 1.8rem);
  font-weight: var(--bold, 600);
  line-height: var(--lh-snug, 1.3);
  letter-spacing: -.01em;
}

/* ===== Доступность (WCAG 2.2) ===== */
.adcx-skip {
  position: absolute;
  left: 12px;
  top: -64px;
  z-index: 1000;
  padding: 12px 18px;
  border-radius: var(--adcm-r-md, 12px);
  background: var(--mainColor);
  color: var(--bodyBg, #fff);
  font-size: var(--t-ui, .88rem);
  text-decoration: none;
}
.adcx-skip:focus { top: 12px; color: var(--bodyBg, #fff); }
/* единый видимый фокус с клавиатуры; мышь его не показывает */
body :where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--hoverColor, currentColor);
  outline-offset: 2px;
}
main:focus { outline: none; }

/* ===== Страховка от горизонтальной прокрутки на узких экранах ===== */
body { overflow-x: clip; }                                  /* не создаёт скролл-контейнер, sticky-шапка работает */
:where(.post-content, .adcm-single-body, .single-post__content, .entry-content) { overflow-wrap: break-word; }
:where(.post-content, .adcm-single-body, .entry-content) :where(a, li, p, td, th) { overflow-wrap: anywhere; }  /* длинные ссылки и слова переносятся */
body :is(.post-content, .adcm-single-body, .entry-content) table { display: block; max-width: 100%; overflow-x: auto; }
body :is(.post-content, .adcm-single-body, .entry-content) pre { max-width: 100%; overflow-x: auto; }
:where(.post-content, .adcm-single-body, .entry-content) :where(iframe, video, embed, object) { max-width: 100%; }
/* длинные слова в заголовках и карточках переносятся, а не растягивают страницу */
:where(h1, h2, h3, h4, h5, h6, figcaption, blockquote, .card-title, .adcm-tcard__title, .adcx-nv-lead__title, .adcx-nv-row__title) { overflow-wrap: break-word; hyphens: auto; }

/* ===== Ссылки и нажатия: без подчёркивания при наведении и нажатии ===== */
/* Наведение и нажатие меняют цвет, а не рисуют подчёркивание: страница не «дёргается». */
body a:is(:hover, :active, :focus) { text-decoration: none !important; }
/* В тексте статьи ссылка подчёркнута всегда одинаково (заметна без наведения), при наведении не меняется */
body :is(.post-content, .adcm-single-body, .entry-content, .adcm-evt-body) a:not([class]),
body :is(.post-content, .adcm-single-body, .entry-content, .adcm-evt-body) a:not([class]):is(:hover, :active, :focus) {
  text-decoration: underline !important; text-decoration-thickness: 1px; text-underline-offset: .18em;
  text-decoration-color: color-mix(in srgb, currentColor 45%, transparent);
}
/* без серо-синей вспышки при касании на телефоне */
a, button, label, summary, [role="button"] { -webkit-tap-highlight-color: transparent; }
/* элементы управления и карточки не выделяются случайно при двойном нажатии */
:where(button, .adcx-chip, .load-more-posts, .site-header, .site-nav, .mobile-nav, .adcm-tcard, .adcm-card, .re-card, .kk-card, .adcx-hbtn) { -webkit-user-select: none; user-select: none; }
/* выделение текста мышью: спокойное, из цветов темы */
::selection { background: color-mix(in srgb, var(--hoverColor, #2849a3) 28%, transparent); color: inherit; }

/* ===== Картинки карточек: настоящий <img> с ленивой загрузкой вместо фона (adcm_bg_img) ===== */
.adcm-bgimg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; display: block; }
:is(.adcm-card__img, .adcm-tcard__img, .adcm-hcard__img, .kk-card__img, .adcm-feat-card__img, .adcm-folio-card__img) { position: relative; overflow: hidden; }
.adcm-feat-card__img { display: block; }
.adcm-feat-hero .adcm-bgimg { z-index: -2; }               /* под затемнением ::after (z-index -1) */
.adcm-feat-hero:not(.has-img) .adcm-bgimg { display: none; }

/* ===== Печать любой страницы: логотип сверху, без меню и кнопок, всегда светлая тема ===== */
@media print {
  html[data-theme="dark"] { --bodyBg: #fff; --lightColor: #fff; --greyBg: #f4f4f4; --sectionBg: #f4f4f4; --borderColor: #ddd; --mainColor: #111; --greyColor: #555; --adcmMuted: #555; --hoverColor: #2849a3; color-scheme: light; }
  body { background: #fff !important; color: #111 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; }
  /* шапка остаётся только логотипом, и обязательно светлым */
  .site-header { position: static !important; box-shadow: none !important; border-bottom: 1px solid #ddd; margin-bottom: 8mm; }
  .site-header .dark-mode-logo { display: none !important; }
  .site-header .light-mod-logo { display: inline-block !important; height: 14mm; width: auto; max-height: 14mm !important; }
  .site-nav, .site-header__btns, .mobile-nav-panel, .mobile-menu-btn, .mobile-socials-btn, .back-to-top, .adcx-progress, .adcx-tools, .adcx-tools-row,
  .adcx-subscribe, .adcx-hbtn, .search-panel, .share-btns, .sl-wrapper, .adcx-nextup, .adcx-intro, .adcx-bottombar, .footer-area, .footer__socials,
  .comments, #comments, .comment-respond, .related-posts, .adcm-related { display: none !important; }
  /* адреса ссылок в тексте материала видны на бумаге */
  :is(.post-content, .adcm-single-body, .adcm-evt-body) a[href^="http"]:not([href*="adcitymag.ru"])::after { content: " (" attr(href) ")"; font-size: .8em; color: #555; overflow-wrap: anywhere; }
  img { max-width: 100% !important; break-inside: avoid; }
  h1, h2, h3 { break-after: avoid; }
}