/*
 * Кирпич · подвал.
 *
 * Реквизиты и служебные ссылки в конце страницы: наименование, ИНН,
 * адрес, политика обработки данных, карта сайта. На сайте учреждения
 * часть из них обязательна по закону, поэтому подвал есть почти всегда.
 *
 *     footer
 *         p Полное наименование, ИНН, адрес
 *         menu
 *             li a Политика обработки данных
 *             li a Карта сайта
 *
 * Прижимается к низу экрана на короткой странице: место между ним и
 * текстом забирает main своим flex, это описано в каркасе. Здесь остаётся
 * только вид.
 */
footer {
    box-sizing: border-box;
    width: 100%;
    max-width: calc(var(--site-width) + var(--site-gutter) * 2);
    margin-inline: auto;
    padding: var(--step) var(--site-gutter) var(--gap);
    /*
     * Линия сверху рисуется фоном, как разделитель списка: бордер занял
     * бы место в раскладке и сдвинул подвал вниз на свою толщину.
     */
    background: var(--separator-line) 0 0 / 100% var(--hairline) no-repeat;
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--line-small);
}

/*
 * Реквизиты: сплошным текстом, а не списком. Наименование, ИНН и адрес
 * читаются подряд, и разбивать их на строки списка незачем.
 */
footer p {
    margin: 0 0 var(--step);
}

/*
 * Служебные ссылки в строку, с равными просветами между ними. На узком
 * экране переносятся: строка из пяти ссылок в телефон не помещается, а
 * ужимать их незачем — подвал не главное на странице.
 */
footer menu {
    display: flex;
    flex-wrap: wrap;
    margin: 0;
    padding: 0;
    gap: 4px var(--icon-space);
    list-style: none;
}

/*
 * Ссылки подвала приглушены, а не крашены акцентом: это служебные
 * переходы, и подсвечивать их наравне со ссылками в тексте значит
 * тянуть внимание в конец страницы.
 */
footer a {
    color: inherit;
    text-decoration: none;
}

footer a:hover {
    color: var(--color-title);
    text-decoration: none;
}