/*!
 * Black Marketing Group — visual fixes
 * ------------------------------------------------------------
 * Дополнительный слой стилей, подключаемый после основных CSS темы.
 * Содержит только точечные исправления геометрии, типографики,
 * адаптивности и состояний интерактивных элементов.
 *
 * Подключение: wp-content/mu-plugins/blackmarketing-css-fixes.php
 * Файл не заменяет и не переписывает существующие стили темы.
 */

/* ==========================================================================
   1. Базовая геометрия страницы
   ========================================================================== */

/*
 * Декоративные элементы Tilda/Elementor (фоновые ленты, «свечения»,
 * отрицательные отступы) иногда шире вьюпорта и создают горизонтальную
 * прокрутку. clip (в отличие от hidden) не создаёт новый скролл-контейнер
 * и не ломает position: sticky.
 */
html,
body {
    overflow-x: clip;
    max-width: 100%;
}

/* Якорные ссылки не должны прятаться под фиксированной шапкой. */
#services,
#contacts,
#top {
    scroll-margin-top: 96px;
}

/* ==========================================================================
   2. Шапка и навигация
   ========================================================================== */

/*
 * На десктопе шапка полупрозрачная (rgba(0,0,0,.70)) и при прокрутке
 * пропускает под себя текст секций — заголовки и пункты меню визуально
 * накладываются. Делаем фон плотнее и добавляем мягкое размытие.
 * Селектор с !important необходим: прозрачность задана inline-стилем Tilda.
 */
#nav44728542.t446 {
    background-color: rgba(8, 8, 8, 0.94) !important;
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
}

/* Единые заметные состояния фокуса для клавиатурной навигации. */
.t446 a:focus-visible,
.t280 a:focus-visible,
.mega-menu a:focus-visible,
.t-menu a:focus-visible {
    outline: 2px solid #ffe205;
    outline-offset: 3px;
}

/* ==========================================================================
   3. Главная страница: первый экран
   ========================================================================== */

/*
 * Подзаголовок героя на мобильных получает font-size: 34px при
 * line-height: 20px, из-за чего строки «Абордаж любого / рынка»
 * наезжают друг на друга. Задаём пропорциональный межстрочный интервал.
 */
#rec44521508 .t216__descr > div[data-customstyle="yes"] {
    line-height: 1.2;
}

@media (max-width: 480px) {
    /* На узких экранах слегка уменьшаем подзаголовок героя,
       чтобы длинная строка не упиралась в края. */
    #rec44521508 .t216__descr > div[data-customstyle="yes"] {
        font-size: clamp(26px, 8vw, 34px) !important;
        line-height: 1.2;
    }
}

/* ==========================================================================
   4. Elementor: заголовки и контейнеры
   ========================================================================== */

/*
 * Длинные русские слова в заголовках Elementor (например,
 * «таргетированной») не помещаются на 320 px и выходят за экран.
 */
.elementor-heading-title {
    overflow-wrap: break-word;
}

/*
 * Элементы с пользовательской шириной (elementor-widget__width-initial)
 * на мобильных сохраняют десктопную ширину и вылезают за контейнер.
 * На узких экранах отдаём им всю доступную ширину.
 */
@media (max-width: 767px) {
    .elementor-widget-heading.elementor-widget__width-initial {
        width: auto !important;
        max-width: 100% !important;
    }
}

/*
 * На 320 px заголовки Elementor остаются крупными (41–56 px), из-за чего
 * самое длинное слово шире контейнера. Ограничиваем размер только на
 * самых узких экранах, сохраняя масштаб на 390 px и выше.
 */
@media (max-width: 360px) {
    .elementor-heading-title {
        font-size: clamp(26px, 8.5vw, 34px) !important;
        line-height: 1.2 !important;
    }
}

/*
 * Контейнеры Elementor с фиксированной шириной (1140 px) не сжимаются
 * на планшете и создают горизонтальную прокрутку.
 */
@media (max-width: 1024px) {
    .elementor-element.e-con-full {
        max-width: 100% !important;
        min-width: 0;
    }
}

/* Логотипы партнёров/сервисов в контенте услуги растянуты по высоте
   (227×54 отображается как 227×60). Возвращаем естественные пропорции. */
.single-kontekstnaya-reklama .elementor-widget-container > img.attachment-medium {
    height: auto !important;
}

/* ==========================================================================
   5. Формы и кнопки Tilda внутри Elementor
   ========================================================================== */

/*
 * В гибридных Elementor-блоках Tilda-кнопка «Заказать» с отступами 60 px
 * шире своей flex-колонки и выходит за край страницы. На планшетной ширине
 * уменьшаем горизонтальные отступы, сохраняя размер и читаемость кнопки.
 * Это не меняет расположение колонок и не ломает соседние элементы.
 */
@media (min-width: 641px) and (max-width: 1024px) {
    .t142__submit {
        padding-left: 15px !important;
        padding-right: 15px !important;
    }

    /* Обёртка кнопки не должна сжиматься уже своего содержимого:
       иначе кнопка выходит за правый край карточки. */
    .elementor-widget__width-auto:has(.t142__submit) {
        width: max-content !important;
        max-width: 100% !important;
        flex-shrink: 0;
    }
}

/* Заметный фокус у кнопок и полей ввода. */
.t-btn:focus-visible,
.t-submit:focus-visible,
.btn:focus-visible,
button:focus-visible,
input:focus-visible,
textarea:focus-visible,
select:focus-visible {
    outline: 2px solid #ffe205;
    outline-offset: 3px;
}

/* ==========================================================================
   6. Пресс-центр
   ========================================================================== */

/* Иконка поиска позиционирована абсолютно и накладывается на placeholder.
   Освобождаем под неё место слева, сохраняя ширину поля. */
input.bm-press-search-input {
    box-sizing: border-box;
    padding-left: 34px;
}

/* ==========================================================================
   7. Страница MVP
   ========================================================================== */

/*
 * Корневая секция MVP имеет display: inline. Из-за этого width: 100%
 * игнорируется, padding добавляется сверх ширины контейнера и страница
 * получает горизонтальную прокрутку на 320/390/768 px.
 */
#mvp {
    display: block !important;
    width: 100%;
    max-width: 100%;
    overflow-x: clip;
}

/* Длинное слово MARKETING в заголовке MVP не помещается на 320–390 px
   и обрезается справа. Уменьшаем кегль только на мобильных. */
@media (max-width: 480px) {
    body.page-template-mvp-page .hero h1 {
        font-size: clamp(28px, 8.5vw, 38px) !important;
        line-height: 1.1;
    }
}

/* ==========================================================================
   8. Футер
   ========================================================================== */

/* Юридическая сноска задана цветом #404040 на фоне #111111 — крайне
   низкий контраст. Осветляем текст, сохраняя приглушённый вид. */
.t574 small {
    color: #9a9a9a !important;
}

/* ==========================================================================
   9. Cookie-баннер
   ========================================================================== */

/* На невысоких экранах баннер не должен уходить за пределы вьюпорта;
   при необходимости он прокручивается внутри себя. */
@media (max-width: 480px) {
    #cookieBlock {
        max-height: calc(100vh - 16px);
        max-height: calc(100dvh - 16px);
        overflow-y: auto;
    }
}