/* Общее меню сайта: то же, что на главной, для внутренних страниц. Подключается после kit.css.
   Разметка в site/programmy/index.html, scripts/build_blog.py и scripts/build_prompts.py.
   Промт-хаб подключает его поверх своего hub.css, без отступов у body: там у меню margin 0.
   Кнопка справа называется .navcta: класс .cta уже занят в kit.css и blog.css. */

.topnav {
  position: sticky; top: 0; z-index: 5; display: flex; margin: 0 -16px;
  background: var(--bg); color: var(--fg); border-bottom: 1px solid var(--rule);
  font-size: .9rem; font-weight: 500; line-height: 1.55;
}
.topnav a, .menu-btn { color: var(--fg); text-decoration: none; padding: .95rem 1.25rem; border-right: 1px solid var(--rule); white-space: nowrap; }
.topnav .brand { font: 700 1.25rem/1 var(--display, "Sofia Sans Extra Condensed", "Arial Narrow", sans-serif); text-transform: uppercase; padding-block: 1rem .9rem; }
.navlinks { display: flex; }
.navlinks a:hover { background: var(--paper); }
.navlinks a[aria-current="page"] { box-shadow: inset 0 -2px 0 var(--accent); }
.topnav .navcta { margin-left: auto; border: 0; background: var(--accent); color: var(--btn-fg, #141414); font-weight: 600; }
.topnav .navcta:hover { background: #45b1e4; }
.menu-toggle { position: absolute; opacity: 0; width: 1px; height: 1px; }
.menu-btn { display: none; cursor: pointer; }
.menu-toggle:focus-visible + .menu-btn { outline: 2px solid var(--accent); outline-offset: -2px; }

/* На главной восемь пунктов: с фирменными шрифтами меню занимает около 1005 px, сворачиваем с запасом */
@media (max-width: 1080px) {
  .menu-btn { display: block; }
  .menu-btn::after { content: " +"; }
  .menu-toggle:checked + .menu-btn::after { content: " \2013"; }
  .navlinks { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; background: var(--bg); border-bottom: 1px solid var(--fg); }
  .navlinks a { border-right: 0; border-top: 1px solid var(--rule); padding: 1rem 1.25rem; font-size: 1.05rem; }
  .menu-toggle:checked ~ .navlinks { display: flex; }
}
@media (max-width: 400px) {
  .topnav a, .menu-btn { padding-inline: .9rem; }
}