/* =============================================================
   Шапка сайту на ПК — макет Figma 4724:37048 («Про нас»).
   Підключається після style.min.css (footer.php) і перекриває старі
   правила шапки звідти, частина яких іде з !important.

   Діє лише на ПК-варіант (.header-variant--desktop) — тоді, коли не спрацьовує
   мобільний запит теми (max-width: 1163px). Саме «not all and (max-width: 1163px)»,
   а не «min-width: 1164px»: за масштабу 110% ширина буває дробовою (1163.6px),
   і між двома запитами лишалася б діра без жодної шапки.
   Мобільна шапка (бургер) лишається як була.
   ============================================================= */

/* header.php ховає body (html body { display: none !important }), style.min.css його
   показує, але header.css приходить окремим файлом — без цього рядка сторінка на мить
   показувалась би зі старою шапкою і стрибала на 37px. */
html body {
    display: block !important;
}

@media not all and (max-width: 1163px) {

    /* ---------- контейнер: 12px зверху, 20px з боків, 8px між рядками ---------- */

    header.header {
        height: 131px;
    }

    header.header .wrapper {
        padding: 12px 20px 0 !important;
        box-sizing: border-box;
    }

    /* ---------- верхній рядок ---------- */

    header.header .header-variant--desktop .head-top {
        display: flex;
        justify-content: space-between;
        align-items: center;
        gap: 32px;
        height: 43px;
        margin: 0 0 8px;
        padding: 0 !important;
    }

    .header-variant--desktop .head-top__info,
    .header-variant--desktop .head-top__actions {
        display: flex;
        align-items: center;
        min-width: 0;
    }

    /* Якщо графік не вміщується цілим (довгий англійський на вузькому ПК), він переноситься
       на другий рядок, а той прихований — краще без графіка, ніж обрізаний трикрапкою. */
    .header-variant--desktop .head-top__info {
        flex: 0 1 auto;
        flex-wrap: wrap;
        gap: 24px;
        height: 43px;
        overflow: hidden;
    }

    .header-variant--desktop .head-top__actions {
        flex: 0 0 auto;
    }

    header.header .header-variant--desktop .head-top .phone {
        margin: 0 !important;
        font-family: "MazzardH-Regular";
        font-size: 16px;
        line-height: 43px;
        color: #000;
        white-space: nowrap;
    }

    header.header .header-variant--desktop .head-top .phone:hover {
        color: #c80000;
    }

    /* роздільник «|» — символ шрифту, як у макеті (лінія 1px зсувала сусідів на ~4px) */
    .header-variant--desktop .head-top__schedule::before,
    header.header .header-variant--desktop .lang::before {
        content: "|";
        flex: none;
        width: auto;
        height: auto;
        background: none;
        font-family: "MazzardH-Regular";
        font-size: 16px;
        line-height: normal;
        color: #000;
        opacity: .5;
    }

    /* графік: риска за 32px від телефонів (24px проміжку + 8px) і за 32px до тексту */
    .header-variant--desktop .head-top__schedule {
        display: flex;
        align-items: center;
        font-family: "MazzardH-Regular";
        font-size: 16px;
        line-height: 43px;
        color: #000;
        white-space: nowrap;
    }

    .header-variant--desktop .head-top__schedule::before {
        margin: 0 32px 0 8px;
    }

    /* соцмережі: сірі кола 24px (плавна зміна кольору — з правила теми для .soc a) */
    header.header .header-variant--desktop .head-top .soc {
        display: flex;
        align-items: center;
        gap: 6px;
    }

    header.header .header-variant--desktop .head-top .soc::before {
        display: none;
    }

    header.header .header-variant--desktop .head-top .soc a {
        display: block;
        width: 24px;
        height: 24px;
        margin: 0;
        color: #505050;
    }

    header.header .header-variant--desktop .head-top .soc a:hover {
        color: #c80000;
    }

    header.header .header-variant--desktop .head-top .soc svg,
    header.header .header-variant--desktop .head-top .soc img {
        display: block;
        width: 24px;
        height: 24px;
    }

    /* мова: «UA ▾», риска перед нею — .lang:before теми (відступи 32px з обох боків) */
    header.header .header-variant--desktop .lang {
        height: 43px;
    }

    header.header .header-variant--desktop .lang .wpml-ls-legacy-list-horizontal ul {
        height: 26px;
        line-height: 26px;
    }

    header.header .header-variant--desktop .lang .wpml-ls-legacy-list-horizontal ul li a {
        font-family: "MazzardH-Regular";
        color: #000;
    }

    header.header .header-variant--desktop .lang .wpml-ls-legacy-list-horizontal ul li.wpml-ls-current-language a span::after {
        width: 12px;
        height: 12px;
        margin: -2px 0 0 8px;
        background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M1.463 4.463C.923 3.923 1.306 3 2.07 3h7.861c.764 0 1.146.923.607 1.463L6.606 8.394a.857.857 0 0 1-1.212 0L1.463 4.463Z' fill='%23000'/%3E%3C/svg%3E") center / contain no-repeat;
    }

    header.header .header-variant--desktop .lang .wpml-ls-legacy-list-horizontal ul li a:hover {
        color: #c80000;
    }

    /* випадний пункт іншої мови: тема робить його 45px — з нижчим рядком він налазив на меню */
    header.header .header-variant--desktop .lang .wpml-ls-legacy-list-horizontal ul li:not(.wpml-ls-current-language) {
        height: 32px;
        line-height: 32px !important;
        border-radius: 12px;
    }

    /* кнопка: 12px, 12/32, без розрядки теми (.button: letter-spacing 1.7px, 11px) */
    header.header .header-variant--desktop .head-top .call {
        height: auto;
        min-width: 0;
        margin-left: 32px !important;
        padding: 12px 32px;
        border-radius: 32px;
        background: #505050;
        font-family: "MazzardH-Medium";
        font-size: 12px;
        line-height: 1.6;
        letter-spacing: 0;
        -webkit-font-smoothing: antialiased; /* білий текст на темному macOS робить жирнішим, ніж у макеті */
        -moz-osx-font-smoothing: grayscale;
    }

    /* ---------- біла панель: лого 140px, меню, пошук ---------- */

    /* у Figma тінь — drop-shadow з blur 16, у box-shadow це розмиття 32px */
    header.header .header-variant--desktop .head {
        justify-content: flex-start;
        gap: 48px;
        height: auto;
        padding: 16px 32px !important;
        border-radius: 16px;
        box-shadow: 0 8px 32px rgba(0, 0, 0, .08);
    }

    header.header .header-variant--desktop .head .logo {
        flex: 0 0 140px;
        width: 140px;
        margin: 0 !important;
    }

    header.header .header-variant--desktop .head .logo img {
        display: block;
        width: 140px;
        height: auto;
    }

    /* Меню на всю висоту панелі (мінус її 16px паддінги): підменю (top: 100%) починається
       рівно під панеллю, і курсор доходить до нього без розриву.
       #menu-golovne-menyu (≥1440) у темі має min-width 800px і gap 10px — тут вони не потрібні. */
    header.header .header-variant--desktop .main_menu_1 {
        flex: 1 1 auto;
        align-self: stretch;
        justify-content: space-between;
        align-items: stretch;
        gap: 16px !important;
        min-width: 0 !important;
        margin: -16px 0;
    }

    header.header .header-variant--desktop .main_menu_1 > li {
        display: flex;
        align-items: center;
    }

    header.header .header-variant--desktop .main_menu_1 > li > a {
        font-family: "MazzardH-Medium";
        font-size: 18px;
        line-height: 1.6;
        color: #000;
    }

    header.header .header-variant--desktop .main_menu_1 > li > a:hover,
    header.header .header-variant--desktop .main_menu_1 > li.current-menu-item > a {
        color: #c80000;
    }

    header.header .header-variant--desktop .main_menu_1 > li.menu-item-has-children::after {
        margin-left: 7px;
    }

    header.header .header-variant--desktop .head .search-icon {
        flex: 0 0 20px;
        margin: 0;
    }

    /* ---------- відступ сторінки під фіксованою шапкою ---------- */

    /* шапка стала нижчою (131px замість 148px) — проміжок під нею лишаємо 20px, як був */
    header.header + * {
        padding-top: 151px;
    }

    /* сторінки на блоках: хлібні крихти одразу під шапкою, як у макетах */
    header.header + .ds-page {
        padding-top: 131px;
    }

    /* ---------- вужчі ПК ---------- */

    /* до 1400px меню 16px: 18px не вміщується на ноутбуці 1366 зі смугою прокрутки Windows */
    @media (max-width: 1399px) {
        header.header .header-variant--desktop .head {
            gap: 32px;
        }

        header.header .header-variant--desktop .main_menu_1 > li > a {
            font-size: 16px;
        }
    }

    /* до 1280px українське меню (906px при 16px) налазило на іконку пошуку */
    @media (max-width: 1279px) {
        header.header .header-variant--desktop .head {
            gap: 24px;
            padding: 16px 24px !important;
        }

        header.header .header-variant--desktop .main_menu_1 {
            gap: 12px !important;
        }

        header.header .header-variant--desktop .main_menu_1 > li > a {
            font-size: 15px;
        }

        header.header .header-variant--desktop .main_menu_1 > li.menu-item-has-children::after {
            margin-left: 5px;
        }
    }
}