/* Базовые стили */
* {
    margin: 0;
    padding: 0;
    box-sizing: border-box;
}
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    line-height: 1.6;
    background-color: #f9f9f9;
    color: #333;
}

/* Шапка и футер */
.site-header {
    text-align: left;
    padding: 0px;
    background-color: #fff;
    box-shadow: 2px 2px 5px rgba(0,0,0,0.1);
    position: fixed; /* Фиксируем шапку */
    top: 0;
    left: 0;
    right: 0;
    z-index: 1000;
display: flex; /* Делаем контейнер гибким контейнером */
  align-items: center; /* Вертикальное выравнивание (по центру) */
  padding: 10px 20px; /* Отступы вокруг содержимого */
  background-color: #f8f9fa; /* Цвет фона */
}
.site-header h1 { color: #0056b3;
 }
.logo {
  margin-right: 20px; /* Отступ справа для разделения от текста */
}
.logo_1 {
  align: center; /* Центрирует внутри блока */
  text-align: center; /* Центрирует содержимое блока */
}

/* Главный контейнер - обновленные стили */
.container {
    display: flex;
    justify-content: space-between;
    gap: 20px;
    max-width: 1200px;
    margin: 20px auto;
    padding: 60px 15px 15px; /* Добавлен отступ сверху (40px) */
}

/* Общие стили для колонок */
.column {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.05);
}

/* Ширина колонок на больших экранах */
.left-column   { flex-basis: 25%; } /* ~33% минус отступы */
.center-column { flex-basis: 50%; } /* ~66% минус отступы */
.right-sidebar { flex-basis: 20%; }

/* Стилизация новостей */
.news-item img, .featured-news img {
    width: 100%;
    height: auto;
    border-radius: 4px;
    margin-bottom: 15px;
}
.news-item h2 {
    margin-top: 10px;
    color: #0056b3;
    font-size: 1.2em;
}
.featured-news h2 {
    font-size: 1.5em;
    margin-bottom: 10px;
}

.widget h3 {
    margin-bottom: 10px;
    color: #0056b3;
    font-size: 1.1em;
}
.widget ul li a {
    color: #007bff;
    text-decoration: none;
}
.widget ul li a:hover {
    text-decoration: underline;
}

/* Адаптивность */
@media screen and (max-width: 1024px) {
    .left-column, .center-column, .right-sidebar {
        flex-basis: calc((100% - 40px) / 3); /* Три равные колонки */
    }
}

@media screen and (max-width: 768px) {
    .container {
        flex-direction: column;
    }
    .center-column {
        order: 1; /* Сначала идет главная новость */
    }
        flex-basis: 100%;
        order: 2; /* Затем левая колонка */
    }
 
    }
    .right-sidebar {
        order: 3; /* Последним сайдбар */
    }
}

/* Футер */

.footer-content {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
  background-color: red;
}

.footer-content h2 {
  font-size: 24px;
  margin-bottom: 10px;
  text-align: center; /* Центрирует текст внутри блока */
}

.footer-content p {
  margin-bottom: 10px;
  text-align: center; /* Центрирует текст внутри блока */
}

.footer-content ul {
  list-style: none;
  padding: 0;
  text-align: center; /* Центрирует текст внутри блока */
}

.footer-content li {
  display: inline-block;
  margin-right: 20px;
  text-align: center; /* Центрирует текст внутри блока */
}

.copyright {
  text-align: center;
  color: black;
}

/* Стили для кнопки "Наверх" */
#back-to-top {
    display: none; /* По умолчанию кнопка скрыта */
    position: fixed; /* Фиксированное позиционирование */
    bottom: 20px; /* Отступ от нижнего края окна */
    right: 30px; /* Отступ от правого края окна */
    width: 50px; /* Ширина кнопки */
    height: 50px; /* Высота кнопки */
    font-size: 24px; /* Размер стрелки */
    color: #fff; /* Цвет текста (белый) */
    background-color: #0056b3; /* Синий фон, как в шапке */
    border: none; /* Убираем стандартную рамку */
    border-radius: 50%; /* Делаем кнопку круглой */
    box-shadow: 0 2px 5px rgba(0,0,0,0.2); /* Небольшая тень */
    cursor: pointer; /* Курсор при наведении */
    z-index: 1050; /* Кнопка должна быть над всем контентом */
    transition: background-color 0.3s ease; /* Плавный переход для фона */
}

#back-to-top:hover {
    background-color: #004085; /* Меняем цвет при наведении */
}