/* ---------- шапка: строка даты и телефона, логотип, меню разделов между линейками ---------- */
.hdr{--logo-h:34px;--hdr-top-h:36px;background:var(--hdr-bg);color:var(--ink);font-family:var(--f-text)}
/* шапка залипает сверху экрана: строка даты и телефона уезжает, логотип, кнопка и меню остаются */
.hdr{position:sticky;top:calc(-1 * var(--hdr-top-h));z-index:50}
/* переходы по якорям не прячут заголовок под шапку */
html{scroll-padding-top:128px}
.hdr a{text-decoration:none}
.hdr a:focus-visible,.hdr button:focus-visible{outline:2px solid var(--ink);outline-offset:3px}

.hdr-top{display:flex;align-items:center;justify-content:space-between;gap:16px;height:var(--hdr-top-h);
  font-size:13px;line-height:1.3;color:var(--muted)}
.hdr-phone{color:var(--ink);font-weight:600;white-space:nowrap;font-variant-numeric:tabular-nums}
.hdr-phone:hover{text-decoration:underline}

.hdr-mast{display:flex;align-items:center;gap:24px;padding-top:14px;padding-bottom:18px}

/* логотип: знак начинается ровно с левого края контейнера (x=0 во viewBox) */
.logo{display:block;flex:none;color:var(--ink);line-height:0}
.logo-svg{display:block;height:var(--logo-h);width:auto;overflow:visible}

/* подпись к логотипу: отдельный элемент, низ букв на линии низа логотипа (базовая линия = нижний край знака,
   у SVG нет своей базовой линии, и флекс берет нижний край); отступ - средний межбуквенный просвет «ХИТ НК» */
.hdr-brand{display:flex;align-items:baseline;gap:calc(var(--logo-h) * .13);min-width:0}
.hdr-since{font-size:13px;line-height:1;color:var(--muted);white-space:nowrap}
.hdr-since br{display:none}
.logo-bars,.logo-caps,.logo-text{fill:currentColor}
.logo-text{font-family:var(--f-logo);font-weight:700}
.logo-caps path{transform-box:fill-box;transform-origin:50% 100%}
/* анимация логотипа: пока скрипт не расставил столбики, знак скрыт; если скрипт не пришел - через 3 с финал */
@media (prefers-reduced-motion:no-preference){
  .js .logo-svg:not(.is-live) .logo-bars{opacity:0;animation:logo-fallback 0s 3s forwards}
  .js .logo-svg:not(.is-live) .logo-caps path{transform:scaleY(0);animation:logo-fallback-caps 0s 3s forwards}
  .logo-svg.is-live:not(.is-done) .logo-caps path{transform:scaleY(0)}
  .logo-svg.is-live .logo-caps path{transition:transform .5s cubic-bezier(.22,.61,.36,1)}
  .logo-svg.is-live .logo-caps path:nth-child(2){transition-delay:.1s}
  .logo-svg.is-live .logo-caps path:nth-child(3){transition-delay:.2s}
}
@keyframes logo-fallback{to{opacity:1}}
@keyframes logo-fallback-caps{to{transform:none}}

