/* ============================================================================
   C.Nord — Site Chrome (навбар + бургер-меню + футер)
   Единый эталон шапки/подвала для всех страниц. Стилизация — на токенах
   (css/tokens.css, подключать ПЕРВЫМ). Все селекторы под префиксом .cn-*,
   чтобы не пересекаться с легаси Webflow-CSS страниц. !important на
   типографике/цвете/сбросе — намеренно: перебиваем глобальные правила Webflow.
   Разметку править в notpublic/templates/chrome/*.html и прогонять
   notpublic/build/apply-chrome.mjs — этот файл только стили.

   Ширина ряда — 1170px (как .custom-container сайта).
   Бургер — тёмная панель; футер — светлая (белая), как раньше; контент у них
   идентичен (одна сетка .cn-menu, цвета задаются контекстом).
   ========================================================================== */

.cn-nav, .cn-nav *,
.cn-burger, .cn-burger *,
.cn-footer, .cn-footer * { box-sizing: border-box; }

body.cn-menu-open { overflow: hidden; }

/* ── Верхняя полоса ──────────────────────────────────────────────────────── */
.cn-nav {
  position: relative;
  z-index: 900;
  background: var(--color-surface);
  box-shadow: var(--shadow-nav);
  font-family: var(--font-sans);
}
.cn-nav__inner {
  max-width: 1170px;
  margin: 0 auto;
  padding: 14px 50px;
  display: flex;
  align-items: center;
  gap: var(--space-6);
}
.cn-logo {
  display: block; flex: 0 0 auto;
  width: 92px; height: 37px;
  margin-top: auto; margin-bottom: auto;     /* надёжно центрируем по вертикали */
  background: url(../images/CNord-logo-2.png) center / contain no-repeat;
}
.cn-logo:hover { background-image: url(../images/CNord-logo-yellow.png); }

.cn-nav__links {
  display: flex;
  align-items: center;
  gap: 28px;
  margin-left: auto;                 /* прижать ссылки вправо от логотипа */
}
.cn-nav__links a {
  text-decoration: none !important;
  color: var(--color-ink) !important;
  font-size: 18px !important;
  line-height: 1 !important;
  font-weight: var(--weight-regular) !important;
  transition: color .15s;
  white-space: nowrap;
}
.cn-nav__links a:hover,
.cn-nav__links a[aria-current="page"] { color: var(--color-brand) !important; }

.cn-nav__actions { display: flex; align-items: center; gap: var(--space-4); margin-left: var(--space-6); }

/* Кнопка «Запросить демо» — пилюля-призрак (базовый вид, для белого навбара) */
.cn-btn-demo {
  font-family: inherit;
  font-size: 18px !important;                /* совпадает с пунктами верхнего меню */
  font-weight: var(--weight-semibold) !important;
  line-height: 1 !important;
  color: var(--color-brand) !important;
  text-decoration: none !important;
  border: 2px solid var(--color-brand);
  border-radius: var(--radius-pill);
  padding: 9px 18px;
  cursor: pointer;
  white-space: nowrap;
  transition: background .15s, color .15s;
}
.cn-btn-demo:hover { background: var(--color-brand); color: var(--color-on-brand) !important; }

/* Бургер-кнопка (всегда видна — вход в полное меню) */
.cn-burger-btn {
  display: inline-flex;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  width: 44px;
  height: 44px;
  padding: 0 10px;
  background: none;
  border: 0;
  cursor: pointer;
}
.cn-burger-btn span { display: block; height: 2px; width: 100%; background: var(--color-ink); border-radius: 2px; }

@media (max-width: 991px) {
  .cn-nav__links { display: none; }
  .cn-nav__actions { margin-left: auto; }   /* ссылки скрыты — actions уходят вправо */
}
@media (max-width: 479px) {
  .cn-btn-demo { display: none; }          /* на телефоне демо доступно из меню */
  .cn-nav__inner { padding: 12px 20px; }
  .cn-logo { width: 80px; height: 32px; }
}

/* ── Меню-сетка (общая раскладка для бургера и футера) ────────────────────── */
.cn-menu {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: var(--space-10) var(--space-8);
}
.cn-menu__title {
  margin: 0 0 var(--space-4) !important;
  font-size: 30px !important;
  line-height: 1.15 !important;
  font-weight: var(--weight-bold) !important;
  letter-spacing: normal;
  text-transform: none;
}
.cn-menu ul { list-style: none !important; margin: 0 !important; padding: 0 !important; }
.cn-menu li {
  margin: 0 !important;
  padding: 0 0 4px !important;               /* компактное межстрочье пунктов */
  font-size: 20px !important;
  line-height: 1.3 !important;
  list-style: none !important;
}
/* на некоторых страницах (новости) глобальный CSS задаёт li::marker{content:"·"} —
   он рисуется даже при list-style:none; гасим точечно в меню */
