/* ============================================================
   ВЕСЕЛИУМ — ИСПРАВЛЕНИЕ МОБИЛЬНОЙ ШАПКИ (04.11.2026)
   Только <= 850px; ПК и ноутбуки не затрагиваются.
   Существующая разметка header.php не меняется.
   ============================================================ */
@media screen and (max-width: 850px) {
    .header {
        display: grid;
        grid-template-columns: minmax(0, 1fr) 42px;
        grid-template-areas:
            "brand burger"
            "contacts contacts";
        align-items: center;
        column-gap: 8px;
        row-gap: 8px;
        padding: 9px 12px 10px;
        width: 100%;
        min-width: 0;
    }

    .header .logo-group {
        grid-area: brand;
        display: flex;
        align-items: center;
        justify-self: start;
        min-width: 0;
        max-width: 100%;
        gap: 6px;
    }

    .header .header-logo-img {
        height: 47px !important;
        width: auto;
        max-width: 120px;
        flex-shrink: 0;
        object-fit: contain;
    }

    .header .city-desc {
        max-width: 100px;
        font-size: 12px;
        line-height: 1.17;
        flex-shrink: 1;
    }

    .header .mobile-menu-btn {
        grid-area: burger;
        display: flex !important;
        justify-content: center;
        align-items: center;
        width: 42px;
        height: 42px;
        margin: 0;
        padding: 0;
        border: 1px solid rgba(74, 51, 32, .13);
        border-radius: 12px;
        background: rgba(255, 255, 255, .75);
        color: var(--bee-brown);
        font-size: 22px;
        cursor: pointer;
        z-index: 2;
    }

    .header .contacts-group {
        grid-area: contacts;
        display: flex;
        align-items: center;
        justify-content: space-between;
        width: 100%;
        min-width: 0;
        margin: 0;
        padding-top: 8px;
        gap: 8px;
        border-top: 1px solid rgba(74, 51, 32, .12);
    }

    .header .socials {
        display: flex;
        align-items: center;
        flex-shrink: 0;
        gap: 6px;
    }

    .header .soc-btn {
        width: 36px;
        height: 36px;
        border-radius: 10px;
        font-size: 17px;
    }

    .header .soc-btn svg {
        max-width: 19px;
        max-height: 19px;
    }

    .header .phone-block {
        flex: 1 1 auto;
        min-width: 0;
        align-items: flex-end;
        text-align: right;
    }

    .header .phone-link {
        display: block;
        white-space: nowrap;
        font-size: clamp(13px, 3.7vw, 17px);
        line-height: 1.22;
        letter-spacing: 0;
    }

    .header .callback-link {
        display: block;
        white-space: nowrap;
        font-size: 11px;
        line-height: 1.2;
        margin-top: 3px;
    }

    .header .main-nav {
        display: none;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        width: 100%;
        max-height: calc(100dvh - 110px);
        overflow-y: auto;
        flex-direction: column;
        gap: 0;
        padding: 8px 12px 14px;
        background: rgba(255, 247, 232, .98);
        box-shadow: 0 12px 22px rgba(74, 51, 32, .15);
        z-index: 1010;
    }

    .header #menu-toggle:checked ~ .main-nav {
        display: flex;
    }

    .header .main-nav a {
        width: 100%;
        padding: 11px 12px;
        text-align: left;
        font-size: 15px;
        white-space: normal;
    }
}

@media screen and (max-width: 360px) {
    .header .header-logo-img { height: 42px !important; }
    .header .city-desc { font-size: 11px; }
    .header .soc-btn { width: 32px; height: 34px; font-size: 15px; }
    .header .socials { gap: 4px; }
    .header .phone-link { font-size: 12px; }
    .header .callback-link { font-size: 10px; }
}



/* Нейтральное мобильное меню на всех страницах */

