/* Шапка сайта — одна на все страницы. Разметку раскладывает tools/header.py,
   поведение (выпадашка, бургер) — nav.js. Токены цветов берутся со страницы. */
.nav { display:flex; align-items:center; gap:18px; height:68px; }
.nav .brand { margin-right:auto; }

.menu { display:flex; align-items:center; gap:4px; }
.menu > a, .drop-btn {
  font-family:"IBM Plex Mono", monospace; font-size:.78rem; font-weight:500; letter-spacing:.08em; text-transform:uppercase;
  color:var(--ink-dim); text-decoration:none; background:none; border:0; cursor:pointer;
  padding:9px 11px; display:inline-flex; align-items:center; gap:6px; white-space:nowrap;
  transition:color .2s;
}
.menu > a:hover, .drop-btn:hover, .drop.open .drop-btn { color:var(--heat); }
.menu > a[aria-current="page"], .drop-btn.here { color:var(--ink); box-shadow:inset 0 -2px 0 var(--heat); }
.menu .ext { font-size:.7em; opacity:.7; }
.drop-btn svg { width:10px; height:10px; fill:none; stroke:currentColor; stroke-width:2; transition:transform .2s; }
.drop.open .drop-btn svg { transform:rotate(180deg); }

/* Выпадашка «Возможности»: открывается по клику и с клавиатуры, на десктопе ещё и наведением */
.drop { position:relative; }
.drop-panel {
  display:none; position:absolute; top:calc(100% + 12px); left:-14px; width:400px; z-index:70;
  background:var(--surface); border:1px solid var(--line); box-shadow:var(--shadow); padding:8px;
}
.drop-panel::before { content:""; position:absolute; left:0; right:0; top:-14px; height:14px; } /* мостик для мыши */
.drop.open .drop-panel { display:grid; }
@media (hover:hover) and (min-width:1201px) { .drop:hover .drop-panel { display:grid; } }
.drop-panel a { display:block; padding:12px 14px; text-decoration:none; border-left:2px solid transparent; transition:background .15s, border-color .15s; }
.drop-panel a:hover, .drop-panel a:focus-visible { background:var(--raised); border-left-color:var(--heat); }
.drop-panel a[aria-current="page"] { border-left-color:var(--heat); }
.drop-panel b { display:block; font-family:"Unbounded", sans-serif; font-size:.9rem; font-weight:600; color:var(--ink); }
.drop-panel span { display:block; margin-top:3px; font-size:.86rem; line-height:1.4; color:var(--ink-dim); }

.burger { display:none; width:38px; height:38px; flex:none; place-items:center; background:transparent; border:1px solid var(--line); color:var(--ink); cursor:pointer; }
.burger:hover { border-color:var(--heat); color:var(--heat); }
.burger svg { width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; stroke-linecap:round; }
.burger .x { display:none; }
.burger[aria-expanded="true"] .x { display:block; }
.burger[aria-expanded="true"] .bars { display:none; }

/* Узкий экран: всё меню — в выезжающую панель под шапкой, «Возможности» раскрыты списком */
@media (max-width:1200px) {
  .burger { display:grid; }
  .menu {
    display:none; position:absolute; left:0; right:0; top:100%;
    flex-direction:column; align-items:stretch; gap:0;
    background:var(--bg); border-bottom:1px solid var(--line); box-shadow:var(--shadow);
    padding:10px 16px 18px; max-height:calc(100dvh - 68px); overflow-y:auto;
  }
  .menu.open { display:flex; }
  .menu > a { padding:15px 6px; border-bottom:1px solid var(--line); font-size:.86rem; }
  .menu > a[aria-current="page"] { box-shadow:inset 3px 0 0 var(--heat); padding-left:14px; }
  .drop { border-bottom:1px solid var(--line); padding-bottom:8px; }
  .drop-btn { padding:15px 6px 8px; cursor:default; color:var(--ink-faint); font-size:.74rem; }
  .drop-btn svg { display:none; }
  .drop-btn.here { box-shadow:none; color:var(--ink-faint); }
  .drop-panel, .drop.open .drop-panel { display:grid; position:static; width:auto; box-shadow:none; border:0; background:transparent; padding:0; }
  .drop-panel a { padding:10px 10px; }
}
@media (max-width:560px) {
  .nav { gap:10px; }
  .nav .btn.sm { padding:9px 12px; font-size:.7rem; }
  .nav .brand { font-size:1rem; }
}