/* ============================================================
   chrome.css — единый последний CSS-слой шапки/меню/футера/«Наверх»
   для всех маршрутов sk-seo.ru. Грузится ПОСЛЕДНИМ на каждой странице,
   поэтому выигрывает каскад без повышения специфичности везде.

   Зоны:
   A — структура/геометрия (не зависит от токенов страниц);
   B — цвет из общих токенов (--accent/--line/--muted/--text/--surface-deep);
   C — брендовые константы литералами/--chrome-* (футер-зелёный, фон шапки).

   Этот слой НЕ трогает: body, main, article, figure, img, .article-body *,
   .tk-*, .pg-*, .aid-*, формы и таблицы. Не переопределяет палитру страниц
   (--bg/--text/--accent/--paper/--green/--ink/...) и не ставит глобальные
   color-scheme/font-family.
   ============================================================ */

/* ─── Токены chrome (аддитивные; палитру страниц не задевают) ─── */
:root{
  --chrome-header-h:70px;
  --chrome-header-bg:rgba(247,248,244,.95);
  --chrome-header-bg-dark:rgba(23,23,19,.95);
  --chrome-footer-bg:#254D3E;        /* светлая тема: футер тёмно-зелёный */
  --chrome-footer-bg-dark:#111410;   /* тёмная тема */
  --chrome-footer-ink:#FFFFFF;
  --chrome-footer-ink-2:rgba(255,255,255,.72);
  --chrome-footer-hover:#E4A38E;
  --chrome-btt-bg:#254D3E;           /* «Наверх» остаётся зелёной и в тёмной теме */
  --chrome-btt-hover:#B94725;        /* терракота */
  --chrome-btt-glow:0 0 24px rgba(185,71,37,.22);
  --chrome-btt-glow-hover:0 0 30px rgba(185,71,37,.4);
  --chrome-container:min(1320px,calc(100% - 2*clamp(20px,4vw,40px)));
  --chrome-h1-internal:clamp(38px,5vw,64px);
  --chrome-h2:clamp(32px,3.9vw,56px);
}

/* Тёмная тема — единый триггер (boot-скрипт ставит data-theme-effective до
   первого кадра); data-color-scheme — зеркало для страховки.
   НЕ :where(): у :where() нулевая специфичность, и переопределение токенов
   проиграло бы объявлению в :root (0,1,0) — футер/шапка остались бы светлыми. */
html[data-theme-effective="dark"],
html[data-color-scheme="dark"]{
  --chrome-header-bg:var(--chrome-header-bg-dark);
  --chrome-footer-bg:var(--chrome-footer-bg-dark);
}

/* ─── Шапка ─── */
.site-header{
  position:sticky;
  top:0;
  z-index:50;
  background:var(--chrome-header-bg)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}
.header-inner{
  min-height:var(--chrome-header-h)!important;
  display:flex;
  align-items:center;
  gap:24px;
}
.wordmark{
  display:flex!important;
  align-items:center!important;
  height:44px!important;
  font-size:20px!important;
  font-weight:800!important;
  letter-spacing:-.055em;
}
.desktop-nav{gap:24px!important}
.desktop-nav a{
  min-height:44px;
  display:flex;
  align-items:center;
  color:var(--muted)!important;
  font-size:13px!important;
  transition:color .16s ease;
}
.desktop-nav a:hover{color:var(--text)!important}
.header-cta{
  min-height:44px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
  padding:0 18px!important;
  border:1px solid var(--line-strong)!important;
  border-radius:12px!important;
  background:transparent!important;
  color:#254D3E!important;
  font-size:13px!important;
  white-space:nowrap;
  transition:background .16s ease,border-color .16s ease,color .16s ease;
}
.header-cta:hover{
  background:#254D3E!important;
  border-color:#254D3E!important;
  color:#fff!important;
}
.menu-toggle{
  width:44px;
  height:44px;
}