/* кнопка заявки: черная, прямоугольная */
.hdr-cta{margin-left:auto;display:inline-flex;align-items:center;min-height:40px;padding:0 18px;border-radius:0;
  background:var(--ink);color:#fff;font-size:14px;font-weight:600;white-space:nowrap;transition:background-color .15s}
.hdr-cta:hover{background:#2E2E2E;color:#fff}

/* меню разделов: тонкая темная линейка сверху, двойная снизу */
.hdr-nav{display:flex;flex-wrap:wrap;gap:0 28px;border-top:1px solid var(--rule-dark);border-bottom:3px double var(--rule-dark)}
.hdr-nav a{padding:11px 0 10px;color:var(--ink);font-size:14px;font-weight:600;line-height:1.3;white-space:nowrap}
.hdr-nav a:hover{text-decoration:underline;text-underline-offset:5px}
.hdr-nav a[aria-current]{text-decoration:underline;text-decoration-thickness:2px;text-underline-offset:5px}
.hdr-nav .hdr-nav-cta,.hdr-nav .hdr-nav-phone{display:none}

.hdr-burger{display:none;flex:none;width:42px;height:42px;padding:0;cursor:pointer;border:1px solid var(--ink);border-radius:0;
  background:var(--hdr-bg);color:var(--ink);align-items:center;justify-content:center}
.hdr-burger span,.hdr-burger span::before,.hdr-burger span::after{display:block;width:18px;height:2px;background:currentColor;
  transition:transform .2s ease,opacity .2s ease}
.hdr-burger span{position:relative}
.hdr-burger span::before,.hdr-burger span::after{content:"";position:absolute;left:0}
.hdr-burger span::before{top:-6px}
.hdr-burger span::after{top:6px}
.hdr.is-open .hdr-burger span{background:transparent}
.hdr.is-open .hdr-burger span::before{transform:translateY(6px) rotate(45deg)}
.hdr.is-open .hdr-burger span::after{transform:translateY(-6px) rotate(-45deg)}

#zayavka{scroll-margin-top:16px}

/* там, где подпись в строку не помещается рядом с кнопкой заявки или бургером, - две строки мелким кеглем,
   низ второй строки на линии низа логотипа */
@media (max-width:619px){
  .hdr-brand{align-items:flex-end}
  .hdr-since{font-size:11px;line-height:1.15;white-space:nowrap;margin-bottom:-2px}
  .hdr-since br{display:inline}
}

/* ---------- телефон и узкий планшет: меню за кнопкой ---------- */
@media (max-width:760px){
  .hdr-mast{padding-top:10px;padding-bottom:12px;gap:12px}
  .hdr{--logo-h:24px}
  .hdr-burger{display:flex}
  .hdr-cta{margin-left:auto}
  .hdr-nav{flex-direction:column}
  /* меню закрыто: пунктов не видно, шапку замыкает только нижняя двойная линейка */
  .js .hdr:not(.is-open) .hdr-nav{border-top:0}
  .js .hdr:not(.is-open) .hdr-nav a{display:none}
  .hdr-nav a{padding:13px 0;border-top:1px solid var(--rule);font-size:16px}
  .hdr-nav a:first-child{border-top:0}
  .hdr-nav a[aria-current]{text-decoration:none;box-shadow:inset 3px 0 0 var(--ink);padding-left:12px}
  .hdr-nav a.hdr-nav-cta{display:block;margin:6px 0 14px;padding:12px 16px;border:0;background:var(--ink);color:#fff;text-align:center}
  /* без JavaScript меню просто раскрыто */
  html:not(.js) .hdr-burger{display:none}
  /* без JavaScript меню всегда раскрыто - такую шапку не закрепляем */
  html:not(.js) .hdr{position:static}
  html{scroll-padding-top:76px}
  /* меню - на чуть более темной бумаге, на всю ширину экрана */
  .hdr-nav{margin:0 calc(-1 * var(--gutter));padding:0 var(--gutter);background:var(--menu-bg)}
  /* первым пунктом - крупный телефон по центру, с трубкой перед номером */
  .hdr-nav a.hdr-nav-phone{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px 0 18px;
    font:700 26px/1.2 var(--f-serif);font-variant-numeric:lining-nums tabular-nums;letter-spacing:.01em}
  .hdr-nav a.hdr-nav-phone svg{flex:none}
  /* открытое меню не длиннее экрана */
  .hdr.is-open .hdr-nav{max-height:calc(100vh - 70px);overflow-y:auto}
}
@media (max-width:480px){
  .hdr-date{display:none}
  .hdr-top{justify-content:flex-end}
  .hdr-cta{display:none}
  .hdr-burger{margin-left:auto}
  .hdr{--logo-h:22px}
}

/* газетный стиль: разделы меню, дата и подпись к логотипу - с засечками, как в «Известиях» */
.hdr-nav a{font-family:var(--f-serif);font-weight:700;font-size:15px}
.hdr-date{font-family:var(--f-serif);font-style:italic;font-size:14px}
.hdr-since{font-family:var(--f-serif);font-style:italic}
@media (max-width:760px){.hdr-nav a{font-size:17px}}

/* телефон на десктопе: при прокрутке переезжает из верхней строки влево от кнопки заявки.
   Путь - дуга: по вертикали быстрый старт (span), по горизонтали плавный разгон (сама ссылка),
   по дороге телефон чуть подрастает. Сдвиг --ph-x/--ph-y считает header.js. */
.hdr-phone{display:inline-block}
.hdr-phone span{display:inline-block;transform-origin:100% 50%}
@media (min-width:761px){
  .hdr-phone{transition:transform .7s cubic-bezier(.55,0,.35,1)}
  .hdr-phone span{transition:transform .7s cubic-bezier(.2,.8,.3,1)}
  .hdr.is-stuck .hdr-phone{transform:translateX(var(--ph-x,0))}
  .hdr.is-stuck .hdr-phone span{transform:translateY(var(--ph-y,0)) scale(1.1)}
}
.hdr.no-anim .hdr-phone,.hdr.no-anim .hdr-phone span{transition:none}
@media (prefers-reduced-motion:reduce){.hdr-phone,.hdr-phone span{transition:none}}