/*
 * Шапка сайта (T2). Mobile-first:
 *   < 1280px — логотип + кнопка + бургер; меню — панель, которую открывает js/header-menu.js;
 *   ≥ 1280px — логотип слева, меню и кнопка справа в одну строку, бургер скрыт.
 * Без JS (@media (scripting: none)) бургер скрыт, а меню выводится строкой под логотипом.
 */
.header {
    padding-block: var(--header-padding-block);
}

.header__inner {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
}

/* Логотип: размеры по макету, подпись в три строки */
.header__logo {
    margin-inline-end: auto;
}

.header__logo .logo__image {
    height: var(--logo-mark-height);
}

.header__logo .logo__text {
    max-width: var(--logo-text-width);
    font-size: var(--logo-text-size);
}

/* Кнопка и бургер */
.header__actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.header__cta {
    padding: var(--header-cta-padding-block) var(--header-cta-padding-inline);
    font-size: var(--header-cta-font-size);
    white-space: nowrap;
}

.header__burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: var(--burger-size);
    height: var(--burger-size);
    padding: 0;
    border: 0;
    border-radius: var(--radius-small);
    background: none;
    color: var(--color-blue);
}

.header__burger-icon {
    width: 100%;
    height: 100%;
}

.header__burger-line {
    transform-box: fill-box;
    transform-origin: center;
    transition: transform var(--transition-medium), opacity var(--transition-fast);
}

.header__burger[aria-expanded="true"] .header__burger-line--top {
    transform: translateY(8px) rotate(45deg);
}

.header__burger[aria-expanded="true"] .header__burger-line--middle {
    opacity: 0;
}

.header__burger[aria-expanded="true"] .header__burger-line--bottom {
    transform: translateY(-8px) rotate(-45deg);
}

/* Меню: общие стили пунктов */
.header__menu {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.header__menu-link {
    display: block;
    padding-block: var(--space-xs);
    font-size: var(--font-size-nav);
    text-decoration: none;
}

/* Меню < 1280px: выпадающая панель под шапкой (координату верха задаёт JS) */
.header__nav {
    position: fixed;
    top: var(--header-menu-top, 0);
    inset-inline: 0;
    z-index: var(--z-header-menu);
    max-height: calc(100dvh - var(--header-menu-top, 0px));
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: var(--space-xs) var(--container-gutter) var(--space-m);
    border-radius: 0 0 var(--radius-card) var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-card);
    opacity: 0;
    visibility: hidden;
    transform: translateY(calc(-1 * var(--space-xs)));
    transition: opacity var(--transition-medium), transform var(--transition-medium),
        visibility 0s linear var(--transition-medium);
}

.header--menu-open .header__nav {
    opacity: 1;
    visibility: visible;
    transform: none;
    transition-delay: 0s;
}

/* Пока меню открыто, страница под ним не прокручивается (класс ставит JS на <body>) */
.header-menu-open {
    overflow: hidden;
}

@media (hover: hover) {
    .header__menu-link:hover {
        color: var(--color-blue);
    }
}

/* Узкие телефоны: подпись логотипа скрыта визуально (остаётся доступным именем ссылки) */
@media (max-width: 399.98px) {
    .header__logo .logo__text {
        position: absolute;
        width: 1px;
        height: 1px;
        overflow: hidden;
        clip: rect(0 0 0 0);
        white-space: nowrap;
    }
}

/* Планшет: панель меню — карточка у правого края */
@media (min-width: 768px) {
    .header__inner {
        column-gap: var(--space-s);
    }

    .header__nav {
        inset-inline: auto var(--container-gutter);
        width: var(--header-menu-width);
        padding: var(--space-s) var(--space-m);
        border-radius: var(--radius-card);
    }
}

/* Без JS: меню всегда видно строкой под логотипом, бургер не нужен */
@media (scripting: none) {
    .header__burger {
        display: none;
    }

    .header__nav {
        position: static;
        order: 1;
        flex-basis: 100%;
        width: auto;
        max-height: none;
        padding: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
    }

    .header__menu {
        flex-direction: row;
        flex-wrap: wrap;
        column-gap: var(--space-s);
    }
}

/* Desktop: меню в строку между логотипом и кнопкой */
@media (min-width: 1280px) {
    .header__burger {
        display: none;
    }

    .header__nav {
        position: static;
        order: 0;
        flex-basis: auto;
        width: auto;
        max-height: none;
        overflow: visible;
        padding: 0;
        border-radius: 0;
        background: none;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        transition: none;
    }

    .header__menu {
        flex-direction: row;
        gap: var(--header-menu-gap);
    }

    .header__menu-link {
        padding-block: 0;
    }

    .header__actions {
        margin-inline-start: var(--space-l);
    }
}

@media (prefers-reduced-motion: reduce) {
    .header__nav,
    .header__burger-line {
        transition: none;
    }
}