/* ============================================================
   Панель сервисов «Все сервисы в одном месте» — Вариант 2
   Стеклянная полоса во всю ширину под навбаром.
   Классы в BEM, чтобы не конфликтовать с существующими .nav-* стилями.
   ============================================================ */

.services-bar {
    background: rgba(255, 255, 255, 0.62);
    -webkit-backdrop-filter: blur(18px) saturate(140%);
    backdrop-filter: blur(18px) saturate(140%);
    border-bottom: 1px solid rgba(15, 40, 38, 0.08);
}

.services-bar__inner {
    display: flex;
    align-items: center;
    gap: 1.5rem;
    height: 58px;
    /* если на узком десктопе не влезает — мягкий горизонтальный скролл вместо переноса */
    overflow-x: auto;
    scrollbar-width: none;
}
.services-bar__inner::-webkit-scrollbar { display: none; }

.services-bar__label {
    color: #6b7a78;
    font-size: 0.92rem;
    font-weight: 600;
    white-space: nowrap;
    letter-spacing: 0.01em;
    flex-shrink: 0;
}

.services-bar__list {
    display: flex;
    align-items: center;
    gap: 0.35rem;
    flex-wrap: nowrap;
}

.services-bar__item {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 1.05rem;
    border-radius: 11px;
    font-weight: 600;
    font-size: 0.98rem;
    color: #46514f;
    text-decoration: none;
    white-space: nowrap;
    transition: background 0.2s ease, color 0.2s ease, box-shadow 0.2s ease;
}

.services-bar__item i {
    color: #09B6A2;
    font-size: 1rem;
    transition: color 0.2s ease;
}

.services-bar__item:hover {
    background: rgba(255, 255, 255, 0.72);
    color: #079383;
}

.services-bar__item.is-active {
    background: linear-gradient(120deg, #09B6A2 0%, #079383 100%);
    color: #fff;
    box-shadow: 0 6px 16px rgba(9, 182, 162, 0.32);
}
.services-bar__item.is-active i { color: #fff; }

/* ============================================================
   Фиксация шапки на лендингах
   На лендингах навбар position:fixed (см. _Layout). Чтобы стеклянная
   панель шла единым блоком сразу под меню (без наложения), фиксируем
   <header> целиком, а навбар внутри делаем обычным потоком.
   Глобально body уже имеет padding-top:70px под навбар (home.css);
   на десктопе лендинга добавляем высоту панели (58px) => 128px.
   ============================================================ */
/* Только на десктопе (lg+), где панель видна. На мобиле ничего не трогаем:
   навбар остаётся со своим position:fixed, бургер-меню работает как раньше. */
@media (min-width: 992px) {
    .landing-page header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        z-index: 1000;
    }
    .landing-page .navbar {
        position: static !important;
    }
    /* Глобально body имеет padding-top:70px под навбар (home.css);
       на лендинге добавляем высоту панели (58px) => 128px. */
    body.landing-page {
        padding-top: 128px;
    }
}

/* ============================================================
   Тёмное верхнее меню — страница «Инфографика» (body.nav-theme-dark)
   Навбар и панель сервисов сливаются с тёмным hero.
   Только десктоп (lg+): на мобиле навбар остаётся светлым, а бургер-меню
   раскрывается белой панелью — тёмные пункты на ней читаются.
   ============================================================ */
@media (min-width: 992px) {
    /* hero идёт во всю высоту под фиксированной тёмной шапкой (блендинг),
       а не отодвигается вниз — поэтому убираем отступ body. Контент hero
       центрирован (min-height:100vh), под шапку не попадает. */
    body.nav-theme-dark {
        padding-top: 0;
    }

    .nav-theme-dark .navbar {
        background: rgba(9, 26, 24, 0.55) !important;
        -webkit-backdrop-filter: blur(14px) saturate(140%);
        backdrop-filter: blur(14px) saturate(140%);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08) !important;
    }
    .nav-theme-dark .navbar.navbar-floating {
        background: rgba(9, 26, 24, 0.82) !important;
        box-shadow: 0 2px 18px rgba(0, 0, 0, 0.35);
    }

    .nav-theme-dark .navbar-brand,
    .nav-theme-dark .navbar-brand:hover {
        color: #fff !important;
    }

    .nav-theme-dark .nav-link {
        color: rgba(255, 255, 255, 0.85) !important;
    }
    .nav-theme-dark .nav-link:hover,
    .nav-theme-dark .nav-link.active {
        color: #fff !important;
    }
    .nav-theme-dark .navbar-divider {
        background-color: rgba(255, 255, 255, 0.18);
    }

    /* «Войти» — только в навбаре (не в футере) */
    .nav-theme-dark .navbar .nav-link-login {
        color: rgba(255, 255, 255, 0.8) !important;
    }
    .nav-theme-dark .navbar .nav-link-login:hover {
        color: #fff !important;
        background-color: rgba(255, 255, 255, 0.1);
    }

    /* CTA «Личный кабинет / Попробовать» — белый контур, teal-заливка на ховере.
       Скоуп .navbar обязателен: тот же класс .nav-link-cta используется в футере. */
    .nav-theme-dark .navbar .nav-link-cta {
        color: #fff !important;
        border-color: rgba(255, 255, 255, 0.85) !important;
    }
    .nav-theme-dark .navbar .nav-link-cta:hover {
        color: #fff !important;
        border-color: #09B6A2 !important;
    }

    /* Панель сервисов — тёмное стекло */
    .nav-theme-dark .services-bar {
        background: rgba(9, 26, 24, 0.5);
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
    }
    .nav-theme-dark .services-bar__label {
        color: rgba(255, 255, 255, 0.6);
    }
    .nav-theme-dark .services-bar__item {
        color: rgba(255, 255, 255, 0.82);
    }
    .nav-theme-dark .services-bar__item i {
        color: #5ff0dc;
    }
    .nav-theme-dark .services-bar__item:hover {
        background: rgba(255, 255, 255, 0.1);
        color: #fff;
    }
    /* активный пункт остаётся залит teal-плашкой */
    .nav-theme-dark .services-bar__item.is-active { color: #fff; }
    .nav-theme-dark .services-bar__item.is-active i { color: #fff; }
}