/*
 * Кирпич · меню.
 *
 * Полоса над страницей: слева название сайта, дальше разделы, в конце
 * аватарка. Классов внутри нет, кроме имени самого блока и пометки
 * текущего раздела: остальное описывают теги.
 *
 *     nav.menu
 *         div
 *             a Название сайта
 *             menu
 *                 li a Раздел
 *                 li a.here Текущий раздел
 *                 li details > summary Ещё + menu
 *             b А
 *
 * Слоя два, и это не лишняя обёртка. Полоса тянется во всю ширину экрана,
 * потому что фон и линия под меню обрываться на краю колонки не должны, а
 * содержимое внутри стоит колонкой по одному левому краю с текстом
 * страницы. Одним элементом это не делается: ограничить ширину значит
 * ограничить и фон.
 *
 * Второй уровень взят тегом menu не ради красоты: у него встроенная роль
 * списка, поэтому разделы читаются с экрана как перечень, а не как набор
 * ссылок подряд.
 */
.menu {
    /*
     * Полоса выключена. Ни --menu-height, ни обнулённые поля высоту до
     * конца не убирают: её держит само содержимое, аватарка и название
     * выше нуля сами по себе.
     *
     * Поэтому высота ограничивается нулём, а scale убирает рисунок:
     * одного scale мало, он не освобождает место в потоке. Оба свойства
     * читают ту же переменную, что и высота, поэтому настройка остаётся
     * значением, а не отдельным классом.
     *
     * Обрезки содержимого здесь нет намеренно: растворение по замыслу
     * выходит за нижний край полосы, и любой overflow срезал бы его.
     */
    max-height: calc(1000px * var(--menu-on));
    scale: var(--menu-on, 1);

    position: sticky;
    top: 0;
    z-index: 10;
    background: var(--menu-back);
    /*
     * Насыщенность поднимается вместе с размытием: под полупрозрачным
     * белым краски выцветают, и без этого страница под полосой выглядит
     * припудренной.
     *
     * Гаснет она тоже вместе с ним. Обе величины это стекло, и при
     * растворении подкрашивать страницу под полосой не за чем: заливки
     * над ней нет, и насыщенность просто меняла бы цвета на ровном
     * месте.
     *
     * Префикс нужен: Safari до недавних версий понимает свойство только
     * с ним, а полоса без размытия становится мутным белым прямоугольником.
     */
    backdrop-filter: saturate(var(--menu-saturate)) blur(var(--menu-blur));
    -webkit-backdrop-filter: saturate(var(--menu-saturate)) blur(var(--menu-blur));
    /*
     * Мягкая тень вместо линии: под стеклом жёсткий волосок читается как
     * шов, а тень отделяет полосу от страницы и при этом не спорит с
     * размытием под ней.
     *
     * Тенью, а не бордером: бордер занял бы место в раскладке и сдвинул
     * содержимое вниз на свою толщину.
     */
    box-shadow: var(--menu-shadow);
}

/*
 * Растворение под полосой. Отдельный слой, а не фон самой полосы:
 * заливка должна быть выше её и заходить за нижний край, иначе край
 * читается чертой и приём не работает.
 *
 * Псевдоэлементом, а не div в разметке: в блоке остаётся то же имя
 * класса, а сайт про этот слой ничего не знает.
 *
 * Лежит под содержимым полосы и не ловит мышь: сквозь него нажимаются
 * ссылки страницы, оказавшиеся под краем.
 */
.menu::before {
    content: '';
    position: absolute;
    z-index: -1;
    inset-block-start: 0;
    inset-inline: 0;
    height: calc(var(--menu-fade-height) * var(--menu-fade-on));
    background: linear-gradient(
        to bottom,
        var(--menu-fade-color),
        rgb(from var(--menu-fade-color) r g b / 0)
    );
    pointer-events: none;
}

/*
 * Колонка меню. Ширину и border-box она получает вместе с main из
 * base.css: там формула описана один раз на обоих, чтобы название сайта
 * и текст страницы не могли встать по разным левым краям.
 *
 * Здесь остаётся только своё: раскладка полосы и её высота. Высота
 * минимальная, а не жёсткая: на узком экране разделы переносятся на
 * вторую строку, и при height они вываливались бы за край полосы.
 */
