/* privacy-styles.css */

/* Плавная прокрутка для всей страницы */
html {
    scroll-behavior: smooth;                                                                                                        /* Включает плавную прокрутку при клике по якорным ссылкам */
}

/* Общие стили для тела документа */
body {
    font-family: Arial, sans-serif;                                                                                                 /* Основной шрифт страницы */
    font-size: 16px;                                                                                                                /* Базовый размер шрифта */
    line-height: 1.6;                                                                                                               /* Межстрочный интервал для лучшей читаемости */
    color: #333;                                                                                                                    /* Основной цвет текста */
    margin: 0;                                                                                                                      /* Убираем внешние отступы */
    padding: 20px;                                                                                                                  /* Внутренние отступы вокруг контента */
    background-color: #f9f9f9;                                                                                                      /* Светлый фон страницы */
}

/* Основной контейнер для контента политики */
.policy-container {
    background-color: #fff;                                                                                                         /* Белый фон контейнера */
    border: 1px solid #ddd;                                                                                                         /* Серая рамка */
    border-radius: 8px;                                                                                                             /* Закругленные углы */
    padding: 30px;                                                                                                                  /* Внутренние отступы */
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);                                                                                     /* Тень для глубины */
    max-width: 900px;                                                                                                               /* Максимальная ширина контейнера */
    margin: 20px auto;                                                                                                              /* Центрирование контейнера */
}

/* Стили для главного заголовка h1 - красно-черный стиль */
h1 {
    color: #d32f2f;                                                                                                                 /* Красный цвет заголовка Serpmonn */
    font-size: 28px;                                                                                                                /* Размер шрифта */
    text-align: center;                                                                                                             /* Выравнивание по центру */
    margin-bottom: 30px;                                                                                                            /* Отступ снизу */
    border-bottom: 3px solid #d32f2f;                                                                                               /* Красная линия под заголовком */
    padding-bottom: 15px;                                                                                                           /* Отступ между текстом и линией */
}

/* Стили для заголовков разделов h2 - красно-черный стиль */
h2 {
    color: #d32f2f;                                                                                                                 /* Красный цвет заголовка Serpmonn */
    font-size: 22px;                                                                                                                /* Размер шрифта */
    margin-top: 40px;                                                                                                               /* Отступ сверху между разделами */
    margin-bottom: 15px;                                                                                                            /* Отступ снизу перед текстом */
    padding-bottom: 8px;                                                                                                            /* Отступ для линии */
    border-bottom: 1px solid #eee;                                                                                                  /* Светлая разделительная линия */
}

/* Стили для навигационного меню - красно-черный стиль */
.policy-nav {
    background: #f8f9fa;                                                                                                            /* Светло-серый фон */
    border-radius: 6px;                                                                                                             /* Закругленные углы */
    padding: 20px;                                                                                                                  /* Внутренние отступы */
    margin-bottom: 30px;                                                                                                            /* Отступ снизу */
    border-left: 4px solid #d32f2f;                                                                                                 /* Красная акцентная линия слева */
}

/* Стили для списка в навигации */
.policy-nav ul {
    list-style: none;                                                                                                               /* Убираем стандартные маркеры */
    padding: 0;                                                                                                                     /* Убираем внутренние отступы */
    margin: 0;                                                                                                                      /* Убираем внешние отступы */
    display: grid;                                                                                                                  /* Используем CSS Grid для layout */
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));                                                                    /* Адаптивные колонки */
    gap: 10px;                                                                                                                      /* Расстояние между элементами */
}

/* Стили для элементов списка навигации */
.policy-nav li {
    margin-bottom: 8px;                                                                                                             /* Отступ между пунктами меню */
}

/* Стили для ссылок в навигации - красно-черный стиль */
.policy-nav a {
    color: #d32f2f;                                                                                                                 /* Красный цвет ссылок Serpmonn */
    text-decoration: none;                                                                                                          /* Убираем подчеркивание */
    padding: 8px 12px;                                                                                                              /* Внутренние отступы для кликабельной области */
    border-radius: 4px;                                                                                                             /* Закругленные углы */
    transition: background-color 0.3s ease;                                                                                         /* Плавный переход фона */
    display: block;                                                                                                                 /* Блочное отображение для всей области */
}

/* Стили для ссылок при наведении - красно-черный стиль */
.policy-nav a:hover {
    background-color: #d32f2f;                                                                                                      /* Красный фон при наведении */
    color: white;                                                                                                                   /* Белый текст при наведении */
    text-decoration: none;                                                                                                          /* Сохраняем отсутствие подчеркивания */
}

/* Стили для обычных параграфов */
p {
    margin: 15px 0;                                                                                                                 /* Вертикальные отступы между параграфами */
    text-align: justify;                                                                                                            /* Выравнивание по ширине */
}

/* Стили для ненумерованных списков */
ul {
    margin: 15px 0;                                                                                                                 /* Вертикальные отступы вокруг списка */
    padding-left: 25px;                                                                                                             /* Отступ для вложенности */
}

/* Стили для элементов списка */
ul li {
    margin-bottom: 10px;                                                                                                            /* Отступ между элементами списка */
    line-height: 1.5;                                                                                                               /* Межстрочный интервал */
}

/* Общие стили для ссылок - красно-черный стиль */
a {
    color: #d32f2f;                                                                                                                 /* Красный цвет ссылок Serpmonn */
    text-decoration: none;                                                                                                          /* Убираем стандартное подчеркивание */
    transition: color 0.3s ease;                                                                                                    /* Плавное изменение цвета */
}

/* Стили для ссылок при наведении - красно-черный стиль */
a:hover {
    color: #b71c1c;                                                                                                                 /* Темно-красный цвет при наведении */
    text-decoration: underline;                                                                                                     /* Подчеркивание при наведении */
}

