/* Cached on Thu, 18 Jun 2026 11:49:34 */
/*
 * responsive.css — адаптивный слой поверх легаси fixed-width макета (975px).
 * Грузится ПОСЛЕДНИМ в index.php, поэтому переопределяет index_v2.css/indexF.css.
 * ВАЖНО: всё внутри @media (max-width) — на десктопе (>980px) НЕ применяется ничего,
 * десктопная вёрстка остаётся байт-в-байт прежней. Откат = убрать includeCSS('css/responsive').
 *
 * Фаза 1: глобальный каркас (topBar / шапка-поиск / контейнер / футер) + гард overflow-x.
 * Дальнейшие фазы (листинги, деталка, формы) добавляются НИЖЕ своими секциями.
 */

/* ============================================================
 * Гард: ни один блок не должен заставлять страницу скроллиться вбок.
 * Брейкпоинт = ширина легаси-макета (975px) + небольшой запас.
 * ============================================================ */
@media (max-width: 980px) {

    html, body {
        overflow-x: hidden;          /* убираем горизонтальный скролл от 975px-блоков */
        max-width: 100%;
    }

    /* Снимаем жёсткие min-width: 975px, из-за которых страница не сжимается */
    .headPanel,
    .footerWrapper,
    .footerWrapper.fullFooter,
    .footerWrapper.smallFooter {
        min-width: 0 !important;
    }

    /* Центральные контейнеры 975px → тянутся по экрану с боковыми отступами */
    .headPanel > div,
    .footer {
        width: auto !important;
        max-width: 975px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---- Шапка-поиск: логотип + форма поиска перестают «торчать» ---- */
    .headPanel .search .logo,
    .headPanel .search .searchForm {
        display: block;
        width: auto !important;
        max-width: 100%;
        margin-right: 0;
    }
    .headPanel .search .logo {
        margin: 0 auto 10px;
        text-align: center;
    }

    /* ---- Верхняя фикс-панель (логин/избранное/соцсети) ---- */
    .topBar {
        position: static;            /* фикс-бар на мобиле занимает пол-экрана — отвязываем */
    }
    .topBarInner {
        width: auto !important;
        max-width: 975px;
        padding-left: 12px;
        padding-right: 12px;
        box-sizing: border-box;
    }
    /* раз topBar больше не fixed — убираем компенсирующий отступ контента */
    .bodyContent {
        padding-top: 10px !important;
    }

    /* ---- Футер: колонки навигации в одну колонку по центру ---- */
    .footer .navList ul,
    .countersBlock {
        display: block;
        margin: 0 0 16px 0;
        text-align: center;
    }
    .footer table,
    .footer table td {
        display: block;
        width: auto !important;
    }

    /* Картинки внутри контента не вылезают за ширину экрана.
       Намеренно НЕ глобально (img{}), чтобы не сплющить спрайты/иконки фикс-размера. */
    .bodyContent .vacText img,
    .bodyContent .resText img,
    .bodyContent .companyDescription img {
        max-width: 100%;
        height: auto;
    }
}

/* ============================================================
 * ФАЗА 2 — Главная / листинг (page_result_new): контейнер,
 * форма поиска, навигационные табы, сетка категорий.
 * ============================================================ */
@media (max-width: 980px) {

    /* Основной контейнер контента 975px → тянется по экрану */
    .hh-container {
        width: auto !important;
        max-width: 975px;
        box-sizing: border-box;
        padding-left: 12px;
        padding-right: 12px;
    }

    /* ---- Форма поиска: query + город + категория + кнопка в столбик ---- */
    .headPanel .search .searchForm,
    #searchForm {
        display: block;
        width: 100% !important;
    }
    input#search_line {
        width: 100% !important;
        box-sizing: border-box;
        margin: 0 0 8px 0;
    }
    .search-city-wrapper {
        display: block;
        width: 100% !important;
        margin: 0 0 8px 0;
    }
    .searchForm .tl-combobox {
        display: block;
        width: 100% !important;
        margin: 0 0 8px 0;
        box-sizing: border-box;
    }
    .searchSubmitButton {
        width: 100% !important;
        box-sizing: border-box;
    }

    /* ---- Навигационные табы (вакансии/резюме/компании + «добавить») ---- */
    .navTabs {
        width: auto !important;
        height: auto;            /* было 33px — фикс высота режет перенесённые табы */
        margin-bottom: 10px;
    }
    .navTabs ul {
        overflow: hidden;        /* содержит плавающие li */
    }
    .navAddUl {
        float: none;             /* «добавить вакансию/резюме» уезжает под табы, не вправо */
        margin-top: 6px;
    }
    .navAddUl li {
        float: left;
    }

    /* ---- Сетка категорий (slider_content): блок и колонки тянутся ---- */
    #slider_content .sc_block {
        width: auto !important;
        max-width: 961px;
        box-sizing: border-box;
        padding-left: 8px;
        padding-right: 8px;
    }
    .slContentUl,
    .slContentUl.countryUl {
        display: block;          /* колонки категорий в один столбец */
        margin-left: 0;
    }

    /* Главный промо-блок не вылезает за экран */
    .mainPromoWrap,
    .mainPromo {
        max-width: 100%;
        box-sizing: border-box;
    }
}

