/* === Переменные для цветов (легко настроить!) === */
:root {
    --bg-color-body: #f8f8f8; /* Цвет фона всей страницы */
    --bg-color-header: #edf3f5; /* Цвет фона шапки */
    --bg-color-footer: #edf3f5; /* Цвет фона подвала */
    --bg-color-sidebar: #edf3f5; /* Цвет фона бокового меню */
    --bg-color-page-content: #ffffff; /* Цвет фона основного контента */

    --text-color-default: #333; /* Основной цвет текста */
    --text-color-header: #000000; /* Цвет текста в шапке */
    --text-color-footer: #000000; /* Цвет текста в подвале */
    --text-color-sidebar: #000000; /* Цвет текста в боковом меню */
    --text-color-page-content: #333; /* Цвет текста в основном контенте */

    --link-color: #69a62d; /* Цвет ссылок */
    --link-hover-color: #000000; /* Цвет ссылок при наведении */
}

/* === Общие стили === */
body {
    margin: 0;
    font-family: 'Arial', sans-serif; /* Выберите шрифт, который вам нравится */background-color: var(--bg-color-body);
    color: var(--text-color-default);
    line-height: 1.6;
}

.site-header,
.site-footer,
.sidebar-menu,
.page-content {
    width: 80%; /* Ширина 80% от родительского элемента */
    margin: 0 auto; /* Центрирование элементов */
    box-sizing: border-box; /* Чтобы padding и border учитывались в общей ширине */
}

/* === Шапка сайта === */
.site-header {
    background-color: var(--bg-color-header);
    padding: 10px 0; /* Вертикальный отступ, горизонтальный 0, так как ширина 80% уже задана */
    border-bottom: 2px solid #ddd; /* Легкая граница снизу */
    height: 70px; /* Фиксированная высота шапки */
    display: flex; /* Используем Flexbox для выравнивания элементов */
    align-items: center; /* Вертикальное выравнивание по центру */
    justify-content: center; /* Горизонтальное центрирование контента шапки */
    max-width: 1500px;
    border-radius: 10px; /* Легкое скругление углов */
}

.header-content {
    width: 95%; /* Контент внутри шапки занимает всю ее ширину */
    display: flex;
    align-items: center;
    justify-content: space-between; /* Размещаем элементы слева и справа */
    max-width: 1200px; /* Ограничение максимальной ширины контента в шапке, чтобы не растягивалось слишком сильно */
}

.logo-socials {
    display: flex;
    align-items: center;
}

.site-logo {
    height: 60px; /* Логотип будет меньше высоты шапки, чтобы он хорошо смотрелся */
    margin-right: 15px; /* Отступ справа от логотипа */
}

.social-links {
    display: flex;
    align-items: center;
}

.social-icon {
    height: 33px; /* Высота иконки соцсети */
    margin-right: 7px; /* Отступ между иконками */
    opacity: 0.7; /* Небольшая прозрачность */
    transition: opacity 0.3s ease; /* Плавный переход при наведении */
}

.social-icon:hover {
    opacity: 1; /* Полная непрозрачность при наведении */
}

.php-output {
    color: var(--text-color-header);
    font-size: 0.9em;
    text-align: right; /* Выравнивание текста справа */
}

.php-output p {
    margin: 0 0 5px 0; /* Отступы для строк текста */
}
.php-output p:last-child {
    margin-bottom: 0;
}

/* === Основная область страницы === */
.main-area {
    display: flex; /* Используем Flexbox для расположения меню и контента */
    width: 80%;
    margin: 20px auto; /* Отступ сверху/снизу, auto для центрирования */
    max-width: 1500px; /* Ограничиваем максимальную ширину */
}

.sidebar-menu {
    flex: 0 0 170px; /* Задаем фиксированную ширину для меню, не растягивается, не сжимается */
    background-color: var(--bg-color-sidebar);
    padding: 15px;
    margin-right: 15px; /* Отступ справа от меню */
    border-radius: 10px; /* Легкое скругление углов */
    
    
     /* --- Добавляем эти свойства для ограничения высоты --- */
    max-height: 250px; /* Максимальная высота равна высоте видимой области */
    overflow-y: auto;  /* Позволяет прокручивать вертикально, если контент превышает max-height */
    /* --------------------------------------------------- */
}

.sidebar-menu h2 {
    margin-top: 0;
    color: var(--text-color-sidebar);
}

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

