/* Tetra — стили компонента NAVBAR. */

/* плавное переключение цвета текста/лого и фона меню по секциям.
   Классы темы (`is-theme-light`) ставит tetra-navbar.js по атрибуту
   [navbar-color] на секциях. База (без класса) = тёмная тема. */
.navbar-container .nav-link,
.navbar-container .navbar-logo-svg { transition: color .35s ease; }
.navbar .nav-menu,
.navbar-container .nav-link:hover,
.navbar-container .nav-link:focus-visible { transition: background-color .35s ease; }

/* --- тёмная тема навбара (над тёмными секциями): белый текст --- */
.navbar-container .nav-link,
.navbar-container .navbar-logo-svg {
  color: #FFFFFF;
}
.navbar .nav-menu {
  background-color: rgba(255, 255, 255, 0.06);
}
.navbar .nav-link:hover,
.navbar .nav-link:focus-visible {
  background-color: rgba(255, 255, 255, 0.06);
}

/* --- светлая тема навбара (над светлыми секциями): тёмный текст по токену --- */
.navbar.is-theme-light .navbar-container .nav-link,
.navbar.is-theme-light .navbar-container .navbar-logo-svg {
  color: var(--_tetra-tokens---color-dark, #090e13);
}
.navbar.is-theme-light .nav-menu {
  background-color: rgba(37, 25, 21, 0.04);
}
.navbar.is-theme-light .nav-link:hover,
.navbar.is-theme-light .nav-link:focus-visible {
  background-color: rgba(37, 25, 21, 0.06);
}

/* --- мобильное меню открыто (класс ставит tetra-navbar.js): шторка белая,
   лого тёмное независимо от темы секции под ним --- */
.navbar.is-menu-open .navbar-container .navbar-logo-svg {
  color: var(--_tetra-tokens---color-dark, #090e13);
}

/* --- логотип (Tetra / CADD / Tetra Trust): цвета по утверждённым вариантам.
   tetra-navbar.js встраивает SVG и ставит на заливки роли logo-ink (текст),
   logo-mark (знак) и logo-leaf (лист в монете CADD).
   Тёмная тема: всё белое, лист CADD красный. Светлая тема и открытое
   меню: текст #121212, знак красный, лист белый. --- */
.navbar-container .navbar-logo-svg { --logo-ink: #FFFFFF; --logo-mark: #FFFFFF; --logo-leaf: #CE191D; }
.navbar.is-theme-light .navbar-container .navbar-logo-svg,
.navbar.is-menu-open .navbar-container .navbar-logo-svg { --logo-ink: #121212; --logo-mark: #CE191D; --logo-leaf: #FFFFFF; }
.navbar-logo-svg .logo-ink { fill: var(--logo-ink); }
.navbar-logo-svg .logo-mark { fill: var(--logo-mark); }
.navbar-logo-svg .logo-leaf { fill: var(--logo-leaf); }
.navbar-logo-svg .logo-ink,
.navbar-logo-svg .logo-mark,
.navbar-logo-svg .logo-leaf { transition: fill .35s ease; }
/* пока SVG не встроен (или JS не загрузился): на тёмной теме делаем <img> белым */
.navbar:not(.is-theme-light):not(.is-menu-open) img.navbar-logo-svg { filter: brightness(0) invert(1); }

/* ===== подложка логотипа: только блюр 12px (как у меню), без цвета —
   на белом и чёрном фоне её не видно, над контентом логотип читается.
   Псевдоэлементом, чтобы не трогать размеры и положение логотипа.
   Важно: у .navbar-logo нельзя will-change: opacity (tetra-navbar.js) —
   это backdrop root, и блюр видел бы только содержимое логотипа. --- */
.navbar-container .navbar-logo { position: relative; isolation: isolate; }
.navbar-container .navbar-logo::before {
  content: "";
  position: absolute;
  inset: -.435rem -1rem;
  z-index: -1;
  border-radius: .38rem;
  -webkit-backdrop-filter: blur(12px);
  backdrop-filter: blur(12px);
}
/* пока tetra-navbar.js не выставил тему по секции (.is-theme-ready) —
   цвета не анимируем, иначе на светлых страницах лого сначала белое */
.navbar:not(.is-theme-ready) .navbar-container .navbar-logo-svg,
.navbar:not(.is-theme-ready) .navbar-logo-svg *,
.navbar:not(.is-theme-ready) .nav-menu,
.navbar:not(.is-theme-ready) .nav-link { transition: none !important; }

/* ===== mobile scroll performance (<=479px) ===== */
@media screen and (max-width: 479px) {
  /* backdrop-filter внутри фиксированной шапки — главный тормоз скролла на
     телефоне: браузер пересчитывает блюр фона на каждом кадре. */
  .nav-menu,
  .nav-bttns-wrap.is-mob,
  .mobile-nav-bttn {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
}

/* ===== mobile menu (<=479px) — Figma «Mobile menu — v3 Fullscreen compact»
   (12410:148): белая шторка, крупные пункты с разделителями; текущая
   страница (Webflow ставит .w--current) — 100% + красная точка, остальные 40%. */
@media screen and (max-width: 479px) {
  .nav-link.is-mob-item { opacity: 0.4; }
  .nav-link.is-mob-item.w--current { opacity: 1; }
  .nav-link.is-mob-item.w--current .mob-item_dot { display: block; }
  /* маски выезда (tetra-navbar.js) — на всю ширину, иначе разделители
     пунктов и кнопка сужаются до ширины текста */
  .nav-menu-mobile .mob-menu-mask { width: 100%; }
  /* меню открыто: в шапке остаётся только крестик на сером квадрате */
  /* кнопка не пропадает рывком, а плавно гаснет и схлопывается в ширину */
  .mobile-nav-bttn-wrapper { transition: background-color .35s ease; }
  .mobile-nav-bttn-wrapper .button.is-nav-bttn {
    max-width: 12rem;
    overflow: hidden;
    white-space: nowrap;
    transform-origin: 100% 50%;
    transition: opacity .25s ease,
                transform .35s cubic-bezier(.22, 1, .36, 1),
                max-width .45s cubic-bezier(.22, 1, .36, 1),
                padding .45s cubic-bezier(.22, 1, .36, 1),
                margin .45s cubic-bezier(.22, 1, .36, 1);
  }
  .mobile-nav-bttn-wrapper:has(.mobile-nav-bttn.active) { background-color: #f6f6f6; }
  .mobile-nav-bttn-wrapper:has(.mobile-nav-bttn.active) .button.is-nav-bttn {
    max-width: 0;
    padding-left: 0;
    padding-right: 0;
    margin-right: -0.25rem; /* съедаем gap обёртки, чтобы крестик встал на место */
    opacity: 0;
    transform: scale(0.92);
    pointer-events: none;
  }
}