@media (max-width: 850px) {

    .header .main-nav {

        background: #F7F8FA !important;

        background-image: none !important;

        border-top: 1px solid #E5E7EB;

        box-shadow: 0 12px 30px rgba(30, 41, 59, 0.14);

        border-radius: 0 0 18px 18px;

    }



    .header .main-nav a,

    .header .main-nav a:visited {

        color: #30343B !important;

        background: transparent;

        border-bottom: 1px solid #E9ECEF;

        border-radius: 8px;

    }



    .header .main-nav a:hover,

    .header .main-nav a:focus-visible {

        color: #22262C !important;

        background: #E9EDF2 !important;

        transform: none;

    }



    .header .mobile-menu-btn {

        background: #FFFFFF !important;

        color: #30343B !important;

        border-color: #E5E7EB !important;

    }

}




/* ==========================================

   ВЕСЕЛИУМ — НОВОЕ МОБИЛЬНОЕ МЕНЮ

   Стиль: минимализм, нейтральная палитра

   ========================================== */



@media screen and (max-width: 850px) {



    /* Узкая панель справа вместо списка во всю ширину */

    .header .main-nav {

        display: none !important;

        position: absolute !important;

        top: calc(100% + 6px) !important;

        left: auto !important;

        right: 10px !important;



        width: min(320px, calc(100vw - 20px)) !important;

        max-height: calc(100dvh - 125px);

        overflow-y: auto;



        flex-direction: column !important;

        align-items: stretch !important;

        gap: 0 !important;



        padding: 20px 20px 14px !important;



        background: #FFFCF8 !important;

        background-image: none !important;

        backdrop-filter: none !important;



        border: 1px solid #EEE7DE !important;

        border-radius: 20px !important;



        box-shadow:

            0 18px 50px rgba(34, 29, 24, 0.18),

            0 3px 10px rgba(34, 29, 24, 0.04) !important;



        z-index: 1500 !important;

    }



    /* Открываем меню через существующий бургер */

    .header #menu-toggle:checked ~ .main-nav {

        display: flex !important;

        animation: veseliumMenuOpen .24s ease-out both;

    }



    /* Маленький заголовок */

    .header .main-nav::before {

        content: "НАВИГАЦИЯ";

        display: block;

        padding: 0 6px 12px;

        color: #988F85;

        font-size: 10px;

        font-weight: 900;

        letter-spacing: 2px;

        border-bottom: 1px solid #EDE7E0;

        margin-bottom: 4px;

    }



    /* Пункты меню без карточек */

    .header .main-nav a,

    .header .main-nav a:visited {

        display: flex !important;

        align-items: center;

        justify-content: space-between;



        width: 100% !important;

        padding: 14px 6px !important;

        margin: 0 !important;



        color: #332F2B !important;

        background: transparent !important;



        font-size: 15px !important;

        font-weight: 800 !important;

        line-height: 1.3;



        border: none !important;

        border-bottom: 1px solid #F0EBE5 !important;

        border-radius: 0 !important;



        text-align: left !important;

        text-decoration: none !important;

        white-space: normal !important;



        transition:

            color .2s ease,

            padding .2s ease,

            background .2s ease;

    }



    /* Тонкая стрелочка справа */

    .header .main-nav a::after {

        content: "";

        width: 7px;

        height: 7px;

        flex-shrink: 0;



        border-top: 1.5px solid #A59C92;

        border-right: 1.5px solid #A59C92;



        transform: rotate(45deg);

        margin-right: 5px;

    }



    .header .main-nav a:last-child {

        border-bottom: none !important;

    }



    /* Лёгкая подсветка при наведении */

    .header .main-nav a:hover,

    .header .main-nav a:focus-visible {

        background: #F6F2EC !important;

        color: #6B4C32 !important;

        padding-left: 12px !important;

        transform: none !important;

    }



    /* Бургер — нейтральный */

    .header .mobile-menu-btn {

        background: #FFFFFF !important;

        color: #332F2B !important;

        border: 1px solid #EDE7E0 !important;

        border-radius: 12px !important;

        box-shadow: 0 2px 8px rgba(0,0,0,.04);

    }



    @keyframes veseliumMenuOpen {

        from {

            opacity: 0;

            transform: translate(12px, -5px);

        }

        to {

            opacity: 1;

            transform: translate(0, 0);

        }

    }

}



@media (prefers-reduced-motion: reduce) {

    .header #menu-toggle:checked ~ .main-nav {

        animation: none !important;

    }

}