/* ============================================================
   Шапка сайта: кролик, меню-пилюля, имя. Геометрия пилюли – та же,
   что была на прошлом сайте (357x25, ссылки по 119x25, Inter
   11.784/14.885), но фон теперь ПРОЗРАЧНЫЙ с обводкой, чтобы
   шапка одинаково читалась и на светлой панели, и на темном фоне.
   Логика подсветки взята из макета (node 14:11): активный пункт –
   залитая пилюля с инвертированным текстом.

   Появляется только начиная с блока проектов: на первом экране и
   в сцене погружения ее нет (по просьбе). Тема (светлая/темная)
   переключается классом, который ставит js/nav.js по тому, что
   сейчас под шапкой.
   ============================================================ */

.site-nav {
  position: fixed; z-index: 20; inset: 0 0 auto 0;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: clamp(20px, 2.6vw, 39px) clamp(20px, 2.5vw, 38px) 0;
  padding-top: max(clamp(20px, 2.6vw, 39px), env(safe-area-inset-top));
  pointer-events: none;                  /* кликабельны только сами элементы */
  opacity: 0; visibility: hidden;
  /* прозрачность ведет прогресс скролла (--nav-o), поэтому анимировать ее
     нельзя: с переходом меню отставало от блока почти на полсекунды */
  transition: visibility .2s ease;
  color: #f5f5f5;                        /* тема по умолчанию – на темном фоне */
}
/* Прозрачность шапки на главной ведет фаза перехода (--nav-o ставит
   js/approach.js): меню растемняется ОДНОВРЕМЕННО с блоком проектов, а не
   выскакивает в конце. На кейсе переменной нет – там шапка сразу видна. */
.site-nav.is-visible { opacity: var(--nav-o, 1); visibility: visible; }

/* Мягкая подложка под шапкой: фон остается прозрачным, но контент, который
   проезжает под меню, не мешает его читать. В темной теме подложка темная,
   в светлой – под цвет панели; вниз обе растворяются в ноль */
/* Подложки у шапки НЕТ вообще: ни градиента, ни размытия. Градиент читался
   белой полосой над темным блоком, а размытие – затемнением сверху, которого
   в макете нет. Шапка полностью прозрачная, как в макете. */

.site-nav.is-light { color: #1f1e1f; }   /* над светлой панелью */
.site-nav.is-light .site-nav__pill { box-shadow: inset 0 0 0 .517px rgba(31, 30, 31, .38); }

.site-nav__rabbit {
  flex: 0 0 auto; display: block; pointer-events: auto;
  border-radius: 8px; line-height: 0;
}
.site-nav__rabbit img {
  display: block; width: auto; height: clamp(20px, 1.7vw, 25px);
  transition: filter .3s ease;
}
/* Кролик темный: на темном фоне его не видно, поэтому там инвертируем.
   Решает отдельный класс is-dark-bg, а не тема шапки: на кейсе меню и имя
   остаются одного цвета, и перекрашивается только кролик. */
.site-nav__rabbit img { filter: none; }
.site-nav.is-dark-bg .site-nav__rabbit img { filter: invert(1) brightness(1.35); }
.site-nav__rabbit:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; }

.site-nav__name {
  flex: 0 0 auto; pointer-events: auto;
  font-family: var(--font-ui, "Inter Tight"), sans-serif;
  font-size: clamp(11px, .8vw, 12px); line-height: 14.885px;
  letter-spacing: .01em; white-space: nowrap;
}
/* Имя стоит у правого края, далеко от пилюли, и под ним свой фон: над темным
   блоком оно оставалось темным на темном (контраст 1.26). Свой класс ставит
   js/nav.js по фону именно под именем – так же, как is-dark-bg для кролика. */
