/* ============================================================
 * header-menu-hover.css
 *  - hover-цвета пунктов главного меню
 *  - шрифт Capture для мега-меню
 *  - z-index мега-меню над hero-контентом
 *  - форс-правила #top-menu при p2-tm-fixed / p2-header-hidden
 * Размеры бургера и #top-menu — в donor-sizes.css.
 * ============================================================ */

/* --- Пункты меню: hover-цвета --- */
body .menu.header-menu .lvl1 > li > a:hover,
body .menu.header-menu .lvl1 > li > a:focus-visible,
body .menu.header-menu .lvl1 > li.utv-mega-parent > a.utv-mega-trigger:hover,
body .menu.header-menu .lvl1 > li.utv-mega-parent > a.utv-mega-trigger:focus-visible {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
body .menu.header-menu .lvl1 > li.utv-mega-parent:not(:first-child) > a.utv-mega-trigger:hover,
body .menu.header-menu .lvl1 > li.utv-mega-parent:not(:first-child) > a.utv-mega-trigger:focus-visible {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}
body .menu.header-menu .lvl1 > li:not(.utv-mega-parent) > a:hover,
body .menu.header-menu .lvl1 > li:not(.utv-mega-parent) > a:focus-visible {
    color: #000 !important;
    -webkit-text-fill-color: #000 !important;
}

/* --- Шрифт заголовков мега-меню --- */
.utv-mega-menu__btn-title,
.menu.header-menu .lvl1 > li.utv-mega-parent .utv-mega-menu__btn,
.menu.header-menu .lvl1 > li.utv-mega-parent .utv-mega-menu__btn-title {
    font-family: "Capture", sans-serif !important;
    font-weight: 10 !important;
    letter-spacing: 0.02em;
}

/* --- Мега-меню выше hero-контента --- */
body .menu.header-menu .lvl1 > li.utv-mega-parent .utv-mega-menu,
body .menu.header-menu .lvl1 > li.utv-mega-parent:hover > .utv-mega-menu,
body .menu.header-menu .lvl1 > li.utv-mega-parent:focus-within > .utv-mega-menu,
body .menu.header-menu .lvl1 > li.utv-mega-parent.is-open > .utv-mega-menu {
    z-index: 9999 !important;
}
body .menu.header-menu .lvl1 > li.utv-mega-parent {
    z-index: 100 !important;
}
body .menu.header-menu,
body .menu.header-menu .lvl1,
body .menu.header-menu .header-menu-inner {
    z-index: 100 !important;
}
body .p2-header-hero > header {
    z-index: 1000 !important;
}

/* --- Форс-правила для #top-menu при фиксации --- */
body.p2-tm-fixed:not(.p2-header-hidden) #top-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 2147483647 !important;
    transform: translateY(0) !important;
    background: #000 !important;
    color: #fff !important;
    box-shadow: 0 2px 16px rgba(0, 0, 0, .45) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}
body.p2-tm-fixed.p2-header-hidden #top-menu {
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    bottom: auto !important;
    width: 100% !important;
    margin: 0 !important;
    z-index: 2147483647 !important;
    transform: translateY(-100%) !important;
    background: #000 !important;
    color: #fff !important;
    box-shadow: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
}

/* --- Светлое содержимое в зафиксированной панели --- */
body.p2-tm-fixed #top-menu .menu-left li a,
body.p2-tm-fixed #top-menu .menu-left a,
body.p2-tm-fixed #top-menu .p2-ic,
body.p2-tm-fixed #top-menu .p2-ic svg,
body.p2-tm-fixed #top-menu .open-menu,
body.p2-tm-fixed #top-menu .open-menu .open-menu-icon {
    color: #fff !important;
    stroke: currentColor !important;
}
body.p2-tm-fixed #top-menu .menu-left li a:hover,
body.p2-tm-fixed #top-menu .menu-left li a:focus-visible,
body.p2-tm-fixed #top-menu .p2-ic:hover,
body.p2-tm-fixed #top-menu .p2-ic:focus-visible {
    background-color: #fed500 !important;
    color: #000 !important;
}

