/**
 * content.css — БЕЗОПАСНАЯ версия
 * Улучшение читаемости ТОЛЬКО внутри основного контента
 * Без глобальных сбросов, без влияния на остальной сайт
 */

/* ============================================
   Селекторы — только внутри контента!
   Замените .page-content на реальный класс/селектор вашего контейнера
   ============================================ */

/* Примеры возможных селекторов — раскомментируйте нужный: */
/* .page-content, */
/* .main-content, */
/* article, */
/* #content, */
/* div[class*="content"] { */

/* Универсальный безопасный вариант: применяем стили только к прямым потомкам контентной области */
.page-content p,
.page-content h1,
.page-content h2,
.page-content h3,
.page-content h4,
.page-content ul,
.page-content ol,
.page-content li,
.page-content a,
.page-content strong,
.page-content em,
.page-content blockquote {
	/* Наследуем базовые настройки сайта, меняем только читаемость */
}

/* ============================================
   1. МИНИМАЛЬНЫЕ улучшения типографики
   ============================================ */

.page-content p {
	margin: 0.5em 0;
	padding: 0.5em 0;
	line-height: 1.55; /* Чуть больше воздуха — без изменения размера шрифта */
}

.page-content h1,
.page-content h2,
.page-content h3 {
	margin: 1.2em 0 0.6em;
	line-height: 1.3;
}

.page-content h2 {
	margin-top: 1.5em;
	padding-bottom: 0.3em;
	border-bottom: 1px solid rgba(0, 0, 0, 0.08); /* Лёгкий разделитель, не ломает дизайн */
}

/* ============================================
   2. Списки — только если они внутри контента
   ============================================ */

.page-content ul,
.page-content ol {
	margin: 0.5em 0;
	padding-left: 1.4em;
}

.page-content li {
	margin: 0.25em 0;
	padding-left: 0.2em;
}

/* ============================================
   3. Ссылки — НЕ меняем цвет, только поведение
   ============================================ */

.page-content a {
	/* Не трогаем color, чтобы не сломать дизайн-систему */
	text-decoration: none;
	border-bottom: 1px dashed currentColor; /* Подчёркивание, но незаметное */
	transition: border-bottom-style 0.15s ease;
}

.page-content a:hover {
	border-bottom-style: solid; /* Лёгкая обратная связь при наведении */
	color: blue;
	cursor:pointer;
	
}

/* ============================================
   4. Важные блоки — только если есть классы
   ============================================ */

/* Если на странице есть блоки с классами типа .note, .warning — стилизуем их */
.page-content .note,
.page-content .notice,
.page-content .tip {
	background: #f8fafc;
	border-left: 3px solid #94a3b8;
	padding: 0.75em 1em;
	margin: 0.75em 0;
	font-size: 0.95em;
	border-radius: 0 2px 2px 0;
}

.page-content .warning,
.page-content .caution,
.page-content .important {
	background: #fffbeb;
	border-left: 3px solid #f59e0b;
	padding: 0.75em 1em;
	margin: 0.75em 0;
	font-size: 0.95em;
}

/* ============================================
   5. Адаптивность — только внутри контента
   ============================================ */

@media (max-width: 768px) {
	.page-content p {
		text-align: left; /* Убираем justify на мобильных для лучшей читаемости [[3]] */
		text-justify: auto;
	}

	.page-content h1 {
		font-size: 1.4em;
	}
	.page-content h2 {
		font-size: 1.2em;
	}
}

/* ============================================
   6. Доступность — минимальные правки
   ============================================ */

.page-content a:focus {
	outline: 2px solid #4a90e2;
	outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce) {
	.page-content * {
		transition: none !important;
		animation: none !important;
	}
}

/* ============================================
   ❗ ИНСТРУКЦИЯ ПО ПОДКЛЮЧЕНИЮ
   ============================================ */

/*
1. ОТКРОЙТЕ страницу в браузере → F12 → Elements
2. НАЙДИТЕ контейнер, в котором лежит основной текст
   (обычно это <article>, <main>, или div с классом типа .content)
3. ЗАМЕНИТЕ ".page-content" в этом файле на реальный селектор
   Пример: если контейнер имеет class="article-body", замените:
     .page-content p  →  .article-body p

4. ПОДКЛЮЧИТЕ файл ПОСЛЕ основного style.css:
   <link rel="stylesheet" href="content.css">

5. Если что-то поехало — добавьте более специфичный селектор
   или временно отключите файл, чтобы найти конфликт.

💡 Совет: Начинайте с одного правила, например:
   .page-content p { line-height: 1.55; }
   Проверяйте → добавляйте следующее.
*/