/* Шапка на компьютере: логотип, пункты с выпадающими панелями (inc/header-nav.php), телефон, кнопка.
   Размеры в rem, масштаб общий для сайта (main.css, .page).
   Панели лежат поверх страницы (position: absolute) и не сдвигают содержимое.
   На телефоне (до 640px) эта шапка скрыта, там мобильная с бургером. */

.header.header__desctop {
    --hn-accent: #602f95;
    --hn-accent-dark: #4d2279;
    --hn-accent-soft: #f2edfb;
    --hn-ink: #121a2f;
    --hn-muted: #6b7086;
    --hn-line: #ebe8f4;
    --hn-panel: #f7f6fd;
    --hn-panel-line: #e6e2f3;
    padding: 0;
    border-bottom: .1rem solid var(--hn-line);
    background-color: #fff;
}

.header.header__desctop .header__top {
    gap: 2.4rem;
    min-height: 8.2rem;
}

.header.header__desctop .header__logo {
    flex: 0 0 auto;
    margin-right: 0;
}

.header.header__desctop .header__logo img {
    display: block;
    width: 18rem;
    height: auto;
}

.header.header__desctop .header__full__menu {
    align-self: stretch;
    margin-right: auto;
}

.header.header__desctop .header__phone {
    flex-shrink: 0;
    gap: .8rem;
    margin-right: 0;
    color: var(--hn-ink);
    font-size: 1.6rem;
    font-weight: 600;
    white-space: nowrap;
    transition: color .15s;
}

.header.header__desctop .header__phone .hn-icon {
    width: 1.8rem;
    height: 1.8rem;
    margin: 0;
    color: var(--hn-accent);
}

.header.header__desctop .header__phone:hover {
    color: var(--hn-accent);
}

.header.header__desctop .header__buttons {
    flex-shrink: 0;
}

.header.header__desctop .header__btn {
    width: auto;
    min-height: 4.8rem;
    margin-left: 0;
    padding: 1.2rem 2.6rem;
    border: 0;
    border-radius: 1.2rem;
    background-color: var(--hn-accent);
    color: #fff;
    font-size: 1.5rem;
    font-weight: 600;
    line-height: 1.6;
    white-space: nowrap;
    transition: background-color .15s;
}

.header.header__desctop .header__btn:hover {
    border: 0;
    background-color: var(--hn-accent-dark);
    color: #fff;
}

/* Пункты */

.hn,
.hn__list {
    height: 100%;
}

.hn__list {
    display: flex;
    align-items: stretch;
    gap: 3.6rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hn__item {
    display: flex;
    align-items: center;
}

.hn__item--panel:not(.hn__item--mega) {
    position: relative;
}

.hn__link {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: .6rem;
    padding: .6rem 0;
    border: 0;
    background: none;
    color: var(--hn-ink);
    font-family: inherit;
    font-size: 1.6rem;
    font-weight: 500;
    line-height: 1.4;
    white-space: nowrap;
    cursor: pointer;
    transition: color .15s;
}

/* Тонкое подчёркивание открытого пункта — ближе к нижнему краю шапки */
.hn__link::after {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: -1.2rem;
    height: .2rem;
    border-radius: .2rem;
    background-color: currentColor;
    opacity: 0;
    transition: opacity .15s;
}

/* Текущая страница подсвечивается только у простых ссылок: у пункта с панелью
   фиолетовый цвет означает «панель открыта» */
.hn__link:hover,
.hn__item.is-current > a.hn__link {
    color: var(--hn-accent);
}

.hn__link:focus-visible {
    outline: .2rem solid var(--hn-accent);
    outline-offset: .4rem;
    border-radius: .4rem;
}

.hn__link .hn-icon--chevron {
    width: 1.6rem;
    height: 1.6rem;
    transition: transform .2s;
}

.hn__item.is-open > .hn__trigger {
    color: var(--hn-accent);
}

.hn__item.is-open > .hn__trigger::after {
    opacity: 1;
}

.hn__item.is-open > .hn__trigger .hn-icon--chevron {
    transform: rotate(180deg);
}

/* Панель */

.hn__panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + .8rem);
    border: .1rem solid var(--hn-panel-line);
    border-radius: 2.4rem;
    background-color: var(--hn-panel);
    box-shadow: 0 2.4rem 6rem rgba(40, 24, 90, .12), 0 .4rem 1.2rem rgba(40, 24, 90, .05);
    opacity: 0;
    visibility: hidden;
    transform: translateY(.6rem);
    transition: opacity .18s, transform .18s, visibility 0s .18s;
}

