/* ==================================================== */
/*                     ГЛОБАЛЬНЫЕ НАСТРОЙКИ            */
/* ==================================================== */

@import url('https://fonts.googleapis.com/css2?family=Libre+Baskerville&display=swap');

/* Основной фон */
body {
    background-image: url('/static/images/gears.jpg'); /* ✅ Фоновое изображение */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    background-attachment: fixed;
    height: 200vh;
}

body {
    font-family: 'Libre Baskerville', serif;
}

/* Фиксация главной страницы */
body.home-page {
    overflow: hidden;
    height: 100vh; /* ✅ Фиксируем высоту */
    margin-top: 0px;
}

/* Обычная прокрутка для остальных страниц */
body:not(.home-page) {
    overflow: auto;
    margin-top: 5px;
}

/* ==================================================== */
/*                     ЗАГОЛОВКИ                        */
/* ==================================================== */

h1 {
    font-family: 'Dancing Script', cursive; /* ✅ Рукописный стиль */
    font-weight: normal;
    font-size: 20px;
    line-height: 0.9;
    padding-bottom: 15px;
}

h2 {
    font-family: 'Merriweather', serif; /* ✅ Классический стиль */
    font-weight: normal;
    font-size: 16px;
    font-weight: bold;
    line-height: 0.9;
    margin: 8px 0 0;
}

/* Заголовок списка */
.list-title {
    font-family: 'Merriweather', serif;
    font-size: 30px;
    text-align: center;
    background-color: #001F3F;
    color: #FFFF00;
    padding: 15px;
    border-radius: 5px;
    font-weight: normal;
}

/* Заголовки детального просмотра */
.detail-title, .normal-title {
    font-family: 'Merriweather', serif;
    font-size: 25px;
    text-align: center;
    background-color: #001F3F;
    color: #FFFF00;
    padding: 10px;
    border-radius: 5px;
    font-weight: normal;
}

/* ==================================================== */
/*                    СТИЛИ ССЫЛОК                      */
/* ==================================================== */

a {
    color: #0395abff; /* ✅ Оригинальный салатовый цвет ссылок */
    text-decoration: none; /* ✅ Без подчеркивания */
}

a:hover {
    text-decoration: underline; /* ✅ Подчеркивание при наведении */
}

/* ==================================================== */
/*                    ОФОРМЛЕНИЕ ДАТЫ                   */
/* ==================================================== */

p.date {
    color: #A0A0A0; /* ✅ Пепельный стиль */
    font-family: Georgia, sans-serif; /* ✅ Красивый модный шрифт */
    font-size: 13px;
    font-style: italic;
}

/* ==================================================== */
/*                    ОСНОВНОЙ КОНТЕНТ                 */
/* ==================================================== */

#content {
    flex: 1;
    padding: 0px;
    width: 100%;
    max-width: 900px;
    margin: 0 auto;
}

/* Полупрозрачный контейнер */
#content {
    background-color: rgba(255, 255, 255, 0.9);
    padding: 10px;
    border-radius: 10px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.2);
}

/* ==================================================== */
/*                    БОКОВАЯ ПАНЕЛЬ                    */
/* ==================================================== */

#sidebar {
    position: fixed;
    right: -300px;
    top: 0px;
    width: 300px;
    height: 100%;
    background-color: #f8f9fa;
    padding: 10px;
    box-shadow: -3px 0px 10px rgba(0, 0, 0, 0.1);
    opacity: 0;
    visibility: hidden;
    transition: right 0.3s ease-in-out, visibility 0.3s ease-in-out;
}

#sidebar.active {
    right: 0 !important;
    opacity: 1;
    visibility: visible;
}

#sidebar a {
    font-size: 18px; /* ✅ Увеличиваем размер шрифта */
    font-weight: bold; /* ✅ Делаем текст жирным */
    color: #0395abff;
    text-decoration: none;
}

#sidebar a:hover {
    text-decoration: underline;
}

/* ==================================================== */
/*                  АДАПТИВНОСТЬ (МОБИЛЬНАЯ ВЕРСИЯ)     */
/* ==================================================== */

