/* ============================================================================
   Montserrat вместо Arial Narrow — оверлей для демо новой палитры.
   Подключается ТОЛЬКО через local/include/ui_switch.php (?ui=font|all).
   Файлы шрифта берём из ядра Битрикса, ничего не докачивая.

   Замеры на живой странице (canvas, кириллица):
     x-height   Arial Narrow 0.52 · Montserrat 0.52  → совпадает
     cap-height Arial Narrow 0.72 · Montserrat 0.72  → совпадает
     ширина     Montserrat шире на 21.6% (в среднем по алфавиту),
                до +37% на реальных фразах с пробелами и заглавными
   Вывод: кегль НЕ меняем — высота букв идентична. Компенсируем только ширину.

   ВАЖНО: montserrat-bold.woff2 (9.8 КБ) — латинский сабсет, кириллицы в нём
   нет ни одной буквы. Поэтому weight 700 намеренно указывает на semibold-файл:
   так любой font-weight:700 в коде рендерится с кириллицей и без правок кода.
   ========================================================================= */

@font-face {
    font-family: 'MontserratUI';
    src: url('/bitrix/js/ui/fonts/montserrat/montserrat-regular.woff2') format('woff2'),
         url('/bitrix/js/ui/fonts/montserrat/montserrat-regular.woff') format('woff');
    font-weight: 400;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MontserratUI';
    src: url('/bitrix/js/ui/fonts/montserrat/montserrat-medium.woff2') format('woff2'),
         url('/bitrix/js/ui/fonts/montserrat/montserrat-medium.woff') format('woff');
    font-weight: 500;
    font-style: normal;
    font-display: swap;
}
@font-face {
    font-family: 'MontserratUI';
    src: url('/bitrix/js/ui/fonts/montserrat/montserrat-semibold.woff2') format('woff2'),
         url('/bitrix/js/ui/fonts/montserrat/montserrat-semibold.woff') format('woff');
    font-weight: 600;
    font-style: normal;
    font-display: swap;
}
/* 700 → semibold-файл: в bold нет кириллицы */
@font-face {
    font-family: 'MontserratUI';
    src: url('/bitrix/js/ui/fonts/montserrat/montserrat-semibold.woff2') format('woff2'),
         url('/bitrix/js/ui/fonts/montserrat/montserrat-semibold.woff') format('woff');
    font-weight: 700;
    font-style: normal;
    font-display: swap;
}

:root {
    --font-ui: 'MontserratUI', 'Segoe UI', Arial, sans-serif;
}

/* --------------------------------------------------------------------------
   1. Подмена семейства
   Точечно перечисляем текстовые элементы, а не «*», чтобы не сломать
   иконочные шрифты (FontAwesome 4/5, Glyphicons) и псевдоэлементы иконок.
   -------------------------------------------------------------------------- */
body,
p, span, div, a, li, dt, dd,
td, th, caption,
h1, h2, h3, h4, h5, h6,
label, legend, blockquote, figcaption,
input, textarea, select, button, optgroup, option,
.btn, .title, .name, .price, .tabs, .breadcrumb,
.mega-menu, .menu-row, #mobilemenu, #headerfixed,
.vbk-drawer, .vbk-drawer *,
.direction-page-v2, .direction-page-v2 *,
.ss-wrap, .ss-wrap * {
    font-family: var(--font-ui) !important;
}

/* иконочные шрифты возвращаем обратно */
.fa, .fas, .far, .fal, .fab,
[class^="fa-"], [class*=" fa-"],
.fa::before, .fas::before, .far::before, .fab::before,
[class^="fa-"]::before, [class*=" fa-"]::before {
    font-family: 'FontAwesome', 'Font Awesome 5 Free', 'Font Awesome 5 Brands' !important;
}
.glyphicon, [class^="glyphicon-"], [class*=" glyphicon-"],
.glyphicon::before {
    font-family: 'Glyphicons Halflings' !important;
}
/* Битриксовая админка и панель — не трогаем */
#bx-panel, #bx-panel *, .bx-core-window, .bx-core-window *,
.bx-panel-tabs, .adm-workarea, .adm-workarea * {
    font-family: '' !important;
    font-family: revert !important;
}