/* Мостик над панелью: курсор проходит от пункта к панели, не закрывая её */
.hn__panel::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    bottom: 100%;
    height: 1.2rem;
}

.hn__item.is-open > .hn__panel {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition: opacity .18s, transform .18s, visibility 0s;
}

/* Переход с одной открытой панели на другую — без повторного появления:
   панель остаётся на месте, меняется только содержимое (header-nav.js) */
.hn--instant .hn__panel,
.hn--instant .hn__item.is-open > .hn__panel {
    transition: none;
}

/* Затемнение страницы под открытой большой панелью, чтобы панель не сливалась с первым экраном.
   Начинается под шапкой (--hn-top ставит header-nav.js), сама шапка остаётся светлой.
   Ловит клик: первый клик мимо панели только закрывает её, а не открывает ссылку под ней. */
.hn-backdrop {
    position: fixed;
    z-index: 4;
    top: var(--hn-top, 8.3rem);
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(18, 14, 38, .32);
    opacity: 0;
    visibility: hidden;
    transition: opacity .2s, visibility 0s .2s;
}

.hn.has-mega-open .hn-backdrop {
    opacity: 1;
    visibility: visible;
    transition: opacity .2s, visibility 0s;
}

/* Указатель на верхней границе — под своим пунктом; --hn-arrow-x ставит header-nav.js */
.hn__arrow {
    position: absolute;
    top: 0;
    left: var(--hn-arrow-x, 50%);
    width: 1.6rem;
    height: 1.6rem;
    border-top: .1rem solid var(--hn-panel-line);
    border-left: .1rem solid var(--hn-panel-line);
    border-top-left-radius: .3rem;
    background-color: var(--hn-panel);
    transform: translate(-50%, -50%) rotate(45deg);
}

/* Небольшие панели: Продукты, Решения — под своим пунктом */

.hn__panel--list {
    left: 50%;
    min-width: 28rem;
    padding: 1.2rem;
    translate: -50% 0;
}

.hn-links {
    display: grid;
    gap: .4rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hn-links__link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 1.6rem;
    padding: 1.2rem 1.4rem;
    border-radius: 1.2rem;
    color: var(--hn-ink);
    font-size: 1.5rem;
    font-weight: 500;
    line-height: 1.35;
    text-decoration: none;
    transition: background-color .15s, color .15s;
}

.hn-links__link .hn-icon {
    flex-shrink: 0;
    width: 1.6rem;
    height: 1.6rem;
    color: var(--hn-muted);
    transition: color .15s;
}

.hn-links__link:hover,
.hn-links__link[aria-current="page"] {
    background-color: #fff;
    color: var(--hn-accent);
}

.hn-links__link:hover .hn-icon {
    color: var(--hn-accent);
}

/* Язык сайта (GTranslate): флаг и код, список языков в две колонки */

.hn-lang__flag {
    flex-shrink: 0;
    display: block;
    width: 2rem;
    height: 1.4rem;
    border-radius: .3rem;
    box-shadow: 0 0 0 .1rem rgba(18, 26, 47, .08);
    object-fit: cover;
}

.hn-lang__trigger {
    gap: .8rem;
}

.hn__panel--lang {
    min-width: 36rem;
    padding: 1rem;
}

