/*
 * Ziggurat BIM — Header
 * Дві панелі: topbar (лого, контакти, мови, CTA) + header-nav (меню).
 * Значення зняті з макета: 414:6058 та 356:2838.
 */

.site-header {
    position: relative;
    z-index: var(--z-sticky);
}

/* Приклеюється лише нижня панель (меню) — topbar (лого/контакти/CTA)
   скролиться зі сторінкою звичайно. header-nav навмисно винесений у
   header.php ЗА межі <header> — інакше його containing block це
   .site-header (topbar+nav заввишки ~120px), і sticky тримається лише
   в межах цієї короткої висоти, а не по всій сторінці.
   На мобайлі/планшеті (≤1024px) бургер-кнопка живе в topbar, тож там
   лишаємо nav нестікі — інакше після скролу зникає спосіб відкрити меню. */
@media (min-width: 1025px) {
    .header-nav.is-sticky {
        position: sticky;
        top:      0;
        z-index:  var(--z-sticky);
    }
}

/* Панелі хедера ширші за контентний контейнер — так у макеті. */
.container--wide { max-width: var(--container-wide); }

/* ── Спільне тло обох панелей ───────────────────────────────────────────── */
.topbar,
.header-nav {
    background:              rgba(2, 26, 68, .7);
    backdrop-filter:         blur(47px);
    -webkit-backdrop-filter: blur(47px);
    border-bottom:           1px solid rgba(255, 255, 255, .1);
    box-shadow:              0 1px 4px rgba(0, 0, 0, .15);
}

/* ── Верхня панель ──────────────────────────────────────────────────────── */
.topbar { padding: 10px 0; }

.topbar__wrp {
    display:         flex;
    align-items:     center;
    justify-content: space-between;
    gap:             20px;
    min-height:      42px;
}

/* Лого */
.site-logo {
    display:         flex;
    align-items:     center;
    gap:             13px;
    text-decoration: none;
    flex:            none;
}

.site-logo__mark { display: block; width: 46px;  height: 38px; }
.site-logo__word { display: block; width: 123px; height: 19px; }

.site-logo__lockup {
    display:        flex;
    flex-direction: column;
    gap:            5px;
}

.site-logo__tagline {
    font-size:      14px;
    font-weight:    400;
    line-height:    1;
    letter-spacing: 3.64px;
    color:          #fff;
    opacity:        .8;
}

/* Права група */
.topbar__actions {
    display:     flex;
    align-items: center;
    gap:         8px;
}

.topbar__chip {
    display:         flex;
    align-items:     center;
    gap:             8px;
    height:          42px;
    padding:         0 12px;
    background:      #0e2652;
    border:          1px solid var(--color-border-blue);
    border-radius:   10px;
    color:           #fff;
    text-decoration: none;
    white-space:     nowrap;
    transition:      border-color var(--transition);
}

.topbar__chip:hover,
.topbar__chip:focus-visible { border-color: var(--color-border-hover); }

