/* css/seo.css — оформление поисковых страниц (их 2203).

   Зачем этот файл. Страницы из seo_gen жили своим набором цветов,
   вшитым прямо в каждую страницу: холодный графит, системный шрифт,
   без верхней полосы и без переключателя темы. Рядом страницы-расчёты
   давно перешли на оформление приложения (Inter, тёплая палитра LUMI,
   светлая и тёмная тема). Получались два разных сайта под одним
   адресом — владелец это и заметил 18.09.2026.

   Как сделано. Ни одного своего цвета: всё через переменные, которые
   объявляют css/core/tokens.css и calc/calc-lumi.css. Меняется палитра
   приложения — меняются и поисковые страницы. Разъехаться не могут.

   Порядок подключения обязателен:
     tokens.css → calc.css → seo.css → calc-lumi.css
   LUMI идёт последним и перебивает то, что описано и здесь, и у него
   (.card, .cta, .crumbs, header h1) — так и задумано: форма кнопок и
   карточек объявлена ровно в одном месте, в LUMI.

   Здесь остаётся только то, чего в общих стилях нет: разметка страницы
   (.wrap, header, section, footer) и блоки, которые бывают лишь на
   поисковых страницах — метки, врез, обещание, сетка ссылок, список
   качеств, раскрывающиеся вопросы. */

