/* =========================================================
   NAVI — информационная строка над шапкой (все публичные страницы)
   Подключается в layout.tpl после menu.css. Цвета — из настроек:
   --ib-bg (фон), --ib-fg (текст), --ib-icon (иконка).

   Шапка (.navi-header, .navi-mobile) зафиксирована на top:0, а отступ под неё
   задан body{ padding-top: var(--header-total) }. Поэтому:
   1) JS из infobar.tpl измеряет высоту строки в --navi-infobar-h и ставит
      класс navi-infobar-on на <html>;
   2) строка показывается только вместе с этим классом (нет измерения — нет
      перекрытия шапки, и закрытая посетителем строка не мигает);
   3) отступ body и top шапки увеличиваются на высоту строки, включая
      состояние прокрутки (--header-scrolled) и мобильную шапку (56px).
   ========================================================= */

.navi-infobar {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  /* ниже шапки (99999) и модальных окон (100000), выше контента страницы */
  z-index: 99998;
  background: var(--ib-bg, #FFC400);
  color: var(--ib-fg, #1F2A2E);
}
html.navi-infobar-on .navi-infobar { display: block; }

.navi-infobar__in {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 40px;
  padding: 9px 16px;
}

.navi-infobar__ico {
  flex: 0 0 auto;
  font-size: 16px;
  line-height: 1;
  color: var(--ib-icon, #1F2A2E);
}

.navi-infobar__txt {
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--navi-font, 'Inter', 'Segoe UI', system-ui, sans-serif);
  font-size: 14px;
  line-height: 1.4;
  font-weight: 500;
  /* длинный текст переносится, но не вылезает и не рвёт шапку */
  overflow-wrap: anywhere;
  word-break: normal;
}

.navi-infobar__x {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  margin: -6px -8px -6px 0;
  padding: 0;
  border: 0;
  border-radius: 8px;
  background: transparent;
  color: inherit;
  font-size: 24px;
  line-height: 1;
  cursor: pointer;
  -webkit-appearance: none;
  appearance: none;
  transition: background-color .15s ease;
}
.navi-infobar__x:hover { background: rgba(0, 0, 0, .08); }
.navi-infobar__x:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; }

/* --- Сдвиг шапки и контента на высоту строки --- */
html.navi-infobar-on body {
  padding-top: calc(var(--header-total, 120px) + var(--navi-infobar-h, 40px));
}
html.navi-infobar-on body.scrolled {
  padding-top: calc(var(--header-scrolled, 60px) + var(--navi-infobar-h, 40px));
}
html.navi-infobar-on .navi-header,
html.navi-infobar-on .navi-mobile {
  top: var(--navi-infobar-h, 40px);
}

/* --- Мобильные: шапка 56px, крупнее крестик, мельче текст --- */
@media (max-width: 992px) {
  html.navi-infobar-on body,
  html.navi-infobar-on body.scrolled {
    padding-top: calc(56px + var(--navi-infobar-h, 40px));
  }
  .navi-infobar__in {
    gap: 8px;
    min-height: 44px;
    padding: 8px 12px;
  }
  .navi-infobar__txt { font-size: 13px; line-height: 1.35; }
  .navi-infobar__ico { font-size: 15px; }
  .navi-infobar__x {
    width: 40px;
    height: 40px;
    margin: -8px -6px -8px 0;
  }
}
