/* Avalon RO: кнопка и выдвижение бокового меню на телефоне.
 *
 * ЗАЧЕМ. Тема ниже 768 точек прячет шапку целиком (.ms-header { display:none }),
 * а взамен должна выезжать боковая панель #ms-slidebar. Панель в разметке есть,
 * но плагина slidebars в комплекте темы нет, и кнопку открытия когда-то убрали -
 * в итоге на телефоне не было НИКАКОЙ навигации.
 *
 * Здесь всё своё, без плагина: панель двигаем классом, кнопку рисуем сами.
 * На широком экране кнопка скрыта - там работает обычная шапка.
 */

/* ---- сама панель ---- */
#ms-slidebar {
    position: fixed;
    top: 0;
    left: -300px;
    width: 300px;
    height: 100%;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;   /* инерционная прокрутка на iOS */
    z-index: 1050;
    transition: left .25s ease;
}

#ms-slidebar.avalon-open {
    left: 0;
}

/* ---- затемнение позади открытой панели ---- */
.avalon-menu-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, .5);
    z-index: 1040;
    opacity: 0;
    pointer-events: none;
    transition: opacity .25s ease;
}

.avalon-menu-backdrop.avalon-open {
    opacity: 1;
    pointer-events: auto;
}

/* ---- кнопка ---- */
.avalon-menu-btn {
    display: none;                       /* на широком экране не нужна */
    position: fixed;
    top: 10px;
    left: 10px;
    z-index: 1060;
    width: 46px;
    height: 46px;
    padding: 0;
    border: 0;
    border-radius: 4px;
    background: #ff5722;                 /* оранжевый темы */
    color: #fff;
    box-shadow: 0 2px 6px rgba(0, 0, 0, .35);
    cursor: pointer;
    align-items: center;
    justify-content: center;
    line-height: 0;
}

.avalon-menu-btn:hover,
.avalon-menu-btn:focus {
    background: #e64a19;
    outline: 2px solid #fff;
    outline-offset: -4px;
}

/* три полоски рисуем сами, чтобы не зависеть от значковых шрифтов:
   если шрифт значков не успел загрузиться, кнопка всё равно понятна */
.avalon-menu-btn span,
.avalon-menu-btn span::before,
.avalon-menu-btn span::after {
    display: block;
    position: absolute;
    left: 13px;
    width: 20px;
    height: 2px;
    background: #fff;
    content: "";
}

.avalon-menu-btn span        { top: 22px; }
.avalon-menu-btn span::before { top: -6px; left: 0; }
.avalon-menu-btn span::after  { top:  6px; left: 0; }

/* когда меню открыто, полоски складываются в крестик */
.avalon-menu-btn.avalon-open span            { background: transparent; }
.avalon-menu-btn.avalon-open span::before    { top: 0; transform: rotate(45deg); }
.avalon-menu-btn.avalon-open span::after     { top: 0; transform: rotate(-45deg); }

@media (max-width: 767px) {
    .avalon-menu-btn { display: flex; }
}

/* ---- живые соцсети внутри панели ---- */
.ms-slidebar-social .btn-circle {
    width: 42px;
    height: 42px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin: 0 6px 6px 0;
    border-radius: 50%;
    color: #fff;
}

.ms-slidebar-social .btn-circle:before { display: none; }   /* белый кружок темы, как и в подвале */

