/* Шапка сайта — единственный источник правды.
   Подключается на всех страницах: главная, документация, статьи и рубрики.
   Разметка одна — includes/site_header.php, классы не дублировать
   в инлайновых стилях страниц — иначе шапки снова разъедутся.

   Поведение мобильного меню — js/nav.js (общий для всех страниц). */

/* призма над шапкой */
.prism-line{
  height:3px; position:sticky; top:0; z-index:60;
  background:linear-gradient(90deg,#0080ff,#ff3b30 25%,#ffd60a 45%,#34c759 60%,#00c7be 78%,#0080ff);
}

.header{
  position:sticky; top:3px; z-index:50;
  background:color-mix(in srgb,var(--paper) 88%,transparent);
  backdrop-filter:blur(10px);
  border-bottom:1px solid var(--line-soft);
}
.nav{padding:24px 0}
.nav__container{
  max-width:var(--maxw); margin:0 auto; padding:0 28px;
  display:flex; align-items:center; justify-content:space-between; gap:24px;
  position:relative;
}

/* Логотип-слово. Один источник для шапки и подвала — иначе «СПЕКТР»
   где-нибудь снова потеряет фирменное начертание и градиент. */
.nav__logo,.footer__logo{
  text-decoration:none;
  font-family:var(--font-logo); font-weight:700;
  letter-spacing:.05em; line-height:1;
}
.nav__logo{color:var(--ink); font-size:24px}
.footer__logo{color:#fff; font-size:19px; margin-bottom:6px}
.nav__logo b,.footer__logo b{
  background:linear-gradient(110deg,#0080ff 35%,#ff0000 45%,#ffff00 48%,#00ff00 52%,#00ffff 55%,#0080ff 65%);
  background-size:300% 100%; color:#0080ff;
  background-clip:text; -webkit-background-clip:text; -webkit-text-fill-color:transparent;
  /* Шиммер проигрывается ОДИН раз при загрузке, не бесконечно.
     Почему: background-position не композитится — он красится на главном
     потоке каждый кадр. Логотип лежит внутри .header с backdrop-filter,
     поэтому каждый его перекрас заставлял GPU заново пересчитывать размытие.
     Цикл шёл вечно, хотя видимое движение занимает первые 15% (1,2 с из 8):
     остальные 6,8 с браузер перерисовывал статичный кадр впустую.
     У пользователя это давало полное перерисовывание окна Chrome.
     Если захочется вернуть периодичность — делать её на transform/opacity
     (они композитятся), а не на background-position. */
  animation:logo-shimmer 1.6s ease-in-out 1 both; font-weight:700;
}
@keyframes logo-shimmer{
  0%{background-position:100% 0}
  75%{background-position:0% 0}
  100%{background-position:0% 0}
}
@media(prefers-reduced-motion:reduce){.nav__logo b,.footer__logo b{animation:none}}

.nav__links{display:flex; gap:26px}
.nav__link{
  font-size:15px; font-weight:500; line-height:1.55;
  color:var(--ink-soft); text-decoration:none; white-space:nowrap;
}
.nav__link:hover,.nav__link.active{color:var(--ink)}

.nav__actions{display:flex; align-items:center; gap:14px}
/* высота кнопки задаётся явно, чтобы не зависеть от line-height страницы */
.nav__cta{
  font-size:14.5px; font-weight:600; line-height:1.55;
  padding:9px 18px; border-radius:6px;
  border:1.5px solid var(--ink); color:var(--ink); text-decoration:none;
  transition:background .15s,color .15s;
}
.nav__cta:hover{background:var(--ink); color:var(--paper)}

.nav__toggle{
  display:none; flex-direction:column; justify-content:center; gap:5px;
  width:40px; height:40px; padding:8px;
  background:transparent; border:none; cursor:pointer;
}
.nav__toggle-bar{
  display:block; height:2.5px; background:var(--ink); border-radius:2px;
  transition:transform .2s,opacity .2s;
}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(1){transform:translateY(7.5px) rotate(45deg)}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(2){opacity:0}
.nav__toggle[aria-expanded="true"] .nav__toggle-bar:nth-child(3){transform:translateY(-7.5px) rotate(-45deg)}

@media(max-width:1000px){
  .nav__links{
    display:none; position:absolute; left:0; right:0; top:calc(100% + 24px);
    flex-direction:column; gap:0; background:var(--paper);
    border-bottom:1px solid var(--line-soft); padding:8px 28px 16px;
  }
  .nav__links.open{display:flex}
  .nav__link{padding:14px 0; font-size:17px; font-weight:600; border-bottom:1px solid var(--line-soft)}
  .nav__link:last-child{border-bottom:none}
  .nav__toggle{display:flex}
}
@media(max-width:600px){
  .nav__container{padding:0 18px}
  .nav__links{padding-left:18px; padding-right:18px}
  .nav{padding:16px 0}
  .nav__logo{font-size:20px}
  .nav__cta{font-size:13.5px; padding:8px 12px}
}