.hn-langs {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: .2rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hn-langs__btn {
    display: flex;
    align-items: center;
    gap: 1rem;
    width: 100%;
    padding: .9rem 1.2rem;
    border: 0;
    border-radius: 1rem;
    background: none;
    color: var(--hn-ink);
    font-family: inherit;
    font-size: 1.45rem;
    font-weight: 500;
    line-height: 1.3;
    text-align: left;
    cursor: pointer;
    transition: background-color .15s, color .15s;
}

.hn-langs__btn:hover {
    background-color: #fff;
    color: var(--hn-accent);
}

.hn-langs__btn[aria-current="true"] {
    background-color: #fff;
    color: var(--hn-accent);
    font-weight: 600;
}

.hn-langs__btn:focus-visible {
    outline: .2rem solid var(--hn-accent);
    outline-offset: -.2rem;
}

/* Большие панели «Решения» и «Ресурсы»: на ширину контента */

.hn__panel--mega {
    left: 0;
    right: 0;
    padding: 2.4rem;
}

.hn-mega__layout {
    display: grid;
    grid-template-columns: 30% minmax(0, 1fr);
}

.hn-mega__intro {
    padding: .4rem 2.4rem .4rem .4rem;
    border-right: .1rem solid var(--hn-panel-line);
}

.hn-mega__main {
    padding-left: 2.4rem;
}

.hn-mega__eyebrow,
.hn-mega__label {
    margin: 0;
    color: var(--hn-accent);
    font-size: 1.15rem;
    font-weight: 700;
    line-height: 1.3;
    letter-spacing: .14em;
    text-transform: uppercase;
}

.hn-mega__title {
    margin: 1rem 0 0;
    color: var(--hn-ink);
    font-size: 2.4rem;
    font-weight: 800;
    line-height: 1.15;
    letter-spacing: -.02em;
}

.hn-mega__text {
    margin: 1.2rem 0 0;
    color: var(--hn-muted);
    font-size: 1.4rem;
    line-height: 1.5;
}

.hn-mega__label {
    margin-top: 1.6rem;
    padding-top: 1.6rem;
    border-top: .1rem solid var(--hn-panel-line);
}

.hn-cards {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 1rem;
    margin: 0;
    padding: 0;
    list-style: none;
}

.hn-cards--2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.hn-cards__wide {
    grid-column: 1 / -1;
}

.hn-cards--video {
    margin-top: 1.2rem;
}

.hn-card {
    position: relative;
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 1.2rem;
    height: 100%;
    padding: 1.5rem 1.6rem 1.5rem 1.8rem;
    border: .1rem solid var(--hn-line);
    border-radius: 1.6rem;
    background-color: #fff;
    color: var(--hn-ink);
    text-decoration: none;
    transition: border-color .15s, box-shadow .15s, transform .15s;
}

.hn-card:hover {
    border-color: #d5cbf5;
    box-shadow: 0 .8rem 2rem rgba(40, 24, 90, .08);
    transform: translateY(-.2rem);
}

.hn-card:focus-visible {
    outline: .2rem solid var(--hn-accent);
    outline-offset: .2rem;
}

.hn-card__body {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    min-width: 0;
}

.hn-card__badge {
    align-self: flex-start;
    margin-bottom: .2rem;
    padding: .2rem .7rem;
    border-radius: .6rem;
    background-color: var(--hn-accent);
    color: #fff;
    font-size: 1rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: .12em;
    text-transform: uppercase;
}

.hn-card__title {
    font-size: 1.6rem;
    font-weight: 600;
    line-height: 1.25;
}

.hn-card__text {
    color: var(--hn-muted);
    font-size: 1.3rem;
    line-height: 1.4;
}

/* Стрелка перехода у белых карточек — без подложки, в правом верхнем углу:
   подпись под ней может занимать всю ширину карточки */
.hn-card:not(.hn-card--featured):not(.hn-card--video) .hn-card__title {
    padding-right: 2.6rem;
}

.hn-card:not(.hn-card--featured):not(.hn-card--video) .hn-card__icon {
    position: absolute;
    top: 1.5rem;
    right: 1.6rem;
}

.hn-card__icon {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--hn-accent);
    transition: background-color .15s, color .15s, transform .15s;
}

.hn-card__icon .hn-icon {
    width: 1.8rem;
    height: 1.8rem;
}

.hn-card:hover .hn-card__icon {
    transform: translate(.2rem, -.2rem);
}

/* Документация — выделенная карточка */

.hn-card--featured {
    border-color: var(--hn-accent);
    background-color: var(--hn-accent);
    color: #fff;
}

.hn-card--featured .hn-card__text {
    color: rgba(255, 255, 255, .8);
}

.hn-card--featured .hn-card__icon {
    align-self: center;
    width: 3.6rem;
    height: 3.6rem;
    border-radius: 50%;
    background-color: rgba(255, 255, 255, .16);
    color: #fff;
}

.hn-card--featured:hover .hn-card__icon {
    transform: none;
}

.hn-card--featured .hn-card__icon .hn-icon {
    width: 1.8rem;
    height: 1.8rem;
}

.hn-card--featured:hover {
    border-color: var(--hn-accent-dark);
    background-color: var(--hn-accent-dark);
    box-shadow: 0 .8rem 2rem rgba(40, 24, 90, .22);
}

/* Широкая карточка на всю строку (корпоративное обучение) */

