/* ============================================================
   Cassiopeia Extended — Меню: десктоп (hover), мобильные (гамбургер)
   Цвета: чёрный на белом
   Подменю: MetisMenu (mm-collapse / mm-show / metismenu-item)
   ============================================================ */


/* ---------- ДЕСКТОП (>= 992px): подменю по наведению ---------- */
@media (min-width: 992px) {

    /* Принудительно разворачиваем Bootstrap collapse */
    .navbar-collapse.collapse {
        display: block !important;
        height: auto !important;
        overflow: visible !important;
    }

    /* Подменю — скрыто по умолчанию */
    ul.mm-collapse {
        display: block !important;
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
        transition: opacity 0.25s, transform 0.25s, visibility 0.25s;
        background: #ffffff;
        border: 1px solid #e0e0e0;
        border-radius: 4px;
        padding: 6px 0;
        min-width: 180px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.08);
        position: absolute;
        top: 100%;
        left: 0;
        z-index: 1000;
    }

    /* Родительский пункт — relative для позиционирования */
    li.metismenu-item.deeper,
    li.metismenu-item.parent {
        position: relative;
    }

    /* Наведение — показываем подменю */
    li.metismenu-item.deeper:hover > ul.mm-collapse,
    li.metismenu-item.parent:hover > ul.mm-collapse,
    li.metismenu-item.deeper:focus-within > ul.mm-collapse {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
    }

    /* Переопредляем mm-show чтобы не конфликтовал с JS */
    ul.mm-collapse.mm-show {
        opacity: 0;
        visibility: hidden;
        transform: translateY(-8px);
    }
    li.metismenu-item.deeper:hover > ul.mm-collapse.mm-show,
    li.metismenu-item.parent:hover > ul.mm-collapse.mm-show {
        opacity: 1 !important;
        visibility: visible !important;
        transform: translateY(0);
    }

    ul.mm-collapse a {
        color: #222 !important;
        font-size: 14px;
        padding: 6px 18px;
        display: block;
        text-decoration: none;
        transition: background 0.15s;
    }
    ul.mm-collapse a:hover {
        background: #f2f2f2;
        color: #1d7989 !important;
    }

    /* Скрываем кнопку toggle */
    button.mm-toggler {
        display: none !important;
    }
}


/* ---------- МОБИЛЬНЫЕ (< 992px): гамбургер + компактное меню ---------- */
@media (max-width: 991px) {

    /* ===== Гамбургер — чёрный ===== */
    .navbar-toggler,
    .headerbar .navbar-toggler,
    nav .navbar-toggler,
    .container-header .navbar-toggler {
        display: inline-flex !important;
        align-items: center;
        justify-content: center;
        border: 1px solid #222 !important;
        border-radius: 4px;
        background: transparent !important;
        padding: 4px 8px;
        cursor: pointer;
        line-height: 1;
        outline: none;
        filter: none !important;
        -webkit-filter: none !important;
        color: #000 !important;
    }
    .navbar-toggler .navbar-toggler-icon,
    .navbar-toggler-icon,
    .headerbar .navbar-toggler .navbar-toggler-icon,
    nav .navbar-toggler .navbar-toggler-icon,
    .container-header .navbar-toggler .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3E%3Cpath stroke='%23000000' stroke-width='2.5' stroke-linecap='round' stroke-miterlimit='10' d='M4 7h22M4 15h22M4 23h22'/%3E%3C/svg%3E") !important;
        width: 24px !important;
        height: 24px !important;
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
        display: inline-block !important;
        flex-shrink: 0 !important;
        filter: none !important;
        -webkit-filter: none !important;
        opacity: 1 !important;
    }
    .navbar-toggler[aria-expanded="true"] .navbar-toggler-icon {
        background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath stroke='%23000000' stroke-width='2.5' d='M6 18L18 6M6 6l12 12'/%3E%3C/svg%3E") !important;
        filter: none !important;
        -webkit-filter: none !important;
    }

    /* Хедер — не схлопывается */
    .headerbar,
    .container-header {
        position: relative !important;
        overflow: visible !important;
    }

    /* ===== Выпадающее меню ===== */
    .mod-menu {
        display: none !important;
        background: #fff;
        border: 1px solid #e0e0e0;
        border-radius: 6px;
        box-shadow: 0 4px 12px rgba(0,0,0,0.1);
        position: absolute !important;
        top: 100% !important;
        left: 16px !important;
        right: auto !important;
        width: auto;
        min-width: 220px;
        max-width: calc(100vw - 32px);
        max-height: 70vh;
        overflow-y: auto;
        z-index: 1050;
        padding: 4px 0;
        margin: 0;
        list-style: none;
    }
    .mod-menu.show {
        display: block !important;
    }

    .mod-menu li {
        list-style: none;
        margin: 0;
        padding: 0;
        border-bottom: 1px solid #f4f4f4;
    }
    .mod-menu li:last-child {
        border-bottom: none;
    }
    .mod-menu a {
        color: #222 !important;
        font-size: 14px;
        padding: 8px 18px;
        display: block;
        text-decoration: none;
        transition: background 0.15s;
    }
    .mod-menu a:hover {
        background: #f5f5f5;
    }

    /* Сброс padding template.css (.metismenu.mod-menu .metismenu-item) */
    .metismenu.mod-menu .metismenu-item {
        padding: 0 !important;
        display: block !important;
        flex-wrap: nowrap !important;
        align-items: stretch !important;
        font-size: 14px !important;
        line-height: 1.4 !important;
    }
    .metismenu.mod-menu .metismenu-item > a,
    .metismenu.mod-menu .metismenu-item > button {
        padding: 8px 18px;
        display: block;
    }
    .metismenu.mod-menu .metismenu-item > button.mm-toggler {
        padding: 4px 18px;
    }

    /* ===== Подменю (MetisMenu) ===== */
    li.metismenu-item.deeper,
    li.metismenu-item.parent {
        position: relative;
    }

    /* Подменю — скрыто по умолчанию */
    ul.mm-collapse {
        display: none !important;
        padding-left: 20px;
        background: #fafafa;
        margin: 0;
        list-style: none;
        position: static !important;
        opacity: 1 !important;
        visibility: visible !important;
        transform: none !important;
        border: none !important;
        border-radius: 0 !important;
        box-shadow: none !important;
        min-width: 0 !important;
        transition: none !important;
    }

    /* Наведение — показываем */
    li.metismenu-item.deeper:hover > ul.mm-collapse,
    li.metismenu-item.parent:hover > ul.mm-collapse {
        display: block !important;
    }

    /* Клик — показываем (mm-show от JS) */
    ul.mm-collapse.mm-show {
        display: block !important;
    }

    ul.mm-collapse a {
        font-size: 13px;
        padding: 6px 18px;
        border-bottom: 1px solid #f0f0f0;
    }

    /* Скрываем кнопку toggle */
    button.mm-toggler {
        display: none !important;
    }

    /* ===== Заголовок — адаптивный ===== */
    .navbar-brand {
        max-width: 60vw;
        overflow: hidden;
    }
    .navbar-brand .brand-logo {
        display: inline-block;
        max-width: 100%;
    }
    .navbar-brand .brand-logo span,
    .navbar-brand .brand-logo img {
        display: block;
        max-width: 100%;
        height: auto;
        word-wrap: break-word;
        overflow-wrap: break-word;
        white-space: normal;
        font-size: clamp(14px, 4vw, 28px) !important;
        line-height: 1.2;
    }
    .site-description {
        font-size: 12px;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }

    /* ===== Уменьшаем зазор между заголовком и меню ===== */
    .container-header .grid-child {
        padding-top: 4px !important;
        padding-bottom: 4px !important;
    }
    .container-header .container-nav nav {
        margin-top: 4px !important;
    }
    .container-header .container-nav {
        padding-bottom: 4px !important;
    }
}


