/* ============================================================
   Шапка (ПК-версия): компактная строка + закрепление при скролле
   ------------------------------------------------------------
   Правки по ТЗ: логотип, меню, телефон, кнопка; поиск и соцсети
   убраны; шапка закрепляется при прокрутке.

   Файл намеренно лежит ВНЕ frontend/build — пересборка Astro
   (npm run build) его не затрёт. Подключается после
   custom-style.css. Мобильная версия (<= 1023px) не затрагивается.

   РАСЧЁТ (шрифт Vela Sans, замерено по реальным TTF):
     меню (7 пунктов, 16px bold) ...... 534px текста
     телефон (иконка + 204px, 24px) ... ~238px
     кнопка (140px + падинги 19/32) ... ~204px
     -------------------------------------------
     итого без логотипа и зазоров ..... ~976px

   Контейнер шапки = min(1306px, ширина окна - 60px).
   Поэтому в ОДНУ строку всё помещается только от ~1360px,
   где контейнер достигает максимума. На более узких десктопах
   меню переносится во вторую строку (как в исходном дизайне).
   ============================================================ */

@media (min-width: 1024px) {
    /* --- Закрепление при скролле ---
       Тот же приём и те же значения, что уже применены к мобильной
       шапке в custom-style.css (position:sticky, top:0, z-index:30).
       Фон и нижняя линия обязательны: .header__container занимает
       только центральную колонку грида, края прозрачны, и без фона
       контент просвечивал бы под шапкой при прокрутке.
       --color-slate-300 — та же переменная, что рисует границу
       мобильной шапки, поэтому стилистика не нарушается. */
    .header {
        position: sticky;
        top: 0;
        z-index: 30;
        background-color: #fff;
        border-bottom: 1px solid var(--color-slate-300);
    }

    /* Было: flex-direction:column, gap:40px, padding-top:40px */
    .header__desktop {
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        padding-top: 16px;
        padding-bottom: 16px;
        gap: 16px;
    }

    /* Пункты меню никогда не рвутся по словам
       («О компании» и «Выигранные дела» уезжали на две строки) */
    .header__desktop .navigation__item {
        white-space: nowrap;
    }

    /* Логотип, телефон и кнопка сохраняют свою ширину */
    .header__desktop .logo--header,
    .header__desktop .contacts__item--header,
    .header__desktop .btn--header {
        flex-shrink: 0;
    }

    /* Снимаем фикс. ширину 240px, заданную для <= 1279px */
    .header__desktop .contacts__item--header {
        width: auto;
    }
}

/* --- Широкие десктопы: всё в одну строку ---
   Контейнер здесь 1306px (максимум).
   Бюджет: 150 (лого) + 630 (меню, gap 16) + 238 + 204 + 48 (зазоры)
           = 1270px из 1306px — помещается с запасом ~36px,
   который justify-content:space-between распределит между блоками. */
@media (min-width: 1360px) {
    .header__desktop .logo--header {
        width: 150px;
        height: 73px; /* пропорции исходного 182x89 сохранены */
    }

    .header__desktop .navigation {
        gap: 16px;
        flex-shrink: 0;
    }
}

/* --- Узкие десктопы (1024–1359): одна строка не помещается ---
   При окне 1024px контейнер = 964px, а только меню+телефон+кнопка
   занимают ~930px — на логотип не остаётся места.
   Поэтому меню уходит на вторую строку (order:1 + flex-basis:100%),
   а сверху остаются логотип, телефон и кнопка.
   Это компактнее исходника: поиск, соцсети и адрес убраны. */
@media (min-width: 1024px) and (max-width: 1359px) {
    .header__desktop {
        flex-wrap: wrap;
        gap: 12px 16px;
    }

    .header__desktop .logo--header {
        width: 130px;
        height: 64px;
    }

    .header__desktop .navigation {
        order: 1;
        flex-basis: 100%;
        justify-content: space-between;
        gap: 12px;
    }
}

/* --- Мобильная версия: кнопка «Получить консультацию» закреплена
   в шапке рядом с бургером, а не только внутри выдвижного меню (по ТЗ).
   Текст сокращён до «Консультация», чтобы уместиться рядом с логотипом
   и бургером на узких экранах. */
@media (max-width: 1023px) {
    .header__top-actions {
        display: flex;
        align-items: center;
        gap: 12px;
        flex-shrink: 0;
    }

    .btn--header-pinned {
        width: auto !important;
        padding: 10px 16px;
        font-size: 13px;
        line-height: 16px;
        white-space: nowrap;
        flex-shrink: 0;
    }
}