.menu > div {
    display: flex;
    min-height: var(--menu-height);
    align-items: center;
    /*
     * Промежуток между частями полосы: названием, разделами и аватаркой.
     * Больше просвета между самими разделами, иначе аватарка читается
     * последним пунктом меню, а не отдельным элементом.
     */
    gap: 32px;
    /*
     * Поля тоже умножены на --menu-on: при выключенной полосе высоту
     * держал бы padding, и от меню осталась бы пустая щель наверху.
     */
    padding-block: calc(7px * var(--menu-on));
    padding-inline: var(--site-gutter);
}

/*
 * Название сайта: первая ссылка блока.
 *
 * Не сжимается и не переносится: при десятке разделов флекс начинал
 * отбирать место у названия, и «Кирпич система блоков» ломалось на две
 * строки, а разделы всё равно не помещались.
 */
.menu > div > a {
    flex: none;
    color: var(--color-title);
    font-size: var(--menu-brand);
    font-weight: 600;
    letter-spacing: -0.01em;
    text-decoration: none;
    white-space: nowrap;
}

.menu > div > a:hover {
    text-decoration: none;
}

/* Приписка рядом с названием: чем сайт занимается. */
.menu > div > a small {
    margin-left: 8px;
    color: var(--color-muted);
    font-size: var(--menu-note);
    font-weight: 400;
}

/*
 * Логотип: герб, эмблема, знак. Кладётся тегом img первым ребёнком
 * названия, тогда название встаёт рядом с картинкой, а приписка под
 * названием, а не сбоку.
 *
 *     a > img + span > Название + small Приписка
 */
.menu > div > a:has(> img) {
    display: flex;
    align-items: center;
    gap: 12px;
}

.menu > div > a > img {
    width: var(--menu-logo);
    height: var(--menu-logo);
    flex: none;
    object-fit: contain;
    /*
     * Форма подложки: круг, скруглённый квадрат или ничего. Знак в круге
     * читается как эмблема, а не как картинка рядом с названием, поэтому
     * фон и поля здесь, а не в разметке.
     */
    border-radius: var(--menu-logo-radius);
    background: var(--menu-logo-back);
    padding: var(--menu-logo-space);
    box-sizing: border-box;
    color: var(--menu-logo-color);
}

/* Рядом с логотипом название и приписка идут столбиком. */
.menu > div > a > span {
    display: block;
    line-height: var(--line-small);
}

.menu > div > a > span small {
    display: block;
    margin-left: 0;
}

/*
 * Разделы. Списочные маркеры и отступы браузера снимаются здесь, а не в
 * base.css: тег menu вне этого блока нам не встречается.
 *
 * Идут одной строкой и не переносятся: лишние убираются под «Ещё».
 * Перенос выглядел бы поломкой — меню росло бы в высоту и сдвигало
 * страницу.
 */
.menu menu {
    display: flex;
    margin: 0;
    margin-left: auto;
    padding: 0;
    align-items: center;
    gap: var(--menu-gap);
    list-style: none;
}

.menu li {
    display: flex;
}

.menu li a {
    color: var(--color-text);
    font-size: var(--menu-text);
    text-decoration: none;
}

/* Линия под пунктом спорила бы с линией под самой полосой меню. */
.menu li a:hover {
    text-decoration: none;
}

/*
 * Текущий раздел ничем не выделен: полоса меню одинакова на всех
 * страницах. Цвет спорил бы со ссылками, а насыщенность меняла бы ширину
 * пункта, и соседи сдвигались бы при каждом переходе.
 *
 * Класс here в разметке остаётся: он говорит, какой раздел открыт, и
 * сайту, который захочет его пометить, менять шаблон не придётся.
 */

/*
 * «Ещё»: разделы, которые не поместились в строку.
 *
 * Собрано на details, поэтому раскрытие работает без единой строки
 * JavaScript: браузер сам открывает и закрывает список, обрабатывает
 * клавиатуру и снимает фокус. Что уезжает под «Ещё», решает шаблон
 * страницы, а не стили: это разное на разных сайтах.
 *
 *     li: details
 *         summary Ещё
 *         menu
 *             li: a Раздел
 *
 * Тем же собирается подменю обычного раздела: у «Обращений» свой список
 * из порядка рассмотрения и личного приёма. Разница только в подписи
 * summary, правила общие.
 */
.menu details {
    flex: none;
    position: relative;
}

.menu summary {
    display: inline-flex;
    align-items: center;
    color: var(--color-text);
    cursor: default;
    font-size: var(--menu-text);
    /* Треугольник браузера убирается: свой значок рисуется ниже. */
    list-style: none;
    white-space: nowrap;
}

