/* ========== ОСНОВНЫЕ СТИЛИ (десктоп и плавное сжатие) ========== */
.slm-horizontal-menu {
    font-family: 'Lab Grotesque', sans-serif;
    position: relative;
    text-align: left;
}

.slm-burger {
    display: none; /* скрыт на десктопе, показывается в PHP-стилях при пороге */
}

/* Горизонтальное меню */
.slm-menu-list {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    list-style: none;
    margin: 0;
    padding: 0;
    /* Плавное уменьшение промежутка между пунктами: 
       от 5px при ширине 1920px до 2px при ширине 768px */
    gap: clamp(1px, 0.2vw + 0.5px, 5px);
}

.slm-menu-list > li {
    position: relative;
}

.slm-menu-list > li > a {
    display: inline-block;
    padding: 8px clamp(1px, 0.8vw + 1px, 15px); /* плавное сжатие горизонтальных отступов */
    text-decoration: none;
    color: inherit;
    transition: text-decoration 0.2s;
    font-size: clamp(13px, 0.6vw + 10px, 18px); /* Плавное уменьшение шрифта: от 18px до 13px */
    font-weight: 500;
    white-space: nowrap;
}

.slm-menu-list > li > a:hover {
    text-decoration: underline;
}

/* Выпадающие подменю (десктоп) */
.slm-submenu {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    background: #2C2C2C;
    border: 1px solid #3D3D3D;
    border-radius: 8px;
    width: max-content;
    min-width: auto;
    list-style: none;
    margin: 0;
    padding: 8px 0;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0,0,0,0.3);
}

.slm-has-submenu:hover .slm-submenu {
    display: block;
    animation: fadeIn 0.2s ease-out;
}

.slm-submenu li a {
    display: block;
    padding: 10px 20px;
    text-decoration: none;
    color: white;
    font-size: 14px;
    transition: background 0.2s;
    background: #2C2C2C;
    white-space: nowrap;
}

.slm-submenu li a:hover {
    background: #545454;
}

/* Пункт "все..." */
.slm-more {
    border-top: 1px solid #3D3D3D;
    margin-top: 4px;
    font-style: italic;
    opacity: 0.8;
}

.slm-more a {
    color: #1E90FF;
}

.slm-more a:hover {
    background: transparent;
    opacity: 1;
}

/* Анимация появления */
@keyframes fadeIn {
    from { opacity: 0; transform: translateY(-5px); }
    to { opacity: 1; transform: translateY(0); }
}