/* ── Основа страницы ─────────────────────────────────────────────── */
body {
  font-family: var(--font, "Inter", -apple-system, BlinkMacSystemFont,
               "Segoe UI", sans-serif);
  background: var(--bg, #17181B);
  color: var(--text, #F2F1ED);
  margin: 0;
  line-height: 1.6;
}
* { box-sizing: border-box; }
a { color: var(--accent, #9B7DD6); text-decoration: none; }
a:hover { color: var(--accent-hover, var(--accent, #9B7DD6)); }
img, svg, video { max-width: 100%; height: auto; }

.wrap { max-width: 880px; margin: 0 auto; padding: 16px 20px 32px; }

.crumbs { font-size: 13px; color: var(--muted); margin-bottom: 10px; }
.crumbs a { color: var(--muted); }

header { margin: 0 0 4px; padding: 8px 0 14px; }
header h1 { font-size: clamp(24px, 6.2vw, 32px); line-height: 1.2; margin: 0 0 8px; }
header p { font-size: 15px; line-height: 1.5; color: var(--muted); margin: 0 0 16px; }

section { margin: 36px 0; }
h2 { font-size: clamp(20px, 4.4vw, 24px); line-height: 1.25; margin: 0 0 14px; }
h3 { font-size: 17px; margin: 0 0 8px; }
p { margin: 0 0 12px; }

footer {
  margin-top: 48px; padding: 24px 0;
  border-top: 1px solid var(--border);
  text-align: center; color: var(--muted); font-size: 13px;
}

/* Верхняя полоса «липкая»: под ней нужен воздух, иначе крошки
   подъезжают под кнопки. */
.calc-nav + .wrap { padding-top: 14px; }

/* ── Мелочи, которые раньше повторялись на каждой странице ──────────
   h3, списки, врез статьи и сноска были вшиты в 2127 страниц по
   отдельности. Теперь объявлены здесь один раз. */
h3 { font-size: 17px; margin: 20px 0 8px; }
ul, ol { padding-left: 20px; margin: 0 0 12px; }
li { margin: 6px 0; }

/* Врез в начале статьи: крупнее основного текста, тише заголовка. */
.lead { font-size: 18px; line-height: 1.5; color: var(--muted); margin: 8px 0 24px; }

/* Сноска под расчётом или таблицей. */
.note { font-size: 13px; color: var(--muted); margin-top: 10px; }

/* Кнопка: форму задаёт LUMI (таблетка 999, высота 54). Здесь только
   выравнивание — при переносе на две строки они уезжали влево. */
.cta { text-align: center; }

/* ── Цифра или знак рядом с заголовком ───────────────────────────── */
.glyph { display: inline-block; vertical-align: middle; color: var(--accent); }
header .glyph { margin-right: 10px; }
.related .glyph { margin-right: 6px; vertical-align: -3px; }

/* Стихии: единственные цвета, которые несут смысл, а не оформление.
   Взяты из палитры приложения, чтобы не расходились с расчётами. */
.el-fire  { color: var(--lumi-danger, #FF6B5E); }
.el-earth { color: var(--success, #57CC7A); }
.el-air   { color: #F2C44E; }
.el-water { color: #5BA8FF; }

/* ── Метки под заголовком ────────────────────────────────────────── */
.meta { display: flex; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.tag {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 999px; padding: 6px 14px;
  font-size: 13px; color: var(--muted);
}

/* ── Карточка текста ─────────────────────────────────────────────────
   Форму (скругление, тень, рамку) задаёт LUMI — здесь только отступы
   и цвет текста внутри. */
.card { margin: 14px 0; }
.card h3 { color: var(--text); }
.card p { margin: 0; color: var(--text); }
.card p + p { margin-top: 10px; }

/* ── Врез с главным и обещание расчёта ───────────────────────────────
   Раньше здесь стояла заливка в два цвета. В палитре приложения
   переходов нет вовсе (tokens.css: NO gradients) — ставим ровный фон
   и акцентную рамку, как у выделенных блоков приложения. */
.hero, .promo {
  background: var(--accent-soft, var(--surface));
  border: 1px solid var(--accent);
  border-radius: var(--radius-lg, 20px);
  padding: 22px;
  margin: 18px 0;
  text-align: center;
}
.hero .big { font-size: clamp(20px, 5vw, 26px); font-weight: 700; margin: 0 0 6px; color: var(--text); }
.hero .sub { margin: 0; color: var(--muted); font-size: 15px; }
.promo p { margin: 0 0 14px; color: var(--text); font-size: 15px; }

/* ── Сетка ссылок на соседние страницы ───────────────────────────── */
.related {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 10px; margin: 14px 0;
}
.related a {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius, 14px);
  padding: 12px; color: var(--text); font-size: 14px; text-align: center;
}
.related a:hover { border-color: var(--accent); color: var(--text); }

/* ── Список качеств ──────────────────────────────────────────────── */
.bullets { list-style: none; margin: 14px 0; padding: 0; display: grid; gap: 8px; }
.bullets li {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius, 14px);
  padding: 12px 15px 12px 38px; position: relative;
  color: var(--text); font-size: 15px;
}
.bullets li:before {
  content: ""; position: absolute; left: 16px; top: 20px;
  width: 8px; height: 8px; border-radius: 50%; background: var(--accent);
}

/* ── Сетка дней и подобных перечней с подписью ───────────────────── */
.days {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(215px, 1fr));
  gap: 10px; margin: 18px 0;
}
.days a {
  display: block; background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius, 14px);
  padding: 13px 15px; color: var(--text);
}
.days a:hover { border-color: var(--accent); }
.days b { display: block; font-size: 15px; font-weight: 600; }
.days span { display: block; margin-top: 3px; font-size: 13.5px; color: var(--muted); }

/* ── Частые вопросы ──────────────────────────────────────────────── */
details {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm, 8px); margin: 8px 0; padding: 12px 14px;
}
summary { cursor: pointer; font-weight: 600; color: var(--text); }
details p { margin: 8px 0 0; color: var(--muted); }

/* ── Поделиться ──────────────────────────────────────────────────────
   Раньше цвета этих кнопок стояли в атрибуте style прямо в разметке —
   а он сильнее любого файла стилей, и в светлой теме кнопки оставались
   тёмными. Теперь это обычный класс из палитры. */
.share { text-align: center; }
.share__label { margin: 0 0 10px; color: var(--muted); font-size: 14px; }
.share__row { display: flex; gap: 10px; justify-content: center; flex-wrap: wrap; }
.share__btn {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 20px;
  border-radius: 999px;
  background: var(--surface); border: 1px solid var(--border);
  color: var(--text); font-size: 14px; font-weight: 600;
}
.share__btn:hover { border-color: var(--accent); color: var(--text); }

/* ── Широкое содержимое не должно тащить страницу в бок ──────────── */
table { width: 100%; border-collapse: collapse; }
.scroll-x, pre, table { overflow-x: auto; display: block; max-width: 100%; }