/* Модуль ставится на разные сайты: переменные дизайн-системы берутся, если они есть, иначе — запасные значения */
:root {
    --am-sitemap-fallback-primary: #d90d2c;
    --am-sitemap-fallback-secondary: #2c2e38;
    --am-sitemap-fallback-on-surface-main: #2c2e38;
    --am-sitemap-fallback-on-surface-variant: #87808b;
    --am-sitemap-fallback-outline-lowest: #e3e3e1;
    --am-sitemap-fallback-space-2xl: 54px;
    --am-sitemap-fallback-space-xl: 44px;
    --am-sitemap-fallback-space-l: 28px;
    --am-sitemap-fallback-space-m: 16px;
    --am-sitemap-fallback-space-s: 12px;
    --am-sitemap-fallback-space-xs: 8px;
    --am-sitemap-fallback-typography-paragraph-p1: 16px;
    --am-sitemap-fallback-typography-paragraph-p2: 14px;
    --am-sitemap-fallback-typography-caption-1: 12px;
}

/* Группы — колонки: сколько поместится по ширине, не уже 220px */
.am-sitemap {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr));
    gap: var(--space-2xl, var(--am-sitemap-fallback-space-2xl)) var(--space-xl, var(--am-sitemap-fallback-space-xl));
    align-items: start;
}

/* Групп нет — одна безымянная: разделы сами текут колонками */
.am-sitemap_flow {
    display: block;
}

.am-sitemap_flow .am-sitemap-group__sections {
    display: block;
    columns: 220px auto;
    column-gap: var(--space-m, var(--am-sitemap-fallback-space-m));
}

.am-sitemap_flow .am-sitemap-group__section {
    break-inside: avoid;
    margin-bottom: var(--space-m, var(--am-sitemap-fallback-space-m));
}

/*
 * Базовый размер карты. Дальше всё считается от него в em: у сайта может не быть переменной p1
 * (у estima.ru только p2 = 14…18px), и тогда разделы оставались на запасных 16px, а вложенные
 * пункты брали 18px сайта — были крупнее своего раздела.
 */
.am-sitemap-group {
    font-size: var(--typography-paragraph-p1, var(--typography-paragraph-p2, var(--am-sitemap-fallback-typography-paragraph-p1)));
}

/* Размер задаётся классом, а не тегом h2: у сайта свои размеры заголовков по тегам */
.am-sitemap-group__title {
    margin: 0 0 var(--space-m, var(--am-sitemap-fallback-space-m));
    padding-bottom: var(--space-xs, var(--am-sitemap-fallback-space-xs));

    border-bottom: 1px solid var(--color-outline-lowest, var(--am-sitemap-fallback-outline-lowest));

    font-size: 0.875em;
    font-weight: 500;
    line-height: 1.3;
    color: var(--color-on-surface-variant, var(--am-sitemap-fallback-on-surface-variant));
}

.am-sitemap-group__sections {
    display: flex;
    flex-direction: column;
    gap: var(--space-m, var(--am-sitemap-fallback-space-m));

    list-style: none;
    margin: 0;
    padding: 0;
}

/* Раздел с вложенными страницами отделён от соседей сильнее — видно, где кончается его список */
.am-sitemap-group__section_parent:not(:first-child),
.am-sitemap-group__section_parent + .am-sitemap-group__section {
    margin-top: var(--space-l, var(--am-sitemap-fallback-space-l));
}

.am-sitemap-group__link {
    font-size: 1em;
    font-weight: 600;
    line-height: 1.3;
    color: var(--color-on-surface-main, var(--am-sitemap-fallback-on-surface-main));
    text-decoration: none;

    transition: color 0.2s;
}

a.am-sitemap-group__link:hover {
    color: var(--color-primary, var(--am-sitemap-fallback-primary));
}

.am-sitemap-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs, var(--am-sitemap-fallback-space-xs));

    list-style: none;
    margin: var(--space-xs, var(--am-sitemap-fallback-space-xs)) 0 0;
    padding: 0;
}

.am-sitemap-list .am-sitemap-list {
    padding-left: var(--space-s, var(--am-sitemap-fallback-space-s));
}

.am-sitemap-list__item {
    position: relative;

    padding-left: var(--space-s, var(--am-sitemap-fallback-space-s));

    font-size: 0.875em;
    /* Вес задаётся явно: у сайта базовый вес текста может быть 500, и пункты смотрелись тяжелее заголовков */
    font-weight: 400;
    line-height: 1.4;
    color: var(--color-on-surface-variant, var(--am-sitemap-fallback-on-surface-variant));
}

/* Со второго уровня вложенности размер уже не уменьшается — иначе страницы становятся нечитаемыми */
.am-sitemap-list .am-sitemap-list > .am-sitemap-list__item {
    font-size: 1em;
}

.am-sitemap-list__item::before {
    content: '';
    position: absolute;
    top: 0.6em;
    left: 0;

    width: 4px;
    height: 4px;

    background-color: var(--color-primary, var(--am-sitemap-fallback-primary));
}

.am-sitemap-list__link {
    color: inherit;
    text-decoration: none;

    transition: color 0.2s;
}

a.am-sitemap-list__link:hover {
    color: var(--color-primary, var(--am-sitemap-fallback-primary));
}

.am-sitemap__metas {
    display: inline-flex;
    gap: var(--space-xs, var(--am-sitemap-fallback-space-xs));
    margin-left: var(--space-xs, var(--am-sitemap-fallback-space-xs));

    font-size: var(--typography-caption-1, var(--am-sitemap-fallback-typography-caption-1));
    color: var(--color-on-surface-variant, var(--am-sitemap-fallback-on-surface-variant));
}

.am-sitemap__meta_changefreq {
    color: var(--color-primary, var(--am-sitemap-fallback-primary));
}

.am-sitemap__meta_priority {
    color: var(--color-secondary, var(--am-sitemap-fallback-secondary));
}