/* P26M — site header.
 * Sticky, translucent, blurred backdrop. Mobile uses off-canvas menu.
 */

/* WP wraps template-parts in <div class="wp-block-template-part">; that wrapper
 * becomes the sticky containing block and clips the header out of view after a
 * few pixels of scroll. Flattening it restores body as the sticky context. */
.wp-site-blocks > .wp-block-template-part:has(> .site-header) {
    display: contents;
}

/* Непрозрачная: под шапку уезжают и светлые секции (.surface--light), а
   полупрозрачный фон с blur пропускал белое и давал мутную полосу. */
.site-header {
    position: sticky;
    top: 0;
    z-index: var(--z-header);
    width: 100%;
    background: var(--color-surface);
    border-bottom: 1px solid transparent;
    transition: border-color var(--dur-base) var(--ease-out),
                background var(--dur-base) var(--ease-out);
}
.site-header[data-scrolled="true"] {
    border-bottom-color: var(--color-border);
    background: var(--color-base);
}

.site-header__inner {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-5);
    min-height: var(--header-height);
    padding-block: var(--space-3);
}

.site-header__brand {
    display: inline-flex;
    align-items: center;
    /* Логотип — единственный сжимаемый flex-элемент в шапке, поэтому при
       нехватке места именно он съедался: на 1024 английская шапка давила
       его с 80.7px до 33px, а на uk/ru (подписи длиннее) — до нуля, и
       логотипа на странице просто не было. Он не должен сжиматься никогда;
       нехватку места решает брейкпоинт вторичного CTA ниже. */
    flex-shrink: 0;
    gap: var(--space-3);
    color: var(--color-text);
    font-family: var(--font-display);
    font-weight: 700;
    letter-spacing: var(--tracking-tight);
}
.site-header__brand img {
    height: 28px;
    width: auto;
}