@media (max-width: 768px) {
    /* ✅ Главная страница — кнопка справа от заголовка */
    body.home-page h1 {
        position: relative;
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding-right: 60px;
        font-size: 20px;
    }

    body.home-page h2 {
        position: relative;
        display: flex;
        justify-content: space-between;
        padding-right: 20px;
        font-size: 18px;
        font-weight: bold;
    }

    body.home-page #sidebarToggle {
        position: absolute;
        top: 8.7%;
        right: -12px;
        transform: translateY(-50%);
        width: auto;
        padding: 9px 12px;
        background-color: #6c757d;
        color: white;
        font-size: 12px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        z-index: 9999;
        border-radius: 5px;
    }

    /* ✅ Остальные страницы — кнопка под заголовком справа */
    body:not(.home-page) h1 {
        position: relative;
        text-align: center;
        padding-bottom: 12px; /* ✅ Оставляем место для кнопки */
    }

    body:not(.home-page) #sidebarToggle {
        position: absolute;
        top: 6.5%;
        right: -15px;
        transform: translateY(20px); /* ✅ Смещаем кнопку вниз */
        width: auto;
        padding: 7px 10px;
        background-color: #6c757d;
        color: white;
        font-size: 16px;
        font-weight: bold;
        border: none;
        cursor: pointer;
        z-index: 9999;
        border-radius: 5px;
    }

    body:not(.home-page) #content {
        font-size: 16px;
    }

    #sidebar.active + #sidebarToggle {
        right: 250px; /* ✅ Смещаем кнопку влево при открытой панели */
    }

    /* ✅ Главная страница — всё остаётся как есть */
    body.home-page {
        overflow-y: auto !important;
        height: 100vh;
        position: relative;
        width: 95%;
        left: -35px;
        margin-top: -10px;
    }

    /* ✅ Остальные страницы — убираем горизонтальный скролл */
    body:not(.home-page) {
       overflow-y: auto !important;
        height: 100vh;
        position: relative;
        width: 95%;
        left: -35px;
        margin-top: -10px;
    }

    #content {
        width: 100% !important; /* ✅ Увеличиваем ширину блока */
        max-width: 100vw !important; /* ✅ Гарантируем адаптацию к экрану */
        margin: 0 auto !important; /* ✅ Центрируем контент */
        padding: 15px !important; /* ✅ Добавляем отступы для удобства */
    }

    /* ✅ Адаптивные изображения */
    .post-image img {
        width: 100% ! important;
        max-width: 100% !important;
        height: auto !important;
        object-fit: cover !important;
        display: block !important;
        margin: auto !important;
    }


    .post-image picture img {
        width: 100%;
        height: auto;
    }
    img {
        width: 100%;
        height: auto;
    }

}

/* ==================================================== */
/*                  КНОПКА ОТКРЫТИЯ ПАНЕЛИ             */
/* ==================================================== */

@media (min-width: 769px) {
    #sidebarToggle {
        position: fixed;
        top: 10px;
        right: 10px;
        background-color: #6c757d;
        color: white;
        padding: 15px 25px;
        font-size: 16px
        border: none;
        cursor: pointer;
        z-index: 1000;
        transition: right 0.3s ease-in-out;
        border-radius: 5px;
    }

    #sidebarToggle:hover {
        background-color: #5a6268;
    }
}
/* ==================================================== */
/*                 ФИНАЛЬНЫЕ НАСТРОЙКИ                  */
/* ==================================================== */

.list-title {
    position: relative;
}

@media only screen and (max-width: 768px) {
    body {
        padding-left: 20px;
    }

    h1, h2, .list-title, .detail-title, .normal-title {
        margin-left: 0px;
        font-size: 16px;
    }
}

/* ==================================================== */
/*                  СТИЛИ ФОРМ И ВВОДА                 */
/* ==================================================== */

input, textarea {
    font-family: Georgia, sans-serif;
    background: #ededed;
    border: 0;
    padding: 10px 20px;
    font-size: 18px;
}

input[type=submit] {
    font-weight: bold;
    background: #00abff;
    color: #fff;
    padding: 15px 20px;
    font-size: 14px;
    text-transform: uppercase;
    border: none;
    cursor: pointer;
}

/* ==================================================== */
/*                   КОММЕНТАРИИ                       */
/* ==================================================== */

.comment {
    padding: 10px;
}

.comment:nth-child(even) {
    background: #efefef;
}

/* ==================================================== */
/*                   Настройка пагинации                */
/* ==================================================== */

/* Пагинация */
.pagination {
    margin: 40px 0; /* Отступы для пагинации */
    font-weight: bold; /* Жирный текст */
}

.post-divider {
    border: none;
    height: 2px; /* ✅ Устанавливаем тонкую линию */
    background-color: #ccc; /* ✅ Серый цвет для разделителя */
    margin: 0px 10; /* ✅ Отступ сверху и снизу */
}