/* Шапка по макету Draft (Copy): top 2005:61, sticky/scroll 2068:2494.
   На всех страницах — как на главной (прозрачная + зелёный логотип + sticky).
   Desktop: >=992px. Мобилка: блок внизу файла. */

/* На мобилке обёртка не участвует в flex — дети (лупа/бургер/кнопки) как раньше */
.header-actions {
    display: contents;
}

/* Зелёный логотип на всех ширинах (раньше только >=992px — на мобилке оставался серый) */
header.header--home .logo--header {
    --logo-gray: #3EA74F;
}

/* Кнопки поиска/бургера — сброс нативных стилей button (margin не трогаем: у лупы он нужен на desktop) */
header .search-btn,
header .header-btn-mobile-menu {
    appearance: none;
    -webkit-appearance: none;
    background: none;
    border: 0;
    padding: 0;
    font: inherit;
    color: inherit;
    cursor: pointer;
}

@media (min-width: 992px) {

    /* !important: страницы (about.css и др.) не должны обнулять отступ под fixed-шапку */
    body {
        padding-top: 116px !important;
    }

    /* Шапка лежит поверх светло-зелёного градиента героя (главная и такие же страницы) */
    body.page-home-chrome {
        background-image: linear-gradient(180deg, #E2FFE7 0%, #FFFFFF 100%);
        background-repeat: no-repeat;
        background-size: 100% 556px;
    }

    /* Админ-панель Битрикса тоже fixed сверху — без сдвига шапка залезает под неё */
    header.header--home {
        top: var(--bx-panel-offset, 0px);
    }

    header>.container {
        height: 116px;
        padding: 0 26px;
        column-gap: 16px;
        border-radius: 0;
        transition: height 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
    }

    /* Не-sticky: прозрачный фон и у самого header (страницы вроде about раньше красили его в белый) */
    header.header--home:not(.is-scrolled),
    header.header--home:not(.is-scrolled)>.container {
        background: transparent;
        box-shadow: none;
    }

    /* Sticky / scroll: 83px, кнопки 40px, белый градиент 90%→100% на всю ширину (2068:2607) */
    header.header--home.is-scrolled {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #fff 100%);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
        transition: box-shadow 0.2s ease, background-color 0.2s ease;
    }

    header.header--home.is-scrolled>.container {
        height: 83px;
        background: transparent;
        box-shadow: none;
    }

    /* Зазор лупа → «Нужна помощь»: 13px (1301−1288 в sticky-макете).
       column-gap у .header-actions = 16px → margin-right: -3px.
       Одинаково в top и sticky — иначе лупа прыгает на 22px. */

    /* ——— логотип по центру: равные колонки слева (меню) и справа (лупа+CTA) ——— */

    .header-menu-wrapp {
        flex: 1 1 0;
        min-width: 0;
    }

    /* Выравнивание текста меню с сеткой — в components/.../menu/top/style.css
       (margin-left: -14px; style.css грузится после header-2026) */

    .header-actions {
        display: flex;
        align-items: center;
        justify-content: flex-end;
        flex: 1 1 0;
        min-width: 0;
        /* как column-gap у header > .container — зазор лупа ↔ кнопки */
        column-gap: 16px;
    }

    .logo--header {
        flex: 0 0 auto;
        top: 0;
        padding-right: 0;
    }

    .logo--header .svg {
        width: 219px;
        height: 53px;
    }

    /* ——— поиск ——— */

    .search-btn {
        width: 40px;
        height: 40px;
        margin-right: -3px;
    }

    .search-btn .search-btn__open {
        width: 40px;
        height: 40px;
    }

    .search-outer {
        top: 116px;
        transition: top 0.2s ease;
    }

    header.header--home.is-scrolled .search-outer {
        top: 83px;
    }

    /* ——— кнопки ——— */

    .header-vwidjet-btn {
        column-gap: 16px;
    }

    .header-vwidjet-btn .btn {
        height: 50px;
        border-radius: 60px;
        font-size: 16px;
        line-height: 20px;
        letter-spacing: -0.32px;
        transition: height 0.2s ease, line-height 0.2s ease;
    }

    header.header--home.is-scrolled .header-vwidjet-btn .btn {
        height: 40px;
        line-height: 16px;
    }

    .header-vwidjet-btn .btn--transparent {
        margin-right: 0;
        padding: 0 25px;
        border: 2px solid #F38B3B;
        color: #F38B3B;
    }

    .header-vwidjet-btn .btn--orang {
        padding: 0 22px;
        background: #F38B3B;
    }

    /* Хиро главной: буквы и подзаг ближе к карточкам подопечных. */
    body.page-home .section-slogan {
        padding-top: 120px;
        padding-bottom: 48px;
        row-gap: 36px;
    }
}

/* Laptop / узкий desktop: 992–1439 — та же шапка без бургера, ужатая к ширине.
   1440+ остаётся макетом; <992 — мобилка с бургером. */
@media (min-width: 992px) and (max-width: 1439px) {
    :root {
        --header-desk-h: clamp(92px, 8.05vw, 116px);
        --header-desk-h-sticky: clamp(68px, 5.76vw, 83px);
    }

    body {
        padding-top: var(--header-desk-h) !important;
    }

    header > .container {
        height: var(--header-desk-h);
        padding: 0 clamp(12px, 1.8vw, 26px);
        column-gap: clamp(8px, 1.1vw, 16px);
    }

    header.header--home.is-scrolled > .container {
        height: var(--header-desk-h-sticky);
    }

    .header-actions {
        column-gap: clamp(8px, 1.1vw, 16px);
    }

    .logo--header .svg {
        width: clamp(148px, 15.2vw, 219px);
        height: clamp(36px, 3.68vw, 53px);
    }

    .search-btn {
        width: clamp(32px, 2.78vw, 40px);
        height: clamp(32px, 2.78vw, 40px);
        margin-right: -2px;
    }

    .search-btn .search-btn__open {
        width: clamp(32px, 2.78vw, 40px);
        height: clamp(32px, 2.78vw, 40px);
    }

    .search-outer {
        top: var(--header-desk-h);
    }

    header.header--home.is-scrolled .search-outer {
        top: var(--header-desk-h-sticky);
    }

    .header-vwidjet-btn {
        column-gap: clamp(8px, 1.1vw, 16px);
    }

    .header-vwidjet-btn .btn {
        height: clamp(40px, 3.47vw, 50px);
        font-size: clamp(12px, 1.11vw, 16px);
        line-height: clamp(15px, 1.39vw, 20px);
        letter-spacing: -0.02em;
        white-space: nowrap;
    }

    header.header--home.is-scrolled .header-vwidjet-btn .btn {
        height: clamp(34px, 2.78vw, 40px);
        line-height: clamp(14px, 1.11vw, 16px);
    }

    .header-vwidjet-btn .btn--transparent {
        padding: 0 clamp(10px, 1.74vw, 25px);
    }

    .header-vwidjet-btn .btn--orang {
        padding: 0 clamp(10px, 1.53vw, 22px);
    }
}

/* На главной при hover меню оверлей body::before не показываем.
   Поиск и попапы по-прежнему затемняют через .blackout. */
body.page-home-chrome.is-header-menu-hover:not(.blackout)::before {
    opacity: 0;
    visibility: hidden;
}

/* Поиск открыт: один полноэкранный оверлей на header::before (fixed),
   чтобы меню/лого затемнялись тем же слоем, что и страница — без «полосы»
   только на шапке и без visibility:hidden. body::before гасим (иначе двойной слой).
   У контейнера z-index:auto, иначе он (z-index:10) оказывается над оверлеем. */
@media (min-width: 992px) {
    body.blackout:has(header .search-outer.active)::before {
        opacity: 0;
        visibility: hidden;
        pointer-events: none;
    }

    body.blackout:has(header .search-outer.active) header.header--home {
        z-index: 12;
    }

    body.blackout:has(header .search-outer.active) header.header--home > .container {
        z-index: auto;
    }

    body.blackout:has(header .search-outer.active) header.header--home::before {
        content: "";
        position: fixed;
        inset: 0;
        z-index: 1;
        background: rgba(0, 0, 0, 0.4);
        pointer-events: auto;
    }

    body.blackout:has(header .search-outer.active) header .search-outer.active {
        z-index: 2;
    }

    body.blackout:has(header .search-outer.active) header .search-btn {
        position: relative;
        z-index: 2;
    }
}

/* ——— Мобилка / планшет (<992): меню, sticky-шапка, CTA ——— */
@media (max-width: 991px) {
    :root {
        --header-mobile-h: 52px;
        --header-cta-h: 68px;
    }

    body {
        /* место под sticky-шапку + нижнюю CTA (+ safe-area) */
        padding-top: var(--header-mobile-h) !important;
        padding-bottom: calc(var(--header-cta-h) + env(safe-area-inset-bottom, 0px));
    }

    header.header,
    header.header--home {
        position: fixed;
        top: var(--bx-panel-offset, 0px);
        left: 0;
        right: 0;
        z-index: 10;
    }

    header > .container {
        height: var(--header-mobile-h);
        min-height: var(--header-mobile-h);
        box-sizing: border-box;
        /* было 8/4 — из‑за этого бургер/лупа визуально ниже/выше центра */
        padding: 0 15px 0 17px;
        align-items: center;
    }

    /* Как на desktop: mint body.page-home-chrome просвечивает под шапкой.
       Иначе белый container из main.css обрывает градиент сразу под логотипом. */
    body.page-home-chrome header.header--home:not(.is-scrolled),
    body.page-home-chrome header.header--home:not(.is-scrolled) > .container {
        background: transparent;
        box-shadow: none;
    }

    body.page-home-chrome header.header--home.is-scrolled {
        background: linear-gradient(180deg, rgba(255, 255, 255, 0.9) 0%, #fff 100%);
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.06);
    }

    body.page-home-chrome header.header--home.is-scrolled > .container {
        background: transparent;
        box-shadow: none;
    }

    /* Hit-area поиска и бургера ≥44×44, иконки строго по центру кнопки */
    header .search-btn {
        width: 44px;
        height: 44px;
        display: inline-flex;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        position: relative;
        margin: 0;
    }

    header .search-btn svg {
        position: absolute;
        inset: 0;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        translate: none;
        width: auto;
        height: auto;
        max-width: 22px;
        max-height: 22px;
    }

    header .header-btn-mobile-menu {
        width: 44px;
        height: 44px;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        flex: 0 0 44px;
        order: 2;
        margin: 0;
        position: relative;
    }

    header .header-btn-mobile-menu svg {
        position: absolute;
        inset: 0;
        margin: auto;
        left: 0;
        right: 0;
        top: 0;
        bottom: 0;
        translate: none;
        width: auto;
        height: auto;
    }

    .logo--header {
        top: 4px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* Выпадающее меню: высота с учётом шапки/CTA, без огромного gap */
    .header-menu-wrapp {
        row-gap: 32px;
        max-height: calc(100dvh - var(--header-mobile-h) - var(--bx-panel-offset, 0px));
        padding: 8px 20px 24px;
        overscroll-behavior: contain;
        -webkit-overflow-scrolling: touch;
    }

    .header-menu-wrapp .header-menu-info {
        padding-bottom: 8px;
    }

    .header-menu-wrapp .header-menu-info .social {
        margin: 20px 0 12px;
    }

    /* Нижняя CTA: fixed к viewport без left:50%/translate (на iOS дёргается при скролле) */
    .header-vwidjet-btn {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        translate: none !important;
        transform: none;
        z-index: 11;
        padding-bottom: calc(10px + env(safe-area-inset-bottom, 0px));
        border-radius: 10px 10px 0 0;
        transition: transform 0.25s ease, opacity 0.25s ease;
    }

    body:has(.header-menu-wrapp.active) .header-vwidjet-btn,
    body:has(header .search-outer.active) .header-vwidjet-btn {
        transform: translateY(calc(100% + 8px));
        opacity: 0;
        pointer-events: none;
    }

    /* Оверлей кликабелен — закрытие меню/поиска тапом вне шапки */
    body.blackout:has(.header-menu-wrapp.active)::before,
    body.blackout:has(header .search-outer.active)::before {
        pointer-events: auto;
    }
}

@media (max-width: 450px) {
    :root {
        --header-cta-h: 60px;
    }
}