/* bel-trans.com.ua — правка 07.10.2026 (Р38, замечания критика к выкладке 3.1). Подключается после lardi-seal.css. */

/* 1. Телефон до 420 px: шапка в два ряда вместо трёх (было ≈137 px на 360) — логотип и UA/EN, под ними обе кнопки. */
@media (max-width: 420px) {
  .site-header .header-inner { flex-wrap: wrap; row-gap: 8px; }
  .site-header .header-actions { display: contents; }
  .site-header .site-language { order: 2; margin-left: auto; }
  .site-header .btn-group { order: 3; width: 100%; flex-direction: row; gap: 8px; }
  .site-header .btn-group > .btn-primary,
  .site-header .btn-group > .btn-gateway { flex: 1 1 0; justify-content: center; text-align: center;
                                            padding: 9px 6px; font-size: 11px; white-space: nowrap; }
}

/* 2. Компьютер и планшет: подписи карты (Київ, Вінниця, Миколаїв, Одеса, Запоріжжя…) не просвечивают сквозь текст
   первого экрана. Карта — фиксированный слой .site-scene под .hero; в центре экрана, где стоит текст, — мягкая подложка
   цвета страницы (#f8f4e9). Грузовики по углам и края карты не затрагиваются. */
@media (min-width: 760px) {
  .site-scene::after {
    content: ""; position: absolute; inset: 0; pointer-events: none;
    background: radial-gradient(ellipse 36% 36% at 50% 52%, rgba(248, 244, 233, 0.86) 0%, rgba(248, 244, 233, 0.72) 55%,
                rgba(248, 244, 233, 0) 100%);
  }
}

/* 3. Шапка после прокрутки (Р40 п. 4, замечание критика): плотный фон цвета страницы, чтобы заголовки и текст не
   просвечивали сквозь логотип и кнопки. На первом экране (прокрутка до 40 px) шапка прозрачная, как была.
   Класс is-scrolled ставит site.js. Слой ::after — поверх «линзы» шапки (.site-header.lens::before не трогаем). */
.site-header::after {
  content: ""; position: absolute; inset: 0; z-index: -1; pointer-events: none;
  background: #f8f4e9; box-shadow: 0 1px 10px rgba(40, 35, 31, 0.08); opacity: 0; transition: opacity 0.25s ease;
}
.site-header.is-scrolled::after { opacity: 0.97; }