/* Меню сайта, «три полоски» (2026-11-01, чат «SEO, блог и ссылки», по слову Саши). Разметку ставят scripts/i18n-landings.mjs
   и scripts/build-blog.mjs (общий модуль scripts/site-nav.mjs), закрытие по клику мимо и Esc: site-menu.js. Цвета и шапку
   .nav берёт из styles.css. Кнопка меню справа в шапке на всех экранах, внутри направления (ниши), блог, цены, о нас, FAQ,
   юр-страницы и языки. Текстовые ссылки шапки остаются, пока помещаются (замер 01.11 на 6 языках: нужно до 915px, uk). */

/* styles.css оформляет все <details>/<summary> как FAQ-аккордеон (рамка снизу, отступ справа 34px, стрелка
   position:absolute). Здесь это сброшено: иначе иконка меню сжималась до нуля. */
.site-menu{border:0;flex:0 0 auto}
.site-menu>summary{list-style:none;position:static;display:flex;align-items:center;justify-content:center;width:32px;height:38px;
  padding:0;border-radius:9px;color:var(--w-70);cursor:pointer;user-select:none}
.site-menu>summary::-webkit-details-marker{display:none}
.site-menu>summary::after{content:none}
.site-menu>summary:hover,.site-menu[open]>summary{color:#fff;background:var(--w-07)}
.site-menu>summary:focus-visible{outline:2px solid var(--cyan,#5fd4ff);outline-offset:2px}
/* display:block и поля вместо одного flex: Safari 16 и старше не делает <summary> флексом, значок съезжал бы в угол. */
.site-menu>summary svg{display:block;width:21px;height:21px;margin:8.5px auto;flex:0 0 auto}
.site-menu .i-close,.site-menu[open] .i-open{display:none}
.site-menu[open] .i-close{display:block}

/* Панель: под кнопкой меню у правого края шапки (.nav sticky, она и держит панель), на телефоне во всю ширину;
   своя прокрутка, если не влезает в экран. */
.site-menu-panel{position:absolute;right:12px;width:min(440px,calc(100% - 24px));top:calc(100% - 2px);z-index:60;
  max-height:calc(100vh - 92px);max-height:calc(100dvh - 92px);overflow:auto;overscroll-behavior:contain;
  padding:8px 10px 14px;background:var(--ink,#0a0f1a);border:1px solid var(--w-12);border-radius:16px;
  box-shadow:0 24px 60px rgba(0,0,0,.45)}
.sm-h{margin:14px 8px 4px;font-size:11px;font-weight:650;line-height:1.3;letter-spacing:.08em;text-transform:uppercase;color:var(--w-55)}
.sm-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:2px 6px;margin:0;padding:0;list-style:none}
.sm-grid a,.sm-grid span{display:block;padding:10px 8px;border-radius:9px;font-size:15px;line-height:1.3;color:var(--w-70);overflow-wrap:break-word}
.sm-grid a:hover{color:#fff;background:var(--w-07)}
.sm-grid [aria-current]{color:#fff;font-weight:600}
.site-menu-panel .sm-login{display:none;margin:14px 8px 0;justify-content:center;color:#fff;border:1px solid var(--w-12);background:transparent}

/* Шапка (.nav, z-index 40) держит панель в своём слое, и липкая кнопка пробы внизу (z 50) и баннер cookies (z 80)
   закрывали низ открытого меню. Пока меню или список языков открыты, шапка поднимается над ними. Без :has()
   тот же класс ставит site-menu.js. */
.nav:has(details.site-menu[open]),.nav:has(details.lang-switch[open]),.gx-menu-open .nav{z-index:90}

/* Компьютер и планшет: панель выравнивается по кнопке меню, а не по краю окна. */
@media (min-width:761px){
  .site-menu-panel{right:max(12px,calc(var(--pad,24px) - 8px))}
}
/* Уже 940px текстовые ссылки шапки (About, Pricing, FAQ, Privacy) не помещаются рядом с меню: они есть внутри него. */
@media (max-width:939.98px){
  .nav .nav-links>a:not(.btn){display:none}
}
/* Телефон: глобус уходит в меню (раздел языков), его место занимает кнопка меню. */
@media (max-width:760px){
  .nav .lang-switch{display:none}
}
/* Совсем узкий экран: «Log in» тоже уходит в меню, в шапке знак, кнопка пробы и меню. */
@media (max-width:359.98px){
  .nav .nav-links>a.btn-out{display:none}
  .site-menu-panel .sm-login{display:flex}
}