/* ============================================================
 * nav.css — шапка сайта: ряд навигации, подменю, меню аккаунта, бургер.
 *
 * Подключается ПОСЛЕ public.css (public.php, main.php, market.php)
 * через $v() — cache-busting по mtime. Сам public.css не правим:
 * здесь только отменяются его правила (побеждает более поздний файл
 * при равной специфичности) и добавляется новое.
 *
 * Спека: docs/menu-design-spec-final.md
 *   (визуал: menu-design-spec-ui.md, разметка: menu-design-spec-structure.md,
 *    юзабилити/тексты: menu-design-spec-ux-review.md)
 * ============================================================ */

/* ------------------------------------------------------------
 * 1. Ряд: отмена «невидимого переполнения» (бриф §3.1, У-1)
 *    public.css: justify-content:center + overflow-x:auto + scrollbar-width:none
 *    обрезали пункты с двух сторон без единого признака.
 * ------------------------------------------------------------ */
.pub-nav {
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    /* Центрируем ряд в свободном пространстве между брендом и действиями.
     * «Обрезка с двух сторон» из брифа лечится здесь НЕ центрированием,
     * а отменённым overflow-x:auto + страховкой .force-compact (§5). */
    justify-content: center;
    flex-wrap: nowrap;
    overflow: visible;
    scrollbar-width: auto;
    -ms-overflow-style: auto;
}

.pub-nav-list {
    display: flex;
    align-items: center;
    gap: var(--ds-space-5);
    margin: 0;
    padding: 0;
    list-style: none;
    min-width: 0;
}

.pub-nav-item {
    display: flex;
    align-items: center;
    position: relative;
}

/* ------------------------------------------------------------
 * 2. Первичная ссылка и триггер подменю (Disclosure, APG)
 * ------------------------------------------------------------ */
.pub-nav-link,
.pub-nav-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: var(--ds-space-1);
    min-height: 40px;
    padding: var(--ds-space-2);
    border: 0;
    border-radius: var(--ds-radius-sm);
    background: transparent;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-font-sm);
    font-weight: var(--ds-weight-medium);
    line-height: var(--ds-lh-base);
    color: var(--ds-muted);
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition:
        color var(--ds-motion-fast) var(--ds-ease-in),
        background-color var(--ds-motion-fast) var(--ds-ease-in);
}

.pub-nav-link:hover,
.pub-nav-trigger:hover {
    color: var(--ds-heading);
}

.pub-nav-link:focus-visible,
.pub-nav-trigger:focus-visible {
    outline: var(--ds-focus-width) solid var(--ds-accent);
    outline-offset: var(--ds-focus-offset);
    border-radius: var(--ds-radius-sm);
}

/* Активная страница / активный раздел / открытое подменю */
.pub-nav-link.is-active,
.pub-nav-trigger.is-section-active,
.pub-nav-trigger[aria-expanded="true"] {
    color: var(--ds-heading);
    font-weight: var(--ds-weight-semibold);
}

/* Подчёркивание. Отменяет display:block-правило из public.css:
 * тот же селектор, но nav.css загружается позже. */
.pub-nav-link.is-active::after,
.pub-nav-trigger.is-section-active::after,
.pub-nav-trigger[aria-expanded="true"]::after {
    content: "";
    display: block;
    position: absolute;
    left: var(--ds-space-2);
    right: var(--ds-space-2);
    bottom: 4px;
    height: 2px;
    margin-top: 0;
    border-radius: 1px;
    background: var(--ds-accent);
}

/* --- Триггер: шеврон --- */
.pub-nav-caret {
    width: 12px;
    height: 12px;
    flex: none;
    margin-left: var(--ds-space-1);
    color: var(--ds-faint);
    transition:
        transform var(--ds-motion-base) var(--ds-ease-in),
        color var(--ds-motion-fast) var(--ds-ease-in);
}

.pub-nav-trigger:hover .pub-nav-caret {
    color: var(--ds-muted);
}

.pub-nav-trigger[aria-expanded="true"] .pub-nav-caret {
    transform: rotate(180deg);
    color: var(--ds-accent);
}

/* --- Точка-индикатор: в группе есть пункт с бейджем (У-6) --- */
.pub-nav-dot {
    width: 6px;
    height: 6px;
    flex: none;
    margin-left: var(--ds-space-1);
    border-radius: var(--ds-radius-full);
    background: var(--ds-accent);
}

