/* Общие стили */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Более современный шрифт */
    margin: 0;
    padding: 0;
    line-height: 1.6;
    color: #333;
    background-color: #f8f9fa; /* Чуть светлее фон */
}

.container {
    max-width: 1200px;
    margin: 0 auto;
    padding: 0 15px; /* Уменьшим padding по бокам */
}

h1, h2, h3, h4 {
	color: #0056b3;
    margin-bottom: 1.4em;
}

a {
    color: #007bff;
    text-decoration: none;
    transition: color 0.2s ease-in-out;
}

a:hover {
    color: #0056b3;
    text-decoration: underline;
}

/* Хедер */
.site-header {
    background-color: #007bff;
    color: white;
    padding: 10px 0; /* Уменьшим padding сверху/снизу */
    position: sticky;
    top: 0;
    z-index: 1000;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1); /* Более мягкая тень */
}

.site-header .container {
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap; /* Важно для адаптивности хедера */
}

.logo {
    font-size: 1.4rem; /* Чуть меньше лого */
    font-weight: bold;
    margin-right: 15px; /* Отступ справа */
}

.main-nav {
    flex-grow: 1; /* Позволяем навигации занимать доступное место */
    text-align: right; /* Выравниваем навигацию по правой стороне */
}

.main-nav ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    justify-content: flex-end; /* Выравниваем пункты меню по правой стороне */
}

.main-nav li {
    margin-left: 25px; /* Увеличим отступ между пунктами */
}

.main-nav a {
    color: white;
    font-weight: 500; /* Средняя жирность */
    transition: color 0.3s ease;
    padding: 5px 0; /* Небольшой padding для кликабельной области */
    display: inline-block; /* Чтобы padding работал */
}

.main-nav a:hover {
    color: #cce5ff;
    text-decoration: none;
}

.menu-toggle {
    display: none; /* Скрываем на больших экранах */
    background: none;
    border: none;
    color: white;
    font-size: 1.8rem;
    cursor: pointer;
    padding: 5px 10px;
    margin-left: auto; /* Прижимаем к правому краю */
}

/* Основной контент и сайдбар */
.main-content {
    display: flex;
    flex-wrap: wrap; /* Разрешаем перенос элементов */
    padding-top: 25px; /* Отступ сверху */
    padding-bottom: 25px; /* Отступ снизу */
    gap: 20px; /* Расстояние между main и aside */
}

.content-area {
    flex: 3; /* Занимает 3 части */
    min-width: 280px; /* Минимальная ширина */
    background-color: white;
    padding: 25px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08); /* Мягче тень */
}

.content-area section {
    margin-bottom: 30px; /* Уменьшим отступ между секциями */
}
.content-area section:last-child {
    margin-bottom: 0; /* У последнего элемента отступ не нужен */
}

.content-area h1 {
    margin-top: 0;
    font-size: 2.0rem;
}

.content-area h2 {
    margin-top: 0;
    font-size: 1.8rem;
}

.content-area h3 {
    margin-top: 0;
    font-size: 1.5rem;
}

.content-area h4, h5, h6 {
    margin-top: 0;
    font-size: 1.2rem;
}

.sidebar {
    flex: 1; /* Занимает 1 часть */
    min-width: 240px; /* Минимальная ширина */
    background-color: #ffffff; /* Сделаем сайдбар тоже белым, но с тенью */
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 3px 10px rgba(0,0,0,0.08);
    height: fit-content;
}

.sidebar h3 {
    margin-top: 0;
    font-size: 1.0rem;
}

.sidebar ul {
    list-style: none;
    padding: 0;
}

.sidebar li {
margin-bottom: 10px;
}

.sidebar a {
    color: #007bff;
}

.sidebar .additional-info {
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee; /* Светлее граница */
}
.sidebar .additional-info h4 {
    margin-top: 0;
    font-size: 0.8rem;
    color: #333;
}

/* Футер */
.site-footer {
    background-color: #343a40;
    color: white;
    text-align: center;
    padding: 1.2rem 0;
    margin-top: 20px;
}

.site-footer p {
    margin: 0;
    font-size: 0.9rem;
}

/* --- Адаптивность --- */

/* Общие правила для мобильных */
@media (max-width: 991px) { /* tablet */
    .site-header .container {
        flex-wrap: wrap;
    }
    .logo {
        margin-bottom: 10px;
    }
    .main-nav {
        width: 100%;
        text-align: center;
        order: 2; /* Ставим ниже лого */
        margin-top: 10px;
    }
    .main-nav ul {
        justify-content: center; /* Центрируем пункты меню */
        flex-direction: column; /* Вертикальное расположение */
    }
    .main-nav li {
        margin: 5px 0; /* Уменьшаем отступы между пунктами */
    }
    .menu-toggle {
        display: block; /* Показываем кнопку меню */
        order: 1; /* Ставим выше меню */
    }
    .main-nav.active {
        display: block; /* Показываем меню, когда есть класс active */
    }
    .main-nav:not(.active) {
        display: none; /* Скрываем, если нет класса active */
    }

    .main-content {
        flex-direction: column; /* Основной контент и сайдбар друг под другом */
    }
    .content-area {
        margin-right: 0;
        margin-bottom: 20px; /* Отступ снизу */
        width: 100%;
        box-sizing: border-box;
    }
    .sidebar {
        width: 100%;
        box-sizing: border-box;
    }
}