/* мобильное меню — читаемое, поверх шапки, прокручивается */
.mobile-nav{
  background:var(--surface-deep)!important;
  border-top:1px solid var(--line)!important;
  border-bottom:1px solid var(--line)!important;
  padding:12px 20px 24px!important;
  max-height:calc(100dvh - var(--chrome-header-h));
  overflow-y:auto;
}
.mobile-nav a{
  display:flex!important;
  align-items:center!important;
  min-height:48px!important;
  padding:10px 0!important;
  color:var(--text)!important;
  border-bottom:1px solid var(--line)!important;
  font-size:18px!important;
  line-height:1.3!important;
}
.mobile-nav a:hover{color:var(--accent-ink)!important}

/* переключатель темы (вставляет theme-toggle.js) — место в 70px */
.sk-theme-toggle{min-height:44px;margin:0 4px}

/* тёмная тема: фон шапки и CTA (accent) */
html[data-theme-effective="dark"] .header-cta,
html[data-color-scheme="dark"] .header-cta{
  color:var(--text)!important;
  border-color:var(--accent)!important;
  background:transparent!important;
}
html[data-theme-effective="dark"] .header-cta:hover,
html[data-color-scheme="dark"] .header-cta:hover{
  background:var(--accent)!important;
  border-color:var(--accent)!important;
  color:#171713!important;
}

/* ─── Page-nav / jump (внутристраничная навигация) ─── */
.page-nav,
.jump{
  position:sticky!important;
  top:var(--chrome-header-h)!important;
  z-index:30;
  background:rgba(247,248,244,.96)!important;
  border-bottom:1px solid var(--line)!important;
  backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);
}
.page-nav__inner,
.jump-inner{
  min-height:54px!important;
  gap:28px!important;
  font-size:13px!important;
}
.page-nav a,
.jump a{font-size:13px!important;color:var(--muted)!important}
.page-nav a:hover,
.jump a:hover{color:var(--text)!important}

/* тёмная тема */
html[data-theme-effective="dark"] .page-nav,
html[data-color-scheme="dark"] .page-nav,
html[data-theme-effective="dark"] .jump,
html[data-color-scheme="dark"] .jump{background:rgba(23,23,19,.96)!important}

/* Статьи/кейсы (anatomy-article.bundle.css) в тёмной теме красят шапку и футер
   в var(--bg) селектором (0,3,1) + !important. Возвращаем контракт chrome:
   шапка — полупрозрачная, футер — тёмно-зелёный #111410. Тот же вес, chrome.css
   грузится позже — выигрывает по порядку. */
html[data-theme-effective="dark"] .article-page .site-header,
html[data-color-scheme="dark"] .article-page .site-header{background:var(--chrome-header-bg)!important}
html[data-theme-effective="dark"] .article-page .site-footer,
html[data-color-scheme="dark"] .article-page .site-footer{
  background:var(--chrome-footer-bg)!important;
  color:var(--chrome-footer-ink)!important;
}

/* blog-v51/tools-v52 держат футер зелёным #254D3E без тёмной ветки
   (селектор 0,2,1 + !important). Возвращаем тёмный #111410. */
html[data-theme-effective="dark"] body.blog-v51 .site-footer,
html[data-color-scheme="dark"] body.blog-v51 .site-footer,
html[data-theme-effective="dark"] body.tools-v52 .site-footer,
html[data-color-scheme="dark"] body.tools-v52 .site-footer{background:var(--chrome-footer-bg)!important}

/* ─── Футер (тёмно-зелёный у всех) ─── */
.site-footer{
  background:var(--chrome-footer-bg)!important;
  color:var(--chrome-footer-ink)!important;
  padding:56px 0 28px!important;
  border-top:0!important;
  font-size:13px;
}
.site-footer .wordmark,
.site-footer h2,
.site-footer .footer-heading,
.site-footer a{color:var(--chrome-footer-ink)!important}
/* consistency.css красит .wordmark в --ink с !important на body.home-page и
   трёх соседних страницах. В подвале это тёмный знак на тёмно-зелёном фоне —
   1.3:1. Специфичность ниже (0,2,1), поэтому возвращаем светлый знак явно. */