/* Счётчик внутри пункта (первичного и подменю) */
.pub-nav-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 20px;
    height: 20px;
    margin-left: auto;
    padding: 0 var(--ds-space-2);
    border-radius: var(--ds-radius-full);
    background: var(--ds-accent);
    color: var(--ds-on-accent);
    font-size: var(--ds-font-xs);
    font-weight: var(--ds-weight-semibold);
    font-variant-numeric: tabular-nums;
}

@media (pointer: coarse) {
    .pub-nav-link,
    .pub-nav-trigger {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------
 * 3. Панель подменю (десктоп)
 * ------------------------------------------------------------ */
.pub-nav-group {
    position: relative;
}

.pub-submenu {
    position: absolute;
    top: calc(100% + var(--ds-space-1));
    left: 0;
    z-index: 110;
    min-width: 220px;
    max-width: 320px;
    max-height: min(70vh, 520px);
    overflow-y: auto;
    padding: var(--ds-space-2);
    margin: 0;
    list-style: none;
    background: var(--ds-surface);
    border: var(--ds-border-hairline) solid var(--ds-border);
    border-radius: var(--ds-radius-md);
    box-shadow: var(--ds-shadow-2);
    display: none;
}

.is-open > .pub-submenu {
    display: block;
    animation: pub-submenu-in var(--ds-motion-base) var(--ds-ease-in);
}

@keyframes pub-submenu-in {
    from {
        opacity: 0;
        transform: translateY(-4px);
    }
    to {
        opacity: 1;
        transform: none;
    }
}

/* Панели, прижатые правым краем к триггеру: «Ещё» и меню аккаунта */
.pub-nav-overflow .pub-submenu,
.pub-account .pub-submenu {
    left: auto;
    right: 0;
}

/* «Ещё» — список всех вторичных пунктов с заголовками-группами */
.pub-nav-overflow .pub-submenu {
    min-width: 260px;
    max-width: min(360px, calc(100vw - var(--ds-space-6)));
}

/* Заголовок-разделитель внутри «Ещё» */
.pub-submenu-heading {
    padding: var(--ds-space-3) var(--ds-space-3) var(--ds-space-1);
    font-size: var(--ds-font-xs);
    font-weight: var(--ds-weight-semibold);
    line-height: var(--ds-lh-base);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-muted);
}

.pub-submenu-heading:first-child {
    padding-top: var(--ds-space-1);
}

/* Пункт панели */
.pub-submenu-link {
    display: flex;
    align-items: center;
    gap: var(--ds-space-3);
    min-height: 36px;
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-sm);
    font-weight: var(--ds-weight-medium);
    line-height: var(--ds-lh-base);
    color: var(--ds-text);
    text-decoration: none;
    cursor: pointer;
    transition:
        background-color var(--ds-motion-fast) var(--ds-ease-in),
        color var(--ds-motion-fast) var(--ds-ease-in);
}

.pub-submenu-link:hover {
    background: var(--ds-accent-050);
    color: var(--ds-heading);
}

.pub-submenu-link:focus-visible {
    outline: var(--ds-focus-width) solid var(--ds-accent);
    outline-offset: calc(-1 * var(--ds-focus-width));
    background: var(--ds-accent-050);
}

.pub-submenu-link.is-active,
.pub-submenu-link[aria-current="page"] {
    background: var(--ds-accent-050);
    /* accent-hover (600) вместо accent (500): контраст ≥4.5:1 на accent-050 (бриф §5) */
    color: var(--ds-accent-hover);
    font-weight: var(--ds-weight-semibold);
    /* --ds-border-strong — это 2px (длина), не цвет: литерал, а не var() */
    box-shadow: inset 2px 0 0 var(--ds-accent);
}

/* Кнопка-действие внутри панели («Выйти») */
.pub-submenu-action {
    width: 100%;
    border: 0;
    background: none;
    font: inherit;
    font-size: var(--ds-font-sm);
    font-weight: var(--ds-weight-medium);
    line-height: var(--ds-lh-base);
    color: var(--ds-text);
    text-align: left;
}

button.pub-submenu-action:hover {
    background: var(--ds-accent-050);
    color: var(--ds-heading);
}

.pub-account-form {
    margin: 0;
}

