/*
 * menu-accordion.css
 * -----------------------------------------------------------------------------
 * Задача К2 (2026-08-07): реструктуризация мобильного меню vmeste.life
 * в аккордеон. Критичная UX-проблема К2.
 *
 * Проблема: на мобильных (<=1070px) после клика на бургер открывалось длинное
 * полотно — 5 заголовков секций + ~40 ссылок подменю сразу видимы, каждая по 30px.
 * Это когнитивная перегрузка для пожилой аудитории + промахи при тапе.
 *
 * Решение: подменю (.mainHeader__menuInnerItem) скрыты по умолчанию,
 * раскрываются по тапу на заголовок секции (только секции с подменю:
 * Пансионаты, О нас, Услуги). Секции-прямые-ссылки (Цены, Контакты)
 * работают как обычные ссылки. У заголовков-аккордеонов — CSS-chevron.
 *
 * Десктоп (>1070px) НЕ ТРОГАЕТСЯ — там меню работает как раньше (выпадающее
 * по ховеру/клику). Класс .is-accordion ставится JS-инициализатором на секции
 * с подменю; .menuInner--open — на раскрытую в данный момент секцию.
 *
 * Загружается ПОСЛЕ mobile-fix.css (см. frontend/assets/AppAsset.php).
 * Безопасно сочетается с menu-fix.css/mobile-fix.css: они не задают display
 * для .mainHeader__menuInnerItem, только flex-свойства/width.
 * -----------------------------------------------------------------------------
 */

/* =========================================================================
   Mobile only (<=1070px) — десктоп не трогаем
   ========================================================================= */
@media only screen and (max-width: 1070px) {

    /* --- Подменю скрыто по умолчанию ------------------------------------- */
    /* Важно: !important чтобы перебить любое display:flex из styles.css,
       так как menuInnerItem — это <ul>, который программист мог выложить
       флексом в несколько колонок. */
    .mainHeader__menuInner .mainHeader__menuInnerItem {
        display: none !important;
    }

    /* --- Подменю раскрыто (секция получила .menuInner--open) -------------- */
    /* display:block — надёжнее чем max-height transition для masterhost/
       старых браузеров (нет дёрганья, нет необходимости знать высоту). */
    .mainHeader__menuInner.menuInner--open .mainHeader__menuInnerItem {
        display: block !important;
    }

    /* Если styles.css/menu-fix.css выкладывал подменю в несколько колонок
       через flex (на десктопе), то при раскрытии на мобиле возвращаем
       простой вертикальный список — иначе пункты толпятся в одну строку. */
    .mainHeader__menuInner.menuInner--open .mainHeader__menuInnerItem li {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* --- Заголовок секции-аккордеона: позиция для chevron ---------------- */
    /* .is-accordion ставится JS на каждую секцию .mainHeader__menuInner,
       внутри которой есть хотя бы один .mainHeader__menuInnerItem.
       Делаем ссылку-заголовок flex-контейнером, чтобы chevron встал справа. */
    .mainHeader__menuInner.is-accordion > .mainHeader__menuInnerInner > .mainHeader__menuLink {
        display: flex !important;
        align-items: center;
        justify-content: space-between;
        cursor: pointer;
        /* увеличиваем зону тапа для пожилой аудитории */
        min-height: 44px;
    }

    /* --- Chevron (CSS-стрелка ▸) ----------------------------------------- */
    /* Используем юникод-треугольник. По умолчанию стрелка указывает вниз
       (раскрыть). При .menuInner--open поворачиваем на 180° (схлопнуть). */
    .mainHeader__menuInner.is-accordion > .mainHeader__menuInnerInner > .mainHeader__menuLink::after {
        content: "\25BE"; /* ▾ BLACK DOWN-POINTING SMALL TRIANGLE */
        margin-left: 12px;
        font-size: 18px;
        line-height: 1;
        color: #ffffff;
        transition: transform 0.25s ease, color 0.25s ease;
        transform: rotate(0deg);
        transform-origin: center center;
        display: inline-block;
        /* не даём стреле получать underline/hover-эффекты ссылки */
        text-decoration: none;
    }

    /* Раскрыто — поворот стрелки + смена цвета на фирменный розовый */
    .mainHeader__menuInner.menuInner--open > .mainHeader__menuInnerInner > .mainHeader__menuLink::after {
        transform: rotate(180deg);
        color: #e3388b;
    }

    /* Подсветка активного заголовка-аккордеона для лучшей обратной связи */
    .mainHeader__menuInner.menuInner--open > .mainHeader__menuInnerInner > .mainHeader__menuLink {
        color: #e3388b;
    }

    /* --- Секции-прямые-ссылки (Цены, Контакты): БЕЗ chevron -------------- */
    /* .is-accordion на них НЕ ставится (нет .menuInner__menuInnerItem),
       поэтому ::after выше их не затрагивает — оставляем как обычную ссылку. */

    /* --- Лёгкое визуальное разделение секций для читаемости -------------- */
    .mainHeader__menuInner {
        border-bottom: 1px solid rgba(255, 255, 255, 0.12);
    }

    /* --- Отступы подменю при раскрытии (читаемость пунктов) -------------- */
    .mainHeader__menuInner.menuInner--open .mainHeader__menuInnerItem {
        padding-top: 4px;
        padding-bottom: 8px;
    }
}