/* ==========================================================================
   Новая шапка — тема "Mondial Pack New"
   --------------------------------------------------------------------------
   Раскладка шапки построена на flex: логотип | поиск | телефоны | адрес.
   Абсолютное позиционирование блоков шапки (.header_adres, #feedback,
   #ya-site-form0) убрано — блоки больше не наезжают друг на друга.

   БРЕЙКПОИНТЫ (адаптив шапки):
     >= 1200px  — полная шапка: логотип, поиск, телефоны, адрес/время/e-mail
     <= 1199px  — убран блок с адресом (время работы, адрес, e-mail)
     <= 993px   — дополнительно убран поиск
     <= 540px   — включается существующая мобильная версия (css/mobile.css):
                  липкая белая шапка с бургер-меню, логотипом и телефонами

   Стили, которые на боевом сайте задавались через «Дополнительный CSS»
   кастомайзера (они привязаны к имени старой темы и в новую тему
   НЕ переносятся), вшиты сюда:
      #top-phone .number {position: relative;}
      #top-phone {height: 70px;}   -> см. min-height ниже
   ========================================================================== */

/* ---------- Телефоны: ссылки, иконки, активная иконка MAX ---------- */

#top-phone .number {
    position: relative;
}

#top-phone .number a {
    color: #444;
    text-decoration: none;
}

#top-phone .number a:hover {
    color: #ba0101;
}

/* Иконка MAX рядом с номером 8 (910) 732-20-22 — это кликабельная ссылка */
#top-phone .number .max-ico {
    display: inline-block;
    width: 18px;
    height: 18px;
    margin-right: 6px;
    vertical-align: -3px;
    background: url('images/max-colored.svg') no-repeat center;
    background-size: 18px;
    transition: opacity 0.2s;
}

#top-phone .number .max-ico:hover {
    opacity: 0.7;
}

/* Обычная иконка телефона у последнего номера заменена ссылкой MAX */
#top-phone .number.number-max:before {
    display: none !important;
}

/* Небольшой отступ между иконкой и номером */
#top-phone .number:before {
    margin-right: 4px;
}

/* ---------- Десктоп: 541px и выше ---------- */