/* --- Плейсхолдер от JS, вставленный в место #top-menu, скрываем визуально --- */
body.p2-tm-fixed > [aria-hidden="true"][style*="height"] {
    visibility: hidden;
}

/* ============================================================
 * Мобильная версия шапки (≤1000px):
 *  - верхнее меню «О нас / Услуги / …» скрыто
 *  - основное меню категорий скрыто
 *  - блок .menu-right с иконками (поиск/избранное/сравнение/корзина) ОСТАЁТСЯ
 *  - .header-contact-col превращается в жёлтый квадрат с чёрной иконкой телефона
 * ============================================================ */
@media (max-width: 1000px) {

    /* --- Скрываем верхнее меню --- */
    #top-menu .menu-left {
        display: none !important;
    }

    /* --- Скрываем основное меню категорий --- */
    .header-menu-col,
    .menu.header-menu,
    .header-menu-inner,
    .menu.header-menu .lvl1 {
        display: none !important;
    }

    /* --- .menu-right с иконками оставляем --- */
    #top-menu .menu-right {
        display: flex !important;
    }

    /* --- .header-contact-col: телефон в жёлтом квадрате с чёрной иконкой --- */
    .header-contact-col {
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .header-contact-col .tel {
        position: relative;
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        width: 44px;
        height: 44px;
        padding: 0 !important;
        background: #fed500;
        color: #000 !important;
        font-size: 0 !important;      /* скрываем номер телефона, оставляем иконку */
        line-height: 0;
        border-radius: 0;
        overflow: hidden;
        text-decoration: none;
    }
    .header-contact-col .tel-icon {
        position: relative;
        width: 22px !important;
        height: 22px !important;
        flex: 0 0 22px !important;
        color: #000 !important;
        stroke: #000 !important;
        z-index: 1;
    }
    /* Бегущий блик по кнопке */
    .header-contact-col .tel::after {
        content: "";
        position: absolute;
        top: 0;
        left: -80%;
        width: 50%;
        height: 100%;
        background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .75) 50%, transparent 100%);
        transform: skewX(-20deg);
        animation: hh-mobile-tel-glare 2.4s ease-in-out infinite;
        pointer-events: none;
    }
    @keyframes hh-mobile-tel-glare {
        0%   { left: -80%; }
        55%  { left: 130%; }
        100% { left: 130%; }
    }
    @media (prefers-reduced-motion: reduce) {
        .header-contact-col .tel::after { animation: none; }
    }
}

/* ============================================================
 * Мобильная раскладка #top-menu:
 *  - бургер прижат влево
 *  - .menu-right (иконки) прижат вправо
 *  - между ними flex-пространство
 * ============================================================ */
@media (max-width: 1000px) {

    #top-menu {
        padding: 0 6px !important;
    }

    #top-menu .wrap.clearfix {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 8px !important;
        width: 100% !important;
        padding: 0 !important;
    }

    /* Бургер слева */
    #top-menu .open-menu {
        order: 0 !important;
        flex: 0 0 auto !important;
        margin-right: auto !important;
        margin-left: 0 !important;
    }

    /* .menu-right прижат вправо */
    #top-menu .menu-right {
        order: 99 !important;
        flex: 0 0 auto !important;
        margin-left: auto !important;
        margin-right: 0 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
    }
    #top-menu .p2-actions {
        display: flex !important;
        align-items: center !important;
        justify-content: flex-end !important;
        gap: 4px !important;
    }
}

/* ============================================================
 * Мобильная шапка .header .wrap.clearfix:
 *  - логотип слева, телефон справа, всё в одну линию
 *  - перебиваем force-правила из main.css/header-hero.css
 *    (там на ≤1000px: flex-direction: column, .header-contact-col{width:100%})
 * ============================================================ */
