/* =========================================================================
   Шапка сайта nimax.ru — КАРКАС, не часть страницы st-*.
   Нотация каркаса: header__element, header_mod_value. Логика перенесена
   из боевого бандла (header_theme_dark + header_color_light):
   — sticky top:0, светлый фон #f2f2f7, нижний бордер;
   — «Услуги»: мега-меню, подменю группы раскрывается при наведении;
   — «Компания»: простой выпадающий список;
   — стрелка поворачивается на 180° при открытии;
   — ≤1279px навигация прячется, появляется бургер (слева от логотипа);
   — ≤599px CTA скрыт, бургер прижат вправо.
   Добавлено: скрытие при скролле вниз / показ при скролле вверх (is-hidden),
   открытие по клику/клавиатуре (aria-expanded), Esc, мобильное меню-оверлей
   (ссылка /menu/ остаётся фолбэком без JS). Размеры — fluid rem, как у страницы.
   ========================================================================= */

:root { --header-height: clamp(4rem, 3.648rem + 1.502vw, 5.451rem); } /* 64→80 */
/* Шапка fixed (а не sticky): sticky + transform дёргается при инерционном скролле */
body { padding-top: var(--header-height); }

.header {
  --header-fs: clamp(1.062rem, 0.9965rem + 0.2817vw, 1.335rem);     /* 17→20 */
  --header-logo: clamp(6.875rem, 5.951rem + 3.944vw, 10.68rem);     /* 110→152 */
  --header-space: clamp(1rem, 0.8239rem + 0.7512vw, 1.725rem);      /* 16→24 */
  --header-item-x: clamp(0.75rem, 0.64rem + 0.4695vw, 1.203rem);    /* 12→17 */
  --header-order-h: clamp(2.75rem, 2.618rem + 0.5634vw, 3.294rem);  /* 44→50 */
  --header-order-fs: clamp(0.8125rem, 0.7905rem + 0.0939vw, 0.9032rem); /* 13→14 */
  --header-order-x: clamp(1.375rem, 1.199rem + 0.7512vw, 2.1rem);   /* 22→30 */
  --header-icon: clamp(1.5rem, 1.412rem + 0.3756vw, 1.863rem);      /* 24→28 */
  --header-bg: #f2f2f7;
  --header-link: #1a2e5f;
  --header-link-hover: #2b83e8;
  --header-border: rgba(112, 112, 112, .25);
  --header-ease: cubic-bezier(.2, .8, .2, 1);

  position: fixed;
  inset: 0 0 auto;
  z-index: 200;
  will-change: transform;
  display: flex;
  align-items: stretch;
  justify-content: space-between;
  height: var(--header-height);
  padding: 0 var(--header-space);
  background: var(--header-bg);
  border-bottom: 1px solid var(--header-border);
  font-family: "TT Interphases Pro", Inter, system-ui, sans-serif;
  color: var(--header-link);
  transition: transform .4s var(--header-ease);
}
.header,
.header :where(*) { box-sizing: border-box; }
.header :where(ul, li, p) { margin: 0; padding: 0; list-style: none; }
.header a { color: inherit; text-decoration: none; }
.header :focus-visible { outline: 2px solid var(--header-link-hover); outline-offset: 3px; }

/* Скролл вниз — уезжает, вверх — возвращается (JS) */
.header.is-hidden { transform: translateY(calc(-100% - 1px)); }

.header__logo { display: flex; align-items: center; flex-shrink: 0; }
.header__logo img { display: block; width: var(--header-logo); height: auto; margin-top: -.25rem; }

.header__group { display: flex; align-items: stretch; }

.header__item { position: relative; display: flex; align-items: center; padding: 0 var(--header-item-x); }

.header__link {
  font: inherit;
  font-size: var(--header-fs);
  line-height: 1.25;
  font-weight: 500;
  color: var(--header-link);
  background: none;
  border: 0;
  cursor: pointer;
  transition: color .2s var(--header-ease);
}
.header__link:hover,
.header__item_sub:hover .header__link { color: var(--header-link-hover); }

.header__name { display: inline-flex; align-items: center; gap: .35em; padding: 0; }

.header__arrow { flex-shrink: 0; width: .55em; height: auto; transition: transform .3s var(--header-ease); }
.header__item_sub:hover .header__arrow,
.header__item_sub.is-open .header__arrow { transform: rotate(180deg); transition-duration: .15s; }