.sidebar-menu li {
    margin-bottom: 8px;
    font-size: 0.9em;
}

.sidebar-menu a {
    text-decoration: none;
    color: var(--link-color);
    font-weight: bold;
    transition: color 0.3s ease;
    display: block;
}

.sidebar-menu a:hover {
    color: var(--link-hover-color);
    text-decoration: underline;
}

.page-content {
    flex: 1; /* Занимает оставшееся пространство */
    background-color: var(--bg-color-page-content);
    padding: 10px;
    border-radius: 10px; /* Легкое скругление углов */
}

.page-content h1 {
    margin-top: 0;
    color: var(--text-color-page-content);
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.page-content p {
    margin-bottom: 15px;
}

/* === Подвал страницы === */
.site-footer {
    background-color: var(--bg-color-footer);
    color: var(--text-color-footer);
    padding: 10px 0; /* Вертикальный отступ */
    text-align: center; /* Центрирование текста */
    height: 30px; /* Фиксированная высота подвала */
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 1500px;
}

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


 h2, h3 {
            text-align: center;
            color: #000; /* Замените на цвет заголовков вашего сайта */
        }

        .social-section {
            max-width: 960px; /* Или ширина вашего контента */
            margin: 40px auto;
            padding: 20px;
            background-color: #fff; /* Фон секции, может быть другим */
            border-radius: 8px;
            box-shadow: 0 2px 10px rgba(0,0,0,0.1); /* Пример тени */
        }

        .social-section h2 {
            margin-bottom: 30px;
            font-size: 2em;
        }

        .social-blocks-container {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); /* Адаптивное расположение блоков */
            gap: 20px; /* Расстояние между блоками */
            justify-content: center;
        }

        .social-block {
            border: 1px solid #eee; /* Граница блока */
            border-radius: 8px;
            padding: 20px;
            text-align: center;
            background-color: #f9f9f9; /* Фон блока */
            display: flex;
            flex-direction: column;
            justify-content: space-between; /* Растягивает контент, чтобы последний элемент был внизу */
            transition: transform 0.3s ease, box-shadow 0.3s ease; /* Плавные эффекты */
        }

        .social-block:hover {
            transform: translateY(-5px); /* Легкий подъем при наведении */
            box-shadow: 0 5px 15px rgba(0,0,0,0.15); /* Усиление тени */
        }

        .social-block h3 {
            font-size: 1.6em;
            margin-bottom: 15px;
            color: #000; /* Цвет заголовка соцсети */
        }

        .social-content {
            display: flex;
            align-items: center;
            justify-content: center;
            margin-bottom: 15px;
            gap: 10px; /* Расстояние между иконкой и текстом */
        }

        .social-content img {
            width: 50px; /* Размер иконки */
            height: 50px;
            object-fit: contain; /* Масштабирование иконки */
        }

        .social-content a {
            text-decoration: none;
            color: var(--link-color); /* Цвет ссылки, можно изменить */
            font-weight: bold;
            font-size: 1.2em;
            transition:color 0.3s ease;
        }

        .social-content a:hover {
            color: #0056b3; /* Цвет ссылки при наведении */
            text-decoration: underline;
        }

        .social-description {
            font-size: 0.95em;
            color: #555; /* Цвет текста описания */
            text-align: left; /* Описание лучше выравнивать по левому краю */
            flex-grow: 1; /* Чтобы описание заняло все доступное место */
        }


/* === Адаптивность (опционально, но рекомендуется) === */
@media (max-width: 768px) {
    .main-area {flex-direction: column; /* Элементы располагаются друг под другом на маленьких экранах */
    }

    .sidebar-menu {
        flex: none; /* Сбрасываем фиксированную ширину */
        width: 100%; /* Занимает всю ширину */
        margin-right: 0;
        margin-bottom: 20px; /* Отступ снизу */
    }

    .site-header .header-content,
    .main-area {
        width: 95%; /* Немного расширяем на мобильных */
    }

    .site-header {
        height: auto; /* Высота шапки может меняться */
        padding: 15px 0;
    }

    .header-content {
        flex-direction: column; /* Элементы в шапке тоже друг под другом */
        text-align: center;
    }

    .logo-socials {
        margin-bottom: 15px;
        flex-direction: column; /* Лого и соцсети друг под другом */
    }

    .site-logo {
        margin-right: 0;
        margin-bottom: 10px;
    }

    .php-output {
        text-align: center; /* Центрируем вывод PHP */
    }
}