.mobile-menu-overlay {
    position: fixed;
    top: 0; left: 0; width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    opacity: 0;
    visibility: hidden;
    z-index: var(--z-mobile-menu-overlay);
}
.mobile-menu-dropdown {
    position: fixed;
    width: var(--mobile-menu-width);
    top: var(--header-height);
    right: -100%;
    z-index: var(--z-mobile-menu);
    overflow-y: auto;
    border-left: 2px solid var(--nav-menu-outer-border);
    border-bottom: 2px solid var(--nav-menu-outer-border);
    background: var(--nav-menu-bg);
    transition: none; 
}
.is-animated .mobile-menu-overlay { transition: opacity 0.3s ease, visibility 0.3s ease; }
.is-animated .mobile-menu-dropdown { transition: right 0.3s ease; }
body.menu-open .mobile-menu-dropdown { right: 0; }
body.menu-open .mobile-menu-overlay { opacity: 1; visibility: visible; }

.mobile-menu-list {
    list-style: none;
    padding: 0; margin: 0;
}

.menu-item-wrapper {
    display: flex;
    width: 100%;

    border-bottom: 1px solid var(bg-darker);
    align-items: stretch;
    
    position: relative;
}
.mobile-menu-list .current-menu-item > .menu-item-wrapper {
    background: var(--green-light); /* Очень легкий голубой оттенок фона */
}

.menu-item-wrapper a {
    display: flex;          /* Включаем flex внутри ссылки */
    align-items: center;    /* Выравниваем иконку и текст строго по центру по вертикали */
    flex-grow: 1;           /* Ссылка занимает все свободное место */
    text-decoration: none;
    height: var(--header-height);
    padding: var(--space-m) var(--space-m); 
    border-bottom: 2px solid var(--nav-menu-entry-border);

    line-height: var(--lh-tight);
    letter-spacing: 0.05rem;
    color: var(--silver-base);
    font-size: var(--fs-md);
    font-weight: 600;
    font-family: var(--wp--preset--font-family--montserrat);
}
.mobile-menu-list > .menu-item:last-child .menu-item-wrapper a { border-bottom: none; }

.menu-item-wrapper a:active {background-color: #f9f9f9; }

.menu-svg-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: 0.3s ease;
    color: var(--nav-menu-main-icon-color);
}
.menu-svg-icon svg {
    width: 100%;
    height: 100%;
    fill: currentColor;
    stroke: currentColor;
    display: block;
}

.icon-wrapper--main-item {
    display: inline-flex;   /* Чтобы иконка вела себя корректно внутри flex */
    width: 24px;
    height: 24px;
    margin-right: 15px;
    flex-shrink: 0;
}
.icon-wrapper--sub-item {
    display: inline-flex;
    width: 18px;
    height: 18px;
    margin-right: var(--space-m);
    flex-shrink: 0;
    color: var(--nav-menu-sub-icon-color);

}
.icon-wrapper-arrow {
    display: flex; align-items: center; justify-content: center; flex-shrink: 0; transition: 0.3s; /* Дубликат */
    width: 18px; height: 18px;
    color: var(--silver-base);
}

.submenu-toggle {
    width: var(--header-height);
    height: var(--header-height);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    background: none;
    border: none;
    border-left: 2px solid var(--nav-menu-entry-border);
}


/* Поворот при открытии (li получает класс is-open) */
.menu-item.is-open > .menu-item-wrapper .submenu-toggle::before {
    transform: rotate(-135deg);
}

/* Скрытое подменю */
.sub-menu {
    display: none;
    list-style: none;
    padding: 0;
    background: red;
}

.menu-item.is-open > .sub-menu {
    display: block;
}

.sub-menu .menu-item-wrapper {
    padding-left: var(--space-xl);

}
.sub-menu a {
    
    border-left: 2px solid var(--silver-base);
}

.mobile-menu-list .sub-menu {
    position: relative;
    background: var(--nav-sub-menu-bg);
    padding-left: 0px;
    margin: 0;
    list-style: none;

}

.mobile-menu-list .sub-menu .menu-item-wrapper a {
    
    line-height: var(--lh-tight);
    letter-spacing: 0.05rem;
    color: var(--silver-base);
    font-size: var(--fs-sm);
    font-weight: 600;
    font-family: var(--wp--preset--font-family--montserrat);
}


/* #region Desktop Menu */
.desktop-menu { 
    display: none;
    align-items: center;
    width: 100%;
    position: relative;
}
.brand-field {
    /* flex: 1; */
    width: calc((100% - 960px) * 0.5); 

    height: var(--header-height);
    display: flex;
    align-items: center;
    color: var(--color-text-silver);
    text-align: center;
    align-items: center;
    justify-content: center;
}

.brand-field-left {
    font-family: var(--wp--preset--font-family--simphonia); 
    font-size: var(--fs-4xl);
    line-height: var(--lh-heading);
    letter-spacing: 0.3em;
    background: linear-gradient(to left, var(--copper-dark) 0%, var(--green-dark) 50%, var(--green-dark) 100%);

}
.brand-field-right {
    text-align: right;
    font-family: var(--wp--preset--font-family--oda);
    font-size: var(--fs-lg);  
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    background: linear-gradient(to right, var(--copper-dark) 0%, var(--green-dark) 50%, var(--green-dark) 100%);
}