/* --------------------------------------------------------------------------
   2. Компенсация ширины
   Кегль не трогаем (высота букв совпадает 1:1). Убираем разгонный трекинг
   там, где он был заложен под узкий Arial Narrow, и слегка поджимаем
   самые тесные строки.
   -------------------------------------------------------------------------- */

/* верхнее меню: было letter-spacing 1px под узкий шрифт — Montserrat в нём не нуждается */
.menu-row .mega-menu td .wrap > a,
.mega-menu table td .wrap > a,
#headerfixed .menu-block .navs ul li > a {
    letter-spacing: 0 !important;
}

/* «Контакты филиалов» — самый длинный пункт, бокс был 158px при тексте 148px.
   Свободного места в строке меню ~938px, поэтому пункт просто станет шире;
   подрезаем только горизонтальные паддинги, чтобы строка не разъехалась. */
.menu-row .mega-menu table td .wrap > a,
.mega-menu table td .wrap > a {
    padding-left: 12px !important;
    padding-right: 12px !important;
}

/* выпадающее подменю услуг: колонка фиксирована 200px, а
   «Дерматовенерология, косметология» занимает 207px уже сейчас (переполнение
   было и до нас), в Montserrat — 252px. Расширяем колонку. */
.mega-menu .dropdown-menu > li,
.mega-menu table .wrap > .dropdown-menu > li,
.logo_and_menu-row .mega-menu .dropdown-menu > li {
    min-width: 260px;
}
.mega-menu .dropdown-menu > li > a,
.mega-menu .dropdown-menu > li > .submenu_link {
    white-space: normal;
    letter-spacing: 0 !important;
}

/* кнопки: 13px / line-height 45px — подписи вроде «Записаться на приём»
   становятся на ~30px длиннее, добавляем воздуха вместо переноса */
.btn, .btn-default, .btn-primary, a.btn, span.btn, input.btn {
    letter-spacing: 0 !important;
    white-space: nowrap;
}

/* таблица цен: длинные названия услуг, колонка узкая — переносы допустимы,
   но межбуквенное расстояние убираем */
.price-table td, .prices-elements .item .title,
.linked-prices-tab .prices .items td {
    letter-spacing: 0 !important;
}

/* заголовки: Montserrat геометрический, при крупном кегле смотрится
   разреженным — подтягиваем трекинг, как принято для этой гарнитуры */
h1 { letter-spacing: -0.02em; }
h2 { letter-spacing: -0.015em; }
h3, h4 { letter-spacing: -0.01em; }

/* цифры в ценах и телефонах — моноширинные позиции */
.price_val, .price .value, .phone, .phone a,
.vbk-drawer .vbk__srv-price, .ss-price-row .p-val {
    font-variant-numeric: tabular-nums;
}

/* «Контакты филиалов» ломался на две строки.
   Замер на 1440px: тексту в Montserrat нужно 183px, а в ячейке свободно
   176px — не хватает семи пикселей. В Arial Narrow тот же текст помещался,
   так что это прямое следствие смены шрифта, и правка живёт здесь.

   17px → 16px даёт 172px, запас 4px. Меньше уменьшать незачем.
   Заодно запрещаем перенос всем пунктам: сумма ячеек 1275px при контейнере
   1344px, свободных ~70px — на любой пункт хватит, строка не разъедется. */
.menu-row .mega-menu table td .wrap > a,
.mega-menu table td .wrap > a,
#headerfixed .menu-block .navs ul li > a {
    font-size: 16px !important;
    /* !important обязателен: компонент меню сам дописывает инлайновым
       блоком правило white-space: normal через ID-селектор
       (#main-menu-XXXX .menu-item > .wrap > a.fixed) — по специфичности
       оно бьёт любой селектор по классам. */
    white-space: nowrap !important;
}