@media screen and (min-width: 541px) {

    /* Высота шапки — по содержимому, а не жёстко 175/180px,
       чтобы блоки никогда не наезжали друг на друга */
    #header-wrapp {
        height: auto;
    }

    #header {
        height: auto;
        min-height: 180px;
    }

    /* Главная строка шапки */
    .concact_ehader_block {
        display: flex;
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 12px 20px;
    }

    /* Логотип (может сжиматься на узких экранах). height: auto — чтобы
       ссылка .text-rtv под логотипом не вылезала за блок и не наезжала
       на меню (в старой теме её «прятали» отступом меню margin-left: 244px) */
    #header #logo {
        flex: 0 1 215px;
        width: 215px;
        height: auto;
        min-height: 125px;
        min-width: 140px;
    }

    #header #logo img {
        max-width: 100%;
        height: auto;
    }

    /* Поиск Яндекса — в обычном потоке (ранее position: absolute) */
    #header #searche {
        flex: 1 1 240px;
        min-width: 200px;
        max-width: 380px;
        padding-top: 60px;
        box-sizing: border-box;
    }

    #header #searche .ya-site-form {
        width: 100%;
    }

    #header #searche #ya-site-form0 {
        position: static !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        margin-top: 0 !important;
    }

    /* Блок телефонов (ранее position: absolute; left: 755px; top: 10px) */
    #header .header_adres {
        position: static;
        top: auto;
        left: auto;
        width: auto;
        padding-top: 8px;
        box-sizing: border-box;
    }

    #header #top-phone {
        width: auto;
        height: auto;
        min-height: 70px;
    }

    /* Сетка: 3 ряда по 2 номера, как заказано */
    #header #top-phone .phone-grid {
        display: grid;
        grid-template-columns: repeat(2, auto);
        justify-content: start;
        gap: 6px 16px;
    }

    #header #top-phone .number {
        width: auto;
        font-size: 18px;
        line-height: 1.2;
        padding-top: 0;
        white-space: nowrap;
    }

    /* Блок адреса: время работы (сверху) -> адрес -> e-mail
       (ранее position: absolute; right: 0; top: 35px) */
    #header #feedback {
        position: static;
        top: auto;
        right: auto;
        width: 210px;
        padding-top: 8px;
        box-sizing: border-box;
    }

    /* Внутри #feedback цвет белый — текст времени работы делаем тёмным */
    #header #feedback .time_work {
        color: #444;
        margin-bottom: 4px;
    }

    /* Ссылка e-mail была жёстко 210px и вылезала за блок на узких экранах */
    #header #feedback a.no-background {
        width: 100%;
        box-sizing: border-box;
    }

    /* Меню: ширина по потоку вместо фиксированных 956px + margin-left.
       Отступа слева больше НЕТ — первым пунктом идёт «Упаковочное
       оборудование» (перенесён сюда из-под логотипа), и меню начинается
       от левого края. Сверху — такая же линия, как уже стояла снизу
       (её даёт border-bottom у #header) */
    #top-menu,
    #top-menu-mobile {
        width: auto;
        margin-left: 0;
        margin-right: 0;
        height: auto;
        min-height: 36px;
        border-top: 1px solid #c9bdad;
    }

    #top-menu:after,
    #top-menu-mobile:after {
        content: "";
        display: block;
        clear: both;
    }

    /* Пункты меню переносим через flex, а не float: строки переносятся
       аккуратно и всегда начинаются от левого края.
       В разметке #top-menu — это DIV, а пункты лежат во вложенном UL */
    #top-menu > ul,
    #top-menu-mobile > ul {
        display: flex;
        flex-wrap: wrap;
        width: 100%;
        height: auto;
        min-height: 36px;
    }
}

/* ---------- 1199px и меньше: убираем блок с адресом ---------- */

@media screen and (min-width: 541px) and (max-width: 1199px) {

    /* Блок «время работы / адрес / e-mail» скрывается — освобождаем место */
    #header #feedback {
        display: none;
    }

    /* Поиск занимает освободившуюся ширину */
    #header #searche {
        flex: 1 1 240px;
        min-width: 200px;
        max-width: 480px;
        padding-top: 55px;
    }

    #top-menu li a,
    #top-menu-mobile li a {
        padding: 0 18px;
    }

    /* Шеврон выпадающего подменю (.arrow_top) в исходной теме стоял
       абсолютно у правого края пункта и попадал под текст, как только
       отступы пунктов уменьшили. Делаем его потоковым — он идёт сразу
       после текста и ничего не перекрывает */
    #top-menu .arrow_top,
    #top-menu-mobile .arrow_top {
        position: static;
        display: inline-block;
        width: auto;
        height: auto;
        padding: 0;
        margin-left: 6px;
        transform: none;
        font-size: 16px;
        vertical-align: middle;
    }

    #top-menu .arrow_top:after,
    #top-menu-mobile .arrow_top:after {
        content: '>';
        display: inline-block;
        position: static;
        top: auto;
        transform: rotateZ(90deg);
    }
}

/* ---------- 993px и меньше: дополнительно убираем поиск ---------- */

@media screen and (min-width: 541px) and (max-width: 993px) {

    /* Поиск скрывается, остаются логотип и телефоны */
    #header #searche {
        display: none;
    }

    /* Телефоны и логотип ужимаются, чтобы влезть в одну строку */
    #header #top-phone .number {
        font-size: 16px;
    }

    #header #top-phone .phone-grid {
        gap: 5px 12px;
    }

    #header #logo {
        min-width: 130px;
    }

    /* Пункты компактнее — меньше переносов строк */
    #top-menu li a,
    #top-menu-mobile li a {
        padding: 0 12px;
        font-size: 14px;
    }
}