/*
 * WordPress-специфичные патчи для темы Spravki
 *
 * Для чего: Дополнения к Vite-бандлу (index-jMqdjw-a.css) — только то чего нет в Vue SPA
 * Зачем: Нельзя редактировать минифицированный Vite-бандл напрямую
 * Почему минимально: Все основные стили уже в index-jMqdjw-a.css,
 *        лишние правила здесь будут конфликтовать с Vue SPA стилями
 * Когда: Загружается ПОСЛЕ index-jMqdjw-a.css (зависимость в wp_enqueue_style)
 */

/*
 * .screen-reader-text — стандартный класс ядра WordPress
 *
 * Для чего: WP-ядро подставляет этот класс во многих местах (пагинация,
 *           skip-ссылки и т.д.) и ожидает, что тема визуально его спрячет,
 *           оставив доступным для скринридеров — в оригинальном Vue SPA
 *           бандле такого класса нет (это чисто WP-паттерн), поэтому текст
 *           («Пагинация записей» и т.п.) вылезал видимым на страницу
 * Зачем: Стандартная accessibility-техника — не display:none (тогда скринридер
 *        тоже не прочитает), а визуальное скрытие за пределы видимой области
 */
.screen-reader-text {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
}

/*
 * Нет стилей для блокировки скролла body.navigation-open —
 * вместо overflow:hidden используем position:fixed в fix.js
 * (overflow:hidden не работает на iOS Safari под фиксированными панелями)
 */

/*
 * Горизонтальный overflow от "вылетающей" иллюстрации главного баннера
 *
 * Для чего: .main-page__header-banner__icon--split (main-page-cards.css)
 *           намеренно позиционируется с right:-160px, чтобы иллюстрация
 *           бросалась за правый край .main-page__header-banner__wrapper —
 *           без клиппинга здесь это расширяет весь документ (scrollWidth
 *           > clientWidth) и создаёт горизонтальный скролл/пустое поле
 *           справа на всех страницах сайта, а не только на баннере
 * Зачем: overflow-y НЕ трогаем (только -x) — не конфликтует с
 *        body.navigation-open (см. комментарий выше, iOS Safari)
 */
html,
body {
    overflow-x: hidden;
}

/*
 * Переключатель языков — select между иконкой поиска и кнопкой «Связаться»
 *
 * Для чего: Нативный select вписывается в шапку без кастомного dropdown
 * Зачем: Экономит место — коды языков (RU/EN) занимают ~50px вместо полных названий
 * Почему здесь: Оригинальный Vue SPA не имел этого элемента — добавлено как WP-патч
 */
.header__language-switcher {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.header__lang-select {
    -webkit-appearance: none;
    appearance: none;
    display: block;
    min-width: 60px;
    background-color: #fff;
    border: 1px solid rgba(41, 49, 57, 0.35);
    border-radius: 6px;
    padding: 5px 24px 5px 10px;
    font-size: 13px;
    font-weight: 600;
    color: #293139;
    cursor: pointer;
    line-height: 1.4;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%23546bc6' stroke-width='1.5' fill='none' stroke-linecap='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 7px center;
    transition: border-color 0.15s ease;
    outline: none;
}

.header__lang-select:hover,
.header__lang-select:focus {
    border-color: #546bc6;
}

/*
 * Мобильная шапка — переключатель языков
 *
 * Для чего: Гарантировать видимость language select на мобильном
 * Зачем: Vite-бандл не знает об этом элементе — нет базового правила visibility
 * Почему !important: Возможны конфликты со сторонними плагинами (smm-front.css)
 * Почему только language-switcher: Поиск и «Связаться» скрываются по логике Vite-бандла
 *        (@media max-width:599px — только contact; поиск всегда видим)
 */
@media (max-width: 1023px) {
    .header__language-switcher {
        display: flex !important;
    }
}

/*
 * Заголовок страницы (page-header) и хлебные крошки
 *
 * Для чего: Выводится через page.php перед ACF-блоками любой страницы
 * Зачем: Vite-бандл содержит .breadcrumbs только со скопом [data-v-...] —
 *        без него они не применяются к PHP-рендеренному HTML
 * Контейнер: .container — max-width 1290px, margin: auto (из Vite-бандла)
 */

/* ── Секция заголовка страницы ────────────────────────────────────────────── */

.page-header {
    padding: 24px 0 40px;
}

.page-header__title {
    margin-top: 20px;
    margin-bottom: 0;
}

@media (max-width: 1023px) {
    .page-header {
        padding: 16px 0 28px;
    }

    .page-header__title {
        margin-top: 14px;
    }
}

/* ── Хлебные крошки ───────────────────────────────────────────────────────── */

.breadcrumbs {
    display: block;
}

.breadcrumbs__inner {
    max-width: 100%;
}

.breadcrumbs__nav {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0 4px;
}

.breadcrumbs__item {
    color: #4c565f;
    font-size: 14px;
    font-weight: 500;
    line-height: normal;
    text-decoration: none;
    transition: color 0.2s ease;
}

.breadcrumbs__item:hover {
    color: #546bc6;
    text-decoration: none;
}

.breadcrumbs__separator_wrapper {
    width: 24px;
    height: 24px;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-shrink: 0;
}

.breadcrumbs__separator {
    width: 8px;
    height: 14px;
    color: #4c565f;
}

.breadcrumbs__item--current {
    cursor: default;
    color: #4c565f;
}

.breadcrumbs__item--current:hover {
    color: #4c565f;
    text-decoration: none;
}

/* Убираем padding-top из .layout-master — в оригинале (Vue SPA) этот отступ
   компенсировал fixed header, в WordPress header не фиксирован */
.layout-master {
    padding-top: 0;
}

/* Убираем отрицательный margin-bottom у hero-секции —
   в оригинале (Vue SPA) создавал перекрытие с блоком продуктов,
   в WordPress это не нужно */
.page__header__main-page {
    margin-bottom: 0;
}

/* ══════════════════════════════════════════════════════════════════════════
   ПАНЕЛЬ ПОИСКА В ШАПКЕ — ширина по контейнеру шапки
   Для чего: .header__search-panel в разметке лежит СИБЛИНГОМ .header__container
             (вне обёртки, см. header.php) — то есть на всю ширину .header
             (100% вьюпорта), а не на 1440px как .header__container/.header__main.
             На вьюпортах шире ~1500px панель бралась шире самой шапки
   Зачем: Пользователь явно попросил — панель не должна выходить за пределы
          контейнера шапки по ширине
   Как: max-width:1440px + margin:auto + padding:0 54px повторяет итоговый
        отступ .header__main от края .header__container — 24px паддинга
        самого .header__container (компиled CSS) + 30px паддинга
        .header__main, который .search-header__container потом вычитает
        обратно через left:-30px/right:-30px — поэтому итоговые края
        совпадают с краями .header__main пиксель в пиксель (проверено
        через getBoundingClientRect на 1920px вьюпорте)
   ══════════════════════════════════════════════════════════════════════════ */
.header__search-panel {
    max-width: 1440px;
    margin: 0 auto;
    padding: 0 54px;
    box-sizing: border-box;
}

@media (max-width: 767px) {
    .header__search-panel {
        padding: 0 16px;
    }
}