.site-nav.is-name-light .site-nav__name { color: #f5f5f5; }

/* ---------- меню-пилюля ---------- */
.site-nav__menu {
  position: absolute;
  top: max(clamp(20px, 2.6vw, 39px), env(safe-area-inset-top));
  left: 50%; transform: translateX(-50%);
  pointer-events: auto;
}
.site-nav__pill {
  display: flex; align-items: center; list-style: none; margin: 0; padding: 0;
  min-width: 357px; height: 25px; border-radius: 20.674px;
  background: transparent;                            /* прозрачный, как просили */
  box-shadow: inset 0 0 0 .517px rgba(245, 245, 245, .45);  /* вдвое тоньше макета и тише */
  opacity: .999;                                      /* свой слой – обводка не мылится */
}
/* Устройство снято с micheledu.com: пилюля, внутри три ДОЛИ РОВНО ПО ТРЕТИ,
   заливка активного скруглена на ВСЕ стороны. Ровность там держится не длиной
   блоков, а тем, что залитая плашка читается отдельной таблеткой: круглая с
   обеих сторон, а не приваренная к краю пилюли */
.site-nav__pill > li { display: flex; flex: 1 1 0; min-width: 0; }

.site-nav__link {
  position: relative; display: flex; align-items: center; justify-content: center;
  flex: 1 1 auto; width: 100%; height: 25px; padding: 0 10px; border-radius: 999px;
  font-family: var(--font-ui, "Inter Tight"), sans-serif;
  font-size: 11.784px; line-height: 14.885px; font-weight: 400;
  color: currentColor; text-decoration: none; white-space: nowrap;
  transition: background-color .18s ease, color .18s ease;
}
/* зона нажатия догоняет 45px по высоте, вид не меняется */
.site-nav__link::after { content: ""; position: absolute; left: 0; right: 0; top: -10px; bottom: -10px; }

/* Неактивные пункты приглушены – так «Услуги» и «Статьи» и выглядели раньше
   за счет aria-disabled. У «Компетенций» раздел появился, и без этого правила
   пункт стал единственным темным в пилюле */
.site-nav__link { opacity: .5; }
.site-nav__link[aria-current="true"] { opacity: 1; }

/* подсветка при наведении – затемнение/осветление той же силы по восприятию */
.site-nav__link:hover { background: rgba(245, 245, 245, .14); }
.site-nav__link:not([aria-disabled="true"]):hover { opacity: 1; }
.site-nav.is-light .site-nav__link:hover { background: rgba(31, 30, 31, .10); }

/* АКТИВНЫЙ пункт – как в макете: залитая пилюля, текст инвертирован */
.site-nav__link[aria-current="true"] {
  background: #f5f5f5; color: #1f1e1f;
}
.site-nav.is-light .site-nav__link[aria-current="true"] {
  background: #1f1e1f; color: #f5f5f5;
}

.site-nav__link:focus-visible {
  outline: 2px solid currentColor; outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(1, 1, 2, .55); z-index: 1;
}
.site-nav.is-light .site-nav__link:focus-visible { box-shadow: 0 0 0 4px rgba(245, 245, 245, .7); }

/* пункты, за которыми пока нет раздела */
.site-nav__link[aria-disabled="true"] { opacity: .5; cursor: default; }

@media (forced-colors: active) {
  .site-nav__pill { box-shadow: none; outline: 1px solid CanvasText; outline-offset: -1px; }
  .site-nav__link[aria-current="true"] { background: Highlight; color: HighlightText; }
  .site-nav__link:hover, .site-nav__link:focus-visible { background: transparent; }
}

/* узкие экраны: пилюля сжимается по содержимому и уходит под кролика */
@media (max-width: 760px) {
  .site-nav { flex-wrap: wrap; row-gap: 10px; }
  .site-nav__menu {
    position: static; order: 3; width: 100%; display: flex; justify-content: center;
    transform: none;
  }
  /* Ширина как на десктопе, пока влезает: по содержимому пункты слипались,
     «Проекты» почти упирались в «Компетенции» */
  .site-nav__pill { min-width: min(357px, calc(100dvw - 32px)); }
  .site-nav__link { padding: 0 10px; }
}

@media (prefers-reduced-motion: reduce) {
  .site-nav, .site-nav__link, .site-nav__rabbit img { transition: none; }
}

/* Подложки у шапки нет НИГДЕ: на узких экранах она давала видимую плашку под
   меню, которой на десктопе не было. Шапка прозрачная на всех ширинах. */