/* ============================================================
 * ФАЗА 2b — Бургер-меню верхней навигации (как на hh.md).
 * Бургер скрыт на десктопе; на узких экранах .navTabs ul
 * сворачивается в выпадающее меню, открываемое классом .navOpen.
 * ============================================================ */

/* Десктоп: бургер не показываем (иконка живёт только в мобиле) */
.navBurger { display: none; }
/* Material Symbols — тонкое начертание */
.material-symbols-outlined {
    font-variation-settings: 'wght' 200, 'opsz' 24, 'GRAD' 0, 'FILL' 0;
}

@media (max-width: 980px) {

    /* Контейнер навигации: место под бургер + раскрывающееся меню */
    .navTabs {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        min-height: 44px;
        overflow: visible !important;
        position: relative;
        background: #f5f5fa;
        border-bottom: 1px solid #d9d9ea;
    }

    /* Сама иконка-бургер */
    .navBurger {
        display: block;
        padding: 8px 12px;
        cursor: pointer;
        color: #FF8C00;
        line-height: 0;
        -webkit-tap-highlight-color: transparent;
    }
    .navBurger .material-symbols-outlined {
        font-size: 34px;
        display: block;
    }

    /* Оба списка (.navTabs ul и .navAddUl) сворачиваем; раскрываем по .navOpen */
    .navTabs ul {
        display: none !important;
        float: none !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border-top: 1px solid #e3e3f0;
    }
    .navTabs.navOpen ul { display: block !important; }

    /* Пункты — в столбик на всю ширину */
    .navTabs li {
        float: none !important;
        display: block !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        border: none !important;
        border-bottom: 1px solid #ececf6 !important;
        border-radius: 0 !important;
        background: #fff !important;
    }
    .navTabs li a {
        display: block !important;
        padding: 13px 16px !important;
        font-size: 16px !important;
        margin: 0 !important;
    }
    .navTabs li a.active {
        border-radius: 0 !important;   /* в списке оранжевая плашка во всю строку выглядит чище */
    }
    /* «+ Добавить вакансию/резюме» — те же строки меню, без float вправо */
    .navAddUl { margin-top: 0 !important; }
    .navAddUl li a { color: #FF8C00 !important; }

    /* --- Убираем белый зазор-разделитель сверху ---
       .header margin-top:60px/36px рассчитан на фикс-topBar десктопа;
       на мобиле topBar статичный → это просто пустая белая полоса. */
    .header,
    .header.smallMT { margin-top: 0 !important; }
    .navTabs { margin-bottom: 0 !important; }
    .bodyContent { padding-top: 0 !important; }
    .headPanel { padding-bottom: 8px !important; }
}

/* ============================================================
 * ФАЗА 2c — Компактный верх (мобайл): аккаунт-замок + язык.
 * На десктопе .mTop скрыт, работает старый topBar.
 * ============================================================ */
.mTop { display: none; }

@media (max-width: 980px) {

    /* Полоса topBar в один ряд: бренд слева, компактные контролы рядом */
    .topBarInner {
        display: flex !important;
        align-items: center;
        gap: 12px;
        flex-wrap: nowrap;
    }
    .mTop {
        display: flex !important;
        align-items: center;
        gap: 14px;
    }

    /* Прячем громоздкий легаси-верх — его заменяют компактные контролы */
    .topBar .topRight,
    .topBar .topSocial,
    #loginBlock,
    .topBar .upLink { display: none !important; }
    .topAsideSpan { display: none; }          /* текст домена убираем для компактности */
    .topLeft { flex: 0 0 auto; }

    /* --- контейнеры контролов --- */
    .mAcc, .mLang {
        position: relative;
        display: flex;
        align-items: center;
        cursor: pointer;
        color: #303030;
        -webkit-tap-highlight-color: transparent;
        user-select: none;
    }
    .mAcc .material-symbols-outlined { font-size: 28px; color: #FF8C00; }
    .mLang img {
        height: 18px; width: auto; display: block;
        border: 1px solid #ccc;
    }
    .mLang .mCaret { font-size: 20px; color: #777; margin-left: 1px; }

    /* --- выпадающие меню --- */
    .mDrop {
        display: none;
        position: absolute;
        top: 100%; left: 0;
        margin-top: 8px;
        background: #fff;
        border: 1px solid #d9d9ea;
        border-radius: 6px;
        box-shadow: 0 6px 18px rgba(0,0,0,.18);
        min-width: 170px;
        z-index: 12000;
        overflow: hidden;
    }
    .mAcc.open .mDrop,
    .mLang.open .mDrop { display: block; }

    .mDrop a {
        display: block;
        padding: 12px 16px;
        font-size: 15px;
        color: #303030;
        text-decoration: none;
        border-bottom: 1px solid #f0f0f5;
        white-space: nowrap;
    }
    .mDrop a:last-child { border-bottom: none; }
    .mDrop a:active,
    .mDrop a:hover { background: #f5f5fa; }
    .mLangMenu a img {
        height: 16px; width: auto;
        margin-right: 8px;
        vertical-align: middle;
        border: 1px solid #ccc;
    }
}

/* ============================================================
 * Телефоны (≤560px): дополнительно ужимаем отступы.
 * ============================================================ */
@media (max-width: 560px) {
    .headPanel > div,
    .footer,
    .topBarInner {
        padding-left: 8px;
        padding-right: 8px;
    }
}