@media (pointer: coarse) {
    .pub-submenu-link {
        min-height: 44px;
    }
}

/* ------------------------------------------------------------
 * 4. Меню аккаунта (правая часть шапки)
 * ------------------------------------------------------------ */
.pub-account {
    position: relative;
    display: inline-flex;
    align-items: center;
}

.pub-account-trigger {
    max-width: 130px;
    font-size: var(--ds-font-xs);
    color: var(--ds-muted);
}

.pub-account-email {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.pub-account .pub-submenu {
    min-width: 200px;
    max-width: 260px;
}

/* ------------------------------------------------------------
 * 5. Адаптив: wide ≥1440 / компакт 1024–1439 / бургер ≤1023
 *    (замеры: docs/menu-design-spec-final.md §3)
 * ------------------------------------------------------------ */

/* Компактный режим: именованные группы свёрнуты в «Ещё»,
 * горизонтальные паддинги пунктов ужимаются (замеры: 1024px у админа) */
@media (max-width: 1439px) {
    .pub-nav-group:not(.pub-nav-overflow) {
        display: none;
    }
    .pub-nav-list {
        gap: var(--ds-space-3);
    }
    .pub-nav-link,
    .pub-nav-trigger {
        padding-inline: var(--ds-space-1);
    }
}

/* Широкий режим: «Ещё» не показываем (серверный список есть всегда) */
@media (min-width: 1440px) {
    .pub-nav-overflow {
        display: none;
    }
}

/* Страховка (Уровень 2, structure §4.2): JS вешает класс,
 * если ряд физически не влез (длинная локаль, 200% zoom). */
.pub-nav.force-compact .pub-nav-group:not(.pub-nav-overflow) {
    display: none;
}

.pub-nav.force-compact .pub-nav-overflow {
    display: flex;
}

/* Бургер: ряд и действия уступают место кнопке меню */
@media (max-width: 1023px) {
    .pub-nav {
        display: none;
    }
    .pub-menu-toggle {
        display: flex;
    }
    .pub-account {
        display: none;
    }
}

/* Узкий планшет/телефон: в шапке остаются бренд, тумблер темы и бургер */
@media (max-width: 900px) {
    .pub-header-actions > :not(.ds-theme-duo) {
        display: none;
    }
}

/* ------------------------------------------------------------
 * 6. Бургер-кнопка: гамбургер → «×», состояние читается (У-12)
 * ------------------------------------------------------------ */
.pub-menu-toggle[aria-expanded="true"] span:nth-child(1) {
    transform: translateY(7px) rotate(45deg);
}

.pub-menu-toggle[aria-expanded="true"] span:nth-child(2) {
    opacity: 0;
}

.pub-menu-toggle[aria-expanded="true"] span:nth-child(3) {
    transform: translateY(-7px) rotate(-45deg);
}

/* ------------------------------------------------------------
 * 7. Мобильное меню: списки, секции-группы, бейджи (У-4)
 * ------------------------------------------------------------ */
.pub-nav-mobile-list {
    margin: 0;
    padding: 0;
    list-style: none;
}

/* Границы держим на <li>, иначе правило
 * `.pub-nav-mobile a:last-child` из public.css гасит их у всех ссылок */
.pub-nav-mobile .pub-nav-mobile-list > li {
    border-bottom: var(--ds-border-hairline) solid var(--ds-border);
}

.pub-nav-mobile .pub-nav-mobile-list > li:last-child {
    border-bottom: 0;
}

.pub-nav-mobile .pub-nav-mobile-list > li > a {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: 48px;
    padding: var(--ds-space-3) 0;
    border-bottom: 0;
    font-size: var(--ds-font-md);
    font-weight: var(--ds-weight-medium);
    color: var(--ds-text);
    text-decoration: none;
}

.pub-nav-mobile .pub-nav-mobile-list > li > a[aria-current="page"] {
    color: var(--ds-accent);
    font-weight: var(--ds-weight-semibold);
}

.pub-nav-mobile-group {
    position: relative;
}

.pub-nav-mobile-trigger {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    width: 100%;
    min-height: 48px;
    padding: var(--ds-space-3) 0;
    border: 0;
    background: none;
    font-family: var(--ds-font-sans);
    font-size: var(--ds-font-md);
    font-weight: var(--ds-weight-medium);
    line-height: var(--ds-lh-base);
    color: var(--ds-text);
    text-align: left;
    cursor: pointer;
}

.pub-nav-mobile-trigger:focus-visible {
    outline: var(--ds-focus-width) solid var(--ds-accent);
    outline-offset: var(--ds-focus-offset);
    border-radius: var(--ds-radius-sm);
}

.pub-nav-mobile-trigger .pub-nav-caret {
    width: 16px;
    height: 16px;
    margin-left: auto;
}

/* Секция внутри бургера: панель не «выпадает», а раскрывается в потоке */
.pub-nav-mobile-group > .pub-submenu {
    position: static;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0 0 var(--ds-space-3) var(--ds-space-4);
    border: 0;
    background: transparent;
    box-shadow: none;
}

.pub-nav-mobile .pub-submenu-link {
    min-height: 44px;
    padding: var(--ds-space-2) 0;
    color: var(--ds-muted);
    font-size: var(--ds-font-sm);
}

.pub-nav-mobile .pub-submenu-link[aria-current="page"] {
    box-shadow: inset 2px 0 0 var(--ds-accent);
    padding-left: var(--ds-space-2);
}

/* Дополнительные ссылки (вход/выход) — отделяем от списка разделов */
.pub-nav-mobile-extra {
    margin-top: var(--ds-space-2);
    padding-top: var(--ds-space-2);
    border-top: var(--ds-border-hairline) solid var(--ds-border);
}

/* ------------------------------------------------------------
 * 7.1 Мобильная шапка: тумблер темы остаётся (public.css оставляет
 *    #ds-theme-toggle), но ось «тепло/холод» на узких экранах
 *    убираем — экономим ~100px, иначе +91px скролла на 390px.
 * ------------------------------------------------------------ */
@media (max-width: 768px) {
    .pub-header-inner .ds-theme-duo > .ds-theme-seg:last-child {
        display: none;
    }
}

/* ------------------------------------------------------------
 * 8. Без JS (progressive enhancement, structure §3.4):
 *    десктопный ряд и кнопка бургера отключаются, вместо них —
 *    раскрытый вертикальный список всех ссылок. Ни один пункт
 *    не теряется, ни одна «мёртвая» кнопка не показывается.
 * ------------------------------------------------------------ */
html:not(.js) .pub-nav,
html:not(.js) .pub-menu-toggle {
    display: none;
}

html:not(.js) .pub-nav-mobile {
    display: flex;
}

html:not(.js) .pub-nav-mobile-trigger {
    display: none;
}

/* Заголовок группы: заменяет мёртвый триггер в режиме без JS */
.pub-nav-mobile-heading {
    display: none;
}

html:not(.js) .pub-nav-mobile-heading {
    display: flex;
    align-items: center;
    gap: var(--ds-space-2);
    min-height: 36px;
    margin-top: var(--ds-space-2);
    padding: var(--ds-space-2) var(--ds-space-3);
    border-radius: var(--ds-radius-sm);
    font-size: var(--ds-font-xs);
    font-weight: var(--ds-weight-semibold);
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--ds-muted);
    background: var(--ds-surface-2);
}

/* Меню аккаунта — дисклозер: без JS его пункты (Сменить пароль/Выйти)
 * продублированы в .pub-nav-mobile-extra раскрытого списка, а сам
 * дисплозер прятать целиком (иначе кнопка-триггер мертва и список
 * вываливается из шапки) */
html:not(.js) .pub-account {
    display: none;
}

html:not(.js) .pub-submenu {
    position: static;
    display: block;
    min-width: 0;
    max-width: none;
    max-height: none;
    overflow: visible;
    padding: 0 0 var(--ds-space-2) var(--ds-space-4);
    border: 0;
    background: transparent;
    box-shadow: none;
    animation: none;
}

html:not(.js) .pub-submenu .pub-submenu-heading {
    padding-left: 0;
}

html:not(.js) .pub-submenu-link {
    padding-left: 0;
}

/* ------------------------------------------------------------
 * 9. Моторика: без анимации по prefers-reduced-motion (У-7)
 * ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
    .is-open > .pub-submenu,
    .pub-nav-caret,
    .pub-nav-link,
    .pub-nav-trigger,
    .pub-submenu-link,
    .pub-menu-toggle span {
        transition: none;
        animation: none;
        transform: none;
    }
    .pub-menu-toggle span {
        transform: none !important;
    }
}