/* ============================================================================
   NOKK — общая шапка внутренних страниц.
   ============================================================================

   Одна разметка и одни стили для всего: лендингов, /web и /apps. Меняете здесь —
   меняется везде. Разметку собирает /realty/shared/landing.js (функция
   mountHeader), на /web и /apps она записана в самой странице теми же классами.

   Состав слева направо:  [← назад]  [логотип]  … [что нужно странице] [языки]

   Стрелки «назад» нет только на главной — там некуда возвращаться.

   Тему задают переменные ниже. По умолчанию светлая (как /web и /apps);
   тёмные лендинги переопределяют их в landing.css.
   ========================================================================== */
:root{
  --nkh-h: 64px;                                  /* высота шапки */
  --nkh-bg: rgba(251,248,243,.86);                /* фон полосы */
  --nkh-line: #E9E2D6;                            /* линия под полосой */
  --nkh-ink: #16141F;                             /* основной текст */
  --nkh-ink-2: #45414F;                           /* второстепенный */
  --nkh-muted: #6B6677;                           /* подписи */
  --nkh-chip: #FFFFFF;                            /* фон таблеток языков */
  --nkh-mark-bg: #16141F;                         /* плашка логотипа */
  --nkh-mark-ink: #B9EF4B;                        /* буква на плашке */
  --nkh-lime: #B9EF4B;                            /* акцент и пульс стрелки */
  --nkh-hover: #F4EEE4;                           /* подложка под ссылкой */
}

.nkh{
  position:sticky; top:0; z-index:1200; height:var(--nkh-h);
  background:var(--nkh-bg);
  backdrop-filter:saturate(1.4) blur(14px); -webkit-backdrop-filter:saturate(1.4) blur(14px);
  border-bottom:1px solid transparent; transition:border-color .2s;
}
.nkh--scrolled{ border-bottom-color:var(--nkh-line); }
.nkh__in{
  max-width:1200px; margin:0 auto; height:100%; padding:0 14px;
  display:flex; align-items:center; gap:10px;
}

/* ---------- стрелка «назад» ---------- */
.nkh__back{
  flex:0 0 auto; width:34px; height:34px; border-radius:10px;
  display:inline-flex; align-items:center; justify-content:center;
  color:var(--nkh-ink-2); text-decoration:none; background:transparent;
  border:0; cursor:pointer; padding:0;
  transition:background .2s ease, color .2s ease;
}
.nkh__back:hover{ background:var(--nkh-hover); color:var(--nkh-ink); }
.nkh__arrow{ width:19px; height:19px; display:block; overflow:visible; }
/* Жирный сплошной шеврон: толщину даёт обводка, butt и miter дают
   плоские срезы и острый угол. */
.nkh__arrow path{
  fill:none; stroke:currentColor; stroke-width:5.8;
  stroke-linecap:butt; stroke-linejoin:miter;
}

/* Пульс: спокойная волна по лайму, запускается редко и вразнобой —
   класс вешает скрипт, поэтому интервал живой, а не метрономный. */
.nkh__back.is-pulse .nkh__arrow path{ animation:nkh-pulse 1.7s ease-in-out; }
@keyframes nkh-pulse{
  0%,100%{ stroke:currentColor; }
  45%    { stroke:var(--nkh-lime); }
}
@media (prefers-reduced-motion:reduce){
  .nkh__back.is-pulse .nkh__arrow path{ animation:none; }
}

/* ---------- логотип ---------- */
.nkh__logo{
  display:flex; align-items:center; gap:9px; text-decoration:none;
  color:var(--nkh-ink);
  font-family:'Unbounded','Onest',var(--nk-sans,system-ui),sans-serif;
  font-weight:700; font-size:18px; letter-spacing:-.01em; white-space:nowrap;
}
.nkh__mark{
  width:32px; height:32px; flex:0 0 32px; border-radius:10px;
  background:var(--nkh-mark-bg); color:var(--nkh-mark-ink);
  display:grid; place-items:center; font-size:14px;
}
.nkh__logo small{
  display:block; margin-top:-3px;
  font-family:'Onest',var(--nk-sans,system-ui),sans-serif;
  font-weight:600; font-size:10px; letter-spacing:.09em; text-transform:uppercase;
  color:var(--nkh-muted);
}

.nkh__sp{ margin-left:auto; }

/* ---------- то, что страница добавляет справа ---------- */
.nkh__extra{
  display:inline-flex; align-items:center; gap:7px;
  padding:8px 13px; border-radius:999px; text-decoration:none;
  font-family:'Onest',var(--nk-sans,system-ui),sans-serif;
  font-size:13px; font-weight:600; color:var(--nkh-ink-2);
  background:var(--nkh-hover); white-space:nowrap;
}
.nkh__extra:hover{ color:var(--nkh-ink); }
.nkh__extra svg{ width:15px; height:15px; }

/* ---------- языки ---------- */
.nkh .nk-lang{
  display:flex; gap:2px; padding:3px; border-radius:999px;
  background:var(--nkh-chip); border:1px solid var(--nkh-line);
}
.nkh .nk-lang button{
  border:0; background:transparent; cursor:pointer;
  font-family:'Onest',var(--nk-sans,system-ui),sans-serif;
  font-size:12px; font-weight:700; letter-spacing:.04em;
  padding:6px 9px; border-radius:999px; color:var(--nkh-muted);
}
.nkh .nk-lang button.active,
html[data-lang="en"] .nkh .nk-lang [data-nk-lang="en"],
html[data-lang="es"] .nkh .nk-lang [data-nk-lang="es"],
html[data-lang="ru"] .nkh .nk-lang [data-nk-lang="ru"]{
  background:var(--nkh-mark-bg); color:#fff;
}

@media (max-width:560px){
  .nkh__in{ gap:7px; padding:0 10px; }
  .nkh__logo{ font-size:16px; }
  .nkh__logo small{ display:none; }
  .nkh__extra span{ display:none; }      /* остаётся одна иконка */
  .nkh__extra{ padding:8px 10px; }
  .nkh .nk-lang button{ padding:6px 7px; font-size:11px; }
}