.menu summary::-webkit-details-marker {
    display: none;
}

/* Галка вниз. Рисуется псевдоэлементом: она служебная и не содержание. */
.menu summary::after {
    content: '';
    display: inline-block;
    flex: none;
    width: 7px;
    height: 7px;
    margin-left: 6px;
    border-right: 1.5px solid var(--color-muted);
    border-bottom: 1.5px solid var(--color-muted);
    transform: translateY(-2px) rotate(45deg);
}

.menu details[open] summary::after {
    transform: translateY(1px) rotate(-135deg);
}

/*
 * Раскрытый список. Ложится поверх страницы, поэтому меню не растёт в
 * высоту и содержимое под ним не дёргается.
 *
 * Правым краем к своему месту, а не левым: «Ещё» стоит в конце строки, и
 * список, растущий вправо, ушёл бы за край экрана.
 */
.menu details[open] menu {
    position: absolute;
    z-index: 1;
    top: calc(100% + 10px);
    right: 0;
    display: block;
    min-width: 180px;
    padding: 6px 0;
    border-radius: 10px;
    background: var(--color-page);
    box-shadow:
        0 0 0 var(--hairline) var(--separator),
        0 8px 24px rgba(0, 0, 0, 0.12);
}

.menu details menu li {
    display: block;
}

.menu details menu a {
    display: block;
    padding: 7px 16px;
    white-space: nowrap;
}

/*
 * Черта делит список на смысловые части: под ней разделы другого рода.
 * Поле с обеих сторон, как у разделителя в статье: черта отделяет, а не
 * завершает, и прижатая к пункту сверху читается как его подчёркивание.
 */
.menu details menu hr {
    height: var(--hairline);
    margin: 6px 0;
    border: 0;
    background: var(--separator);
}

/*
 * Аватарка со списком: тот же details, только вместо подписи круг с
 * буквой. Своих правил ему не нужно, кроме снятого значка галки — рядом
 * с кругом он лишний.
 *
 *     details
 *         summary: b А
 *         menu > li: a Личный кабинет
 */
.menu summary:has(> b)::after {
    display: none;
}

/*
 * Раздел, уже показанный в строке. Под «Ещё» он лежит ради узкого
 * экрана, где строка прячется целиком, а на широком дублировал бы
 * соседа, поэтому там скрыт.
 */
@media (min-width: 641px) {
    .menu details menu .wide-hidden {
        display: none;
    }
}

/*
 * Аватарка: круг с буквой. Буква задаётся текстом внутри, цвет круга
 * переопределяется переменной, поэтому разным людям можно раздать разные
 * цвета, не трогая разметку.
 *
 * Размеры в единицах шрифта не годятся: круг должен остаться кругом при
 * любом кегле, поэтому ширина и высота равны и заданы явно.
 */
/*
 * Аватарка стоит последней в колонке и не сжимается — ни сама, ни когда
 * у неё есть свой список.
 */
.menu > div > details {
    flex: none;
}

.menu > div > b,
.menu summary > b {
    display: flex;
    width: var(--avatar-size);
    height: var(--avatar-size);
    flex: none;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--avatar-back);
    color: var(--avatar-color);
    font-size: var(--avatar-text);
    font-weight: 600;
    /* Строка равна кеглю: иначе буква съезжает вниз от центра круга. */
    line-height: 1;
    text-transform: uppercase;
    user-select: none;
}

/*
 * Узкий экран. Приписка у названия и разделы прячутся: на телефоне в
 * строку помещаются только название, «Ещё» и аватарка.
 *
 * Прячется именно список, а не переполнение: обрезка по overflow срезала
 * бы вместе с разделами и саму кнопку «Ещё», после чего до остальных
 * страниц было бы не добраться.
 *
 * Сайту, у которого навигация продублирована нижней панелью, разделы в
 * шапке не нужны совсем: он снимает их классом bare, и остаются название
 * и аватарка.
 */
@media (max-width: 640px) {
    .menu > div {
        gap: 12px;
    }

    .menu > div > a small {
        display: none;
    }

    .menu li:not(:has(details)) {
        display: none;
    }

    /*
     * Отступ до правого края держал список разделов. Когда он скрыт,
     * прижимать аватарку становится нечем, поэтому это берёт на себя
     * она сама.
     */
    .menu.bare > div > menu {
        display: none;
    }

    .menu.bare > div > details,
    .menu.bare > div > b {
        margin-left: auto;
    }
}