/* ============================================================
   HEADER / NAV — верхнее меню сайта: бренд upravka.ru, бургер на
   мобильных, "снежинка"-иконка у логотипа, подсветка активного пункта.
   Грузится на ВСЕХ страницах.

   Архитектура (переписана 2026-07-14): раньше шапка была 3-колоночной
   Pure-грид (pure-u-lg-1-5 / pure-u-lg-1-2), а "мобильность" пунктов
   меню включалась/выключалась JS-ом через класс pure-menu-horizontal —
   то есть ДВЕ независимые системы (брейкпоинты Pure-грида и наши
   media-запросы) должны были совпадать по ширине, и именно на этом
   стыке рвалось на планшетах (появлялась половина шапки без бургера).

   Теперь всё решает ОДИН media-запрос ниже: у #menu нет Pure-грид
   классов вообще, это просто flex-контейнер с двумя блоками —
   .custom-menu-links (пункты меню) и .custom-menu-account (логин/
   аккаунт). На мобильных оба скрыты через display:none и появляются
   только по классу .open (его ставит JS по клику на бургер). На
   десктопе тот же CSS просто показывает всё и раскладывает в строку —
   JS там вообще не участвует. Сами пункты (<li class="pure-menu-item">,
   <a class="pure-menu-link">) остаются на классах Pure — так их
   стили (padding, hover) продолжают работать без переписывания, и
   dashboard.css → .account-item .pure-menu-link (лампа статуса)
   не ломается.
   ============================================================ */

.custom-wrapper {
    background-color: #557a95;
    -webkit-font-smoothing: antialiased;
}

.custom-wrapper-search {
    background-color: #557a95;
    -webkit-font-smoothing: antialiased;
}

.custom-brand {
    display: inline-flex;
    align-items: center;
    color: whitesmoke;
}

.custom-brand::after {
    content: ".ru";
    color: #79aec8;
}

/* Снежинка/иконка у логотипа upravka */
.custom-brand__icon {
    width: 1em;
    height: 1em;
    margin-right: .1em;
    vertical-align: top;

    /* Делает SVG белым (если исходник тёмный/чёрный) */
    filter: brightness(0) invert(1);
}

/* Строка с логотипом и бургером. flex + align-items:center — крестик
   всегда на одной горизонтальной оси с логотипом, сколько бы ни было
   отступов сверху/снизу — не нужно подбирать пиксели вручную. */
.custom-brand-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: .5em 2em;
}

.custom-toggle {
    width: 34px;
    height: 34px;
    position: relative;
    flex-shrink: 0;
    margin-left: 1em;
    cursor: pointer;
}

.custom-toggle .bar {
    background-color: whitesmoke;
    display: block;
    width: 20px;
    height: 2px;
    border-radius: 100px;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%) translateY(-4px);
    transition: transform 0.3s;
}

.custom-toggle .bar:last-child {
    transform: translate(-50%, -50%) translateY(4px);
}

.custom-toggle.x .bar {
    transform: translate(-50%, -50%) rotate(45deg);
}

.custom-toggle.x .bar:last-child {
    transform: translate(-50%, -50%) rotate(-45deg);
}

.pure-menu-selected {
    background: rgba(255, 255, 255, 0.15);
    color: #fff !important;
}

.pure-menu-selected:hover {
    background: rgba(255, 255, 255, 0.25);
}

/* ===================== Мобильные (< 64em / 1024px) ===================== */
@media (max-width: 63.999em) {
    .custom-menu-links,
    .custom-menu-account {
        display: none;
    }

    /* Меню открыто — показываем оба блока. */
    .custom-wrapper.open .custom-menu-links,
    .custom-wrapper.open .custom-menu-account {
        display: block;
    }

    /* "Воздух": .5em над логотипом и под ним даёт padding у
       .custom-brand-row, плюс отступ снизу после последнего пункта и
       более просторные сами пункты (тап-таргеты). */
    .custom-wrapper.open {
        padding-bottom: .5em;
    }

    /* Тот же левый отступ (2em), что у логотипа в .custom-brand-row —
       чтобы вертикальная линия пунктов меню была на одной оси с ним. */
    .custom-wrapper.open .pure-menu-link {
        padding: .75em 3.1em;
    }
}

/* ===================== Десктоп (>= 64em / 1024px) ===================== */
@media (min-width: 64em) {
    .custom-wrapper {
        display: flex;
        align-items: center;
    }

    .custom-brand-row {
        flex: 0 0 auto;
    }

    .custom-toggle {
        display: none;
    }

    .custom-menu-links {
        flex: 1 1 auto;
    }

    /* padding-right — гарантированный отступ от правого края шапки,
       той же величины (2em), что и padding логотипа слева и padding
       между логотипом и первым пунктом меню (.custom-brand-row).
       Живёт на контейнере, а не на ссылке/лампе внутри — работает
       одинаково что для одной ссылки "Вход" на публичных страницах,
       что для "admin + лампа" на дашборде. */
    .custom-menu-account {
        flex: 0 0 auto;
        padding-right: 2em;
    }

    .custom-menu-links ul,
    .custom-menu-account ul {
        display: flex;
        align-items: center;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .custom-menu-account ul {
        justify-content: flex-end;
    }
}