/* ============================================================
   Верхнее меню сайта (#menu / .mainMenu).
   Подключается из protected/views/layouts/main.php ПОСЛЕ main.css,
   поэтому перебивает старые правила .mainMenu из main.pretty.css.
   Палитра сайта: син.#6598ab / зел.#8bbb2b / тёмная бирюза #1d4f5a.

   Разметка приходит из админки (модуль «Меню», раздел #1):
     <section class="stripe" id="menu"><div class="container">
       <nav role=navigation …><ul class="mainMenu">{elements}</ul></nav>
     </div></section>
   Пункт (element_template): <li><a …><span …>{name}</span></a></li>
   ============================================================ */

/* Полоса меню */
#menu {
    background-color: #6598ab;
    box-shadow: 0 2px 6px rgba(29, 79, 90, .18);
}

/* Контейнер: как в футере — с боковыми отступами, чтобы на узких
   экранах пункты не прилипали к краям. */
#menu .container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px;
}

/* Список пунктов: слева-направо, по центру по вертикали.
   Пункты НЕ растягиваем на всю ширину (перебиваем flex:1 1 auto). */
#menu .mainMenu {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: stretch;
    gap: 4px;
    margin: 0;
    padding: 6px 0;
}

/* Пункт меню */
#menu .mainMenu > li {
    position: relative;
    flex: 0 0 auto;          /* ← не тянется (было 1 1 auto) */
    line-height: normal;
    text-align: center;
}

/* Ссылка-«плашка» внутри пункта */
#menu .mainMenu > li > a {
    position: relative;
    display: block;
    width: 100%;
    height: 100%;
    padding: 10px 18px;
    font-size: 15px;
    font-weight: 400;
    letter-spacing: .2px;
    white-space: nowrap;
    text-decoration: none;
    color: #fff;
    transition: background-color .2s linear, color .2s linear;
}

/* Подчёркивание снизу — появляется на hover (белое, чтобы было видно на зелёном) */
#menu .mainMenu > li > a::after {
    content: '';
    position: absolute;
    left: 18px;
    right: 18px;
    bottom: 6px;
    height: 2px;
    background: #fff;
    transform: scaleX(0);
    transform-origin: center;
    transition: transform .25s ease-out;
}

/* Наведение на пункт: зелёный фон + белый текст (подчёркивание белое) */
#menu .mainMenu > li > a:hover,
#menu .mainMenu > li > a:focus {
    background-color: #8bbb2b;
    color: #fff;
}

#menu .mainMenu > li > a:hover::after,
#menu .mainMenu > li > a:focus::after {
    transform: scaleX(1);
}

/* Активный пункт (текущая страница) — постоянная зелёная подсветка.
   Класс `active` вешает вьюха виджета (menus/widgets/map/views/index.php)
   при совпадении ссылки пункта с текущим URL. */
#menu .mainMenu > li.active > a {
    background-color: #8bbb2b;
    color: #fff;
}

#menu .mainMenu > li.active > a::after {
    transform: scaleX(1);   /* белое подчёркивание у активного всегда видно */
}

/* ---------- Выпадающее подменю (если в пункте есть <ul>) ---------- */
#menu .mainMenu > li > ul {
    position: absolute;
    z-index: 100;
    top: 100%;
    left: 0;
    display: block;
    min-width: 220px;
    height: auto;
    margin: 0;
    padding: 6px 0;
    background: #fff;
    border-top: 2px solid #8bbb2b;
    border-radius: 0 0 3px 3px;
    box-shadow: 0 8px 18px rgba(0, 0, 0, .16);
    opacity: 0;
    visibility: hidden;
    transform: translateY(6px);
    transition: opacity .2s ease-out, transform .2s ease-out, visibility .2s;
}

#menu .mainMenu > li:hover > ul,
#menu .mainMenu > li:focus-within > ul {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

#menu .mainMenu > li > ul > li {
    width: 100%;
    height: auto;
    overflow: visible;
}

#menu .mainMenu > li > ul > li > a {
    display: block;
    padding: 8px 16px;
    text-align: left;
    white-space: nowrap;
    color: #1d4f5a;
    transition: background-color .2s linear, color .2s linear, padding-left .2s linear;
}

#menu .mainMenu > li > ul > li > a:hover {
    padding-left: 22px;
    color: #6598ab;
    background: #f2f8fa;
}

/* ---------- Адаптив ---------- */
@media screen and (max-width: 992px) {
    #menu .mainMenu > li > a {
        padding: 10px 14px;
        font-size: 14px;
    }

    #menu .mainMenu > li > a::after {
        left: 14px;
        right: 14px;
    }
}

@media screen and (max-width: 768px) {
    #menu .container {
        padding: 0 16px;
    }

    #menu .mainMenu {
        justify-content: flex-start;
        gap: 2px;
        padding: 8px 0;
    }

    #menu .mainMenu > li > a {
        padding: 10px 12px;
        font-size: 15px;
        font-weight: 700;   /* как было на мобиле */
    }

    /* Подменю на телефоне — раскрывается потоком, не всплывает */
    #menu .mainMenu > li > ul {
        position: static;
        min-width: 100%;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        transform: none;
        border-radius: 0;
    }
}

@media screen and (max-width: 576px) {
    #menu .container {
        padding: 0 16px;
    }

    #menu .mainMenu > li {
        flex: 1 1 40%;      /* по 2 пункта в ряд */
    }

    #menu .mainMenu > li > a {
        padding: 9px 8px;
        font-size: 14px;
    }

    #menu .mainMenu > li > a::after {
        left: 8px;
        right: 8px;
    }
}

@media screen and (max-width: 360px) {
    #menu .container {
        padding: 0 14px;
    }

    #menu .mainMenu > li > a {
        font-size: 13px;
    }
}