/* ==========================================================================
   overrides.css — landing-specific values
   --------------------------------------------------------------------------
   ВСЁ, что меняется с ленда на ленд, живёт здесь. Файл подключается ПОСЛЕДНИМ —
   значит любая переменная или правило отсюда перекрывает базовые из других
   файлов. Бери этот файл за основу при заведении нового ленда.

   Содержит ровно три секции:
     1. Бренд-переменные   (цвет акцента, золота, фон, радиусы)
     2. Шрифт и оффер      (название продукта, цены, ссылки)
     3. Точечные правки    (для микрокорректировок без переписывания компонентов)
   ========================================================================== */

:root {
    /* --- 1. Бренд-переменные ------------------------------------------ */
    /* Основной синий бренда */
    --c-navy:      #1d2b6f;
    --c-navy-deep: #223388;
    --c-darker:    #2a50a8;
    /* Синий-акцент (футер-лого, кнопки "Tudj meg többet") */
    --c-accent:    #437de8;
    --c-tint:      #c3d4f6;
    --c-wash:      #eef2ff;
    /* Жёлтый акцент CTA */
    --c-gold:      #f59f00;
    --c-gold-soft: #ffebbe;
    --c-gold-text: #dd9b00;
    /* Красный (warning) */
    --c-danger:    #da2f15;
    --c-danger-bg: #ffece9;

    /* --- 2. Типографика, оффер ---------------------------------------- */
    --ff-display: 'Brygada 1918', 'Geologica', serif;
    --ff-body:    'Inter', system-ui, -apple-system, Segoe UI, Roboto, sans-serif;

    /* Радиусы (если ленд требует более плоский/острый стиль) */
    --radius-sm: 8px;
    --radius:    12px;
    --radius-lg: 16px;
    --radius-xl: 24px;
}

/* --- 3. Точечные правки --------------------------------------------------
   Здесь можно держать одиночные правила, которые «подкручивают» компонент,
   не переписывая его исходные стили.
   ----------------------------------------------------------------------- */

/* [B] Видео-ревю: единая вертикальная (9:16) ориентация на всех устройствах.
   В базовых стилях у .video aspect-ratio задан только для мобайла, поэтому на
   десктопе видео отрисовывалось горизонтально. Фиксируем портрет везде. */
.video {
    aspect-ratio: 9 / 16;
    max-width: min(100%, 300px);
    margin-inline: auto;
}

/* [E] CTA-кнопка в шапке: текст в одну строку и по центру
   (раньше «ErectaPlus order» переносился на две строки и липнул влево). */
.product__cta--sm {
    white-space: nowrap;
    text-align: center;
}

/* Узкий десктоп (1025–1160px): полное меню ещё показано, но из-за nowrap-кнопки
   шапка переполнялась. Поджимаем отступы, чтобы всё влезло в одну строку. */
@media (min-width: 1025px) and (max-width: 1160px) {
    .topbar__nav {
        gap: 12px;
    }
    .topbar__inner {
        gap: 12px;
    }
    .product__cta--sm {
        padding: 6px 14px;
    }
}

/* [A] Кнопка в мини-форме (страница Order): делаем крупнее и читабельнее
   (была 30px). Снимаем фикс. высоту .mockform, чтобы кнопку не обрезало. */
.steps .register__submit {
    height: 46px;
    font-size: 14px;
}
.steps .mockform {
    height: auto;
    min-height: 200px;
}

/* [C] Планшет (≤1024px): навигация уже свёрнута в бургер, поэтому группируем
   переключатель языка + CTA + бургер в один блок справа, а не вразброс.
   Также product__info получает width:100%, чтобы текст не выходил за экран
   когда product__inner переходит в column-flex с align-items:center. */
@media (max-width: 1024px) {
    .header__lang {
        margin-left: auto;
    }
    .product__info {
        width: 100%;
        max-width: 500px;
    }
}

/* [D] Узкая раскладка (≤768px): карточки-шаги встают в одну колонку и
   растягивались на всю ширину — ограничиваем ширину и центрируем,
   чтобы картинки не выглядели растянутыми. */
@media (max-width: 768px) {
    .steps {
        justify-items: center;
    }
    .steps__card {
        width: 100%;
        max-width: 400px;
    }
}

.skip-link {
    position: absolute;
    top: -999px;
    left: 0;
    z-index: 9999;
    padding: 0.75rem 1.5rem;
    background: var(--c-navy);
    color: #fff;
    font-size: 1rem;
    text-decoration: none;
    border-radius: 0 0 4px 0;
}
.skip-link:focus {
    top: 0;
}