/*
  header.css — стили шапки сайта. Подключать на всех публичных страницах
  где используется одинаковая шапка (лендинг, блог и т.п.).
  Идентичны инлайн-стилям шапки в frontend/index.html.
*/

.header {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  height: 52px;
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 48px;
  background: rgba(12,12,17,0.80);
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  border-bottom: 1px solid var(--border);
  transition: box-shadow .3s;
}
.header.scrolled { box-shadow: 0 4px 32px rgba(0,0,0,.5); }

.logo { display: flex; align-items: center; text-decoration: none; }
.logo-img { height: 34px; width: auto; display: block; opacity: 0.8; }

.header-nav { display: flex; align-items: center; gap: 8px; }
.header-social { display: flex; gap: 14px; margin-right: 10px; align-items: center; }
.header-social a { color: rgba(255,255,255,.55); font-size: 1.15rem; line-height: 1; text-decoration: none; transition: color .2s, transform .2s; }
.header-social a:hover { transform: translateY(-1px); }
.header-social a.social-vk:hover { color: #4C75A3; }
.header-social a.social-tg:hover { color: #26A5E4; }

.nav-link {
  font-size: .84rem; font-weight: 500;
  color: rgba(255,255,255,.55);
  text-decoration: none;
  padding: 6px 12px;
  border-radius: 8px;
  transition: color .2s, background .2s;
}
.nav-link:hover { color: #fff; background: rgba(255,255,255,.06); }
.nav-link.active { color: #fff; background: rgba(196,30,58,.12); }

.btn-primary {
  padding: 8px 22px; border-radius: 50px; font-size: .84rem; font-weight: 600;
  color: var(--text);
  background: linear-gradient(135deg, var(--primary), var(--primary-dark));
  border: none; cursor: pointer; transition: all .2s; font-family: inherit;
  text-decoration: none; display: inline-block;
}
.btn-primary:hover { box-shadow: 0 4px 20px rgba(196,30,58,.45); transform: translateY(-1px); }

/* ── Мобильная адаптация (повторяет правила лендинга) ── */
@media (max-width: 980px) {
  .header { padding: 0 24px; }
}
@media (max-width: 620px) {
  .header { position: sticky; height: 80px; padding: 0 14px 0 0; }
  .logo-img { height: 42px; transform: none; }
  .header-nav { gap: 10px; }
  .header-nav .nav-link[href="/#pricing"],
  .header-nav .nav-link[href="#pricing"],
  .header-nav .nav-link[href="/#reviews"],
  .header-nav .nav-link[href="#reviews"],
  .header-nav .nav-link[href="/#faq"],
  .header-nav .nav-link[href="#faq"] { display: none; }
  .header-social { display: none; }
  .header-nav .btn-ghost   { padding: 0 18px; height: 44px; font-size: .95rem; border-radius: 10px; display: inline-flex; align-items: center; }
  .header-nav .btn-primary { padding: 0 18px; height: 44px; font-size: .95rem; border-radius: 10px; display: inline-flex; align-items: center; }
}