.join-btn {
    text-align: center;
    height: var(--header-height);
    /* padding: var(--space-s); */
    text-transform: uppercase;
    letter-spacing: 0.05rem;
    display: flex;
    align-items: center;
    text-align: center;
    justify-content: center;
    align-content: center;   
}
.join-btn-header {
    flex: 0 0 var(--desktop-join-button-width);
    border: 2px solid var(--silver-base);
}
.join-btn-footer {
    border: none;
}
.join-btn-vis {
    background: var(--join-btn-gradient); 
    background-size: 200% 200%;
    background-position: center;
    position: relative;
    overflow: hidden;
    animation: pulse-gradient 9s ease-in-out infinite;
}
@keyframes pulse-gradient {
    0% {
        background-size: 100% 100%;
    }
    50% {
        background-size: 250% 250%; /* Градиент "расширяется" */
    }
    100% {
        background-size: 100% 100%;
    }
}


#dynamic-text {
    display: inline-block;
    transition: opacity 0.4s ease, transform 0.4s ease; /* Плавность движения */
    white-space: nowrap;       /* Чтобы текст не переносился на две строки */
    line-height: 1;            /* Убираем лишние отступы шрифта */
}

/* Контейнеры для списков меню */
.menu-side-wrapper {
    display: flex;
    flex: 0 0 auto;
}

/* Сами пункты меню (кнопки) */
.desktop-menu-list {
    display: flex;
    list-style: none;
    padding: 0;
    margin: 0;

}
.desktop-menu-list li a, .menu-spacer {
    
    display: flex;
    width: var( --desktop-menu-button-width);
    text-align: center;
    padding: 0 var(--space-s);
    height: var(--header-height);
    justify-content: center;
    align-items: center;
    background: var(--desktop-menu-btn-color);

    font-family: var(--wp--preset--font-family--oda);
    border-bottom: 1px solid var(--gold-base);
    border-left: 1px solid var(--gold-base);
    color: var(--color-text-silver);
    font-size: var(--fs-md);
    
    letter-spacing: 0.05rem;
    text-transform: uppercase;
    box-sizing: border-box;
}
.right-side .desktop-menu-list > li:last-child > a, 
.right-side .desktop-menu-list > li:last-child {
    border-right: 1px solid var(--gold-base);
}

.desktop-menu-list li a:hover {
    background: var(--gold-dark);
    color: var(--silver-light);
}
.desktop-menu-list li.current-menu-item a {
    background: var(--gold-dark);
    color: white;
    /* Можно добавить внутреннюю тень для эффекта "вдавленности" */
    box-shadow: inset 0 0 10px rgba(0,0,0,0.3);
}


.menu-spacer {
    pointer-events: none; /* Делает её некликабельной */
    opacity: 0.5; /* Опционально: делаем чуть прозрачной */
    color: transparent;
        pointer-events: none;
    list-style: none;
    /* Убедись, что здесь нет padding, который мог бы раздуть блок */
    padding: 0; 

    
}

.menu-spacer a {
    display: block;      /* Чтобы занимала всю ширину/высоту родителя */
    height: 100%;       /* Или фиксированная высота, если у тебя такая задана */
    padding-top: 0;     /* Обнуляем возможные лишние отступы */
    padding-bottom: 0;
    line-height: inherit; /* Наследуем высоту строки от обычных кнопок */
    visibility: hidden;  /* Сделает содержимое невидимым, но сохранит место */
}



/* Контейнер выпадающего списка */
.desktop-menu-list li {
    position: relative; /* Чтобы саб-меню позиционировалось от родителя */
}

.desktop-menu-list li ul.sub-menu {
    position: absolute;
    top: var(--header-height); 

    min-width: 100%;
    
    /* Скрываем */
    display: block;
    opacity: 0;
    visibility: hidden;
    transform: translateY(10px); /* Смещение для анимации вылета */
    transition: all 0.3s ease;
    z-index: var(--z-modal);

    list-style: none;
    padding: 0;
}
.desktop-menu-list > li:last-child ul.sub-menu {
    left: auto;
    right: 0;
    margin-right: -1px; 
}
.desktop-menu-list ul.sub-menu li a {
    border-right: 1px solid var(--gold-base);
    box-sizing: border-box;
}

/* Показываем при наведении на родительский li */
.desktop-menu-list li:hover > ul.sub-menu {
    opacity: 1;
    visibility: visible;

    transform: translateY(0);
}

/* Стилизация ссылок внутри саб-меню */
.desktop-menu-list ul.sub-menu li a {

    width: 180px; /* Саб-меню может быть шире кнопок верха */
    text-align: left;
    padding-left: 15px;
    margin: 0;

}

/* #endregion */

@media (min-width: 1024px) {
    .desktop-menu { display: flex; }
    .header-mobile {display: none; }
    .footer-bar {display: none;}
    .footer-main {
        position: relative; 
        overflow: visible;
        display: block;
        
    }
    .footer-extra {
        display: block !important;
        position: static;
        width: 100%;
        height: auto;

    }
    .footer-grid {
        grid-template-columns: repeat(auto-fit, minmax(400px, 1fr));
        max-width: 1200px;
        
    }
}