/* ---------- ОБЩИЕ ПРАВКИ (для всех экранов) ---------- */
.container-nav {
    position: relative;
}
.navbar-brand img {
    max-height: 50px;
    width: auto;
}

/* ===== Уменьшаем зазор между заголовком и меню ===== */
header.container-header > .grid-child {
    padding: 4px !important;
}
header.container-header .container-nav {
    padding-bottom: 4px !important;
}
header.container-header .container-nav nav {
    margin-top: 4px !important;
}
header.container-header .grid-child + .grid-child {
    margin-top: 0 !important;
}

/* ===== Стрелки-треугольники у пунктов меню — убираем ===== */
.metismenu.mod-menu .mm-toggler:after,
header .metismenu.mod-menu .mm-toggler:after,
.container-header .metismenu.mod-menu .mm-toggler:after {
    content: none !important;
    display: none !important;
}
.metismenu.mod-menu > li > a::after,
.metismenu.mod-menu > li > button::before,
header .metismenu.mod-menu > li > a::after,
header .metismenu.mod-menu > li > button::before {
    content: none !important;
    display: none !important;
}
.metismenu.mod-menu .metismenu-item:after {
    content: none !important;
}
.metismenu.mod-menu .metismenu-item,
header .metismenu.mod-menu .metismenu-item,
.container-header .metismenu.mod-menu .metismenu-item {
    padding: 0 !important;
    display: block !important;
    flex-wrap: nowrap !important;
    align-items: stretch !important;
    font-size: 14px !important;
    line-height: 1.4 !important;
}
.metismenu.mod-menu .metismenu-item > a,
.metismenu.mod-menu .metismenu-item > button,
header .metismenu.mod-menu .metismenu-item > a,
header .metismenu.mod-menu .metismenu-item > button {
    padding: 6px 16px !important;
    display: block !important;
    margin: 0 !important;
}
.metismenu.mod-menu .mm-collapse > li {
    margin: 0 !important;
    padding: 0 !important;
}
.metismenu.mod-menu .mm-collapse > li > a {
    display: block !important;
    padding: 4px 12px !important;
}
.metismenu.mod-menu .mm-collapse > li.level-2 > a {
    padding: 3px 12px !important;
    font-size: 13px !important;
    line-height: 1.3 !important;
}