/*
 * Кирпич · хлебные крошки.
 *
 * Путь до текущей страницы, строкой над заголовком. На сайте учреждения
 * обязательны на всех страницах глубже первого уровня.
 *
 *     nav.crumbs
 *         a Главная
 *         a Бесплатная помощь
 *
 * Тег nav, а не p: это навигация, и с экрана она читается как перечень
 * переходов, а не как предложение. Внутри голые ссылки, разделители
 * рисуются стилями и в разметку не пишутся.
 *
 * Последняя ссылка ведёт на текущую страницу и остаётся ссылкой: так
 * путь целиком кликабелен, и перезагрузка страницы никому не мешает.
 * Помечать её классом не нужно, вид у неё тот же.
 */
.crumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    /*
     * Просвет между крошками держит разделитель, который рисуется на
     * псевдоэлементе. Свой gap здесь только вертикальный, на случай
     * переноса на вторую строку.
     */
    gap: 2px 0;
    margin-bottom: var(--step);
    color: var(--color-muted);
    font-size: var(--text-small);
    line-height: var(--line-small);
}

.crumbs a {
    color: inherit;
    text-decoration: none;
}

/* Наведение помечено цветом: линия под крошкой спорила бы с разделителями. */
.crumbs a:hover {
    color: var(--color-title);
    text-decoration: none;
}

/*
 * Разделитель между крошками. Рисуется псевдоэлементом, а не пишется в
 * разметку: он служебный, содержанием пути не является и в текст при
 * копировании попадать не должен.
 *
 * Стоит перед ссылкой, кроме первой, поэтому у конца пути разделителя
 * нет и строка не обрывается висящим значком.
 */
.crumbs a + a::before {
    content: '›';
    padding: 0 6px;
    color: var(--color-muted);
}