/* ==========================================================================
   LEGAL.CSS — Стили для юридических страниц (Политика, Соглашение и т.д.)
   --------------------------------------------------------------------------
   Все цвета — через var(--c-*) из sys/color-theme.css.
   Основная задача: обеспечить комфортное чтение длинных текстов.
   ========================================================================== */


/* ==========================================================================
   1. ОБЩАЯ ОБВЯЗКА (Ограничение ширины)
   ========================================================================== */
/* Узкая колонка для читаемости длинного текста */
.wrap-narrow {
    max-width: 820px;                        /* Ограничиваем ширину, чтобы строки не растягивались на весь экран */
    margin: 0 auto;                          /* Центрируем колонку */
}


/* ==========================================================================
   2. ШАПКА СТРАНИЦЫ (Заголовок и дата)
   ========================================================================== */
.legal-header {
    text-align: center;                      /* Выравниваем по центру */
    margin-bottom: 40px;                     /* Отступ до оглавления */
}

.legal-title {
    font-size: 38px;                         /* Крупный заголовок страницы */
    font-weight: 700;                        /* Жирный */
    color: var(--c-heading);                 /* Тёмно-изумрудный из темы */
    margin: 0 0 12px;                        /* Отступ только снизу */
    line-height: 1.25;                       /* Плотный интерлиньяж для крупного текста */
}

.legal-meta {
    font-size: 14px;                         /* Мелкий шрифт для даты обновления */
    color: var(--c-text-muted);              /* Приглушённый серый */
    margin: 0;
}


/* ==========================================================================
   3. ОГЛАВЛЕНИЕ (Содержание)
   ========================================================================== */
.legal-toc {
    background: var(--c-bg-soft);            /* Светло-изумрудный фон (выделяет блок) */
    border: 1px solid var(--c-border);       /* Мягкая рамка */
    padding: 20px 24px;                      /* Внутренние отступы */
    margin-bottom: 40px;                     /* Отступ до основного текста */
}

.legal-toc__title {
    font-size: 16px;
    font-weight: 700;
    color: var(--c-heading);                 /* Тёмно-изумрудный */
    margin: 0 0 12px;
    text-transform: uppercase;               /* КАПС для заголовка оглавления */
    letter-spacing: 0.5px;                   /* Легкая разрядка */
}

.legal-toc ol {
    margin: 0;
    padding-left: 22px;                      /* Отступ для нумерации списка */
    font-size: 14px;
    line-height: 1.9;                        /* Большой интерлиньяж — список "дышит" */
}

.legal-toc a {
    color: var(--c-price);                   /* Изумрудный цвет ссылок */
    text-decoration: none;                   /* Без подчеркивания */
    border-bottom: 1px solid transparent;    /* Прозрачная граница (резерв под hover) */
    transition: border-color 0.2s ease, color 0.2s ease;
}

/* Hover-эффект только для устройств с курсором */
@media (hover: hover) {
    .legal-toc a:hover {
        color: var(--c-heading);             /* Темнеет текст */
        border-bottom-color: var(--c-accent);/* Появляется изумрудное подчеркивание */
    }
}


/* ==========================================================================
   4. ОСНОВНОЙ ТЕКСТ (Контент)
   ========================================================================== */
.legal-content {
    font-size: 15px;                         /* Базовый размер для чтения */
    line-height: 1.7;                        /* Комфортный интерлиньяж для длинных абзацев */
    color: var(--c-text-strong);             /* Тёмно-серый текст */
}

.legal-content section {
    margin-bottom: 36px;                     /* Большой отступ между смысловыми разделами */
    scroll-margin-top: 100px;                /* ВАЖНО: отступ при скролле к якорю, чтобы заголовок не прятался под sticky-хедер */
}

.legal-content h2 {
    font-size: 22px;
    font-weight: 700;
    color: var(--c-heading);                 /* Тёмно-изумрудный */
    margin: 0 0 14px;
    line-height: 1.3;
}

.legal-content p {
    margin: 0 0 12px;                        /* Отступ между абзацами */
}

.legal-content ul {
    margin: 0 0 14px;
    padding-left: 22px;                      /* Отступ для маркеров списка */
}

.legal-content li {
    margin-bottom: 6px;                      /* Расстояние между пунктами */
}

/* Ссылки в тексте */
.legal-content a {
    color: var(--c-price);                   /* Изумрудный */
    text-decoration: none;                   /* Без стандартного подчеркивания */
    border-bottom: 1px solid var(--c-border-strong); /* Тонкое изумрудное подчеркивание */
    transition: border-color 0.2s ease;
}

@media (hover: hover) {
    .legal-content a:hover {
        border-bottom-color: var(--c-accent);/* Подчеркивание становится ярче при наведении */
    }
}

.legal-content strong {
    color: var(--c-heading);                 /* Акцент на важных словах */
    font-weight: 600;                        /* Полужирный */
}

.legal-content em {
    color: var(--c-text-muted);              /* Курсив делаем приглушенным */
    font-style: italic;
}


/* ==========================================================================
   5. СПИСОК РЕКВИЗИТОВ (Определения)
   ========================================================================== */
.legal-dl {
    display: grid;                           /* Сетка для выравнивания терминов и значений */
    grid-template-columns: minmax(180px, max-content) 1fr; /* Первая колонка по контенту (но не уже 180px), вторая — остаток */
    gap: 10px 24px;                          /* Отступы: 10px между строками, 24px между колонками */
    margin: 0;
    font-size: 15px;
}

.legal-dl dt {
    color: var(--c-text-muted);              /* Термин — серый */
    font-weight: 500;
}

.legal-dl dd {
    margin: 0;
    color: var(--c-heading);                 /* Значение — темно-зеленый (важное) */
    font-weight: 600;
}


/* ==========================================================================
   6. ПОДВАЛ СТРАНИЦЫ
   ========================================================================== */
.legal-footer {
    margin-top: 48px;                        /* Отступ от контента */
    padding-top: 24px;                       /* Внутренний отступ сверху */
    border-top: 1px solid var(--c-border);   /* Разделитель */
    font-size: 14px;
    color: var(--c-text-muted);              /* Серый текст */
    text-align: center;
}

.legal-footer a {
    color: var(--c-price);
    text-decoration: none;
    border-bottom: 1px solid var(--c-border-strong);
}


/* ==========================================================================
   7. МОБИЛЬНАЯ АДАПТАЦИЯ (≤768px)
   ========================================================================== */
@media (max-width: 768px) {
    .legal-title { 
        font-size: 26px;                     /* Заголовок меньше на телефоне */
    }
    
    .legal-content { 
        font-size: 14.5px;                   /* Чуть меньше базовый текст */
    }
    
    .legal-content h2 { 
        font-size: 19px;                     /* Подзаголовки компактнее */
    }

    .legal-dl {
        grid-template-columns: 1fr;          /* Сетка реквизитов в одну колонку */
        gap: 4px 0;                          /* Минимальный отступ между строками */
    }
    
    .legal-dl dt { 
        margin-top: 10px;                    /* Отступ сверху для термина, чтобы пары не слипались */
    }

    .legal-toc { 
        padding: 16px 18px;                  /* Меньше отступы в оглавлении */
    }
}