.hn-card--wide {
    border-color: rgba(96, 47, 149, .55);
    background-color: #f0edfc;
    background-image: linear-gradient(100deg, #f1ebfc 0%, #eaeffc 100%);
}

.hn-card--wide:hover {
    border-color: var(--hn-accent);
}

/* Видеокурсы — ниже, с круглой кнопкой воспроизведения */

.hn-card--video {
    align-items: center;
    padding: 1.2rem 1.4rem 1.2rem 1.8rem;
}

.hn-card--video .hn-card__title {
    font-size: 1.5rem;
}

.hn-card--video .hn-card__icon {
    width: 3.2rem;
    height: 3.2rem;
    border-radius: 50%;
    background-color: var(--hn-accent-soft);
    color: var(--hn-accent);
}

.hn-card--video .hn-card__icon .hn-icon {
    width: 1.4rem;
    height: 1.4rem;
    margin-left: .2rem;
}

.hn-card--video:hover .hn-card__icon {
    background-color: var(--hn-accent);
    color: #fff;
    transform: none;
}

/* Узкие окна компьютера (до ~1180px): пункты и блоки шапки плотнее, чтобы влезли язык и кнопка */
@media (max-width: 1180px) {
    .header.header__desctop .header__top {
        gap: 1.6rem;
    }

    .hn__list {
        gap: 2.4rem;
    }
}

/* Админбар WordPress у вошедших пользователей: 32px, до 782px — 46px. Шапка (position: fixed)
   встаёт под него, а не под ним; --wp-admin-offset учитывают и липкие блоки под шапкой (kb.css,
   pricing-new.css, blog.css, confluence.css). У гостей переменной нет — везде 0. */
html:has(> body.admin-bar),
body.admin-bar {
    --wp-admin-offset: 32px;
}

.admin-bar .header {
    top: var(--wp-admin-offset);
}

@media screen and (max-width: 782px) {
    html:has(> body.admin-bar),
    body.admin-bar {
        --wp-admin-offset: 46px;
    }
}

/* До 600px WordPress делает админбар absolute: он уезжает при прокрутке, а шапка оставалась
   бы в 46px от края с пустой полосой над собой. Держим админбар на месте. */
@media screen and (max-width: 600px) {
    .admin-bar #wpadminbar {
        position: fixed;
    }
}

/* Мобильная шапка: логотип, язык, меню — одна строка, поля как у страницы (.container, main.css).
   Язык — флаг и код, поверх прозрачный <select> (системный список языков).
   Само меню — панель бургера, assets/css/mobile-menu.css. */
.hm-lang {
    display: none;
}

@media (max-width: 640px) {
    .header.header__mobile .header__top {
        display: flex;
        align-items: center;
        gap: 0.8rem;
        padding: 0.85rem 0; /* высота шапки прежняя при крупном логотипе: под неё отступ main */
    }

    /* Логотип крупнее прежних 10.4rem из custom.css (просьба владельца 27.09) */
    .header.header__mobile .header__logo {
        width: 12.8rem;
        margin-right: auto;
    }

    .header.header__mobile .header__logo img {
        display: block;
        width: 100%;
        height: auto;
    }

    .hm-lang {
        position: relative;
        display: inline-flex;
        flex-shrink: 0;
        align-items: center;
        gap: 0.6rem;
        height: 4.4rem;
        padding: 0 0.8rem;
        border-radius: 1rem;
        color: #121a2f;
        font-size: 1.5rem;
        font-weight: 600;
    }

    .hm-lang .hn-icon--chevron {
        width: 1.6rem;
        height: 1.6rem;
        color: #6b7086;
    }

    .hm-lang__select {
        position: absolute;
        inset: 0;
        width: 100%;
        height: 100%;
        margin: 0;
        padding: 0;
        border: 0;
        opacity: 0;
        font-size: 16px; /* меньше 16px — iOS увеличивает страницу при выборе */
        cursor: pointer;
        -webkit-appearance: none;
        appearance: none;
    }

    .hm-lang:focus-within {
        outline: 0.2rem solid #602f95;
        outline-offset: 0.1rem;
    }

    .header.header__mobile .burger {
        flex-shrink: 0;
        display: flex;
        align-items: center;
        justify-content: center;
        width: max(44px, 4.4rem);
        height: max(44px, 4.4rem);
        margin-right: -1rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .hn__panel,
    .hn__item.is-open > .hn__panel,
    .hn-backdrop,
    .hn.has-mega-open .hn-backdrop,
    .hn-card {
        transition: none;
    }

    .hn-card:hover {
        transform: none;
    }
}