/* ============================================================
   Единая шапка/меню/футер Last Cent — САМОДОСТАТОЧНЫЕ стили
   (не зависят от article.css; работают и на лендинге с инлайн-CSS).
   Рендерит site-chrome.js в #site-header / #site-footer / #site-strip.
   ============================================================ */
/* Непрозрачный фон без backdrop-filter — иначе sticky-шапка перерисовывается и «моргает». */
header.site { position: sticky; top: 0; z-index: 50; background: #ffffff; border-bottom: 1px solid rgba(203,195,215,0.5); }
header.site .wrap.nav { display: flex; align-items: center; gap: 18px; max-width: var(--max-w, 1200px); margin: 0 auto; padding: 11px 20px; box-sizing: border-box; }
header.site .brand { display: flex; align-items: center; gap: 10px; text-decoration: none; flex: none; }
header.site .brand-icon { width: 30px; height: 30px; border-radius: 8px; display: block; }
header.site .brand-text { font-family: var(--font-display, -apple-system, "Segoe UI", sans-serif); font-weight: 800; font-size: 19px; color: var(--ink, #1e1a24); letter-spacing: -.01em; line-height: 1; }

.site-menu { display: flex; align-items: center; gap: 24px; flex: 1; margin-left: 10px; }
.site-menu a { font-size: 14.5px; color: var(--ink-soft, #494454); text-decoration: none; white-space: nowrap; transition: color .12s; }
.site-menu a:hover { color: var(--primary, #612fcc); }
.site-menu a.active { color: var(--ink, #1e1a24); font-weight: 700; }

/* Кнопка «Скачать» — самодостаточная (чтобы работать без article.css). Скоуп — только chrome. */
header.site .btn, .site-strip .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--primary, #612fcc); color: #fff; font-weight: 700; font-size: 14px; line-height: 1; padding: 10px 16px; border-radius: 999px; text-decoration: none; white-space: nowrap; flex: none; border: none; cursor: pointer; font-family: inherit; animation: none !important; box-shadow: none !important; }
header.site .btn:hover, .site-strip .btn:hover { background: var(--primary-hover, #5319be); }
header.site .btn svg, .site-strip .btn svg { width: 15px; height: 15px; fill: currentColor; }

@media (max-width: 760px) { .site-menu { display: none; } }

/* Футер — 1-в-1 как исходный article.css .foot (max-width, отступы, гэпы) */
footer.site-footer { border-top: 1px solid rgba(203,195,215,0.35); background: var(--surface-1, #fff); margin-top: 44px; }
footer.site-footer .foot { max-width: var(--max-w, 1200px); margin: 0 auto; padding: 32px 20px; box-sizing: border-box; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 28px; font-size: 14px; color: var(--ink-faint, #7a7486); }
footer.site-footer .foot .fb { display: inline-flex; align-items: center; gap: 9px; font-family: var(--font-display, -apple-system, sans-serif); font-weight: 800; font-size: 18px; color: var(--ink, #1e1a24); }
footer.site-footer .foot .fb img { width: 26px; height: 26px; border-radius: 6px; }
footer.site-footer .foot a { color: var(--ink-soft, #494454); text-decoration: none; }
footer.site-footer .foot a:hover { color: var(--primary, #612fcc); }
footer.site-footer .foot .fcopy { flex-basis: 100%; color: var(--ink-faint, #7a7486); font-size: 12.5px; margin-top: 4px; }

/* Кросс-цель плашка */
.site-strip { max-width: var(--max-w, 1200px); margin: 22px auto 0; box-sizing: border-box; background: var(--surface-2, #f3eefb); border: 1px solid rgba(203,195,215,0.5); border-radius: 16px; padding: 15px 20px; display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.site-strip .st-txt { font-size: 15px; color: var(--ink, #1e1a24); flex: 1; min-width: 220px; }
.site-strip .st-txt b { font-family: var(--font-display, -apple-system, sans-serif); }

/* language switcher (used by every localised page) */
.lang-switch { display: inline-flex; align-items: center; gap: 1px; flex: none; background: var(--surface-2, #f3eefb); border-radius: 999px; padding: 3px; margin-right: 2px; }
.lang-switch .lang-globe { width: 14px; height: 14px; margin: 0 3px 0 7px; fill: none; stroke: var(--ink-faint, #7a7486); stroke-width: 1.6; flex: none; }
.lang-switch span, .lang-switch a { font-size: 12.5px; font-weight: 700; line-height: 1; padding: 5px 9px; border-radius: 999px; text-decoration: none; color: var(--ink-faint, #7a7486); transition: color .12s, background .12s; }
.lang-switch .lang-cur { background: #fff; color: var(--ink, #1e1a24); box-shadow: 0 1px 2px rgba(30,26,36,.10); }
.lang-switch a:hover { color: var(--primary, #612fcc); }

/* the header now carries one extra control, so it needs a tighter phone layout */
@media (max-width: 760px) {
  header.site .wrap.nav { gap: 10px; padding-left: 14px; padding-right: 14px; }
  header.site .brand-text { font-size: 17px; }
  .lang-switch { margin-right: 0; }
  .lang-switch .lang-globe { display: none; }
  .lang-switch span, .lang-switch a { padding: 5px 8px; font-size: 12px; }
  header.site .btn { padding: 9px 12px; font-size: 13px; }
}
@media (max-width: 400px) { header.site .brand-text { display: none; } }