.topbar__phone span { font-size: 18px; color: #fff; }
.topbar__phone .icon { flex: none; }

/* Перемикач мов */
.lang-switch {
    gap:            4px;
    font-size:      13px;
    text-transform: uppercase;
}

.lang-switch__item {
    color:           var(--color-text-light);
    text-decoration: none;
    font-weight:     400;
    transition:      color var(--transition);
}

.lang-switch__item.is-active {
    color:       var(--color-yellow);
    font-weight: 600;
}

.lang-switch__item:hover { color: #fff; }
.lang-switch__sep        { color: var(--color-text-light); }

/* LinkedIn */
.topbar__social {
    display:         flex;
    align-items:     center;
    justify-content: center;
    flex:            none;
    width:           42px;
    height:          42px;
    background:      #0e2652;
    border:          .875px solid rgba(175, 187, 215, .3);
    border-radius:   10px;
    transition:      border-color var(--transition);
}

.topbar__social:hover,
.topbar__social:focus-visible { border-color: var(--color-border-hover); }

.topbar__social .icon { width: 17.5px; height: 15.75px; }

/* ── Кнопка CTA ─────────────────────────────────────────────────────────── */
.btn--primary {
    position:        relative;
    overflow:        hidden;
    display:         inline-flex;
    align-items:     center;
    gap:             10px;
    height:          42px;
    padding:         14px 22px;
    border:          1px solid rgba(255, 255, 255, .2);
    border-radius:   10px;
    /* Суцільний hover-колір лежить тут, в самому фоні — а дефолтний
       градієнт зверху як окремий шар (::before), що плавно тане на
       ховері. background-image неможливо плавно перетворити на
       background-color транзишеном (браузер просто підміняє миттєво),
       тому анімуємо opacity шару — це інтерполюється нормально. */
    background:      #295bdd;
    box-shadow:      0 16px 40px -16px rgba(17, 65, 151, .9);
    color:           #fff;
    font-size:       16px;
    font-weight:     400;
    letter-spacing:  .32px;
    text-decoration: none;
    white-space:     nowrap;
    transition:      box-shadow var(--transition);
}

.btn--primary::before {
    content:          '';
    position:         absolute;
    inset:            0;
    z-index:          0;
    border-radius:    inherit;
    background-image: linear-gradient(90deg, #2d79e8 0%, #5ea8f8 100%);
    opacity:          1;
    transition:       opacity var(--transition);
}

.btn--primary .btn__label,
.btn--primary .icon { position: relative; z-index: 1; }

.btn--primary .icon { flex: none; }

/* Ховер (Variant2, 16:137): дефолтний градієнт (::before) плавно тане,
   лишаючи суцільний hover-колір з background. Тінь — більша й
   розмитіша, але менш щільна (button ніби піднімається вище). */
.btn--primary:hover,
.btn--primary:focus-visible,
.btn--primary:active {
    box-shadow: 0 26px 60px -16px rgba(17, 65, 151, .6);
}

.btn--primary:hover::before,
.btn--primary:focus-visible::before,
.btn--primary:active::before {
    opacity: 0;
}

/* Біжучий відблиск по градієнту — як у макеті.
   inset:0, не -1px — overshoot за межі border-box на стику з
   overflow:hidden + border-radius лишав тонкий білий шов зліва
   (артефакт композитингу на межі кліпу). */
.btn__shine {
    position:          absolute;
    inset:             0;
    background:        linear-gradient(100deg,
                          transparent 0%, rgba(255, 255, 255, .38) 50%, transparent 100%);
    background-size:   45% 100%;
    background-repeat: no-repeat;
    animation:         btn-shine 3.5s linear infinite;
}

@keyframes btn-shine {
    from { background-position: -60% 0; }
    to   { background-position: 170% 0; }
}

/* ── Бургер ─────────────────────────────────────────────────────────────── */
.menu-toggle {
    display:         none;
    flex-direction:  column;
    justify-content: center;
    gap:             4px;
    width:           42px;
    height:          42px;
    padding:         0 11px;
    background:      #0e2652;
    border:          1px solid var(--color-border-blue);
    border-radius:   10px;
    cursor:          pointer;
}

.menu-toggle span {
    display:       block;
    height:        2px;
    background:    #fff;
    border-radius: 2px;
    transition:    transform var(--transition), opacity var(--transition);
}

.menu-toggle.is-active span:nth-child(1) { transform: translateY(6px) rotate(45deg); }
.menu-toggle.is-active span:nth-child(2) { opacity: 0; }
.menu-toggle.is-active span:nth-child(3) { transform: translateY(-6px) rotate(-45deg); }

/* ── Нижня панель: меню ─────────────────────────────────────────────────── */
/* 4px згори й знизу — щоб підсвітка пункту на ховері не прилипала
   до країв панелі. */
.header-nav { padding: 4px 0; }

.nav-primary__list {
    display:         flex;
    align-items:     center;
    justify-content: center;
    gap:             6px;
    list-style:      none;
}

/* Дефолт: тільки текст, без тла й підкреслення (у макеті лінія порожня). */
.nav-primary .menu-item > a {
    position:        relative;
    display:         block;
    padding:         18px 14px 10px;
    border-radius:   6px;
    font-size:       18px;
    line-height:     1.33;
    color:           #afbbd7;
    text-decoration: none;
    transition:      background var(--transition);
}

/* Ховер: підсвітка тла + градієнтна лінія на всю ширину пункту.
   Колір тексту в макеті НЕ змінюється — лишається #afbbd7. */
.nav-primary .menu-item > a::after {
    content:          '';
    position:         absolute;
    left:             0;
    right:            0;
    bottom:           0;
    height:           1px;
    border-radius:    2px;
    background:       var(--gradient-accent);
    transform:        scaleX(0);
    transform-origin: center;
    transition:       transform var(--transition);
}

.nav-primary .menu-item > a:hover,
.nav-primary .menu-item > a:focus-visible,
.nav-primary .current-menu-item > a,
.nav-primary .current-menu-ancestor > a { background: rgba(255, 255, 255, .05); }

.nav-primary .menu-item > a:hover::after,
.nav-primary .menu-item > a:focus-visible::after,
.nav-primary .current-menu-item > a::after,
.nav-primary .current-menu-ancestor > a::after { transform: scaleX(1); }

/* ── Підменю ───────────────────────────────────────────────────────────────
   Вигляд узятий з дропдауна шаблону замовника (.nav-submenu), перекладений
   на рідні класи WordPress. Пункт з дітьми — це посилання плюс окрема
   кнопка-розкривач: сторінка лишається клікабельною, підменю відкривається
   кнопкою (на тачі ховера немає). На десктопі працює і ховер, і кнопка.

   Стан тримає клас .is-submenu-open на .menu-item-has-children — його
   ставить navSubmenu() у js/main.js. */
.nav-primary .menu-item-has-children {
    position: relative;
    display:  flex;
    align-items: center;
}

.nav-primary__toggle {
    display:        grid;
    place-items:    center;
    width:          26px;
    height:         26px;
    margin-left:    -6px;
    padding:        0;
    border:         0;
    border-radius:  6px;
    background:     none;
    color:          #afbbd7;
    cursor:         pointer;
    transition:     background var(--transition), color var(--transition);
}

/* Ховер тепер підсвічує весь пункт (див. блок min-width: 1025px нижче),
   тож власного тла кнопці не треба. Лишаємо тільки для фокуса з клавіатури —
   інакше не видно, де стоїть каретка. */
.nav-primary__toggle:focus-visible { background: rgba(255, 255, 255, .05); }

.nav-primary__toggle-icon {
    transform:  rotate(90deg);
    transition: transform var(--transition);
}

.nav-primary .is-submenu-open > .nav-primary__toggle .nav-primary__toggle-icon {
    transform: rotate(-90deg);
}

.nav-primary .sub-menu {
    position:      absolute;
    top:           calc(100% + 8px);
    left:          50%;
    z-index:       var(--z-dropdown);
    display:       grid;
    gap:           4px;
    width:         320px;
    padding:       10px;
    border:        1px solid rgba(112, 171, 238, .18);
    border-radius: 14px;
    background:    linear-gradient(145deg, rgba(15, 48, 91, .98), rgba(5, 23, 52, .98));
    box-shadow:    0 22px 48px rgba(0, 6, 19, .42), inset 0 1px rgba(255, 255, 255, .04);
    list-style:    none;

    /* Ховаємо видимістю, а не display:none — інакше не буде переходу. */
    opacity:        0;
    visibility:     hidden;
    pointer-events: none;
    transform:      translate(-50%, -6px);
    transition:     opacity var(--transition), transform var(--transition), visibility var(--transition);
}

/* Місток через розрив.
   Панель відкривається на 8px нижче пункту (top: calc(100% + 8px)), і цей
   проміжок не належить ні пункту, ні панелі. Щойно курсор у нього входив —
   :hover на <li> губився і підменю зникало, не давши до себе дійти.
   Псевдоелемент належить .sub-menu, тобто лежить усередині <li>, тому
   наведення на нього тримає :hover батька. Він прозорий і не впливає на
   розкладку; ширший за пункт (на всю панель), тож будь-який рух униз
   потрапляє на нього. Живий лише коли підменю відкрите — у закритому стані
   на панелі стоїть pointer-events: none, і він успадковується. */
.nav-primary .sub-menu::before {
    content:  '';
    position: absolute;
    left:     0;
    right:    0;
    /* 10, а не рівно 8: на межі рівно в 8px лишався шов в один піксель,
       де курсор не належав ні пункту, ні містку. Заходимо на 2px під
       пункт — перекриття гарантоване. */
    top:      -10px;
    height:   10px;
}

.nav-primary .menu-item-has-children:hover > .sub-menu,
.nav-primary .menu-item-has-children:focus-within > .sub-menu,
.nav-primary .is-submenu-open > .sub-menu {
    opacity:        1;
    visibility:     visible;
    pointer-events: auto;
    transform:      translate(-50%, 0);
}

/* Специфічність рівна базовому `.nav-primary .menu-item > a` (0,2,1) —
   тому правило нижче по файлу виграє. Через клас підпункту, а не через
   .sub-menu a, щоб не покладатись на вкладеність. */
.nav-primary .nav-primary__subitem > a {
    display:               grid;
    grid-template-columns: 40px minmax(0, 1fr);
    align-items:           center;
    gap:                   12px;
    padding:               10px;
    border:                1px solid transparent;
    border-radius:         9px;
    color:                 var(--color-text);
    text-decoration:       none;
    transition:            border-color var(--transition), background var(--transition);
}

/* Без іконки текст займає всю ширину. */
.nav-primary .nav-primary__subitem > a:not(:has(.nav-primary__submenu-icon)) {
    grid-template-columns: minmax(0, 1fr);
}

.nav-primary .nav-primary__subitem > a::after { content: none; }

.nav-primary .nav-primary__subitem > a:hover,
.nav-primary .nav-primary__subitem > a:focus-visible {
    border-color: rgba(101, 178, 255, .2);
    background:   rgba(70, 139, 218, .12);
}

.nav-primary__submenu-icon {
    display:       grid;
    place-items:   center;
    width:         40px;
    height:        40px;
    border:        1px solid rgba(105, 182, 255, .25);
    border-radius: 8px;
    background:    rgba(36, 103, 180, .13);
    color:         #69b6ff;
}

/* Іконки підменю — контурні: фарбуємо обведенням, а не заливкою. */
.nav-primary__submenu-icon svg {
    width:              22px;
    height:             22px;
    fill:               none;
    stroke:             currentColor;
    stroke-width:       1.5;
    stroke-linecap:     round;
    stroke-linejoin:    round;
}

/* Своя іконка-растр із медіатеки (PNG/JPG) перефарбуванню не піддається —
   показуємо як є. Модифікатор ставить воркер, коли вкладення не SVG. */
.nav-primary__submenu-icon--raster img {
    display:    block;
    width:      22px;
    height:     22px;
    object-fit: contain;
}

.nav-primary__submenu-text {
    display:        flex;
    min-width:      0;
    flex-direction: column;
    gap:            3px;
}

.nav-primary__submenu-title {
    font-size:   13.5px;
    font-weight: 600;
    line-height: 1.3;
    color:       #f1f7ff;
}

.nav-primary__submenu-desc {
    font-size:   11.5px;
    font-weight: 400;
    line-height: 1.35;
    color:       rgba(205, 222, 244, .62);
}

/* Пункт із підменю — один цілісний блок.
   Тло й градієнтна лінія переїхали з <a> на <li>, тому підсвітка охоплює
   і назву, і стрілку, а лінія проходить під ними обома. Доти стрілка
   висіла поза фоном, а лінія обривалась перед нею.

   Тільки для десктопа: на мобільному .sub-menu лежить усередині цього ж
   <li>, і тло на ньому залило б і розгорнуте підменю. Там лишається
   попередня схема — фон на самому посиланні. */
@media (min-width: 1025px) {
    .nav-primary .menu-item-has-children {
        padding-right:  10px;
        border-radius:  6px;
        transition:     background var(--transition);
    }

    /* Специфічність (0,2,1) — рівно як у базового `.nav-primary .menu-item > a`,
       але правило нижче по файлу, тому виграє. */
    .nav-primary .menu-item-has-children > a,
    .nav-primary .menu-item-has-children > a:hover,
    .nav-primary .menu-item-has-children > a:focus-visible {
        padding-right: 4px;
        background:    none;
    }

    .nav-primary .menu-item-has-children > a::after { content: none; }

    .nav-primary__toggle { margin-left: -2px; }

    .nav-primary .menu-item-has-children::after {
        content:          '';
        position:         absolute;
        left:             0;
        right:            0;
        bottom:           0;
        height:           1px;
        border-radius:    2px;
        background:       var(--gradient-accent);
        transform:        scaleX(0);
        transform-origin: center;
        transition:       transform var(--transition);
    }

    .nav-primary .menu-item-has-children:hover,
    .nav-primary .menu-item-has-children:focus-within,
    .nav-primary .menu-item-has-children.is-submenu-open,
    .nav-primary .menu-item-has-children.current-menu-item,
    .nav-primary .menu-item-has-children.current-menu-ancestor {
        background: rgba(255, 255, 255, .05);
    }

    .nav-primary .menu-item-has-children:hover::after,
    .nav-primary .menu-item-has-children:focus-within::after,
    .nav-primary .menu-item-has-children.is-submenu-open::after,
    .nav-primary .menu-item-has-children.current-menu-item::after,
    .nav-primary .menu-item-has-children.current-menu-ancestor::after {
        transform: scaleX(1);
    }
}

/* ── Адаптив ────────────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    .menu-toggle { display: flex; }

    /* Закрите меню не займає місця взагалі: нульова висота через grid,
       без падінгів і без видимого бордера — інакше під topbar лишається
       порожня смуга. Розгортається вниз, ніби виїжджає з-під topbar. */
    .header-nav {
        display:             grid;
        grid-template-rows:  0fr;
        padding:             0;
        border-bottom-color: transparent;
        transition:          grid-template-rows .3s ease,
                             padding .3s ease,
                             border-bottom-color .3s ease;
    }

    .header-nav > .container {
        overflow:   hidden;
        min-height: 0;
    }

    .header-nav.is-open {
        grid-template-rows:  1fr;
        padding:             4px 0 12px;
        border-bottom-color: rgba(255, 255, 255, .1);
    }

    /* Сам список ще й зсувається згори — рух читається як «виїхало». */
    .nav-primary {
        transform:  translateY(-10px);
        opacity:    0;
        transition: transform .3s ease, opacity .25s ease;
    }

    .header-nav.is-open .nav-primary {
        transform: none;
        opacity:   1;
    }

    .nav-primary__list {
        flex-direction: column;
        align-items:    stretch;
        gap:            0;
    }

    .nav-primary .menu-item > a {
        padding:       14px 12px;
        border-radius: 8px;
    }

    .nav-primary .menu-item > a::after { display: none; }

    .nav-primary .menu-item > a:hover { background: rgba(255, 255, 255, .05); }

    /* На мобільному підменю розгортається всередині списку, а не спливає.
       Пункт із дітьми тут — рядок «посилання + кнопка», тому wrap: підменю
       має піти на новий рядок під ними. */
    .nav-primary .menu-item-has-children {
        flex-wrap: wrap;
        position:  static;
    }

    .nav-primary .menu-item-has-children > .nav-primary__link { flex: 1 1 auto; }

    .nav-primary__toggle {
        width:       44px;
        height:      44px;
        margin-left: 0;
        flex:        none;
    }

    /* Тут підменю просто розгортається в потоці. Без анімації висоти:
       трюк `grid-template-rows: 0fr → 1fr` працює лише з ОДНИМ нащадком,
       а в списку їх кілька — друга й наступні строки лишились би auto. */
    .nav-primary .sub-menu {
        position:       static;
        width:          100%;
        display:        none;
        margin:         0 0 6px 12px;
        padding:        0;
        border:         0;
        border-radius:  0;
        background:     none;
        box-shadow:     none;
        transform:      none;
        opacity:        1;
        visibility:     visible;
        pointer-events: auto;
        transition:     none;
    }

    /* Ховер на тачі не існує — розкриває тільки кнопка (або фокус). */
    .nav-primary .menu-item-has-children:hover > .sub-menu { display: none; }

    .nav-primary .is-submenu-open > .sub-menu,
    .nav-primary .menu-item-has-children:focus-within > .sub-menu {
        display:   grid;
        transform: none;
    }

    .nav-primary .nav-primary__subitem > a { padding: 12px 10px; }
}

@media (max-width: 768px) {
    .topbar__wrp { gap: 12px; }

    /* Тач-цілі: макет дає 42px, наш мінімум — 44. */
    .topbar__chip,
    .topbar__social,
    .menu-toggle,
    .btn--primary { min-height: 44px; }

    .menu-toggle { height: 44px; width: 44px; }

    .site-logo__word    { width: 98px;  height: 15px; }
    .site-logo__mark    { width: 37px;  height: 31px; }
    .site-logo__tagline { font-size: 11px; letter-spacing: 2.8px; }

    .topbar__social { display: none; }

    .btn--primary {
        padding:   12px 16px;
        font-size: 15px;
    }
}

@media (max-width: 915px) {
    /* Номер лишається клікабельним іконкою — текст не вміщається поруч з CTA. */
    .topbar__phone span { display: none; }
    .topbar__phone      { padding: 0 12px; }
}

@media (max-width: 615px) {
    /* Тільки кнопка в топбарі — у неї немає місця поруч з бургером.
       Кнопки в секціях підпис зберігають. */
    .topbar__cta .btn__label { display: none; }
    .topbar__cta             { padding: 12px 14px; }
}

/* На вузьких телефонах (≤435px) сума фіксованих елементів топбару
   (лого + телефон-чіп + мовний чіп + CTA + бургер) переростала доступну
   ширину — CTA стискався за межі свого вмісту, текст/іконка обрізались
   через overflow:hidden на .btn--primary, і сторінка ловила горизонтальний
   скрол. Тут не ховаємо жоден елемент (крім тексту тегліни) — просто
   стискаємо відступи, яких ніхто не помітить. */
@media (max-width: 435px) {
    .container         { padding: 0 16px; }
    .topbar__wrp        { gap: 6px; }
    .topbar__actions    { gap: 4px; }
    .topbar__chip       { padding: 0 8px; }
    .topbar__phone      { padding: 0 8px; }
    .lang-switch        { gap: 1px; font-size: 11px; }
    .topbar__cta         { padding: 12px 8px; }

    /* Лого — останній резерв простору: на 320px без цього все одно не
       вміщалось. Пропорції зберігаються (та сама пара word/mark, лише
       менша). */
    .site-logo           { gap: 8px; }
    .site-logo__word     { width: 74px; height: 11px; }
    .site-logo__mark     { width: 28px; height: 23px; }
    .site-logo__tagline  { display: none; }
}

@media (prefers-reduced-motion: reduce) {
    .btn__shine { animation: none; }

    .header-nav,
    .nav-primary { transition: none; }
}