@media (max-width: 1000px) {
    .header .wrap.clearfix {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .header .wrap.clearfix::before,
    .header .wrap.clearfix::after {
        display: none !important;
    }

    /* Логотип — фиксируем ширину, не растягивается */
    .header .logo {
        flex: 0 0 auto !important;
        width: auto !important;
        margin: 0 !important;
    }
    .header .logo img {
        max-height: 60px !important;
        width: auto !important;
    }

    /* Колонка контактов — автоширина, прижата вправо */
    .header-contact-col {
        flex: 0 0 auto !important;
        width: auto !important;
        padding-top: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        text-align: right !important;
        margin-left: auto !important;
    }
}

/* ============================================================
 * Центрирование иконки трубки внутри жёлтого квадрата (мобильная шапка)
 * ============================================================ */
@media (max-width: 1000px) {
    .header-contact-col .tel {
        position: relative !important;
        display: flex !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: center !important;
        text-align: center !important;
        line-height: 1 !important;
        padding: 0 !important;
        margin: 0 !important;
        box-sizing: border-box !important;
        vertical-align: middle !important;
    }
    .header-contact-col .tel-icon {
        display: block !important;
        position: static !important;
        margin: 0 !important;
        padding: 0 !important;
        top: auto !important;
        left: auto !important;
        transform: none !important;
        align-self: center !important;
        vertical-align: middle !important;
        flex: 0 0 22px !important;
        width: 22px !important;
        height: 22px !important;
        line-height: 0 !important;
        overflow: visible !important;
    }
}

/* ============================================================
 * Абсолютное центрирование иконки трубки в жёлтом квадрате.
 * position: absolute + top/left: 50% + translate(-50%,-50%) —
 * гарантированный центр независимо от наследуемых margin/padding.
 * ============================================================ */
@media (max-width: 1000px) {
    .header-contact-col .tel {
        position: relative !important;
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
    }
    .header-contact-col .tel-icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 22px !important;
        height: 22px !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
        display: block !important;
        overflow: visible !important;
        line-height: 0 !important;
        vertical-align: middle !important;
        align-self: auto !important;
    }
}

/* ============================================================
 * Мобильная шапка: логотип автоматически сжимается,
 * если не хватает места рядом с иконками/телефоном.
 * ============================================================ */
@media (max-width: 1000px) {
    .header .wrap.clearfix {
        gap: 6px !important;
    }

    .header .logo {
        flex: 0 1 auto !important;      /* может сжиматься */
        min-width: 0 !important;         /* разрешаем flex-basis < 100% */
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }

    .header .logo a {
        display: block !important;
        max-width: 100% !important;
        line-height: 0 !important;
    }

    .header .logo img,
    .header .logo .stelsmoto_logo {
        display: block !important;
        width: auto !important;              /* ширина по пропорциям */
        max-width: 100% !important;          /* не выходит за пределы контейнера */
        height: auto !important;             /* высота пропорционально */
        max-height: 44px !important;         /* не выше строки шапки */
        object-fit: contain !important;
    }

    /* При очень узких экранах — логотип ещё меньше */
    @media (max-width: 480px) {
        .header .logo img,
        .header .logo .stelsmoto_logo {
            max-height: 36px !important;
        }
    }
    @media (max-width: 360px) {
        .header .logo img,
        .header .logo .stelsmoto_logo {
            max-height: 32px !important;
        }
    }
}

/* ============================================================
 * Планшетный breakpoint (≤1200px):
 *  - шапка .header .wrap.clearfix — в одну линию (row/nowrap)
 *  - логотип — сжимается
 *  - .header-contact-col — превращается в жёлтый квадрат с иконкой
 *    (то же, что на ≤1000px, но раньше)
 * Правила ниже перебивают аналогичные в @media (max-width: 1000px),
 * т.к. идут позже в файле.
 * ============================================================ */
