/* ============================================================
   components.css — общие ATOMS дизайн-системы Montenegro Live.
   Наряд #21 (фундамент): дедуп повторяющихся CSS-atoms из
   index/faq/rates/guides/laws/styleguide в ОДИН источник.
   Подключать ПОСЛЕ tokens.css, ДО инлайн-<style> страницы
   (инлайн может переопределять контекстно, напр. header .btn-primary).
   Извлечено BYTE-IDENTICAL из боевого index.html.
   ============================================================ */

/* --- dark: фон filled-кнопки (консолидация batch1 --btn-fill temp-дубля).
   link-accent --accent (#5fb1f5) как fill даёт «бельмо» (white ~1.6:1);
   глубокий синий #1a6ea3 → white 5.52:1 (WCAG AA). --- */
@media (prefers-color-scheme: dark) { :root { --btn-fill: #1a6ea3; } }

/* --- buttons — Apple/Linear-pattern: hover слегка светлеет + тень-«подъём».
   Никаких hue-shift — состояние одной кнопки, а не «другая кнопка». --- */
.btn { display: inline-flex; align-items: center; gap: 8px;
  padding: 12px 18px; font-weight: 500; font-size: 14px;
  text-decoration: none; white-space: nowrap; border: none;
  cursor: pointer; line-height: 1; border-radius: 8px;
  min-height: 44px; justify-content: center;  /* touch-target ≥44px (Apple HIG / WCAG 2.5.5), наряд #21 batch1 */
  transition: background .2s ease, border-color .2s ease,
              color .2s ease, box-shadow .2s ease, transform .12s ease; }
.btn-primary { background: var(--btn-fill, var(--accent)); color: #fff;
  border-color: var(--accent);
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 15%, transparent); }
.btn-primary:hover { background: color-mix(in srgb, var(--accent) 85%, black);
  border-color: color-mix(in srgb, var(--accent) 85%, black); color: #fff;
  box-shadow: 0 1px 2px color-mix(in srgb, var(--accent) 18%, transparent), 0 6px 16px color-mix(in srgb, var(--accent) 20%, transparent);
  text-decoration: none; }
.btn-primary:active { transform: translateY(1px);
  box-shadow: 0 1px 2px rgba(0,0,0,.05); }
.btn-ghost { background: transparent; color: var(--ink);
  border: 1px solid var(--line-strong); }
.btn-ghost:hover { background: var(--accent-soft);
  border-color: var(--accent); color: var(--accent);
  text-decoration: none; }
.btn-ghost:active { transform: translateY(1px); }
.btn .arrow { transition: transform .2s; }
.btn:hover .arrow { transform: translateX(2px); }

/* --- skip-link — WCAG 2.4.1 bypass blocks (sr-only, видимый на :focus) --- */
.skip-link { position: absolute; top: 8px; left: 8px;
  background: var(--accent); color: #fff;
  padding: 10px 16px; font-weight: 500; font-size: 14px;
  text-decoration: none; z-index: 100; border-radius: 6px;
  transform: translateY(-200%);
  transition: transform .2s ease; }
.skip-link:focus { transform: translateY(0); outline: none; }

/* --- containers --- */
.container { max-width: 1120px; margin: 0 auto; padding: 0 28px; }
.container-tight { max-width: 880px; margin: 0 auto; padding: 0 28px; }

/* --- mono caption --- */
.mono { font-family: var(--mono); font-size: 12px;
  letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }

/* --- header — Apple-стиль: прозрачная вверху, opaque (стекло+blur) при скролле --- */
header { background: transparent;
  border-bottom: 1px solid transparent;
  position: sticky; top: 0; z-index: 50;
  min-height: 52px;
  transition: background .32s cubic-bezier(.4,0,.6,1),
              border-color .32s cubic-bezier(.4,0,.6,1),
              backdrop-filter .32s cubic-bezier(.4,0,.6,1); }
header.is-scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  border-bottom-color: var(--line); }
@media (prefers-color-scheme: dark) {
  header.is-scrolled { background: color-mix(in srgb, var(--bg) 80%, transparent); }
}
header .container { display: flex; align-items: center; justify-content: space-between;
  height: 52px; gap: 24px; }

/* --- logo + логотип-марка (кликабельный «штамп», обводка→accent на hover) --- */
.logo { font-weight: 600; font-size: 15px; color: var(--ink); text-decoration: none;
  display: flex; align-items: center; gap: 10px; letter-spacing: -0.01em; }
.logo:hover { text-decoration: none; }
.logo-mark { width: 30px; height: 30px; display: block; flex: none;
  padding: 3px; border-radius: 50%;
  border: 1px solid var(--line-strong); background: transparent;
  transition: border-color .24s cubic-bezier(.4,0,.6,1),
              background .24s cubic-bezier(.4,0,.6,1); }
.logo:hover .logo-mark { border-color: var(--accent);
  background: var(--accent-soft); }
.logo-mark .outer { fill: none; stroke: var(--ink); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.logo-mark .inner { fill: none; stroke: var(--accent); stroke-width: 1.7;
  stroke-linecap: round; stroke-linejoin: round; }
.logo .live { color: var(--accent); }

/* --- nav.menu + .lang-switch — единый стиль ссылок-навигации (Apple-подчёркивание на active) --- */
nav.menu { display: flex; gap: 28px; }
nav.menu a, .lang-switch a {
  color: var(--muted); font-size: 15px; font-weight: 500;
  text-decoration: none; position: relative;
  transition: color .32s cubic-bezier(.4,0,.6,1); }
nav.menu a:hover, .lang-switch a:hover { color: var(--ink); text-decoration: none; }
nav.menu a.active, .lang-switch a.active { color: var(--ink); font-weight: 500; }
nav.menu a.active::after, .lang-switch a.active::after {
  content: ''; position: absolute;
  left: 0; right: 0; bottom: -8px; height: 1px; background: var(--ink); }