body.home-page .site-footer .wordmark,
body.services-page .site-footer .wordmark,
body.cases-v49 .site-footer .wordmark,
body.about-v50 .site-footer .wordmark,
body.blog-v51 .site-footer .wordmark,
body.tools-v52 .site-footer .wordmark,
body.article-page .site-footer .wordmark{color:var(--chrome-footer-ink)!important}
.site-footer p{color:var(--chrome-footer-ink-2)!important}
.site-footer a:hover{color:var(--chrome-footer-hover)!important}
.footer-main{
  display:grid;
  gap:38px;
  width:var(--chrome-container);
  margin-inline:auto;
}
.footer-column h2,
.footer-heading{
  font-size:14px!important;
  margin:0 0 10px;
  color:var(--chrome-footer-ink)!important;
  font-weight:600;
}
.footer-column a{
  min-height:44px;
  display:flex;
  align-items:center;
}
.footer-bottom{
  width:var(--chrome-container);
  margin-inline:auto;
  margin-top:42px;
  padding-top:22px;
  border-top:1px solid rgba(255,255,255,.2)!important;
  color:var(--chrome-footer-ink-2)!important;
  font-size:13px;
}
@media(min-width:60rem){
  .footer-main{grid-template-columns:minmax(240px,1.6fr) .9fr 1.25fr 1.1fr 1.15fr;gap:36px}
}

/* ─── «Наверх» — одна кнопка 48×48 (44×44 ≤760), зелёная, белая стрелка ─── */
.back-to-top{
  position:fixed!important;
  z-index:100!important;
  right:max(16px,env(safe-area-inset-right))!important;
  bottom:max(16px,env(safe-area-inset-bottom))!important;
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  gap:0!important;
  width:48px!important;
  height:48px!important;
  min-width:48px!important;
  min-height:48px!important;
  padding:0!important;
  border:1px solid var(--line-strong)!important;
  border-radius:12px!important;
  background:var(--chrome-btt-bg)!important;
  color:#fff!important;
  font-size:0!important;
  line-height:1!important;
  text-decoration:none!important;
  box-shadow:none!important;
  opacity:0;
  visibility:hidden;
  transform:translateY(10px);
  transition:opacity .18s ease,visibility .18s ease,transform .18s ease,background .16s ease,border-color .16s ease,box-shadow .16s ease;
  backdrop-filter:blur(8px);
  cursor:pointer;
}
.back-to-top[hidden]{display:none!important}
.back-to-top.is-visible{
  opacity:1;
  visibility:visible;
  transform:none;
  box-shadow:var(--chrome-btt-glow)!important;
}
.back-to-top:hover{
  background:var(--chrome-btt-hover)!important;
  border-color:var(--chrome-btt-hover)!important;
  box-shadow:var(--chrome-btt-glow-hover)!important;
}
.back-to-top span:first-child{
  position:absolute!important;
  width:1px!important;
  height:1px!important;
  padding:0!important;
  margin:-1px!important;
  overflow:hidden!important;
  clip:rect(0 0 0 0)!important;
  white-space:nowrap!important;
  border:0!important;
}
.back-to-top span:last-child{
  display:flex!important;
  align-items:center!important;
  justify-content:center!important;
  color:#fff!important;
  font-size:20px!important;
  line-height:1!important;
}
.back-to-top svg{fill:currentColor}

@media(max-width:760px){
  .back-to-top{
    width:44px!important;
    height:44px!important;
    min-width:44px!important;
    min-height:44px!important;
    right:14px!important;
    bottom:14px!important;
  }
}