.cn-menu li::marker { content: "" !important; }
.cn-menu li:last-child { padding-bottom: 0 !important; }
.cn-menu a {
  text-decoration: none !important;
  font-size: 20px !important;
  line-height: 1.3 !important;
  font-weight: var(--weight-regular) !important;
  transition: color .15s;
}
.cn-menu__contact p { margin: 0 0 var(--space-3) !important; }
.cn-menu__phone { font-size: 20px !important; line-height: 1.3 !important; font-weight: var(--weight-regular) !important; }
.cn-social { display: flex; gap: var(--space-3); margin-top: var(--space-4); }
.cn-social a {
  display: inline-flex; align-items: center; justify-content: center;
  width: 40px; height: 40px; border-radius: 50%;
  transition: background .15s, color .15s;
}
.cn-social svg { width: 20px; height: 20px; fill: currentColor; display: block; }

@media (max-width: 767px) { .cn-menu { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 479px) { .cn-menu { grid-template-columns: 1fr; gap: var(--space-8); } }

/* ── Бургер-оверлей (тёмная панель) ──────────────────────────────────────── */
.cn-burger {
  position: fixed; inset: 0; z-index: 1000;
  background: var(--color-ink);
  color: var(--color-on-brand);
  font-family: var(--font-sans);
  overflow-y: auto; -webkit-overflow-scrolling: touch;
  display: none;
}
.cn-burger.is-open { display: block; }
.cn-burger__top { border-bottom: 1px solid rgba(255, 255, 255, .10); }
.cn-burger__top-inner {
  max-width: 1170px; margin: 0 auto; padding: 14px 50px;
  display: flex; align-items: center; justify-content: space-between;
}
.cn-burger__logo {
  display: block; width: 92px; height: 37px;
  background: url(../images/CNord-logo-white.png) center / contain no-repeat;
}
.cn-burger__logo:hover { background-image: url(../images/CNord-logo-yellow.png); }
/* Крестик — на месте бургер-кнопки (тот же ряд/ширина/правый край) */
.cn-burger__close {
  width: 44px; height: 44px;
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0; background: none; border: 0; cursor: pointer;
  color: var(--color-on-brand); font-size: 30px; line-height: 1;
}
.cn-burger__close:hover { color: var(--color-brand-active); }
.cn-burger__inner { max-width: 1170px; margin: 0 auto; padding: var(--space-10) 50px var(--space-20); }

.cn-burger .cn-menu__title { color: var(--color-on-brand) !important; }
.cn-burger .cn-menu a { color: var(--color-muted-on-dark) !important; }
.cn-burger .cn-menu a:hover { color: var(--color-on-brand) !important; }
.cn-burger .cn-menu__phone { color: var(--color-on-brand) !important; }
.cn-burger .cn-menu__contact p, .cn-burger .cn-menu__contact a { color: var(--color-muted-on-dark) !important; }
.cn-burger .cn-social a { background: rgba(255, 255, 255, .10); color: var(--color-on-brand) !important; }
.cn-burger .cn-social a:hover { background: var(--color-brand); }

@media (max-width: 479px) {
  .cn-burger__top-inner { padding: 12px 20px; }
  .cn-burger__inner { padding: var(--space-8) 20px var(--space-15); }
  .cn-burger__logo { width: 80px; height: 32px; }
}

/* ── Футер: серая панель со скруглёнными верхними углами (как на projects) ── */
.cn-footer {
  background: var(--color-surface);            /* белые поля вокруг панели */
  color: var(--color-ink);
  font-family: var(--font-sans);
  padding-top: var(--space-10);
}
.cn-footer__panel {
  max-width: var(--container);
  margin: 0 auto;
  background: var(--color-surface-3);          /* #EAEAE8 */
  border-top-left-radius: 48px;
  border-top-right-radius: 48px;
  padding: var(--space-15) 50px var(--space-10);
}

.cn-footer .cn-menu__title { color: var(--color-ink) !important; }
.cn-footer .cn-menu a { color: var(--color-muted) !important; }
.cn-footer .cn-menu a:hover { color: var(--color-brand) !important; }
.cn-footer .cn-menu__phone { color: var(--color-ink) !important; }
.cn-footer .cn-menu__contact p, .cn-footer .cn-menu__contact a { color: var(--color-muted) !important; }
.cn-footer .cn-social a { background: var(--color-surface); color: var(--color-ink) !important; }
.cn-footer .cn-social a:hover { background: var(--color-brand); color: var(--color-on-brand) !important; }

.cn-footer__copy {
  margin-top: var(--space-10);
  padding-top: var(--space-5);
  border-top: 1px solid rgba(46, 48, 52, .12);
  color: var(--color-muted) !important; font-size: var(--text-small) !important;
  display: flex; flex-wrap: wrap; gap: var(--space-4); align-items: center; justify-content: space-between;
}
.cn-footer__copy a { color: var(--color-muted) !important; text-decoration: none !important; }
.cn-footer__copy a:hover { color: var(--color-brand) !important; }
/* © в Circe нарисован крупнее и «проседает» под базовую линию — поднимаем
   на ~0.12em, чтобы его оптический центр совпал с прописными буквами строки */
.cn-copy-mark { position: relative; top: -0.12em; }

@media (max-width: 479px) {
  .cn-footer__panel {
    border-top-left-radius: 28px; border-top-right-radius: 28px;
    padding: var(--space-10) 20px var(--space-8);
  }
}