@media (max-width: 1200px) {

    .header .wrap.clearfix {
        display: flex !important;
        flex-direction: row !important;
        flex-wrap: nowrap !important;
        align-items: center !important;
        justify-content: space-between !important;
        gap: 10px !important;
        width: 100% !important;
    }
    .header .wrap.clearfix::before,
    .header .wrap.clearfix::after {
        display: none !important;
    }

    .header .logo {
        flex: 0 1 auto !important;
        min-width: 0 !important;
        max-width: 100% !important;
        overflow: hidden !important;
        margin: 0 !important;
        padding: 0 !important;
    }
    .header .logo a {
        display: block !important;
        max-width: 100% !important;
        line-height: 0 !important;
    }
    .header .logo img,
    .header .logo .stelsmoto_logo {
        display: block !important;
        width: auto !important;
        max-width: 100% !important;
        height: auto !important;
        max-height: 44px !important;
        object-fit: contain !important;
    }

    /* --- Телефон в жёлтом квадрате --- */
    .header-contact-col {
        display: flex !important;
        flex: 0 0 auto !important;
        width: auto !important;
        padding-top: 0 !important;
        flex-direction: row !important;
        align-items: center !important;
        justify-content: flex-end !important;
        text-align: right !important;
        margin-left: auto !important;
    }
    .header-contact-col .tel {
        position: relative !important;
        display: block !important;
        width: 44px !important;
        height: 44px !important;
        padding: 0 !important;
        margin: 0 !important;
        background: #fed500 !important;
        color: #000 !important;
        font-size: 0 !important;
        line-height: 0 !important;
        border-radius: 0 !important;
        overflow: hidden !important;
        text-decoration: none !important;
        box-sizing: border-box !important;
    }
    .header-contact-col .tel-icon {
        position: absolute !important;
        top: 50% !important;
        left: 50% !important;
        right: auto !important;
        bottom: auto !important;
        width: 22px !important;
        height: 22px !important;
        flex: none !important;
        margin: 0 !important;
        padding: 0 !important;
        transform: translate(-50%, -50%) !important;
        -webkit-transform: translate(-50%, -50%) !important;
        display: block !important;
        color: #000 !important;
        stroke: #000 !important;
        z-index: 1 !important;
    }
    .header-contact-col .tel::after {
        content: "" !important;
        position: absolute !important;
        top: 0 !important;
        left: -80% !important;
        width: 50% !important;
        height: 100% !important;
        background: linear-gradient(115deg, transparent 0%, rgba(255, 255, 255, .75) 50%, transparent 100%) !important;
        transform: skewX(-20deg) !important;
        animation: hh-mobile-tel-glare-1200 2.4s ease-in-out infinite !important;
        pointer-events: none !important;
    }
}
@keyframes hh-mobile-tel-glare-1200 {
    0%   { left: -80%; }
    55%  { left: 130%; }
    100% { left: 130%; }
}
@media (max-width: 1200px) and (prefers-reduced-motion: reduce) {
    .header-contact-col .tel::after { animation: none !important; }
}

/* ============================================================
 * Кнопка телефона в шапке: номер + стрелка-индикатор
 * ============================================================ */
.header-contact-col .tel {
    display: inline-flex;
    align-items: center;
    gap: 8px;
}
.header-contact-col .tel .tel-number {
    display: inline-block;
    white-space: nowrap;
}
.header-contact-col .tel .tel-arrow {
    width: 14px;
    height: 14px;
    flex: 0 0 14px;
    display: block;
    transition: transform .25s ease;
}
.header-contact-col .tel:hover .tel-arrow,
.header-contact-col .tel:focus-visible .tel-arrow {
    transform: translateY(2px);
}

/* На мобильных/планшетах (≤1200px) стрелка не нужна — там кнопка-квадрат */
@media (max-width: 1200px) {
    .header-contact-col .tel .tel-arrow {
        display: none !important;
    }
    .header-contact-col .tel .tel-number {
        display: none !important;
    }
}