:root { /* Объявляет общие переменные оформления сайта. */
    --site-primary: #2563eb; /* Задаёт основной синий цвет кнопок и акцентов. */
    --site-primary-dark: #1d4ed8; /* Задаёт более тёмный цвет для наведения на кнопки. */
    --site-heading: #172033; /* Задаёт цвет крупных заголовков. */
    --site-text: #344054; /* Задаёт основной цвет обычного текста. */
    --site-muted: #667085; /* Задаёт приглушённый цвет пояснений. */
    --site-background: #f5f7fb; /* Задаёт светлый фон страниц. */
    --site-surface: #ffffff; /* Задаёт белый фон карточек и отдельных блоков. */
    --site-border: #e4e7ec; /* Задаёт цвет тонких границ. */
    --site-navbar: #172033; /* Задаёт тёмный цвет верхней навигации. */
    --site-shadow: 0 12px 30px rgba(16, 24, 40, 0.08); /* Задаёт мягкую тень карточек. */
} /* Завершает список переменных. */

body { /* Настраивает общий вид всех страниц. */
    min-width: 320px; /* Не позволяет странице сжиматься уже небольшого смартфона. */
    color: var(--site-text); /* Использует основной цвет текста. */
    background-color: var(--site-background); /* Использует единый фон сайта. */
    font-family: Arial, Helvetica, sans-serif; /* Задаёт хорошо читаемые системные шрифты. */
} /* Завершает правила страницы. */

h1, h2, h3, h4, h5, h6 { /* Выбирает все уровни заголовков. */
    color: var(--site-heading); /* Использует более контрастный цвет заголовков. */
} /* Завершает оформление заголовков. */

.navbar { /* Настраивает верхнюю навигационную панель. */
    background-color: var(--site-navbar) !important; /* Заменяет стандартный фон Bootstrap фирменным цветом. */
    box-shadow: 0 1px 0 rgba(255, 255, 255, 0.08); /* Добавляет тонкую границу под навигацией. */
} /* Завершает оформление навигации. */

.navbar-brand { /* Настраивает название сайта в навигации. */
    font-weight: 700; /* Делает название заметным. */
    letter-spacing: 0.03em; /* Немного увеличивает расстояние между буквами. */
} /* Завершает оформление названия сайта. */

.nav-link { /* Настраивает ссылки верхнего меню. */
    font-weight: 500; /* Делает текст ссылок немного выразительнее. */
} /* Завершает оформление ссылок меню. */

.card { /* Настраивает карточки сайта. */
    border-radius: 1rem; /* Закругляет углы карточек. */
    background-color: var(--site-surface); /* Задаёт карточкам белый фон. */
    box-shadow: var(--site-shadow); /* Добавляет единую мягкую тень. */
} /* Завершает оформление карточек. */

.btn { /* Настраивает все кнопки сайта. */
    border-radius: 0.75rem; /* Закругляет углы кнопок. */
    font-weight: 600; /* Делает текст кнопок выразительнее. */
    transition: background-color 0.2s ease, border-color 0.2s ease, transform 0.2s ease;
} /* Завершает общие правила кнопок. */

.btn-primary { /* Настраивает основные синие кнопки. */
    background-color: var(--site-primary); /* Устанавливает основной цвет кнопки. */
    border-color: var(--site-primary); /* Делает границу одного цвета с кнопкой. */
} /* Завершает обычное состояние основной кнопки. */

.btn-primary:hover { /* Настраивает кнопку при наведении указателя. */
    background-color: var(--site-primary-dark); /* Затемняет кнопку при наведении. */
    border-color: var(--site-primary-dark); /* Затемняет границу вместе с кнопкой. */
} /* Завершает состояние наведения. */

.text-secondary { /* Уточняет цвет второстепенного текста Bootstrap. */
    color: var(--site-muted) !important; /* Использует единый приглушённый цвет сайта. */
} /* Завершает оформление второстепенного текста. */

.display-5 { /* Настраивает главный заголовок домашней страницы. */
    line-height: 1.15; /* Делает многострочный заголовок компактным и читаемым. */
} /* Завершает оформление главного заголовка. */

.btn:focus-visible {
    outline:3px solid rgba(37, 99, 235, 0.35);
    outline-offset: 3px;
}

.nav-link:focus-visible {
    outline: 2px solid rgba(255, 255, 255, 0.75);
    outline-offset: 3px;
    border-radius: 0.35rem;
}

@media (prefers-reduced-motion: reduce) {
    .btn {transition: none;
    }
}

.video-cover { /* Выбирает изображения обложек в карточках видеоматериалов. */
    width: 100%; /* Растягивает обложку на всю ширину карточки. */
    aspect-ratio: 16 / 9; /* Задаёт единый формат обложки: 16 к 9. */
    object-fit: cover; /* Обрезает края изображения при необходимости, не искажая его. */
} /* Завершает правила для обложки. */

.site-alert { /* Выбирает все уведомления сайта. */
    border: 0; /* Убирает стандартную резкую рамку Bootstrap. */
    border-radius: 0.75rem; /* Делает углы уведомления такими же мягкими, как у кнопок. */
    box-shadow: var(--site-shadow); /* Добавляет лёгкую единую тень. */
} /* Завершает оформление уведомлений. */