/* ============================================================
   Шапка сайта для статических страниц (9 лендингов).
   ------------------------------------------------------------
   Значения повторяют шапку приложения один в один: styles.css
   (.topbar, .topbar-in, .logo, .logo-mark, .logo-word, .topnav,
   .topnav-link) плюс её медиазапросы. Смысл файла — чтобы при
   переходе «главная → Компаниям → направление» шапка НЕ сдвигалась:
   логотип стоит на одном и том же месте, ширина контейнера 1180,
   отступы 14/28, липкость и размытие те же.

   Почему копия, а не общий файл: лендинги не грузят styles.css
   (2687 строк стилей приложения), а вытащить оттуда блок — значит
   тронуть шапку на всех маршрутах SPA. Если меняете шапку здесь —
   поменяйте те же значения в styles.css; расхождение ловит
   _acceptance/header-parity.js.

   Цвета и шрифты записаны литералами: в :root лендингов нет
   --fd, --fb, --emerald-deep и --ease.
   ============================================================ */

.topbar{
  /* display:block обязателен: в стилях лендингов .topbar — это flex-строка с кнопками
     прямо внутри, и без этого правила обёртка .topbar-in сжалась бы до содержимого.
     padding:0 — там же у .topbar стоит padding:20px 0, из-за него шапка вырастала на 40 px */
  display:block;
  padding:0;
  position:sticky;top:0;z-index:20;
  background:rgba(244,243,236,.82);
  -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.topbar-in{max-width:1180px;margin:0 auto;padding:14px 28px;display:flex;align-items:center;gap:14px}

/* логотип: знак + «Ролескоп.» + подпись под ним.
   В лендингах .logo был строчной ссылкой 19 px без подписи — отсюда и чувство
   «другого сайта» при переходе с главной */
.logo{display:flex;align-items:center;gap:12px;cursor:pointer;user-select:none;text-decoration:none;color:var(--ink);font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:15px}
.logo-mark{width:40px;height:40px;flex:none;transition:transform .5s cubic-bezier(.2,.7,.2,1)}
.logo:hover .logo-mark{transform:rotate(360deg)}
.logo-word{font-family:'Unbounded','Onest',sans-serif;font-weight:700;font-size:17px;letter-spacing:.01em;line-height:1.05;color:var(--ink)}
.logo-word em{font-style:normal;color:#0aa87e}
.logo small{display:block;font-family:'Onest',-apple-system,'Segoe UI',Roboto,sans-serif;font-size:10px;font-weight:600;color:var(--ink3);letter-spacing:.18em;text-transform:uppercase;margin-top:3px}

.topbar-right{margin-left:auto;display:flex;align-items:center;gap:10px}

/* навигация шапки: пилюли, как на главной (не .btn — иначе наследуются
   паддинги 13/22 из лендинговых стилей и шапка вырастает) */
.topnav{display:flex;align-items:center;gap:8px}
.topnav-link{
  font-size:12.5px;font-weight:600;color:var(--ink2);background:var(--surface);
  border:1px solid var(--line);border-radius:99px;padding:8px 15px;
  white-space:nowrap;text-decoration:none;transition:border-color .2s,color .2s;
}
.topnav-link:hover{border-color:var(--pine);color:var(--pine)}
.topnav-admin{color:var(--ink3)}

@media (max-width:960px){
  .logo small{display:none}
}
@media (max-width:640px){
  /* шапка перестаёт быть липкой и складывается в две строки: навигация уходит вниз.
     flex-wrap:wrap обязателен — в styles.css он задан позже правила с nowrap,
     и без него «Вход для специалиста» уезжал за правый край экрана */
  .topbar{position:static}
  .topbar-in{padding:9px 14px;gap:8px;row-gap:6px;flex-wrap:wrap}
  .logo-mark{width:28px;height:28px}
  .logo-word{font-size:16px;line-height:1.1;white-space:nowrap}
  .topbar-right{margin-left:0;flex-basis:100%}
  .topnav{gap:6px;margin-left:0;justify-content:flex-start}
  .topnav-link{padding:6px 11px;font-size:11px}
}