/* ═══════════════════════════════════════════════════════════════════════════
   GRAMATON.PRO — ВЕРХНЕЕ МЕНЮ САЙТА (единое, как в дашборде /cabinet.html)
   2026-10-03 (Alex). Классы один-в-один из cabinet.html (header.hrow/logo/nav/
   hacts/sw/acc-cycle/btn), но с областью видимости .site-header, чтобы не
   конфликтовать с собственными классами страниц. Токены берутся из ui-alfa.css
   (--a-*) с откатом на «банковскую» тему кабинета (--bg/--card/--text/--muted/
   --accent/--btn-bg/--ink/--border).

   Подключение (после ui-alfa.css):
     <link rel="stylesheet" href="/css/site-header.css?v=1">
   Разметка:
     <header class="site-header"><div class="wrap hrow">
       <a class="logo">…GRAMATON PRO…</a>
       <nav><a>Сервисы</a>…</nav>
       <div class="hacts">
         <div class="sw">A B C D</div>
         <button class="acc-cycle">◐</button>
         <button class="btn btn-primary hdr-acc">Кабинет</button>
         <button class="btn btn-ghost hdr-logout" data-logout>Выйти</button>
       </div>
     </div></header>
   ═══════════════════════════════════════════════════════════════════════════ */

.site-header{
  position:sticky;top:0;z-index:60;
  background:color-mix(in srgb,var(--a-bg,var(--bg,#FAF6EF)) 90%,transparent);
  -webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);
  border-bottom:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)));
}
.site-header .wrap{display:block;max-width:1160px;margin:0 auto;padding:0 20px}
.site-header .hrow{position:relative;display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:14px;min-height:72px}
/* Левая группа: бургер + логотип */
.site-header .hbrand{display:flex;align-items:center;gap:10px;justify-self:start;min-width:0}
.site-header .burger-btn{display:none;flex:0 0 auto;width:44px;height:44px;border:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)));background:var(--a-card,var(--card,#fff));border-radius:12px;cursor:pointer;padding:0;align-items:center;justify-content:center}
.site-header .burger-btn:active{background:var(--a-card-alt,var(--card,#F2EEE6))}
.site-header .burger-lines{width:22px;height:16px;position:relative;display:block}
.site-header .burger-lines i{position:absolute;left:0;right:0;height:2.2px;border-radius:2px;background:var(--a-text,var(--text,#0B1F35));transition:transform .22s ease,opacity .18s ease,top .22s ease}
.site-header .burger-lines i:nth-child(1){top:0}
.site-header .burger-lines i:nth-child(2){top:7px}
.site-header .burger-lines i:nth-child(3){top:14px}
body.nav-open .site-header .burger-lines i:nth-child(1){top:7px;transform:rotate(45deg)}
body.nav-open .site-header .burger-lines i:nth-child(2){opacity:0}
body.nav-open .site-header .burger-lines i:nth-child(3){top:7px;transform:rotate(-45deg)}
.site-header .logo{display:inline-flex;align-items:center;text-decoration:none;color:var(--a-text,var(--text,#0B1F35));justify-self:start}
.site-header .logo-svg{height:38px;width:auto;display:block;overflow:visible}
.site-header .logo-svg .lg-word{font-family:'Montserrat',var(--a-font,sans-serif);font-weight:800;letter-spacing:4px;fill:currentColor}
.site-header .logo-svg .lg-bar{fill:var(--a-accent,var(--accent,#EF3124))}
.site-header .logo-svg .lg-pro{font-family:'Montserrat',var(--a-font,sans-serif);font-weight:800;letter-spacing:10px;fill:var(--a-accent,var(--accent,#EF3124))}
.site-header nav{display:flex;gap:34px;justify-self:center;align-items:center}
.site-header nav a{font-size:18px;font-weight:600;color:var(--a-muted,var(--muted,#333B47));min-height:48px;display:inline-flex;align-items:center;padding:0 2px;transition:color .18s ease}
.site-header nav a:hover{color:var(--a-text,var(--text,#0B1F35))}
.site-header .hacts{justify-self:end;display:flex;align-items:center;gap:10px;flex-wrap:nowrap;justify-content:flex-end}
.site-header .btn{display:inline-flex;align-items:center;gap:8px;min-height:48px;padding:12px 24px;border-radius:999px;border:1px solid transparent;font-weight:700;font-size:16px;line-height:20px;cursor:pointer;text-decoration:none}
.site-header .btn-primary{background:var(--a-btn,var(--btn-bg,var(--accent,#D4231A)));color:var(--a-ink,var(--ink,#fff));box-shadow:var(--a-shadow,var(--shadow,0 6px 22px rgba(11,31,53,.07)))}
.site-header .btn-ghost{background:transparent;border-color:var(--a-border-strong,var(--border,rgba(11,31,53,.18)));color:var(--a-text,var(--text,#0B1F35))}
.site-header .hdr-acc{display:none}
.site-header .hdr-logout{display:inline-flex}
.site-header .sw{display:inline-flex;gap:4px;padding:4px;border:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)));border-radius:999px;background:var(--a-card,var(--card,#fff))}
.site-header .sw button{border:0;background:transparent;color:var(--a-muted,var(--muted,#333B47));font:600 12px/1 'Montserrat',var(--a-font,sans-serif);padding:8px 12px;border-radius:999px;min-height:44px;cursor:pointer}
.site-header .sw button[aria-pressed="true"]{background:var(--a-btn,var(--btn-bg,var(--accent,#D4231A)));color:var(--a-ink,var(--ink,#fff))}
.site-header .acc-cycle{display:none;min-width:44px;min-height:44px;border:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)));background:var(--a-card,var(--card,#fff));color:var(--a-text,var(--text,#0B1F35));border-radius:50%;font-size:16px;cursor:pointer}

@media(max-width:900px){
  .site-header .logo-svg{height:30px}
  .site-header .hrow{gap:10px;grid-template-columns:auto 1fr auto}
  .site-header nav{display:none}
  .site-header .hacts .sw{display:none}
  .site-header .acc-cycle{display:inline-flex;align-items:center;justify-content:center}
  .site-header .btn{min-height:44px;padding:10px 18px;font-size:15px}
}

/* ═══════════════════════════════════════════════════════════════════════════
   Бургер-меню («три полоски») рядом с логотипом — как в мобильном приложении.
   Выдвижная панель слева + затемнение фона. 2026-10-03 (Alex).
   ═══════════════════════════════════════════════════════════════════════════ */

/* Бургер виден там, где скрыто основное меню (мобильные/планшет) */
@media(max-width:900px){
  .site-header .burger-btn{display:inline-flex}
}

/* Затемнение */
.nav-drawer-ov{position:fixed;inset:0;max-width:100%;background:rgba(11,31,53,.44);opacity:0;visibility:hidden;transition:opacity .26s ease,visibility .26s ease;z-index:1000}
body.nav-open .nav-drawer-ov{opacity:1;visibility:visible}

/* Панель */
.nav-drawer{position:fixed;top:0;left:0;bottom:0;width:min(86vw,330px);max-width:92vw;z-index:1001;
  background:var(--a-bg,var(--bg,#FAF6EF));color:var(--a-text,var(--text,#0B1F35));
  box-shadow:8px 0 34px rgba(11,31,53,.22);display:flex;flex-direction:column;
  transform:translateX(-104%);transition:transform .3s cubic-bezier(.22,.61,.36,1);
  overflow-y:auto;-webkit-overflow-scrolling:touch}
body.nav-open .nav-drawer{transform:translateX(0)}

.nd-head{position:relative;display:flex;align-items:center;gap:12px;padding:22px 18px 16px;border-bottom:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)))}
.nd-avatar{flex:0 0 auto;width:46px;height:46px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:20px;color:#fff;background:var(--a-accent,var(--accent,#EF3124));overflow:hidden}
.nd-hinfo{min-width:0}
.nd-user{font-weight:800;font-size:17px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.nd-status{font-size:13px;color:var(--a-muted,var(--muted,#333B47));margin-top:2px}
.nd-close{position:absolute;top:14px;right:12px;width:44px;height:44px;border:0;background:transparent;color:var(--a-muted,var(--muted,#333B47));font-size:20px;cursor:pointer;border-radius:50%}
.nd-close:hover{background:var(--a-card,var(--card,#fff))}

.nd-group{padding:16px 20px 6px;font-size:11px;font-weight:800;letter-spacing:.09em;text-transform:uppercase;color:var(--a-dim,var(--muted,#6B7280))}
.nd-item{display:flex;align-items:center;gap:14px;min-height:52px;padding:10px 20px;text-decoration:none;color:var(--a-text,var(--text,#0B1F35));font-size:16px;font-weight:600;border:0;background:transparent;width:100%;cursor:pointer;text-align:left}
.nd-item:hover,.nd-item:active{background:var(--a-card,var(--card,#fff))}
.nd-item.active{color:var(--a-accent-strong,var(--accent,#C4241A));background:var(--a-accent-soft,rgba(239,49,36,.08))}
.nd-ic{flex:0 0 auto;width:26px;text-align:center;font-size:20px;line-height:1}
.nd-item .nd-badge{margin-left:auto;background:var(--a-accent,#EF3124);color:#fff;border-radius:999px;font-size:12px;font-weight:800;padding:2px 9px}
.nd-sep{height:1px;background:var(--a-border,var(--border,rgba(11,31,53,.10)));margin:8px 16px}
.nd-foot{margin-top:auto;padding:14px 12px 18px;border-top:1px solid var(--a-border,var(--border,rgba(11,31,53,.10)))}
.nd-foot .nd-item{color:var(--a-muted,var(--muted,#333B47))}
.nd-foot .nd-logout{color:#C0392B}
.nd-foot .nd-logout .nd-ic{color:#C0392B}

/* При открытом меню — фон не скроллится */
body.nav-open{overflow:hidden}