/* ===== HEADER STABILITY HOTFIX (final) ===== */

/* Скроллбар без «прыжка» и защита от горизонтального скролла */
html { scrollbar-gutter: stable both-edges; }
body { overflow-x: hidden; }

/* Сетка шапки: logo | nav | actions */
.top-bar{
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 1.6rem;
  width: 100%;
  min-height: 5.2rem;
}

/* Логотип не «схлопывается» и не тянет строку */
.top-bar .logo { min-width: 0; }
.top-bar .logo img{
  display: block;
  height: clamp(3.2rem, 6vw, 5.2rem);
  width: auto;
  object-fit: contain;
}

/* Навигация по центру, без переносов */
.top-bar .nav{
  position: relative;
  z-index: 20;
  justify-self: center;
  min-width: 0;
}
.top-bar .nav-list{
  display: flex;
  align-items: center;
  justify-content: center;
  gap: clamp(1.2rem, 2.4vw, 3.2rem);
  margin: 0;
  padding: 0;
  list-style: none;
  flex-wrap: nowrap;
  white-space: nowrap;
}
.top-bar .nav-item{ position: relative; }

/* Кнопки-триггеры как ссылки; текст не бледнеет и не «сжимается» */
.top-bar .nav-trigger{
  -webkit-appearance: none;
  appearance: none;
  background: none;
  border: 0;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: .6rem;
  padding: .6rem 0;
  margin: 0;
  font: inherit;
  font-weight: 600;
  line-height: 1.25;
  letter-spacing: .02em;
  color: var(--nav-color, #1b2a2e);
  white-space: nowrap;
  position: relative;
  overflow: hidden; /* для ripple */
}
.top-bar .nav-trigger:focus-visible{
  outline: .12rem solid var(--c-primary, #2aa574);
  outline-offset: .12rem;
  border-radius: .4rem;
}

/* Выпадающее меню — не двигает контент, с ландшафтным тоном */
.top-bar .submenu{
  position: absolute;
  left: 50%;
  top: 100%;
  margin-top: .4rem;
  transform: translateX(-50%) scale(.98);
  min-width: 18rem;
  max-width: 32rem;
  padding: .8rem;
  border-radius: .8rem;
  background:
    linear-gradient(180deg, rgba(34, 211, 161, .10), rgba(34, 211, 161, .06)),
    #fff;
  color: #0e161a;
  border: .08rem solid rgba(34, 211, 161, .18);
  box-shadow:
    0 .8rem 2.4rem rgba(0,0,0,.12),
    0 0 0 .12rem rgba(34, 211, 161, .08);
  opacity: 0;
  pointer-events: none;
  transition: opacity .16s ease, transform .16s ease;
  z-index: 2000;
}
.top-bar .submenu.is-open{
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) scale(1);
}
.top-bar .submenu li{ list-style: none; }
.top-bar .submenu-link{
  display: block;
  padding: .9rem 1.2rem;
  border-radius: .6rem;
  color: inherit;
  text-decoration: none;
  line-height: 1.35;
  white-space: nowrap;
}
.top-bar .submenu-link:hover,
.top-bar .submenu-link:focus-visible{
  background: rgba(34, 211, 161, .12);
  outline: none;
}
/* Нативные <select> внутри подменю — в том же ключе */
.top-bar .submenu select{
  background:
    linear-gradient(180deg, rgba(34, 211, 161, .10), rgba(34, 211, 161, .04)),
    #fff;
  border: .08rem solid rgba(34, 211, 161, .22);
  border-radius: .6rem;
  position: static !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}

/* Правый блок: мессенджер, кнопка, телефон — всегда в одну строку */
.top-bar .header-actions{
  display: flex;
  align-items: center;
  gap: 1.2rem;
  white-space: nowrap;
}
.top-bar .header-actions > *{ flex: 0 0 auto; }

/* Телефон не переносится */
.top-bar .phone{
  font-weight: 700;
  white-space: nowrap;
  overflow-wrap: normal;
  word-break: keep-all;
}

/* Кнопка не сужается */
.top-bar .btn,
.top-bar .cta-btn{ flex: 0 0 auto; }

/* Навбар не обрезает выпадашку */
.top-bar,
.top-bar .nav,
.top-bar .nav-item { overflow: visible; }

/* Отключаем старые hover/focus-within-открытия, работаем по aria-expanded */
.nav .has-submenu:hover > .submenu,
.nav .has-submenu:focus-within > .submenu{
  opacity: 0 !important;
  pointer-events: none !important;
  transform: translateX(-50%) scale(.98) !important;
}
.top-bar .nav-item > .nav-trigger[aria-expanded="true"] + .submenu{
  opacity: 1 !important;
  pointer-events: auto !important;
  transform: translateX(-50%) scale(1) !important;
}

/* Прячем только прямые <select> у .nav (если такие есть), не внутри подменю */
.top-bar .nav > select{
  position: absolute !important;
  width: 1px;
  height: 1px;
  left: -999rem;
  top: auto;
  opacity: 0;
  pointer-events: none;
}

/* Ripple без влияния на размеры */
.ripple{ position: relative; overflow: hidden; }
.ripple .ripple-effect{
  position: absolute;
  inset: auto;
  pointer-events: none;
  transform: translate(-50%, -50%);
}

/* Тёмная тема для подменю */
html.dark .top-bar .submenu,
[data-theme="dark"] .top-bar .submenu{
  background:
    linear-gradient(180deg, rgba(34, 211, 161, .06), rgba(34, 211, 161, .03)),
    var(--c-panel, #0d2f20);
  color: var(--c-txt, #e6f2ec);
  border: .08rem solid rgba(34, 211, 161, .22);
  box-shadow:
    0 .8rem 2.4rem rgba(0,0,0,.50),
    0 0 0 .12rem rgba(34, 211, 161, .10);
}
html.dark .top-bar .submenu-link:hover,
[data-theme="dark"] .top-bar .submenu-link:focus-visible{
  background: rgba(34, 211, 161, .14);
}

/* Медиазапросы: только уменьшение интервалов/высоты без лома строки */
@media (max-width: 64rem){
  .top-bar .nav-list{ gap: clamp(.8rem, 2vw, 2rem); }
  .top-bar .logo img{ height: clamp(3rem, 5vw, 4.2rem); }
}
@media (max-width: 48rem){
  .top-bar .nav{ justify-self: start; }
  .top-bar .nav-list{
    justify-content: flex-start;
    overflow: auto;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  .top-bar .nav-list::-webkit-scrollbar{ display: none; }
}

/* === Page side padding / воздух слева и справа ========================== */
:root{
  /* Макс. ширина контента и адаптивные поля */
  --container-max: 106rem;                /* ≈ 1216px, подправь при желании */
  --page-gutter: clamp(1rem, 3.2vw, 2.4rem);
  --page-gutter-xl: clamp(1.2rem, 4vw, 3.2rem);
}

/* Базовый контейнер для всех секций */
.container{
  max-width: var(--container-max);
  margin-inline: auto;
  padding-inline: var(--page-gutter);
}

/* Чуть больше воздуха для хедера и футера */
.top-bar.container,
.footer .footer-container.container{
  padding-inline: var(--page-gutter-xl);
}

/* На очень широких — можно ещё «свободнее» (опционально) */
@media (min-width: 90rem){ /* ≈ 1440px */
  :root{
    --page-gutter: clamp(1.2rem, 2.2vw, 3rem);
    --page-gutter-xl: clamp(1.6rem, 3vw, 4rem);
  }
}

.footer-menu-company {
    padding-left: 4rem;
}

/* === Footer: layout как на макете (2х2 колонки + правый сайдбар) ======= */

/* Базовые цвета/типографика футера */
.footer{
  background:#26262b; color:#eceeef;
}
.footer a{ color:#e5eaeb; text-decoration:none; }
.footer a:hover{ color:#ffffff; text-decoration:underline; }

/* Контейнер футера: слева меню, справа контакты/рейтинг */
.footer .footer-container{
  display:grid;
  grid-template-columns: 1fr minmax(22rem, 32rem); /* левый блок + правый сайдбар */
  gap: 2.4rem 4rem;
  align-items:start;
}

/* Сетка меню: 2×2 по областям, чтобы не трогать порядок в DOM */
.footer .footer-nav{
  display:grid;
  grid-template-areas:
    "products clients"
    "projects company";
  grid-template-columns: 1fr 1fr;
  gap: 3rem 6rem;
}

/* Привязка списков к областям */
.footer .footer-menu-products      { grid-area: products; }
.footer .footer-menu-client-info   { grid-area: clients;  }
.footer .footer-menu-projects      { grid-area: projects; }
.footer .footer-menu-company       { grid-area: company;  }

/* Заголовки разделов */
.footer .footer-menu__title{
  margin: 0 0 1.2rem;
  font-weight: 800;
  font-size: 2rem;            /* ≈32px */
  line-height: 1.2;
  letter-spacing: .02em;
  text-transform: uppercase;
  color:#fff;
}

/* Списки ссылок */
.footer .footer-menu{
  list-style:none;
  margin:0; padding:0;
}
.footer .footer-menu li{ margin: .7rem 0; }
.footer .footer-menu li a{ display:inline-block; line-height:1.5; }

/* Сбросим прежний «костыль» с опусканием второй колонки */
.footer .footer-menu-client-info{ margin-top: 0 !important; }

/* Правый сайдбар (контакты + рейтинг + соцсети) */
.footer .footer-contacts{
  display:grid;
  justify-items:end;
  align-content:start;
  gap: 2rem;
}

/* Телефоны и кнопка */
.footer .contacts-list{
  display:grid; gap:.4rem;
  justify-items:end; margin:0; padding:0; list-style:none;
}
.footer .contacts-call-button{
  margin-top:.8rem;
  font-weight:800; text-transform:uppercase;
}

/* Карточка рейтинга — белая, скруглённая */
.footer .footer-rating{
  background:#fff; color:#222;
  border-radius: 1.2rem;
  box-shadow: 0 .4rem 2rem rgba(0,0,0,.18);
  padding: 1.2rem 1.6rem;
  width: min(100%, 30rem);
}
.footer .rating-overall{
  display:flex; align-items:baseline; gap:.6rem;
  font-weight:800; margin-bottom:.8rem;
}
.footer .rating-score{ font-size:2.6rem; line-height:1; }
.footer .rating-scale{ opacity:.6; }
.footer .rating-label{ margin-inline-start:auto; opacity:.7; }

/* Полоски рейтинга */
.footer .rating-categories{ display:grid; gap:.6rem; }
.footer .rating-category{ display:grid; grid-template-columns: 10rem 1fr auto; align-items:center; gap:.8rem; }
.footer .category-name{ font-weight:600; opacity:.9; }
.footer .progress-bar{
  height:.85rem; border-radius:1rem; background:#eceff1; position:relative; overflow:hidden;
}
.footer .progress-fill{
  height:100%; border-radius:1rem;
  background: linear-gradient(90deg, #ffb400, #ff8c00);
}

/* Социальные иконки */
.footer .footer-socials{
  display:flex; gap:1rem; justify-content:flex-end;
}
.footer .footer-socials .social-link{
  display:inline-flex; width:2.4rem; height:2.4rem; border-radius:.6rem;
  background: rgba(255,255,255,.1);
  align-items:center; justify-content:center;
}
.footer .footer-socials img{ width:1.5rem; height:1.5rem; display:block; }

/* Копирайт по центру */
.footer .footer-copyright{
  grid-column: 1 / -1;
  text-align:center; margin-top: 1.6rem; opacity:.7;
}

/* Адаптив: на планшете правая колонка уже и меню в 2 колонки */
@media (max-width: 64rem){
  .footer .footer-container{
    grid-template-columns: 1fr minmax(18rem, 24rem);
    gap: 2rem;
  }
  .footer .footer-nav{ gap: 2rem 3rem; }
  .footer .footer-menu__title{ font-size: 1.8rem; }
}

/* Мобильный: всё в одну колонку, порядок — меню → контакты → копирайт */
@media (max-width: 40rem){
  .footer .footer-container{
    grid-template-columns: 1fr;
  }
  .footer .footer-nav{
    grid-template-areas:
      "products"
      "clients"
      "projects"
      "company";
    grid-template-columns: 1fr;
    row-gap: 2rem;
  }
  .footer .footer-contacts{ justify-items:start; }
  .footer .footer-rating{ width: 100%; }