/* ---------------------------------------------------------------------------
   Точечные правки шапки поверх _html/css/header.css.
   Подключается в header.php сразу после него.

   1. Меню «Продукция» на десктопе — компактный выпадающий список.
   2. Размер мишени бургера на телефоне (в конце файла).

   ---------------------------------------------------------------------------
   1. Меню «Продукция» на десктопе: компактный выпадающий список.

   Базовые стили в _html/css/header.css рисуют полноэкранную панель
   (position: fixed, height: 100vh, пункты по 64px) — это уместно на телефоне,
   но на мониторе выглядит как отдельная страница. Ниже панель превращается
   в обычное выпадающее меню под пунктом шапки; второй уровень раскрывается
   вправо при наведении.

   Правила действуют только от 1000px — мобильное меню не затрагивается.
   Подключается в header.php после header.css.
   --------------------------------------------------------------------------- */

@media (min-width: 1000px) {

    .header-nav { position: relative; }

    /* --- сама панель ------------------------------------------------------ */
    .header-menu.menu-catalog {
        position: absolute;
        top: calc(100% + 12px);
        right: 0;
        left: auto;
        bottom: auto;
        z-index: 99;
        width: 300px;
        height: auto;
        min-height: 0;
        overflow: visible;
        display: none;
        transform: none;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
    }

    .header-menu.menu-catalog.isOpen { display: block; }

    .header-menu.menu-catalog .header-menu__inner {
        display: block;
        gap: 0;
        max-width: none;
        margin: 0;
        padding: 10px 0;
    }

    /* крест, заголовки и контакты нужны только полноэкранному варианту */
    .header-menu.menu-catalog .header-menu__close,
    .header-menu.menu-catalog .header-menu__title,
    .header-menu.menu-catalog .header-menu__list-title,
    .header-menu.menu-catalog .header-menu__contacts { display: none; }

    .header-menu.menu-catalog .header-menu__list,
    .header-menu.menu-catalog .header-menu__list-inner { width: auto; }

    /* --- первый уровень ---------------------------------------------------- */
    .header-menu.menu-catalog .header-menu__list .drop-menu {
        position: static;
        width: auto;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu > li { position: relative; }
    .header-menu.menu-catalog .header-menu__list .drop-menu > li + li { margin-top: 0; }

    .header-menu.menu-catalog .header-menu__list .drop-menu > li > a {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 10px 20px;
        font-size: 16px;
        line-height: 1.35;
        color: #1a1a1a;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu > li > a:hover {
        background: #f6f6f6;
        color: #fe693a;
    }

    /* стрелка у пунктов с вложенностью — мельче и правее */
    .header-menu.menu-catalog .header-menu__list .drop-menu > li.drop > a:after {
        margin-left: 14px;
        width: 18px;
        height: 14px;
        opacity: .35;
        flex: 0 0 auto;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu > li.drop > a:hover:after { opacity: 1; }

    /* --- второй уровень: раскрывается вправо -------------------------------- */
    .header-menu.menu-catalog .header-menu__list .drop-menu .drop-menu {
        position: absolute;
        top: -10px;
        left: 100%;
        width: 290px;
        padding: 10px 0;
        background: #ffffff;
        border: 1px solid #e6e6e6;
        border-radius: 10px;
        box-shadow: 0 12px 32px rgba(0, 0, 0, .12);
        opacity: 0;
        pointer-events: none;
        transition: opacity .15s ease-in-out;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu > li:hover > .drop-menu,
    .header-menu.menu-catalog .header-menu__list .drop-menu .drop.active > .drop-menu {
        opacity: 1;
        pointer-events: auto;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu .drop-menu li + li { margin-top: 0; }

    .header-menu.menu-catalog .header-menu__list .drop-menu .drop-menu > li > a {
        display: block;
        padding: 9px 20px;
        font-size: 15px;
        line-height: 1.35;
        color: #1a1a1a;
    }

    .header-menu.menu-catalog .header-menu__list .drop-menu .drop-menu > li > a:hover {
        background: #f6f6f6;
        color: #fe693a;
    }
}

/* ---------------------------------------------------------------------------
   2. Мишень бургера на телефоне.

   В header.css у .burger заданы width/height 20px — это вся кликабельная
   область, вчетверо меньше минимума, который рекомендуют и Apple (44px),
   и Google (48px). Отсюда промахи: палец шире мишени.

   Сам рисунок — SVG 55x55, отцентрованный внутри .burger правилом
   .burger > * { top: 50%; left: 50%; transform: translate(-50%, -50%) },
   поэтому увеличение контейнера не меняет размер линий: они как были
   22px, так и остаются, просто вокруг появляется рабочее поле.

   Побочный эффект, он же второе пожелание: бургер в шапке прижат вправо,
   поэтому рисунок отъезжает от края экрана на 10px (около 2 мм).
   Высота 40px равна высоте .header-inner — шапка не становится выше.
   --------------------------------------------------------------------------- */

@media (max-width: 999px) {

    .header .burger {
        width: 40px;
        height: 40px;
    }
}