/* AP-R · шапка на компьютере, 07.10.2026 (решение Сергея).
   «Посёлки» и «О компании» — реже всего открывают из шапки (Метрика, 30 дней: 40 и 25 переходов) — уходят в меню-шторку;
   справа от главной кнопки шапки — кнопка ≡ (вид как у лупы и сердца: класс zhk-search-toggle), она открывает ту же шторку, что на телефоне.
   После прокрутки в шапку добавляются «Города» и телефон — на экранах 1024–1279 туда же уходит «Аналитика».
   Стили шторки ниже — копия мобильных из city_v2/assets/city-base.css (там они только до 1023 px).
   Собирает AP-R\novosti-ii-2026-10-02\site-dev\make_hdrmenu_css.py. Кнопку выводят шаблоны, только если этот файл есть:
   откат — удалить файл (шапка станет прежней) и patch_menu_dev.py --undo. */
@media (max-width:1023px){.apr-dmenu{display:none!important}}
@media (min-width:1024px){
  html body .header .nav > a[href="/villages/"],html body .header .nav > a[href="/about/"]{display:none!important}
  html body .header .apr-dmenu{display:inline-flex!important;align-items:center;justify-content:center;flex:0 0 auto;padding:0;cursor:pointer}
  html body .header .apr-dmenu svg{width:18px;height:18px}
  html body .m-drawer{display:flex!important}
  html body .m-backdrop{display:block!important}
  .m-backdrop{position:fixed; inset:0; background:rgba(10,28,46,.55); z-index:80; opacity:0; visibility:hidden; transition:opacity .25s ease; -webkit-tap-highlight-color:transparent;}
  .m-backdrop.is-open{opacity:1; visibility:visible}
  .m-drawer{position:fixed; right:0; top:0; bottom:0; width:min(360px, 88vw); z-index:90; background:#fff; color:var(--ink); transform:translateX(100%); transition:transform .3s cubic-bezier(.4,0,.2,1); display:flex; flex-direction:column; box-shadow:-12px 0 40px rgba(0,0,0,.20); overflow-y:auto; -webkit-overflow-scrolling:touch;}
  .m-drawer.is-open{transform:translateX(0)}
  .m-drawer-head{display:flex; align-items:center; justify-content:space-between; padding:18px 22px; border-bottom:1px solid var(--line); position:sticky; top:0; background:#fff; z-index:2;}
  .m-drawer-title{font-size:17px; font-weight:700; color:var(--navy); letter-spacing:-.005em}
  .m-drawer-close{width:36px; height:36px; border-radius:10px; background:var(--bg); color:var(--navy); display:flex; align-items:center; justify-content:center; transition:background .15s; font-family:inherit; border:0; cursor:pointer;}
  .m-drawer-close:hover{background:var(--line)}
  .m-drawer-close svg{width:18px; height:18px}
  .m-drawer-nav{display:flex; flex-direction:column; padding:8px 0}
  .m-drawer-nav a{display:flex; align-items:center; gap:14px; padding:13px 22px; color:var(--ink); font-size:15.5px; font-weight:600; text-decoration:none; transition:background .15s;}
  .m-drawer-nav a:hover, .m-drawer-nav a:active{background:var(--bg)}
  .m-drawer-nav a svg.ic{width:20px; height:20px; color:var(--navy); flex-shrink:0; opacity:.78}
  .m-drawer-nav a.m-premium{position:relative}
  .m-drawer-nav a.m-premium .m-premium-tag{margin-left:auto; padding:2px 8px; border-radius:6px; background:rgba(245,160,46,.18); color:#9a5800; font-size:10px; font-weight:800; text-transform:uppercase; letter-spacing:.04em; display:inline-flex; align-items:center; gap:4px;}
  .m-drawer-nav a.m-premium .m-premium-tag svg{width:10px; height:10px}
  .m-drawer-divider{height:1px; background:var(--line); margin:6px 22px}
  .m-drawer-auth{display:flex; align-items:center; gap:12px; margin:8px 16px; padding:13px 18px; background:var(--bg); border:1px solid var(--line); border-radius:12px; color:var(--ink); font-size:14.5px; font-weight:600; text-decoration:none;}
  .m-drawer-auth svg{width:18px; height:18px; color:var(--navy)}
  .m-drawer-phone{padding:8px 16px 4px}
  .m-drawer-call{display:flex; align-items:center; gap:14px; padding:14px 18px; background:linear-gradient(135deg, var(--green) 0%, #8cc55f 100%); color:var(--green-dark); border-radius:14px; font-weight:700; text-decoration:none;}
  .m-drawer-call .ph-ic{width:38px; height:38px; border-radius:50%; background:rgba(255,255,255,.45); display:flex; align-items:center; justify-content:center; flex-shrink:0;}
  .m-drawer-call .ph-ic svg{width:16px; height:16px; color:var(--green-dark)}
  .m-drawer-call .ph-txt{display:flex; flex-direction:column}
  .m-drawer-call .ph-num{font-size:16.5px; font-weight:800; letter-spacing:.01em}
  .m-drawer-call .ph-sub{font-size:11.5px; font-weight:500; opacity:.78; margin-top:1px}
  .m-drawer-socials{display:flex; gap:8px; padding:14px 22px 22px; border-top:1px solid var(--line); margin-top:8px;}
  .m-drawer-socials a{width:42px; height:42px; border-radius:10px; background:var(--bg); color:var(--navy); display:flex; align-items:center; justify-content:center; transition:background .15s, color .15s;}
  .m-drawer-socials a svg{width:18px; height:18px}
  .m-drawer-socials a.tb-yt:hover{background:#FF0000; color:#fff}
  .m-drawer-socials a.tb-vk:hover{background:#0077FF; color:#fff}
  .m-drawer-socials a.tb-dz:hover{background:#000; color:#fff}
  .m-drawer-socials a.tb-max:hover{background:#3B6BFC; color:#fff}
}
@media (min-width:1024px) and (max-width:1279px){
  html body.topbar-hidden .header .nav > a.nav-premium{display:none!important}
}
@media (min-width:1280px) and (max-width:1365px){
  html body.topbar-hidden .header .nav{gap:16px}
}
/* вверху страницы места теперь хватает — возвращаем обычный шрифт и зазоры меню
   (прежние «сжатия» шапки в строках «Коммерция» и «Новости» рассчитаны на 8 пунктов; после прокрутки они остаются).
   Кроме страницы поиска (/search/, своя шапка, отличие — блок .s-header): там «Города» и «Аналитика» в строке всегда, ей прежние «сжатия» */
@media (min-width:1200px) and (max-width:1279px){
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav{gap:22px}
}
@media (min-width:1100px) and (max-width:1199px){
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .row{gap:16px}
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav{gap:16px}
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav>a,html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav .nav-trigger{font-size:15px}
}
@media (min-width:1024px) and (max-width:1099px){
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .row{gap:12px}
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav{gap:12px}
  html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav>a,html body:not(.topbar-hidden):not(:has(.s-header)) .header .nav .nav-trigger{font-size:14px}
}
@media (min-width:1024px) and (max-width:1099px){
  html body.topbar-hidden .header .row{gap:8px}
  html body.topbar-hidden .header .nav{gap:8px}
}
/* 1024–1059 после прокрутки: с длинной кнопкой «Подобрать квартиру» строка шире сетки страницы на 27 px (≡ в 5 px от края экрана) — чуть ужимаем зазоры и поля кнопки */
@media (min-width:1024px) and (max-width:1059px){
  html body.topbar-hidden .header .row{gap:6px}
  html body.topbar-hidden .header .nav{gap:6px}
  html body.topbar-hidden .header .btn.btn-primary{padding-left:10px!important;padding-right:10px!important}
}
/* страница поиска (/search/): у её шапки свои стили (padding:13px 0) — до 1280 px лого и кнопки стояли вплотную к краям экрана
   (на боевом на 1024–1100 главная кнопка уходит за край), на широких экранах лого на 32 px левее, чем на остальных страницах.
   Поля — как у шапки остальных страниц */
@media (min-width:1024px){
  html body:has(.s-header) .header .row{padding-left:32px;padding-right:32px}
}
/* оформление шторки на компьютере — «Классика» (ChatGPT, выбрал Сергей 08.10.2026; собирает make_drawer_final_css.py).
   Раздел, где посетитель, отмечает /local/js/apr-header-menu.js (aria-current). Телефон — без изменений. */
@media (min-width:1024px) {
  :root body .m-backdrop {z-index:2147483100; background:rgba(10,34,55,.46);}
  :root body .m-drawer {z-index:2147483200; width:390px; max-width:calc(100vw - 24px); background:var(--card); color:var(--ink); font-family:'Manrope',system-ui,sans-serif; box-shadow:-18px 0 50px rgba(10,34,55,.20);}
  :root body .m-drawer-head {min-height:74px; padding:17px 24px; background:var(--card); border-bottom:1px solid var(--line);}
  :root body .m-drawer-title {color:var(--navy); font-size:20px; font-weight:800; letter-spacing:-.035em;}
  :root body .m-drawer-close {width:40px; height:40px; border:1px solid var(--line); border-radius:var(--r-sm); background:var(--bg); color:var(--navy);}
  :root body .m-drawer-close:hover {background:var(--teal-soft); border-color:var(--teal);}
  :root body .m-drawer-nav {padding:14px 14px 10px; gap:2px;}
  :root body .m-drawer-nav > a {min-height:52px; padding:12px 14px; gap:14px; border-radius:10px; color:var(--ink); font-size:15px; font-weight:650; line-height:1.35; letter-spacing:-.012em; transition: background .16s ease, color .16s ease;}
  :root body .m-drawer-nav > a > svg.ic {width:21px; height:21px; flex:0 0 21px; color:var(--navy); stroke-width:1.9; opacity:.9;}
  :root body .m-drawer-nav > a:hover {background:var(--teal-soft); color:var(--navy);}
  :root body .m-drawer-nav > a:active {background:var(--bg-mint);}
  :root body .m-drawer-nav > a[aria-current="page"] {background:var(--teal-soft); color:var(--navy); box-shadow:inset 3px 0 0 var(--teal);}
  :root body .m-drawer-nav .m-premium-tag {background:var(--bg-cream); color:var(--navy); border-radius:6px; padding:4px 8px; font-size:10px; font-weight:800; letter-spacing:.04em;}
  :root body .m-drawer-auth {display:none!important;}
  :root body .m-drawer-divider {margin:auto 24px 0; height:1px; background:var(--line);}
  :root body .m-drawer-phone {padding:16px 20px 0;}
  :root body .m-drawer-call {min-height:72px; padding:13px 15px; gap:13px; border-radius:var(--r-md); background:linear-gradient( 135deg, var(--green), var(--green-press) ); color:var(--green-dark);}
  :root body .m-drawer-call:hover {background:var(--green-press);}
  :root body .m-drawer-call .ph-ic {width:40px; height:40px; background:rgba(255,255,255,.48);}
  :root body .m-drawer-call .ph-ic svg {width:19px; height:19px;}
  :root body .m-drawer-call .ph-num {font-size:17px; font-weight:800;}
  :root body .m-drawer-call .ph-sub {font-size:12px; font-weight:600;}
  :root body .m-drawer-socials {margin-top:0; padding:14px 20px 22px; border-top:0; gap:8px;}
  :root body .m-drawer-socials a {width:44px; height:44px; border:1px solid var(--line); border-radius:11px; background:var(--bg); color:var(--navy);}
  :root body .m-drawer-socials a svg {width:19px; height:19px;}
  :root body .m-drawer-socials a:hover {border-color:var(--teal); transform:translateY(-1px);}
  :root body .m-drawer :is(a,button):focus-visible {outline:2px solid var(--teal); outline-offset:2px;}
  :root body.m-locked .header .apr-dmenu {background:var(--teal-soft); color:var(--navy); border-color:var(--teal);}
}
@media (min-width:1024px) and (max-height:640px) {
  :root body .m-drawer-divider {margin-top:6px;}
  :root body .m-drawer-nav {padding-top:8px; padding-bottom:6px;}
  :root body .m-drawer-nav > a {min-height:46px; padding-top:9px; padding-bottom:9px;}
}
/* финальные правки ChatGPT (телефон сразу после списка, наведение светлее текущего раздела) */
@media (min-width:1024px) {
  :root body .m-drawer-divider {margin:10px 22px 0; flex:0 0 1px;}
  :root body .m-drawer-phone {padding-top:13px;}
  :root body .m-drawer-socials {padding-top:11px; padding-bottom:18px;}
  :root body .m-drawer-nav > a:hover:not([aria-current="page"]) {background:rgba(23,183,191,.065);}
  :root body .m-drawer-nav > a[aria-current="page"] {background:rgba(23,183,191,.14); color:var(--navy); box-shadow:inset 3px 0 0 var(--teal); font-weight:750;}
}
@media (min-width:1024px) and (max-height:700px) {
  :root body .m-drawer-divider {margin-top:6px;}
  :root body .m-drawer-phone {padding-top:9px;}
  :root body .m-drawer-socials {padding-top:9px; padding-bottom:12px;}
}