/* Улучшенная адаптивность для очень маленьких экранов (до 480px) */
@media (max-width: 480px) {
    .container {
        padding: 0 10px; /* Уменьшаем padding */
    }
    .site-header {
        padding: 8px 0;
    }
    .logo {
        font-size: 1.2rem;
        margin-right: 10px;
    }
    .menu-toggle {
        font-size: 1.6rem;
        padding: 3px 8px;
    }
    .main-nav ul {
        padding-top: 10px; /* Небольшой отступ сверху для меню */
    }
    .content-area, .sidebar {
        padding: 15px; /* Уменьшаем padding внутри контента */
        min-width: 100%; /* Занимают всю доступную ширину */
        box-sizing: border-box;
    }
    .content-area h2 {
        font-size: 1.2rem;
    }
    .sidebar h3 {
        font-size: 1.0rem;
    }
    .site-footer {
        padding: 10px 0;
        font-size: 0.8rem;
    }
}

/* Специально для экранов до 250px */
@media (max-width: 250px) {
    .logo {
        font-size: 1rem; /* Еще меньше лого */
    }
    .menu-toggle {
        font-size: 1.4rem; /* Еще меньше кнопка */
    }
    .main-nav a {
        font-size: 0.9rem; /* Уменьшаем шрифт меню */
    }
    .content-area, .sidebar {
        padding: 10px; /* Минимальный padding */
    }
    .content-area h2 {
        font-size: 1.2rem;
    }
    .sidebar h3 {
        font-size: 1.0rem;
    }
    .site-footer p {
        font-size: 0.7rem; /* Минимальный шрифт в футере */
    }
}

















/* --- Переключатель языка --- */
.language-switcher {
    display: flex;
    align-items: center;
    margin-left: 30px; /* Отступ слева от меню */
}

.lang-btn {
    background: none;
    border: none;
    color: white;
    cursor: pointer;
    font-size: 0.9rem;
    padding: 5px 8px;
    margin: 0 8px;
    opacity: 0.7; /* Полупрозрачный по умолчанию */
    transition: opacity 0.3s ease;
}

.lang-btn:hover {
    opacity: 1;
}

.lang-btn.active {
    opacity: 1;
    font-weight: bold;
    border-bottom: 1px solid white; /* Подчеркивание активного языка */
}

.language-switcher span {
    color: white;
    opacity: 0.7;
    margin: 0 2px;
}



/* --- Адаптивность для Header --- */
@media (max-width: 768px) {
    .header-left {
        flex-grow: 1; /* Навигация займет доступное место */
        margin-right: 20px; /* Небольшой отступ */
    }

    .main-nav ul {
        display: none; /* Скрываем навигацию на мобильных */
    }

    .menu-toggle {
        display: block; /* Показываем кнопку меню */
    }

    .language-switcher {
        margin-left: 10px; /* Уменьшим отступ */
        order: 2; /* Перемещаем переключатель языка в конец блока header-left */
    }

    /* Если вам нужно, чтобы переключатель языка был виден ТОЛЬКО на мобильных,
       можно его скрыть здесь и показать только при открытии меню.
       Но сейчас он будет всегда виден справа от логотипа. */
}

@media (max-width: 480px) {
    .logo {
        font-size: 1.3rem;
        margin-right: 15px;
    }
    .language-switcher {
        margin-left: 5px;
    }
    .lang-btn {
        font-size: 0.8rem;
        padding: 3px 6px;
    }
}











:root{
  /* Заголовки — rem (при root = 16px) */
  --fs-h1: 2.25rem;   /* ~36px (clamped) */
  --fs-h2: 1.75rem;   /* 28px */
  --fs-h3: 1.375rem;  /* 22px */
  --fs-h4: 1.125rem;  /* 18px */
  --fs-h5: 1rem;      /* 16px */
  --fs-h6: 0.9rem;    /* 14.4px */

  --heading-color: #0056b3;
}

/* Основные правила для заголовков */
h1, h2, h3, h4, h5, h6 {
  color: var(--heading-color);
  margin-top: 0;
  margin-bottom: 0.6em;
  font-weight: 600;
  line-height: 1.15;
}

/* Плавающий/адаптивный h1 + fallback */
h1 {
  font-size: clamp(1.75rem, 1.4rem + 4vw, 2.5rem); /* масштабируется между ~28px и 40px */
  line-height: 1.08;
  font-weight: 700;
}

/* Остальные уровни */
h2 { font-size: var(--fs-h2); line-height: 1.12; font-weight: 700; }
h3 { font-size: var(--fs-h3); line-height: 1.18; }
h4 { font-size: var(--fs-h4); line-height: 1.25; }
h5 { font-size: var(--fs-h5); line-height: 1.3; }
h6 { font-size: var(--fs-h6); line-height: 1.35; color: #333; font-weight: 600; }

/* Привязка локальных селекторов к переменным (удаляет несогласованность) */
.content-area h2 { font-size: var(--fs-h2); margin-top: 0; }
.sidebar h3 { font-size: var(--fs-h3); margin-top: 0; }
.sidebar .additional-info h4 { font-size: var(--fs-h4); }