/* --- Выпадашки (без теней — белые плашки плоские) --- */
.header__children {
  position: absolute;
  top: 100%;
  left: .5rem;
  margin-top: 1px;
  padding: 1.875rem;
  min-width: 13.75rem;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: .9em;
  font-size: 1.0625rem;
  line-height: 1.25;
  white-space: nowrap;
  transition: opacity .15s var(--header-ease), transform .15s var(--header-ease), visibility .15s;
}
.header__item_sub:not(:hover):not(.is-open) .header__children {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transform: translateY(.625rem);
  transition-duration: .3s;
}
.header__children a { display: block; color: var(--header-link); transition: color .2s var(--header-ease); }
.header__children a:hover { color: var(--header-link-hover); }

/* Мега-меню «Услуги» */
.header__children_mega {
  width: 44.0625rem;
  padding: 2.5rem 0 3.125rem 2.8125rem;
  gap: 2.5rem;
  font-size: 1.25rem;
  font-weight: 500;
  white-space: normal;
}
.header__children .header__children-head,
.header__children-item > a {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: .625rem;
  row-gap: .375rem;
}
.header__children_mega small { grid-column: 1; grid-row: 2; font-size: .9375rem; line-height: 1; font-weight: 400; color: var(--header-link); }
.header__children-head { width: 22.5rem; }
.header__children-head[aria-current="page"] span { color: var(--header-link-hover); }
.header__children-list { display: flex; flex-direction: column; gap: 2.5rem; }

.header__children-item { display: grid; grid-template-columns: 22.5rem 18.75rem; }
.header__children-item > a { padding-right: 1.875rem; }
.header__arrow_side { grid-column: 2; grid-row: 1; margin-top: .5rem; transform: rotate(-90deg) !important; }

.header__sub-menu {
  position: absolute;
  top: 0;
  right: 0;
  z-index: -1;
  width: 18.75rem;
  height: 100%;
  padding: 2.8125rem;
  border-left: 1px solid #f2f2f7;
  background: #fff;
  display: flex;
  flex-direction: column;
  gap: 1.75rem;
  font-size: .9375rem;
  line-height: 1.2;
  font-weight: 400;
}
.header__sub-menu a { opacity: 0; transition: opacity .15s ease-in-out, color .2s var(--header-ease); }
.header__children-item:hover .header__sub-menu,
.header__children-item:focus-within .header__sub-menu { z-index: 2; }
.header__children-item:hover .header__sub-menu a,
.header__children-item:focus-within .header__sub-menu a { opacity: 1; }

/* --- CTA --- */
.header__group_contacts .header__item { padding-right: 0; }
.header__order {
  font: inherit;
  font-size: var(--header-order-fs);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: .06em;
  color: var(--header-link);
  background: transparent;
  border: 1px solid var(--header-link);
  border-radius: 999px;
  height: var(--header-order-h);
  padding: 0 var(--header-order-x);
  cursor: pointer;
  transition: color .2s var(--header-ease), border-color .2s var(--header-ease);
}
.header__order:hover { color: var(--header-link-hover); border-color: var(--header-link-hover); }

/* --- Бургер и мобильное меню --- */
.header__burger { display: none; align-items: center; padding: 0 0 0 1rem; }
.header__burger svg { width: var(--header-icon); height: var(--header-icon); }

.header__menu {
  position: fixed;
  inset: var(--header-height) 0 0;
  z-index: 199;
  overflow-y: auto;
  padding: 2rem var(--header-space) 2.5rem;
  background: var(--header-bg);
  display: flex;
  flex-direction: column;
  gap: 2rem;
}
.header__menu[hidden] { display: none; }
.header__menu-list { display: flex; flex-direction: column; gap: 1.375rem; font-size: 1.5rem; font-weight: 500; }
.header__menu-label { font-size: .8125rem; text-transform: uppercase; letter-spacing: .08em; font-weight: 400; color: #5b6788; margin-bottom: .75rem; }
.header__menu-sub { display: flex; flex-direction: column; gap: .625rem; font-size: 1.125rem; font-weight: 400; }
.header__menu a:hover { color: var(--header-link-hover); }
.header__order_wide { width: 100%; }

@media (max-width: 1279px) {
  .header__group_nav { display: none; }
  .header__group_contacts { margin-left: auto; }
  .header__burger { display: flex; order: -1; padding: 0 1rem 0 0; }
  .header__logo { margin-right: auto; }
}
@media (max-width: 599px) {
  .header__group_contacts { display: none; }
  .header__burger { order: 0; margin-left: auto; padding: 0 0 0 1rem; }
}
@media (prefers-reduced-motion: reduce) {
  .header, .header__children, .header__arrow { transition: none; }
}