/* ─── Состояния и доступность ─── */
@media(hover:hover){
  .desktop-nav a:hover{color:var(--text)!important}
  .header-cta:hover{background:#254D3E!important;border-color:#254D3E!important;color:#fff!important}
  html[data-theme-effective="dark"] .header-cta:hover,
  html[data-color-scheme="dark"] .header-cta:hover{background:var(--accent)!important;border-color:var(--accent)!important;color:#171713!important}
  .footer-column a:hover{color:var(--chrome-footer-hover)!important}
  .back-to-top:hover{background:var(--chrome-btt-hover)!important;border-color:var(--chrome-btt-hover)!important}
}
:is(.site-header a,.header-cta,.menu-toggle,.back-to-top,.footer-column a):focus-visible{
  outline:2px solid var(--accent);
  outline-offset:4px;
}

/* якоря не прячутся под липкую шапку */
main [id]{scroll-margin-top:calc(var(--chrome-header-h) + 16px)}
body:has(.page-nav) main [id],
body:has(.jump) main [id]{scroll-margin-top:calc(var(--chrome-header-h) + 54px + 16px)}

/* ─── Печать и движение ─── */
@media print{
  .site-header,.mobile-nav,.menu-toggle,.page-nav,.jump,.breadcrumbs,.crumbs,
  .site-footer,.back-to-top,.scroll-progress{display:none!important}
}
@media (prefers-reduced-motion:reduce){
  .site-header,.back-to-top,.header-cta,.desktop-nav a,.footer-column a{transition:none!important}
}

/* ════════════════════════════════════════════════════════════════
   hero normalization (волна 3) — единая типографическая шкала и ритм
   Флагманские H1 (index .hero, about .about-hero, cases .case-hero)
   НЕ уменьшаем: у about/cases нормализуем только eyebrow/лид/ритм.
   body[data-sk-theme="anatomy"] префикс бьёт site.css h1{!important}
   (0,1,2) специфичностью (0,2,x) + !important на font-size/line-height.
   Статьи (body без data-sk-theme) — отдельно через .article-title.
   ============================================================ */

/* ── H1 внутренних страниц ── */
body[data-sk-theme="anatomy"] .svc-hero h1,
body[data-sk-theme="anatomy"] .services-hero h1,
body[data-sk-theme="anatomy"] .blog-hero h1,
body[data-sk-theme="anatomy"] .tools-hero h1,
body[data-sk-theme="anatomy"] .contact-hero h1,
body[data-sk-theme="anatomy"] .tool-hero h1,
body[data-sk-theme="anatomy"] .error-page h1,
body[data-sk-theme="anatomy"].privacy-page h1{
  font-size:var(--chrome-h1-internal)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  font-weight:550!important;
  max-width:16ch;
  text-wrap:balance;
}

/* статьи и кейс-статья (body без data-sk-theme): .article-title.
   max-width не трогаем — у статей он свой (20ch в article.css). */
.article-title{
  font-size:var(--chrome-h1-internal)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  font-weight:550!important;
  text-wrap:balance;
}

@media(max-width:760px){
  body[data-sk-theme="anatomy"] .svc-hero h1,
  body[data-sk-theme="anatomy"] .services-hero h1,
  body[data-sk-theme="anatomy"] .blog-hero h1,
  body[data-sk-theme="anatomy"] .tools-hero h1,
  body[data-sk-theme="anatomy"] .contact-hero h1,
  body[data-sk-theme="anatomy"] .tool-hero h1,
  body[data-sk-theme="anatomy"] .error-page h1,
  body[data-sk-theme="anatomy"].privacy-page h1{
    font-size:clamp(30px,8.5vw,38px)!important;
  }
  .article-title{font-size:clamp(30px,8.5vw,38px)!important}
}

/* ── H2 секции — единая шкала (зеркало consistency.css `body.* main h2`) ── */
body[data-sk-theme="anatomy"] main h2{
  font-size:var(--chrome-h2)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  font-weight:500!important;
}

/* ── Eyebrow/надзаголовок — единый вид (зеркало consistency.css) ── */
body[data-sk-theme="anatomy"] main .eyebrow{
  font-size:12px!important;
  font-weight:600!important;
  letter-spacing:.06em!important;
  color:var(--accent-ink)!important;
}

/* Надзаголовок на тёмной плашке: --accent-ink (#A33F29) на зелёном даёт
   1.5–2:1. Возвращаем светлую терракоту, она проходит 4.7:1 даже на самом
   светлом из этих фонов (#2F5C49). Только контейнеры с заведомо тёмным фоном. */
body[data-sk-theme="anatomy"] :is(.featured-research,.chexter-scene,.contact-manifesto,
  .case-hero__facts,.feature--green,.testimonial-list__feature,.blog-author) :is(.eyebrow,.material-type){
  color:#F5C0AE!important;
}

/* Skip-link: до фокуса он за экраном, но пара «текст/фон» должна быть валидной
   и в светлой, и в тёмной теме. */
.skip-link,.skip{
  background:var(--ink,#20382F)!important;
  color:var(--bg,#F7F8F4)!important;
}

/* ── Лид hero ── */
body[data-sk-theme="anatomy"] :is(.svc-hero__lead,.services-hero__lead,.blog-hero__lead,
  .tools-hero__lead,.contact-hero__lead,.tool-hero__lead,.case-hero__lead,.about-hero__lead){
  font-size:clamp(17px,1.35vw,19px);
  line-height:1.6;
  color:var(--muted);
  max-width:62ch;
}

/* ── Hero-отступы (внутренние + about/cases «ритм»; index .hero и статьи не трогаем) ── */
body[data-sk-theme="anatomy"] :is(.svc-hero,.services-hero,.blog-hero,.tools-hero,
  .contact-hero,.tool-hero,.about-hero,.case-hero){
  padding-block:clamp(44px,6vw,80px) clamp(32px,4vw,48px);
}

/* ── Третий проход: остатки различий, найденные сквозным аудитом ── */

/* Шапка статей: anatomy-article.bundle.css ставит бежевый фон с !important
   и перебивает .site-header по специфичности — возвращаем единый фон. */
body.article-page .site-header,
.article-page .site-header{
  background:var(--chrome-header-bg)!important;
  border-bottom:1px solid var(--line)!important;
  box-shadow:none!important;
  backdrop-filter:blur(16px);
  -webkit-backdrop-filter:blur(16px);
}

/* Хлебные крошки — одна типографика и высота на всех страницах. */
.crumbs,
.breadcrumbs{
  font-size:12px!important;
  line-height:1.4!important;
  color:var(--muted)!important;
  min-height:44px;
}
.crumbs a,
.breadcrumbs a{
  font-size:12px!important;
  color:var(--muted)!important;
}
.crumbs a:hover,
.breadcrumbs a:hover{color:var(--text)!important}

/* CTA в шапке главной: home-v42.css опускает радиус до 10px на телефоне. */
body.home-page .header-cta,
body.home-page .header-cta:hover{border-radius:12px!important}

/* ── Остатки из финальной верификации (VERIFY.md) ── */

/* Крошки: одинаковая высота 44–45px (у services был padding-top:14px → 59px). */
.crumbs{padding:0!important}

/* CTA в шапке: единый радиус 12px на мобильном (about/services/cases опускали до 10px). */
@media(max-width:760px){
  body[data-sk-theme="anatomy"] .header-cta{border-radius:12px!important}
}

/* Проверка сайта на ИИ-контент: локальный clamp 66px перебивал шкалу. */
body[data-sk-theme="anatomy"].aic-page .aic-hero__intro h1{
  font-size:var(--chrome-h1-internal)!important;
  line-height:1.06!important;
  letter-spacing:-.045em!important;
  font-weight:550!important;
}
@media(max-width:760px){
  body[data-sk-theme="anatomy"].aic-page .aic-hero__intro h1{font-size:clamp(30px,8.5vw,38px)!important}
}