/* Заголовки карточек услуг на главной.
   Было 23.5px: длинные названия вроде «Дневной стационар (капельницы,
   уколы) для взрослых и детей» разваливались на четыре строки и распирали
   плитку. В Montserrat это заметнее, чем в Arial Narrow: тот же текст шире
   примерно на пятую часть. 1.1em от родительских 16px даёт 17.6px. */
.sections.item-views .item .title {
    font-size: 1.1em;
}

/* --------------------------------------------------------------------------
   3. Узкий десктоп: 992–1199px
   Раньше сюда было не добраться — шапка переключалась на мобильную аж на
   1300px, и весь тир md жил под бургером. Границу вернули на бутстраповские
   991/992, диапазон открылся, и выяснилось, что в Montserrat шапка в нём
   не помещалась.

   Лимиты ширины пунктов меню правились отдельно, в шаблоне
   (local/templates/.default/components/bitrix/menu/top_2/template.php):
   они обрезали длинный пункт и к шрифту отношения не имеют. Здесь —
   только то, что вызвано именно Montserrat.
   -------------------------------------------------------------------------- */
@media (min-width: 992px) and (max-width: 1199px) {

    /* Строка меню. В Arial Narrow десять пунктов при кегле 15px занимают
       ~690px и спокойно живут в контейнере от 962px. В Montserrat тот же
       набор требует ~1068px — на 992px не хватает 106px, на 1050px 48px.
       Перебрали замером: кегль 14px плюс боковые отступы ячейки 8 → 4px
       (десять пунктов отдают 80px) укладываются на обеих ширинах.
       Меньше уменьшать незачем, а по отдельности ни того, ни другого
       не хватает.

       Оба правила живут здесь, а не в шаблоне меню: боевому сайту на
       Arial Narrow они не нужны — там те же десять пунктов при 15px
       занимают ~690px и помещаются с большим запасом.

       !important обязателен: кегль перебивает 16px из раздела 2, отступы —
       инлайновый блок шаблона меню с ID-селектором. */
    .logo_and_menu-row .mega-menu table td .wrap > .submenu_link-title,
    .logo_and_menu-row .mega-menu table td .wrap > a {
        font-size: 14px !important;
    }

    .logo_and_menu-row .mega-menu table td {
        padding-left: 4px !important;
        padding-right: 4px !important;
    }

    /* Строка контактов: два адреса и режим работы. Контейнер — flex-wrap,
       поэтому в Montserrat она не ломалась, а честно переносила режим
       работы на вторую строку: на 992px трём блокам нужно 1161px при
       доступных 962px. В Arial Narrow тем же блокам хватает 916px, и они
       стоят в одну строку — поэтому правка живёт здесь, а не в шаблоне.

       Кегль плавающий, а не ступенькой: у самого края (1199px) 16px ещё
       помещается, и ронять его там до 13px незачем. clamp даёт 13px на
       992px и плавно возвращает 16px к 1199px; ниже 13px не опускается
       никогда, выше 16px не поднимается. Промежуток 24 → 16px добавляет
       недостающие 16px на самой узкой точке.

       Скоуп .visible-lg.visible-md обязателен: .logo-row есть и в подвале,
       без него правило поедет туда. */
    .visible-lg.visible-md .logo-row > div:first-child {
        gap: 16px !important;
    }

    .visible-lg.visible-md .logo-row .info-item {
        font-size: clamp(13px, calc(1.44vw - 1.5px), 16px) !important;
    }

    /* Замеры при включённом ?ui=font: номеру не хватает 31px на 992,
       18px на 1050, 7px на 1100; с 1150 помещается. Трекинг 1px заложен
       под узкий Arial Narrow и на 18 знаках даёт лишние 18px — Montserrat
       в нём не нуждается, это тот же приём, что для меню в разделе 2.
       Кегль 18 → 16 добавляет ещё около 20px. Вместе с запасом. */
    .logo-row .phone-block .nobg.phone a {
        letter-spacing: 0 !important;
        font-size: 16px !important;
    }
}