.site-nav {
    display: none;
    align-items: center;
    gap: var(--space-2);
}
@media (min-width: 1024px) {
    .site-nav {
        /* Grouped with the logo at a fixed distance, not floated by the
           remaining flex space — keeps nav visually attached to the brand
           regardless of container width or CTA-group size (see P26M-420). */
        margin-left: var(--space-7);
        margin-right: auto;
    }
}
.site-nav__link {
    /* Пункт меню — одна строка всегда: при нехватке места «Навіщо P26M»
       ломался пополам и распирал шапку по высоте. Дефицит ширины решается
       брейкпоинтами ниже, а не переносом внутри пункта. */
    white-space: nowrap;
    padding: 8px 14px;
    border-radius: var(--radius-md);
    font-size: var(--fs-sm);
    color: var(--color-text-secondary);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.site-nav__link:hover {
    color: var(--color-text);
    background: var(--color-elevated);
}
.site-nav__link[aria-current="page"] {
    color: var(--color-text);
}

.site-header__cta-group {
    display: flex;
    align-items: center;
    gap: var(--space-2);
}
.site-header__cta-group .btn { padding: 10px 18px; font-size: var(--fs-sm); }

/* On small screens hide secondary CTA — only hamburger + primary CTA remain. */
@media (max-width: 1023px) {
    .site-header__cta-group .btn--secondary { display: none; }
}

/* На 1024–1279 шапка не помещается ни в одной локали: с шестым пунктом меню
   (FAQ) ей требуется 1078px на en, 1072 на uk и 1086 на ru при доступных
   1009. Раньше правило было скоплено на uk/ru — там подписи длиннее
   английских на 20–40% («Find a Provider» 135px → «Підібрати провайдера»
   189px) — но после добавления FAQ переполняется и латиница.
   Прячем вторичный CTA до 1280 (тот же приём, что ниже 1024, просто с
   другим порогом): на 1280 все три локали помещаются. */
@media (max-width: 1279px) {
    .site-header__cta-group .btn--secondary { display: none; }

    /* Одного скрытия CTA хватает только латинице: uk и ru на 1024 всё ещё
       переполняли на 48 и 62px. Поджимаем горизонтальные поля пунктов меню и
       отступ от логотипа — шесть пунктов × 12px дают 72px, этого достаточно.
       Кегль и вертикальная зона клика не трогаются. */
    .site-nav {
        margin-left: var(--space-5);
        /* Зазор между пунктами обеспечивают их собственные поля — отдельный
           gap на этих ширинах роскошь: русскому не хватало ровно 8px. */
        gap: 0;
    }
    .site-nav__link { padding-inline: 8px; }
}

/* 1280–1439: вторичный CTA возвращается, и на uk/ru шапке снова тесно —
   не хватает 6px украинскому и 21px русскому. Держим поджатое меню до 1440,
   где помещаются все три локали в обычном виде. */
@media (min-width: 1280px) and (max-width: 1439px) {
    :lang(uk) .site-nav,
    :lang(ru) .site-nav {
        margin-left: var(--space-5);
        gap: 0;
    }
    :lang(uk) .site-nav__link,
    :lang(ru) .site-nav__link { padding-inline: 8px; }
}
@media (max-width: 479px) {
    .site-header__cta-group .btn--primary { display: none; }
}

/* Hamburger — mobile only */
.nav-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: transparent;
    border: 1px solid var(--color-border);
    color: var(--color-text);
    transition: background var(--dur-fast) var(--ease-out);
}
.nav-toggle:hover { background: var(--color-elevated); }
.nav-toggle__bar {
    position: relative;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.nav-toggle__bar::before,
.nav-toggle__bar::after {
    content: "";
    position: absolute;
    left: 0;
    width: 18px;
    height: 2px;
    background: currentColor;
    border-radius: 2px;
    transition: transform var(--dur-base) var(--ease-out),
                top var(--dur-base) var(--ease-out);
}
.nav-toggle__bar::before { top: -6px; }
.nav-toggle__bar::after  { top:  6px; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar { background: transparent; }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::before { top: 0; transform: rotate(45deg); }
.nav-toggle[aria-expanded="true"] .nav-toggle__bar::after  { top: 0; transform: rotate(-45deg); }

/* Mobile menu sheet */
.mobile-menu {
    position: fixed;
    inset: var(--header-height) 0 0 0;
    z-index: var(--z-header);
    background: var(--color-base);
    padding: var(--space-6) var(--container-pad);
    display: none;
    flex-direction: column;
    gap: var(--space-4);
    overflow-y: auto;
}
.mobile-menu[data-open="true"] { display: flex; }
.mobile-menu__link {
    padding: var(--space-4) 0;
    font-family: var(--font-display);
    font-size: var(--fs-2xl);
    font-weight: 600;
    color: var(--color-text);
    border-bottom: 1px solid var(--color-border);
}
.mobile-menu__link:hover { color: var(--color-brand); }
.mobile-menu__footer {
    margin-top: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

/* Desktop breakpoint */
@media (min-width: 1024px) {
    .site-nav { display: inline-flex; }
    .nav-toggle { display: none; }
    .mobile-menu { display: none !important; }
}

/* ── Переключатель языка ───────────────────────────────────────────────────
   Коды вместо флагов: флаг обозначает страну, а не язык, и для украинского
   с русским это особенно неверно. */
.lang-switch {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-pill);
    background: var(--color-elevated);
}
.lang-switch__item {
    padding: 5px 10px;
    border-radius: var(--radius-pill);
    font-family: var(--font-mono);
    font-size: var(--fs-xs);
    font-weight: 600;
    letter-spacing: var(--tracking-wide);
    color: var(--color-text-tertiary);
    transition: color var(--dur-fast) var(--ease-out),
                background var(--dur-fast) var(--ease-out);
}
.lang-switch__item:not(.is-current):hover { color: var(--color-text); }
.lang-switch__item.is-current {
    color: var(--color-text-inverse);
    background: var(--color-brand);
}
/* Активный язык на ховере светлеет фоном, а не текстом. Цвет текста
   задаём явно: глобальный ховер ссылок красит его в брендовый зелёный, и
   на зелёной плашке буквы пропадали совсем. Тёмный на зелёном держит 12:1. */
.lang-switch__item.is-current:hover,
.lang-switch__item.is-current:focus-visible {
    color: var(--color-text-inverse);
    background: var(--color-brand-strong);
}

/* На узких экранах переключатель уходит в мобильное меню */
@media (max-width: 1023px) {
    .lang-switch--header { display: none; }
}
.lang-switch--mobile {
    align-self: flex-start;
    margin-bottom: var(--space-3);
}
@media (min-width: 1024px) {
    .lang-switch--mobile { display: none; }
}