.ms-slidebar-social .btn-facebook { background: #1877F2; }
.ms-slidebar-social .btn-discord  { background: #5865F2; }
.ms-slidebar-social .btn-reddit   { background: #FF4500; }
.ms-slidebar-social .btn-telegram { background: #229ED9; }
.ms-slidebar-social .btn-viber    { background: #7360F2; }

/* ============================================================
 * Цели нажатия на телефоне: не меньше 44 точек по любой стороне.
 *
 * ЗАЧЕМ. Замер на ширине 375: 24 цели из 43 были мельче 44 точек, и по ним
 * трудно попасть пальцем. Часть промахивалась на considerable мелочь -
 * соцкнопки 42x42, кнопки REGISTER и DOWNLOAD 43 в высоту, - но стрелки
 * карусели были 20x20, а ссылки карты сайта 30 в высоту.
 *
 * ВАЖНО: всё внутри media-запроса для узкого экрана. На широком экране
 * ничего не меняется - там указывают мышью, и 44 точки не нужны.
 * Размер увеличиваем ОТСТУПАМИ, а не жёсткой высотой: текст остаётся на
 * месте, а нажимаемая область растёт вокруг него.
 * ============================================================ */

@media (max-width: 767px) {

    /* соцкнопки: были 42x42 */
    .btn-circle.btn-facebook,
    .btn-circle.btn-discord,
    .btn-circle.btn-reddit,
    .btn-circle.btn-telegram,
    .btn-circle.btn-viber,
    .btn-circle.btn-youtube,
    .ms-footbar-social a.btn-circle,
    .ms-slidebar-social a.btn-circle {
        width: 44px;
        height: 44px;
    }

    /* кнопки действий: были 43 в высоту */
    .btn.btn-raised,
    .btn.btn-warning,
    .btn.btn-success,
    .btn.btn-primary {
        min-height: 44px;
        padding-top: 11px;
        padding-bottom: 11px;
    }

    /* стрелки карусели: были 20x20 */
    .carousel-control,
    .carousel-control.left,
    .carousel-control.right {
        min-width: 44px;
        min-height: 44px;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* ссылки карты сайта в подвале: были 30 в высоту */
    .ms-footbar a,
    .ms-footbar-block a,
    .ms-footer-col a {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
    }

    /* подписи «читать дальше» у новостей: были 13 в высоту */
    .badge-pill a,
    a.badge-pill {
        display: inline-block;
        min-height: 44px;
        line-height: 44px;
        padding-left: 6px;
        padding-right: 6px;
    }

    /* кнопка «наверх» */
    .btn-back-top a.btn-circle {
        width: 44px;
        height: 44px;
    }

    /* пункты бокового меню */
    #ms-slidebar .ms-slidebar-menu a,
    #ms-slidebar .dropdown-item {
        min-height: 44px;
        display: flex;
        align-items: center;
    }
}

/* ============================================================
 * Стабильная высота первого экрана: лечение сдвига вёрстки.
 *
 * ЗАМЕР ОТЧЁТА: CLS = 1.629 при норме до 0.1, вес 25 - четверть всей
 * оценки производительности. Все 15 сдвигов дал ОДИН узел: .ms-hero::before.
 *
 * ПРИЧИНА. Декоративная диагональ задана как height:590% и bottom:-249%
 * ОТ ВЫСОТЫ первого экрана. А высоту меняет карусель: её три слайда имеют
 * высоты 908, 818 и 688 точек - разброс 220, который диагональ умножает
 * почти вшестеро, до тысячи трёхсот.
 *
 * ЛЕЧЕНИЕ. Раскладываем слайды сеткой в ОДНУ ячейку: контейнер всегда
 * равен самому высокому слайду и не меняется при переключении.
 * Переход внешне не изменится - карусель уже работает затуханием
 * (класс carousel-fade), а не сдвигом.
 *
 * Неактивные слайды прячем через visibility с задержкой перехода: они
 * остаются в потоке (иначе сетка не удержит высоту), но не читаются
 * читалками экрана и не ловят нажатия.
 * ============================================================ */

.ms-hero .carousel-inner {
    display: grid;
}

.ms-hero .carousel-inner > .carousel-item {
    display: block;                 /* вместо none: слайд остаётся в потоке */
    grid-area: 1 / 1;               /* все слайды в одной ячейке сетки */
    visibility: hidden;
    pointer-events: none;
    /* видимость переключаем ПОСЛЕ затухания, иначе слайд исчезнет рывком */
    transition: opacity .6s ease, visibility 0s linear .6s;
}

.ms-hero .carousel-inner > .carousel-item.active {
    visibility: visible;
    pointer-events: auto;
    transition: opacity .6s ease, visibility 0s linear 0s;
}