/* Стили для блока с датой обновления */
.date-updated {
    font-size: 14px;                                                                                                                /* Уменьшенный размер шрифта */
    color: #666;                                                                                                                    /* Серый цвет текста */
    margin-top: 25px;                                                                                                               /* Отступ сверху */
    text-align: right;                                                                                                              /* Выравнивание по правому краю */
    font-style: italic;                                                                                                             /* Курсивное начертание */
    padding-top: 15px;                                                                                                              /* Отступ сверху */
    border-top: 1px solid #eee;                                                                                                     /* Разделительная линия сверху */
}

/* Контейнер для кнопки принятия политики */
.accept-container {
    text-align: center;                                                                                                             /* Выравнивание содержимого по центру */
    margin-top: 40px;                                                                                                               /* Отступ сверху от предыдущего контента */
    padding-top: 20px;                                                                                                              /* Внутренний отступ сверху */
    border-top: 2px solid #eee;                                                                                                     /* Разделительная линия */
}

/* Стили для кнопки принятия политики - красно-черный стиль */
.accept-button {
    display: inline-block;                                                                                                          /* Блочно-строчное отображение */
    padding: 12px 30px;                                                                                                             /* Внутренние отступы */
    font-size: 16px;                                                                                                                /* Размер шрифта */
    font-weight: bold;                                                                                                              /* Жирное начертание */
    color: #fff;                                                                                                                    /* Белый цвет текста */
    background-color: #d32f2f;                                                                                                      /* Красный фон кнопки Serpmonn */
    border: none;                                                                                                                   /* Убираем стандартную рамку */
    border-radius: 6px;                                                                                                             /* Закругленные углы */
    cursor: pointer;                                                                                                                /* Указатель при наведении */
    transition: background-color 0.3s ease, transform 0.2s ease;                                                                    /* Плавные переходы */
}

/* Стили для кнопки при наведении - красно-черный стиль */
.accept-button:hover {
    background-color: #b71c1c;                                                                                                      /* Темно-красный фон при наведении */
    transform: translateY(-2px);                                                                                                    /* Легкое поднятие кнопки */
}

/* Стили для кнопки при нажатии */
.accept-button:active {
    transform: translateY(0);                                                                                                       /* Возврат в исходное положение */
}

/* Стили для секций контента */
section {
    margin-bottom: 40px;                                                                                                            /* Отступ между секциями */
    padding-bottom: 20px;                                                                                                           /* Внутренний отступ снизу */
    border-bottom: 1px solid #f0f0f0;                                                                                               /* Разделительная линия между секциями */
}

/* Убираем разделительную линию у последней секции */
section:last-of-type {
    border-bottom: none;                                                                                                            /* Убираем границу у последнего элемента */
}

/* Стили для выделения сильных элементов - красно-черный стиль */
strong {
    color: #d32f2f;                                                                                                                 /* Красный цвет для выделенного текста Serpmonn */
    font-weight: 600;                                                                                                               /* Полужирное начертание */
}

/* Медиа-запрос для планшетов и маленьких ноутбуков */
@media (max-width: 768px) {
    body {
        padding: 10px;                                                                                                              /* Уменьшаем отступы на мобильных */
        font-size: 14px;                                                                                                            /* Уменьшаем размер шрифта */
    }
    
    .policy-container {
        margin: 10px;                                                                                                               /* Уменьшаем внешние отступы */
        padding: 20px;                                                                                                              /* Уменьшаем внутренние отступы */
    }
    
    h1 {
        font-size: 24px;                                                                                                            /* Уменьшаем размер главного заголовка */
        margin-bottom: 20px;                                                                                                        /* Уменьшаем отступ снизу */
    }
    
    h2 {
        font-size: 20px;                                                                                                            /* Уменьшаем размер заголовков разделов */
        margin-top: 30px;                                                                                                           /* Уменьшаем отступ сверху */
    }
    
    .policy-nav ul {
        grid-template-columns: 1fr;                                                                                                 /* Одна колонка на мобильных */
    }
    
    .policy-nav {
        padding: 15px;                                                                                                              /* Уменьшаем отступы в навигации */
    }
    
    .accept-button {
        width: 100%;                                                                                                                /* Полная ширина кнопки на мобильных */
        padding: 15px;                                                                                                              /* Увеличиваем отступы для удобства касания */
    }
}

/* Медиа-запрос для мобильных телефонов */
@media (max-width: 480px) {
    body {
        padding: 5px;                                                                                                               /* Минимальные отступы на маленьких экранах */
    }
    
    .policy-container {
        padding: 15px;                                                                                                              /* Уменьшаем внутренние отступы */
        margin: 5px;                                                                                                                /* Уменьшаем внешние отступы */
    }
    
    h1 {
        font-size: 22px;                                                                                                            /* Дальнейшее уменьшение заголовка */
    }
    
    h2 {
        font-size: 18px;                                                                                                            /* Дальнейшее уменьшение подзаголовков */
    }
    
    ul {
        padding-left: 20px;                                                                                                         /* Уменьшаем отступ списка */
    }
}

/* Улучшения для пользователей с reduced-motion preference */
@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;                                                                                                      /* Отключаем плавную прокрутку */
    }
    
    .accept-button {
        transition: none;                                                                                                           /* Отключаем анимации кнопки */
    }
}

/* Стили для состояния фокуса (доступность) - красно-черный стиль */
a:focus,
button:focus {
    outline: 2px solid #d32f2f;                                                                                                     /* Красная рамка при фокусе Serpmonn */
    outline-offset: 2px;                                                                                                            /* Отступ рамки от элемента */
}