/*
Theme Name: CityNews 3 Дочерняя тема
Theme URI: https://goodwinpress.ru/wp-tema-citynews-3
Author: Алексей Goodwin
Author URI: https://goodwinpress.ru/
Description: Используем дочернюю тему лишь в тех случаях, когда собрались менять разметку или функции темы.
Text Domain: citynews-3
Domain Path: /languages
Template: citynews-3
*/

/* ======================================================
   1. ПЕРЕМЕННЫЕ И ЦВЕТА (Обновлено: Облегченная палитра)
   ====================================================== */
:root {
    /* Очень светлый серый, почти белый, но с "каменным" оттенком */
    --mc-body-bg: #F2F2F2; 
    
    /* GUI Элементы */
    --mc-gui-bg: #bdbdbd;
    --mc-gui-light: #eeeeee;
    --mc-gui-shadow: #585858;
    
    /* Контентные карточки (теперь они будут выделяться белым на светло-сером) */
    --mc-card-bg: #ffffff;
    --mc-card-shadow: rgba(0, 0, 0, 0.15);
    
    --mc-border-hard: #000000;

    --mc-stone-bg: #8b8b8b; 
    --mc-stone-light: #bdbdbd;
    --mc-stone-dark: #484848;
}

html[data-theme="dark"] {
    /* Темный, но не "черная дыра" */
    --mc-body-bg: #1A1A1A; 
    
    --mc-gui-bg: #373737;
    --mc-gui-light: #5d5d5d;
    --mc-gui-shadow: #000000;
    
    --mc-card-bg: #242424; 
    --mc-card-shadow: rgba(0, 0, 0, 0.5);

    --mc-stone-bg: #373737; 
    --mc-stone-light: #5d5d5d;
    --mc-stone-dark: #1a1a1a;
}

/* Применяем фон */
body, 
.site-wrapper, 
.main {
    background-color: var(--mc-body-bg) !important;
}

/* Возвращаем карточкам белый цвет, чтобы они "светились" на сером фоне */
.home-category-item, 
.top-block__last-news,
.popular-item,
.related-posts-list__item,
.single-post__excerpt,
.comment {
    background-color: var(--mc-card-bg) !important;
    /* Уменьшим тень, раз фон стал светлее */
    box-shadow: 4px 4px 0px var(--mc-card-shadow) !important;
}

/* ======================================================
   2. ГЕОМЕТРИЯ И БАЗА
   ====================================================== */

/* Полный отказ от скруглений */
*, *::before, *::after {
    border-radius: 0 !important;
}

/* Массивные заголовки */
h1, h2, h3, h4, h5, h6, .container__title, .cat-header__title {
    font-weight: 800 !important;
    letter-spacing: -0.5px;
    line-height: 1.1;
}

/* Стилизация изображений */
img {
    image-rendering: pixelated; /* Если картинки маленькие, будет эффект пиксель-арта */
}

/* ======================================================
   3. КАРТОЧКИ ПУБЛИКАЦИЙ (Промежуточный стиль)
   ====================================================== */

.home-category-item, 
.top-block__last-news,
.popular-item,
.related-posts-list__item,
.single-post__excerpt,
.comment {
    background-color: var(--mc-card-bg) !important;
    border: 2px solid var(--mc-border-hard) !important;
    /* Жесткая внешняя тень без размытия */
    box-shadow: 6px 6px 0px var(--mc-card-shadow) !important;
    padding: 0 !important; 
    overflow: hidden;
    transition: transform 0.1s ease;
}

/* Внутренние отступы для текстовых областей */
.home-category-item__content, 
.last-news__item,
.popular-item__content,
.comment__wrapper {
    padding: 15px !important;
}

/* Эффект наведения на карточку: "нажатие" */
.home-category-item:hover, .popular-item:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px var(--mc-card-shadow) !important;
}

/* ======================================================
   4. ЗАГОЛОВКИ РАЗДЕЛОВ (Popular & Categories — Унификация)
   ====================================================== */

.cat-header {
    background-color: transparent !important; /* Убираем фон кнопки */
    border: none !important;
    box-shadow: none !important;
    /* Жирная пиксельная черта во всю ширину */
    border-bottom: 4px solid #000 !important; 
    padding: 0 0 10px 0 !important;
    margin-bottom: 30px !important;
    display: flex !important;
    align-items: flex-end;
    justify-content: space-between;
}

.cat-header__title {
    margin: 0 !important;
}

.cat-header__title a, 
.cat-header__title {
    color: var(--mc-border-hard) !important;
    font-size: 1.4rem !important;
    font-weight: 800 !important;
    text-transform: none !important; /* Как ты и просил — не капсом */
    text-decoration: none !important;
    text-shadow: none !important;
    display: flex;
    align-items: center;
}

/* Добавляем декоративный квадрат перед заголовком (как в сайдбаре) */
.cat-header__title::before {
    content: "";
    display: inline-block;
    width: 14px;
    height: 14px;
    background-color: var(--mc-stone-bg); /* Цвет камня */
    border: 2px solid #000;
    margin-right: 12px;
    flex-shrink: 0;
}

/* Кнопка "Стрелочка" (если она есть в углу раздела) */
.cat-header__more {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    width: 32px !important;
    height: 32px !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    margin-bottom: -4px; /* Слегка заходит на черную линию */
}

/* ТЕМНАЯ ТЕМА для заголовков */
html[data-theme="dark"] .cat-header {
    border-bottom-color: var(--mc-gui-shadow) !important;
}

html[data-theme="dark"] .cat-header__title,
html[data-theme="dark"] .cat-header__title a {
    color: #ffffff !important;
}

html[data-theme="dark"] .cat-header__title::before {
    background-color: #5d5d5d;
}
/* ======================================================
   5. КНОПКИ (Minecraft Button Style)
   ====================================================== */

.load-more-posts, 
.comment-form .submit, 
.error404-btn,
.toggle-comments,
.back-to-top {
    background-color: #7d7d7d !important;
    border: 2px solid var(--mc-border-hard) !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #3f3f3f;
    /* Классическая рамка кнопки */
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    transition: none !important;
    text-transform: none;
}

.load-more-posts:hover, 
.comment-form .submit:hover, 
.toggle-comments:hover,
.back-to-top:hover {
    background-color: #7d7d7d !important;
    /* Белая подсветка при наведении */
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #3f3f3f !important;
    color: var(--mc-hover-text) !important;
}

.load-more-posts:active, 
.comment-form .submit:active {
    /* Инверсия теней при клике (вдавливание) */
    box-shadow: inset -2px -2px 0px #ffffff, 
                inset 2px 2px 0px #3f3f3f !important;
    transform: translateY(1px);
}

/* ======================================================
   6. ПОЛЯ ВВОДА (Recessed GUI Style — "Вдавленный")
   ====================================================== */

input[type='text'], 
input[type='email'], 
input[type='url'], 
input[type='search'], 
textarea {
    background-color: #ffffff !important; /* Светлый фон для удобства чтения */
    color: #000000 !important;
    border: 2px solid #585858 !important; /* Средне-серый контур */
    padding: 10px 12px !important;
    
    /* Эффект "вдавленности" за счет внутренних теней */
    box-shadow: inset 3px 3px 0px #000000, 
                inset -2px -2px 0px #c6c6c6 !important;
    transition: border-color 0.1s ease;
}

/* Фокус: рамка становится белой/светлой, как в игре при выборе поля */
input:focus, textarea:focus {
    border-color: #000000 !important;
    outline: 2px solid #ffffff !important; /* Белая обводка поверх черной */
}

/* Темная тема для полей ввода */
html[data-theme="dark"] input[type='text'], 
html[data-theme="dark"] input[type='email'], 
html[data-theme="dark"] input[type='url'], 
html[data-theme="dark"] input[type='search'], 
html[data-theme="dark"] textarea {
    background-color: #1e1e1e !important; /* Темный, но не черный */
    color: #ffffff !important;
    border-color: #000000 !important;
    box-shadow: inset 3px 3px 0px #101010, 
                inset -2px -2px 0px #373737 !important;
}

/* Фикс для чекбокса согласия (если он есть) */
.form-checkbox__text::before {
    border-radius: 0 !important;
    border: 2px solid #585858 !important;
    background: #fff !important;
}


/* ======================================================
   7. ГЛАВНОЕ МЕНЮ (Монолитная каменная панель)
   ====================================================== */

.site-nav, 
.headhesive {
    background-color: var(--mc-stone-bg) !important;
    border-top: 2px solid #000 !important;
    border-bottom: 2px solid #000 !important;
    padding: 0 !important;
    margin-top: 20px !important;
    /* Теперь тени будут брать цвета из темы автоматически */
    box-shadow: inset 0px 3px 0px var(--mc-stone-light), 
                inset 0px -3px 0px var(--mc-stone-dark) !important;
}

/* Выпадающее меню тоже должно обновиться */
.nav-menu .sub-menu {
    background-color: var(--mc-stone-bg) !important;
    border: 2px solid #000 !important;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3),
                inset 2px 2px 0px var(--mc-stone-light), 
                inset -2px -2px 0px var(--mc-stone-dark) !important;
}

/* Липкое меню: убираем отступ сверху, сохраняя структуру */
.headhesive {
    margin-top: 0 !important;
}

/* Растягиваем список на всю высоту панели */
.nav-menu {
    margin: 0 !important;
    padding: 0 !important;
    display: flex;
    justify-content: center;
}

/* Пункты меню: делаем их высокими и ровными */
.nav-menu .menu-item a {
    display: block; /* Чтобы ссылка занимала всю площадь */
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    text-shadow: none !important;
    /* Увеличиваем высоту панели через вертикальные отступы ссылок */
    padding: 1.2rem 25px !important; 
    transition: none !important;
    line-height: 1;
}

/* Состояние при наведении: закрашиваем всю ячейку без зазоров */
.nav-menu .menu-item a:hover {
    background-color: rgba(0, 0, 0, 0.2) !important;
    /* Легкая внутренняя тень для эффекта "вдавленности" при наведении */
    box-shadow: inset 0px 3px 0px rgba(0,0,0,0.3) !important;
}

/* Активный пункт меню (где мы сейчас находимся) */
.nav-menu .current-menu-item > a {
    background-color: rgba(0, 0, 0, 0.1) !important;
}

/* Выпадающее меню (подменю) */
.nav-menu .sub-menu {
    background-color: var(--mc-stone-bg) !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: 5px 5px 0px rgba(0, 0, 0, 0.3) !important;
    top: 100% !important; /* Прижимаем вплотную к нижней границе */
}

.nav-menu .sub-menu .menu-item a {
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--mc-stone-dark);
}

/* ======================================================
   8. САЙДБАР (Заголовки-метки)
   ====================================================== */

.widget__title, 
.widget_block h2 {
    display: block !important;
    background-color: transparent !important; /* Убираем фон кнопки */
    border: none !important;
    box-shadow: none !important;
    border-bottom: 4px solid #000 !important; /* Жирная пиксельная черта */
    padding: 0 0 8px 0 !important;
    margin-bottom: 20px !important;
    color: var(--mc-border-hard) !important;
    font-size: 1.1rem !important;
    font-weight: 800 !important;
    text-transform: uppercase;
    position: relative;
}

/* Добавляем маленький декоративный квадрат в начале (как иконка блока) */
.widget__title::before, 
.widget_block h2::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    background-color: var(--mc-stone-bg); /* Цвет камня из меню */
    border: 2px solid #000;
    margin-right: 10px;
    vertical-align: baseline;
}

/* В темной теме адаптируем цвета */
html[data-theme="dark"] .widget__title, 
html[data-theme="dark"] .widget_block h2 {
    color: #fff !important;
    border-bottom-color: var(--mc-gui-shadow) !important;
}

html[data-theme="dark"] .widget__title::before, 
html[data-theme="dark"] .widget_block h2::before {
    background-color: #5d5d5d;
    border-color: #000;
}


/* ======================================================
   9. МЕТА-ДАННЫЕ (Автор, дата в постах)
   ====================================================== */

/* Аватар автора в шапке поста и комментариях */
.post-info__img img, 
.comment-author-info img, 
.popular-author__img {
    border-radius: 0 !important; /* Квадратные головы */
    border: 2px solid #000 !important;
    padding: 2px;
    background: #fff;
}

/* Рамка вокруг всей строки инфо в записи (по желанию) */
.post-info {
    padding: 10px 0 !important;
    border-top: 1px solid rgba(0,0,0,0.1);
    border-bottom: 1px solid rgba(0,0,0,0.1);
}

html[data-theme="dark"] .post-info {
    border-color: var(--mc-gui-light);
}


/* ======================================================
   10. ПАГИНАЦИЯ (Кнопки выбора страниц)
   ====================================================== */

/* Контейнер */
.pagination {
    margin-top: 40px !important;
}

/* Общий стиль для всех номеров страниц */
.pagination .nav-links .page-numbers {
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    min-width: 40px;
    height: 40px;
    padding: 0 10px !important;
    margin: 0 5px 5px 0 !important;
    background-color: #7d7d7d !important; /* Серый цвет кнопки */
    border: 2px solid #000 !important;
    color: #ffffff !important;
    font-weight: 700 !important;
    text-decoration: none !important;
    /* Тень как у кнопок */
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    transition: none !important;
}

/* Активная страница (на которой мы сейчас) */
.pagination .nav-links .page-numbers.current {
    background-color: #484848 !important; /* Темно-серый "нажатый" камень */
    color: #ffffff !important; /* Четкий белый текст */
    /* Инвертированная тень для эффекта вдавливания */
    box-shadow: inset 3px 3px 0px #000000, 
                inset -2px -2px 0px #7d7d7d !important;
}

/* Наведение на номера страниц */
.pagination .nav-links a.page-numbers:hover {
    color: #ffffff !important;
    background-color: rgba(255, 255, 255, 0.1); /* Легкий блик */
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #3f3f3f !important;
}

/* Многоточие (разделитель страниц) */
.pagination .nav-links .dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: var(--mc-gui-shadow) !important;
}

/* Кнопки Назад / Вперед (текстовые) */
.pagination .nav-links .prev, 
.pagination .nav-links .next {
    padding: 0 20px !important;
}

/* Адаптация для мобильных (чтобы кнопки не слипались) */
@media (max-width: 600px) {
    .pagination .nav-links {
        display: flex;
        flex-wrap: wrap;
        justify-content: center;
    }
}

.pagination .nav-links .dots,
.pagination .nav-links .page-numbers.dots {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 10px !important;
    min-width: auto !important;
    cursor: default !important;
    color: #585858 !important; /* Спокойный серый цвет */
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
}

/* Отключаем любые эффекты при наведении и нажатии на точки */
.pagination .nav-links .dots:hover,
.pagination .nav-links .dots:active {
    background: transparent !important;
    box-shadow: none !important;
    transform: none !important;
    color: #585858 !important;
}

/* Темная тема для точек */
html[data-theme="dark"] .pagination .nav-links .dots {
    color: #888888 !important;
}


/* ======================================================
   11. ТИПОГРАФИКА (Blocky Text Style — Без капса)
   ====================================================== */

body {
    font-family: "Segoe UI", Tahoma, sans-serif !important;
    -webkit-font-smoothing: none; 
    -moz-osx-font-smoothing: grayscale;
}

/* Заголовки: массивные, но с нормальным регистром */
h1, h2, h3, h4, h5, h6, .container__title, .cat-header__title {
    text-transform: none !important; /* Убираем заглавные */
    letter-spacing: 0px !important;
    font-weight: 800 !important;
}

/* Фикс текста внутри кнопки комментариев */
.toggle-comments p {
    color: #ffffff !important; /* Принудительно белый */
    text-shadow: 2px 2px 0px #3f3f3f !important;
    margin: 0 !important;
    font-weight: 700;
}

/* Убираем иконку-облако, если она мешает (подготовим место под твой пиксель-арт) */
.toggle-comments svg {
    fill: #fff !important;
}


/* ======================================================
   13. ПОДВАЛ (Stone Slab Foundation)
   ====================================================== */

.footer {
    background-color: var(--mc-stone-bg) !important; /* Цвет как у меню */
    border-top: 4px solid #000 !important;
    box-shadow: inset 0px 4px 0px var(--mc-stone-light) !important;
    padding: 40px 0 30px !important;
    color: #ffffff !important;
}

/* Блоки внутри футера (сделаем их "вдавленными") */
.footer-area__content, 
.footer__widget {
    background-color: rgba(0, 0, 0, 0.15) !important; /* Полупрозрачный темный для "глубины" */
    border: 2px solid #000 !important;
    /* Эффект вдавленной ячейки */
    box-shadow: inset 3px 3px 0px rgba(0, 0, 0, 0.3), 
                inset -2px -2px 0px rgba(255, 255, 255, 0.1) !important;
    padding: 20px !important;
    margin-bottom: 20px;
}

/* Текст и ссылки в футере */
.footer-content__text, 
.footer-menu li a, 
.credits__copy,
.footer .widget {
    color: #ffffff !important;
    text-shadow: 2px 2px 0px rgba(0, 0, 0, 0.4);
    font-size: 0.95rem;
}

.footer-site-title, 
.footer .widget__title {
    color: var(--mc-hover-text) !important; /* Золотистый/желтый заголовок для акцента */
    text-shadow: 2px 2px 0px #000 !important;
    border: none !important;
    margin-bottom: 10px !important;
}

/* Фикс для темной темы (делаем футер чуть суровее) */
html[data-theme="dark"] .footer {
    background-color: #484848 !important; /* Темный камень */
    box-shadow: inset 0px 4px 0px #5d5d5d !important;
}


/* ======================================================
   14. ПАНЕЛИ В ФУТЕРЕ (Classic GUI Panels)
   ====================================================== */

.footer-area__content, 
.footer__widget {
    /* Цвет классического светлого интерфейса */
    background-color: #c6c6c6 !important; 
    border: 2px solid #000 !important;
    /* Рельефная рамка: светлая сверху/слева, темная снизу/справа */
    box-shadow: inset 3px 3px 0px #ffffff, 
                inset -3px -3px 0px #585858 !important;
    padding: 25px !important;
    margin-bottom: 20px;
}

/* Текст внутри светлых панелей должен быть темным для читабельности */
.footer-area__content,
.footer-area__content .footer-content__text,
.footer-area__content .footer-menu li a,
.footer-area__content .credits__copy,
.footer__widget,
.footer__widget .widget,
.footer__widget li a {
    color: #3f3f3f !important; /* Темно-серый текст из игры */
    text-shadow: none !important; /* Убираем тени для чистоты текста */
}

/* Заголовки внутри панелей футера */
.footer-site-title, 
.footer .widget__title {
    color: #000000 !important;
/*    background-color: rgba(0, 0, 0, 0.05); */
    border-bottom: 2px solid #585858 !important;
    display: block !important;
    padding-bottom: 5px !important;
    margin-bottom: 15px !important;
    text-shadow: none !important;
}

/* Ховер для ссылок в светлых панелях */
.footer-area__content a:hover, 
.footer__widget a:hover {
    color: #000000 !important;
    text-decoration: underline !important;
}

/* Темная тема: делаем панели футера чуть темнее, но сохраняем структуру */
html[data-theme="dark"] .footer-area__content, 
html[data-theme="dark"] .footer__widget {
    background-color: #373737 !important;
    box-shadow: inset 3px 3px 0px #5d5d5d, 
                inset -3px -3px 0px #000000 !important;
}

html[data-theme="dark"] .footer-area__content .footer-content__text,
html[data-theme="dark"] .footer__widget .widget,
html[data-theme="dark"] .footer-site-title,
html[data-theme="dark"] .footer-menu li a {
    color: #ffffff !important;
}

/* ======================================================
   14. СИНХРОНИЗАЦИЯ ЦВЕТОВ КРЕДИТОВ (Dark Text on Stone)
   ====================================================== */

/* Группируем все элементы низа футера: наш текст, копирайт и описание сайта */
.credits__top-text,
.footer__credits .credits__copy,
.footer__credits .credits__site-descr {
    /* Тот самый цвет, который сейчас у дисклеймера (темно-серый) */
    color: #3f3f3f !important; 
    
    /* Убираем белое "свечение" и ставим легкую светлую тень снизу-справа, 
       чтобы текст казался выбитым на камне */
    text-shadow: 1px 1px 0px rgba(255, 255, 255, 0.3) !important;
    
    font-weight: 700;
    text-decoration: none !important;
}

/* Убираем лишние рамки и тени у ссылок внутри этих блоков, если они есть */
.footer__credits a {
    color: #3f3f3f !important;
    text-decoration: underline !important;
}

/* Фикс для темной темы: там текст должен стать светлым */
html[data-theme="dark"] .credits__top-text,
html[data-theme="dark"] .footer__credits .credits__copy,
html[data-theme="dark"] .footer__credits .credits__site-descr,
html[data-theme="dark"] .footer__credits a {
    color: #bdbdbd !important;
    text-shadow: 1px 1px 0px #000 !important;
}

/* Убеждаемся, что разделительная линия между дисклеймером и названием сайта видна */
.credits__top-text {
    border-bottom: 2px solid rgba(0, 0, 0, 0.1);
    width: 100%;
    display: block;
    margin-bottom: 10px;
    padding-bottom: 10px;
}

/* ======================================================
   15. ОТКЛЮЧЕНИЕ ZOOM-ЭФФЕКТА (Static Images)
   ====================================================== */

/* Блокируем увеличение картинки для всех типов карточек */
.home-category-item:hover .zoom-img img,
.popular-item:hover .zoom-img img,
.recent-artice:hover .zoom-img img,
.featured-artice:hover .zoom-img img {
    transform: none !important; /* Убираем scale(1.15) */
}

/* На всякий случай полностью отключаем анимации для этих контейнеров */
.zoom-img img {
    transform: none !important;
    transition: none !important;
}


/* ======================================================
   17. КНОПКИ В ШАПКЕ (Фикс: белые иконки + работа клика)
   ====================================================== */

.site-search-btn, 
.theme-switch {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-left: 10px !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    cursor: pointer;
    transition: none !important;
    border-radius: 0 !important;
    position: relative;
}

/* Иконка (Солнце/Луна) */
.theme-switch::before {
    content: "";
    position: absolute;
    width: 26px;
    height: 26px;
    background-repeat: no-repeat;
    background-position: center center;
    background-size: contain;
    filter: brightness(0) invert(1) !important; 
    z-index: 1;
    /* КЛЮЧЕВОЙ ФИКС: клики проходят сквозь иконку на label */
    pointer-events: none !important; 
}

/* Пути к иконкам (берем из родительской темы) */
html[data-theme="light"] .theme-switch::before {
    background-image: url("../citynews-3/assets/img/sun.svg") !important;
}

html[data-theme="dark"] .theme-switch::before {
    background-image: url("../citynews-3/assets/img/moon.svg") !important;
}

/* Делаем label областью для клика на всю кнопку */
.theme-switch .switch {
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    cursor: pointer !important;
    display: block !important;
}

/* Прячем сам чекбокс, но не удаляем его из потока (чтобы работал JS) */
.theme-switch .gp-checkbox, 
.theme-switch input[type="checkbox"] {
    opacity: 0 !important;
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    pointer-events: none !important;
}

/* Лупа поиска */
.site-search-btn svg {
    display: block !important;
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
    pointer-events: none !important;
}

/* Ховеры и активные состояния */
.site-search-btn:hover, 
.theme-switch:hover {
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #3f3f3f !important;
}

.site-search-btn:active, 
.theme-switch:active {
    transform: translateY(1px);
}

/* Убираем синеву в темной теме */
html[data-theme="dark"] .site-search-btn, 
html[data-theme="dark"] .theme-switch,
html[data-theme="dark"] .mobile-menu-btn {
    background-color: #7d7d7d !important;
}

/* ======================================================
   18. МОБИЛЬНЫЕ КНОПКИ (С исправленной видимостью)
   ====================================================== */

/* Базовые стили: применяются всегда, но не форсируют видимость */
.mobile-socials-btn, 
.mobile-menu-btn {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    width: 40px !important;
    height: 40px !important;
    padding: 0 !important;
    margin-left: 10px !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    cursor: pointer;
    transition: none !important;
    border-radius: 0 !important;
    position: relative;
    /* Убираем глобальный display: flex, пусть тема сама решает, когда их показать */
}

/* Форсируем стиль Minecraft только тогда, когда кнопки должны быть видны (до 1100px) */
@media (max-width: 1100px) {
    .mobile-socials-btn, 
    .mobile-menu-btn {
        display: flex !important; /* Теперь центрирование работает только на мобильных */
        align-items: center;
        justify-content: center;
    }
}

/* --- Кнопка соцсетей (SVG) --- */
.mobile-socials-btn svg {
    width: 24px !important;
    height: 24px !important;
    fill: #ffffff !important;
}

/* --- Кнопка МЕНЮ (Полоски) --- */
.mobile-menu-btn__line, 
.mobile-menu-btn__line::before, 
.mobile-menu-btn__line::after {
    background-color: #ffffff !important;
    height: 2px !important;
    width: 20px !important;
    border-radius: 0 !important;
}

.mobile-menu-btn__line {
    position: relative !important;
    margin: 0 auto !important;
}

/* --- Состояния при наведении и нажатии --- */
.mobile-socials-btn:hover, 
.mobile-menu-btn:hover {
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #3f3f3f !important;
}

.mobile-socials-btn:active, 
.mobile-menu-btn:active {
    transform: translateY(1px);
}

/* Убираем синеву в Dark Mode */
html[data-theme="dark"] .mobile-socials-btn, 
html[data-theme="dark"] .mobile-menu-btn {
    background-color: #7d7d7d !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
}

/* ======================================================
   19. МОБИЛЬНОЕ МЕНЮ (Панель инвентаря)
   ====================================================== */

/* Сама выезжающая панель */
.mobile-nav-panel {
    background-color: var(--mc-gui-bg) !important; /* Серый GUI */
    border-right: 4px solid #000 !important;
    padding: 20px !important;
    /* Внутренний объем окна */
    box-shadow: inset 4px 4px 0px var(--mc-gui-light), 
                inset -4px -4px 0px var(--mc-gui-shadow) !important;
}

/* Список пунктов меню на мобильном */
.mobile-nav .nav-menu {
    flex-direction: column !important;
    align-items: stretch !important;
}

.mobile-nav .menu-item {
    margin: 0 !important;
}

/* Ссылки меню (Исправляем видимость) */
.mobile-nav .menu-item a {
    display: block !important;
    padding: 15px 10px !important;
    color: #3f3f3f !important; /* Темно-серый текст для светлой темы */
    font-weight: 700 !important;
    text-decoration: none !important;
    border-bottom: 2px solid var(--mc-gui-shadow) !important;
    transition: none !important;
}

/* Наведение/Клик на пункт в мобильном меню */
.mobile-nav .menu-item a:hover, 
.mobile-nav .menu-item a:active {
    background-color: rgba(0, 0, 0, 0.1) !important;
    color: #000 !important;
}

/* Кнопка закрытия мобильного меню (крестик) */
.mobile-nav-panel__close {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    width: 32px !important;
    height: 32px !important;
    top: 20px !important;
    right: 20px !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
}

/* --- ТЕМНАЯ ТЕМА для мобильного меню --- */
html[data-theme="dark"] .mobile-nav .menu-item a {
    color: #ffffff !important; /* Белый текст в темной теме */
    border-bottom-color: #1a1a1a !important;
}

html[data-theme="dark"] .mobile-nav .menu-item a:hover {
    background-color: rgba(255, 255, 255, 0.05) !important;
}

/* Затемнение фона при открытом меню */
.mobile-overlay {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

/* ======================================================
   20. ФИКС ИЗОБРАЖЕНИЙ (Картинка на всю ширину карточки)
   ====================================================== */

/* Убираем лимиты ширины у всех оберток изображений */
.home-category-item__img, 
.popular-item__img, 
.recent-artice__img, 
.featured-artice__img, 
.zoom-img {
    max-width: 100% !important; /* Отменяем 365px из оригинала */
    width: 100% !important;
}

/* Растягиваем само изображение */
.home-category-item__img img,
.popular-item__img img,
.recent-artice__img img,
.featured-artice__img img {
    width: 100% !important;
    height: auto !important;
    display: block !important;
    /* Чтобы картинка не деформировалась, если пропорции чуть изменятся */
    object-fit: cover; 
}

/* В горизонтальных карточках (Популярное) ограничиваем картинку, 
   чтобы она не съела весь текст, но прижимаем её к краю */
@media (min-width: 501px) {
    .popular-item__img {
        flex: 0 0 180px !important; /* Фиксируем ширину для горизонтального вида */
        margin-right: 1.5rem !important;
    }
}

/* ======================================================
   21. ВИДЖЕТ ПОПУЛЯРНОЕ (Sidebar Card Style — Версия 2)
   ====================================================== */

/* Контейнер карточки в сайдбаре */
.recent-list__item {
    background-color: var(--mc-card-bg) !important;
    border: 2px solid var(--mc-border-hard) !important;
    box-shadow: 4px 4px 0px var(--mc-card-shadow) !important;
    margin-bottom: 20px !important;
    padding: 0 !important; 
    display: block !important; 
    overflow: hidden;
    /* Убираем эффект нажатия */
    transform: none !important;
    transition: none !important;
}

/* Картинка */
.recent-artice__img {
    width: 100% !important;
    max-width: 100% !important;
    border-bottom: 2px solid var(--mc-border-hard);
}

/* Заголовок и отступы */
.recent-artice__content {
    padding: 12px 15px 5px !important;
}

.recent-artice__title a {
    color: var(--mainColor) !important;
    font-weight: 800 !important;
    text-decoration: none !important;
}

/* Счетчик лайков */
.recent-artice__footer {
    padding: 0 15px 12px !important;
    font-size: 0.85rem !important;
    color: var(--mc-gui-shadow) !important;
    font-weight: 700;
}

/* --- ПОРЯДКОВЫЙ НОМЕР (Стиль: Дубовая табличка / Sign) --- */
.recent-list__item::before {
    content: counter(myCounter) !important;
    position: absolute !important;
    z-index: 10 !important;
    top: 8px !important;
    left: 8px !important;
    
    /* Цвета деревянной таблички из дуба */
    background-color: #af8c55 !important; 
    border: 2px solid #3a2a16 !important;
    color: #3a2a16 !important; 
    
    /* Геометрия */
    width: 24px !important;
    height: 24px !important;
    line-height: 21px !important; /* Центровка текста */
    text-align: center !important;
    font-weight: 800 !important;
    border-radius: 0 !important;
    
    /* Убираем эффекты кнопки */
    box-shadow: none !important;
    text-shadow: none !important;
}

/* Ховер: только легкая подсветка границ карточки, без движения */
.recent-list__item:hover {
    border-color: #000 !important;
    transform: none !important;
    box-shadow: 4px 4px 0px var(--mc-card-shadow) !important;
}

/* Темная тема для таблички (можно сделать из темного дуба) */
html[data-theme="dark"] .recent-list__item::before {
    background-color: #533b26 !important; /* Dark Oak */
    border-color: #1a120b !important;
    color: #e0e0e0 !important;
}


html[data-theme="dark"] .recent-artice__footer {
    color: #aaaaaa !important; /* Светло-серый, как в описании футера */
    text-shadow: 1px 1px 0px #000; /* Добавим легкую тень для глубины */
}


/* ======================================================
   22. КАРТОЧКИ АВТОРОВ (Homepage Authors)
   ====================================================== */

.authors-list__item {
    background-color: var(--mc-card-bg) !important;
    border: 2px solid var(--mc-border-hard) !important;
    box-shadow: 6px 6px 0px var(--mc-card-shadow) !important;
    overflow: hidden;
    border-radius: 0 !important;
    transition: none !important;
}

/* Декоративный фон за аватаром */
.authors-item__bg {
    background-color: var(--mc-gui-bg) !important;
    border-bottom: 2px solid var(--mc-border-hard);
    margin-bottom: 40px !important; /* Место для аватара */
}

/* Аватар автора (Квадратная голова) */
.authors-item__img {
    border-radius: 0 !important;
    border: 3px solid #000 !important;
    padding: 0 !important;
    background: #fff;
    width: 80px !important;
    height: 80px !important;
    bottom: -40px !important; /* Наполовину заходит на контент */
}

/* Счетчик постов (Табличка сверху) */
.authors-item__post-count {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    box-shadow: inset 1px 1px 0px #afafaf, 
                inset -1px -1px 0px #3f3f3f !important;
    top: 10px !important;
    right: 10px !important;
}

/* Имя и описание */
.authors-item__name {
    color: var(--mainColor) !important;
    font-weight: 800 !important;
    font-size: 1.2rem !important;
    text-transform: none;
}

.authors-item__descr {
    color: #555 !important;
    font-size: 0.9rem !important;
}

/* Эффект наведения: "нажатие" блока */
.authors-list__item:hover {
    transform: translate(2px, 2px);
    box-shadow: 4px 4px 0px var(--mc-card-shadow) !important;
}

/* Темная тема для авторов */
html[data-theme="dark"] .authors-item__descr {
    color: #aaaaaa !important;
}

html[data-theme="dark"] .authors-item__bg {
    background-color: #373737 !important;
}

/* ======================================================
   23. ПОПУЛЯРНЫЕ ЗАПИСИ (Фикс высоты и обрезка)
   ====================================================== */

/* Контейнер заголовка */
.popular-item__title {
    margin-top: 5px !important;
    margin-bottom: 10px !important;
    padding: 0 !important;
    /* Фиксируем высоту: line-height (1.3) * количество строк (2) = 2.6em */
    /* Это нужно, чтобы футеры карточек всегда были на одной линии */
    height: 3.9em !important; 
    overflow: hidden;
    display: block;
}

/* Ссылка внутри заголовка (механизм обрезки) */
.popular-item__link {
    display: -webkit-box !important;
    -webkit-line-clamp: 3; /* Ограничение: 2 строки */
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis; /* Добавляет "..." в конце */
    
    line-height: 1.3 !important;
    font-weight: 800 !important;
    color: var(--mainColor) !important;
    text-decoration: none !important;
}

/* Убираем лишние отступы у категории над заголовком */
.popular-item__cats {
    margin-bottom: 5px !important;
    display: block;
    font-weight: 700;
    text-transform: uppercase;
    font-size: 0.75rem !important;
}

/* Фикс для маленьких экранов: если карточки перестраиваются, 
   можно разрешить им занимать чуть больше места, но 2 строки обычно идеал */
@media (max-width: 500px) {
    .popular-item__title {
        height: auto !important; /* На мобилках важнее прочитать заголовок целиком */
        max-height: 3.2em; /* Но не более 2-3 строк */
    }
}

/* ======================================================
   25. ФИКС ФОНОВ РАЗДЕЛОВ (Убираем "полосатость")
   ====================================================== */

/* Принудительно делаем фон прозрачным для всех спец-секций на главной */
.popular-section, 
.authors, 
.top-block, 
.home-section,
.home-category {
    background-color: transparent !important;
    background-image: none !important;
    border: none !important; /* Убираем возможные разделительные линии */
}

/* Если где-то осталась системная тень у секции, убираем её */
.popular-section, .authors {
    box-shadow: none !important;
}

/* На всякий случай убедимся, что контейнер main не имеет своих подложек */
.main {
    background-color: var(--mc-body-bg) !important;
}

/* ======================================================
   26. ЦИТАТЫ (Minecraft Plank Style — Полоса слева)
   ====================================================== */

.post-content blockquote {
    position: relative !important;
    /* Текстура дерева (горизонтальные доски) */
    background-color: #af8c55 !important; /* Цвет дуба */
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.05) 0px,
            rgba(0, 0, 0, 0.05) 24px,
            rgba(0, 0, 0, 0.12) 25px,
            rgba(0, 0, 0, 0.12) 26px
        ) !important;
    
    /* Убираем всё лишнее */
    border: none !important;
    box-shadow: none !important;
    
    /* Массивная пиксельная полоса слева (как кора или темное дерево) */
    border-left: 10px solid #3a2a16 !important; 
    
    /* Отступы и текст */
    padding: 20px 25px !important;
    margin: 30px 0 !important;
    text-align: left !important;
}

/* Текст внутри цитаты */
.post-content blockquote p {
    color: #2e1f10 !important; /* Темный текст, как на табличках */
    font-style: normal !important; /* Убираем наклон */
    font-weight: 700 !important;
    font-size: 1.1rem !important;
    line-height: 1.5 !important;
    text-shadow: none !important;
}

/* Источник цитаты */
.post-content blockquote cite {
    display: block;
    margin-top: 10px;
    font-style: normal !important;
    font-weight: 800;
    color: #4a3621 !important;
    text-transform: uppercase;
    font-size: 0.85rem;
}

/* --- ТЕМНАЯ ТЕМА (Темный дуб / Spruce) --- */
html[data-theme="dark"] .post-content blockquote {
    background-color: #312114 !important; /* Глубокий коричневый */
    border-left-color: #1a120b !important;
    background-image: 
        repeating-linear-gradient(
            0deg,
            rgba(0, 0, 0, 0.15) 0px,
            rgba(0, 0, 0, 0.15) 24px,
            rgba(0, 0, 0, 0.3) 25px,
            rgba(0, 0, 0, 0.3) 26px
        ) !important;
}

html[data-theme="dark"] .post-content blockquote p {
    color: #bdbdbd !important; /* Светлый текст для темного фона */
}

html[data-theme="dark"] .post-content blockquote cite {
    color: #af8c55 !important;
}

/* ======================================================
   27. СПЕЦИАЛЬНЫЕ ЦИТАТЫ (SourceQuote Fix)
   ====================================================== */

/* Делаем ссылку и все вложенные элементы прозрачными */
.SourceQuote a, 
.SourceQuote span, 
.SourceQuote p,
.SourceQuote footer,
.SourceQuote cite {
    background: transparent !important;
    background-image: none !important;
    border: none !important;
    box-shadow: none !important;
    text-decoration: none !important; /* Убираем подчеркивание */
}

/* Наследуем цвета от нашей "деревянной" цитаты */
.SourceQuote-link {
    display: block !important;
    color: inherit !important; /* Берет цвет текста из родительского blockquote */
}

/* Убираем эффект подчеркивания ссылок, который мы вводили для .post-content a */
.post-content .SourceQuote a {
    border-bottom: none !important;
}

/* Эффект при наведении на всю "деревянную" панель-ссылку */
.SourceQuote:hover {
    /* Легкое осветление дерева при наведении, как будто на панель падает свет */
    filter: brightness(1.05);
}

/* Оформление источника (футера) внутри этой цитаты */
.SourceQuote-footer {
    margin-top: 10px;
    display: block;
}

.SourceQuote-origin {
    font-weight: 800;
    opacity: 0.8;
}

.SourceQuote-arrow {
    margin-right: 5px;
}

/* ======================================================
   28. ИЗБРАННЫЕ ЗАПИСИ (Featured Cards Sync)
   ====================================================== */

/* Контейнер карточки Избранное */
.feat-posts__item {
    border: 2px solid #000 !important;
    /* Жесткая внешняя тень */
    box-shadow: 6px 6px 0px var(--mc-card-shadow) !important;
    overflow: hidden;
    border-radius: 0 !important;
    transition: none !important; /* Убираем плавность */
    background-color: #000; /* Фон на случай, если картинка не загрузится */
}

/* Обёртка с фоновой картинкой */
.feat-article__wrapper {
    border-radius: 0 !important;
    transition: none !important;
}

/* Убираем эффект подчеркивания текста при наведении */
.feat-article__link.hover-bottom-border {
    background-image: none !important; /* Убиваем градиент-подчеркивание */
    text-decoration: none !important;
    font-weight: 800 !important;
}

/* Настраиваем подложку под текстом, чтобы он лучше читался */
.feat-article__caption {
    background: rgba(0, 0, 0, 0.5) !important; /* Полупрозрачный черный */
    padding: 20px !important;
    min-height: auto !important;
    bottom: 0 !important;
}

/* Эффект наведения на всю карточку: моментальное вдавливание */
.feat-posts__item:hover {
    transform: translate(2px, 2px);
    box-shadow: 3px 3px 0px var(--mc-card-shadow) !important;
}

/* Убеждаемся, что заголовок в Избранном не слишком мелкий */
.feat-article__title {
    font-size: 1.2rem !important;
    line-height: 1.3 !important;
    margin-bottom: 10px !important;
}

/* Фикс для подвала внутри карточки (дата и лайки) */
.feat-article__caption .item-footer {
    color: #ffffff !important;
    font-size: 0.8rem;
}

/* В темной теме можно чуть ослабить тень, чтобы она не была слишком черной */
html[data-theme="dark"] .feat-posts__item {
    box-shadow: 6px 6px 0px rgba(0, 0, 0, 0.8) !important;
}

/* ======================================================
   29. ЛОАДЕР ЛАЙКОВ (Минимальная правка граней)
   ====================================================== */

.loader::after {
    /* Делаем все 4 грани видимыми (две яркие, две полупрозрачные) */
    /* Это позволит видеть вращение и сохранит форму квадрата */
    border-color: #7d7d7d !important; /*rgba(125, 125, 125, 0.2) !important;*/
/*    border-top-color: #7d7d7d !important; */
/*    border-bottom-color: #7d7d7d !important; */
    
    /* Толщина грани */
    border-width: 2px !important;
}

/* Для темной темы */
html[data-theme="dark"] .loader::after {
    border-color: rgba(255, 255, 255, 0.1) !important;
/*  border-top-color: #ffffff !important;
    border-bottom-color: #ffffff !important; */
}


/* ======================================================
   32. РЕКЛАМНЫЙ ВИДЖЕТ (Чистый слот с центровкой)
   ====================================================== */

/* Контейнер-рамка */
.ad-gui-container {
    background-color: var(--mc-body-bg) !important; /* Цвет фона страницы для эффекта "сквозного" слота */
    border: 2px solid #000 !important;
    height: 100% !important;
    min-height: 250px; /* Минимальная высота, чтобы не схлопывался */
    display: flex !important;
    flex-direction: column;
    /* Эффект вдавленной ячейки инвентаря */
    box-shadow: inset 4px 4px 0px rgba(0,0,0,0.2), 
                inset -4px -4px 0px rgba(255,255,255,0.4) !important;
    position: relative;
    overflow: hidden;
}

/* Область контента с центровкой */
.ad-gui-content {
    flex: 1;
    display: flex !important;
    align-items: center !important;     /* Центровка по вертикали */
    justify-content: center !important;  /* Центровка по горизонтали */
    padding: 20px;
    text-align: center;
}

/* Убираем лишние отступы у самого виджета */
.ad-widget-item {
    margin: 0 !important;
    width: 100%;
}

/* Темная тема */
html[data-theme="dark"] .ad-gui-container {
    background-color: #1a1a1a !important;
    box-shadow: inset 4px 4px 0px #000, 
                inset -2px -2px 0px #373737 !important;
}

/* ======================================================
   33. НАВИГАЦИЯ В ПОСТАХ (Compact Inventory Slots)
   ====================================================== */

/* Контейнер: делаем его более легким */
.post-navigation .nav-links {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    margin: 30px 0 !important;
    padding: 0 !important;
    border: none !important;
    background: transparent !important;
}

/* Стилизуем блоки как плоские "ячейки" */
.post-navigation .nav-links .nav-previous, 
.post-navigation .nav-links .nav-next {
    flex: 1 1 250px !important;
    background-color: var(--mc-body-bg) !important; /* Цвет как у фона страницы */
    border: 2px solid #000 !important;
    /* Эффект вдавленного слота */
    box-shadow: inset 3px 3px 0px rgba(0,0,0,0.1), 
                4px 4px 0px rgba(0,0,0,0.05) !important;
    margin: 0 !important;
    float: none !important;
    width: auto !important;
    position: relative;
}

/* Ссылка внутри ячейки */
.post-navigation .nav-links a {
    display: block !important;
    padding: 12px 15px !important;
    text-decoration: none !important;
    transition: none !important;
    color: var(--mainColor) !important;
}

/* Метка (Предыдущая / Следующая) — маленькая и строгая */
.nav-links__label {
    display: block !important;
    font-size: 10px !important;
    text-transform: uppercase !important;
    font-weight: 800 !important;
    color: var(--mc-gui-shadow) !important;
    margin-bottom: 4px !important;
    letter-spacing: 1px;
}

/* Заголовок статьи — жирный, но аккуратный */
.nav-links__title {
    display: block !important;
    font-size: 0.95rem !important;
    font-weight: 700 !important;
    line-height: 1.3 !important;
    margin: 0 !important;
    color: var(--mainColor) !important;
}

/* --- ИНТЕРАКТИВ (Стиль "Выделенный слот") --- */

.post-navigation .nav-links div:hover {
    background-color: var(--mc-card-bg) !important; /* Становится белым при наведении */
    border-color: #000 !important;
    /* При наведении ячейка "выпуклая" */
    box-shadow: inset 2px 2px 0px #fff, 
                6px 6px 0px var(--mc-card-shadow) !important;
    transform: translate(-2px, -2px); /* Слегка приподнимается */
}

.post-navigation .nav-links div:hover a .nav-links__title {
    color: var(--mc-accent) !important; /* Или оставь стандартный цвет темы */
}

/* --- ТЕМНАЯ ТЕМА --- */
html[data-theme="dark"] .post-navigation .nav-links .nav-previous, 
html[data-theme="dark"] .post-navigation .nav-links .nav-next {
    background-color: #1a1a1a !important;
    box-shadow: inset 3px 3px 0px #000 !important;
}

html[data-theme="dark"] .post-navigation .nav-links div:hover {
    background-color: #2c2c2c !important;
    box-shadow: inset 2px 2px 0px #444, 
                6px 6px 0px rgba(0,0,0,0.5) !important;
}

/* Фикс цвета меток (Предыдущая/Следующая) в темной теме */
html[data-theme="dark"] .nav-links__label {
    color: #aaaaaa !important; /* Светло-серый майнкрафтовский текст */
    text-shadow: 1px 1px 0px #000;
}

/* Также убедимся, что заголовок в темной теме белый */
html[data-theme="dark"] .nav-links__title {
    color: #ffffff !important;
}


/* ======================================================
   35. СПИСКИ В ТЕКСТЕ (Pixel Markers — Фикс двойных точек)
   ====================================================== */

/* 1. Полный сброс всех стандартных и тематических маркеров */
.post-content ul, 
.post-content ul li {
    list-style: none !important;
    list-style-type: none !important;
    background-image: none !important; /* Убираем, если были картинки */
    margin-left: 0 !important;
}

.post-content ul {
    padding-left: 5px !important;
    margin-bottom: 1.5rem !important;
}

.post-content ul li {
    position: relative !important;
    padding-left: 22px !important; /* Место для нашего кубика */
    margin-bottom: 10px !important;
}

/* 2. Рисуем наш единственный Minecraft-маркер */
.post-content ul li::before {
    /* Сначала обнуляем любые иконки или символы от старой темы */
    content: "" !important; 
    
    /* Рисуем кубик */
    position: absolute !important;
    left: 0 !important;
    top: 0.55em !important; 
    width: 6px !important;
    height: 6px !important;
    background-color: var(--mc-stone-bg) !important;
    border: 1px solid #000 !important;
    display: block !important;
}

/* 3. Вложенные списки (второй уровень) */
.post-content ul li ul {
    margin-top: 10px !important;
    margin-bottom: 0 !important;
}

.post-content ul li ul li::before {
    background-color: #bdbdbd !important; /* Железный цвет для вложенных */
    width: 4px !important;
    height: 4px !important;
    left: 4px !important;
}

/* Фикс для нумерованных списков (чтобы цифры не пропали) */
.post-content ol {
    padding-left: 25px !important;
    list-style-type: decimal !important; /* Возвращаем цифры */
}

.post-content ol li {
    padding-left: 5px !important;
    margin-bottom: 10px !important;
}
/* ======================================================
   34. ХЛЕБНЫЕ КРОШКИ (Lightweight Path Style — Dot Edition)
   ====================================================== */

.breadcrumbs {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    background: transparent !important;
    border: none !important;
    border-bottom: 2px solid #000 !important; /* Тонкое основание */
    padding: 0 0 8px 0 !important;
    margin-bottom: 30px !important;
    list-style: none !important;
    box-shadow: none !important;
}

/* Декоративный кубик в начале строки */
.breadcrumbs::before {
    content: "";
    display: inline-block;
    width: 8px;
    height: 8px;
    background-color: var(--mc-stone-bg);
    border: 1px solid #000;
    margin-right: 12px;
}

.breadcrumbs__item {
    font-size: 12px !important;
    font-weight: 700 !important;
    color: #888 !important;
    text-transform: uppercase;
    display: flex !important;
    align-items: center;
}

/* Настраиваем системную точку (удаляем дисплей нан и стилизуем) */
.breadcrumbs__item::before {
    display: inline-block !important;
    content: "\00B7" !important; /* Код точки-разделителя */
    margin: 0 10px !important;
    font-size: 24px !important; /* Увеличиваем, чтобы точка стала квадратным пикселем */
    line-height: 0 !important;
    font-weight: 900 !important;
    color: #bbb !important;
    padding: 0 !important;
}

/* У первой надписи (обычно "Главная") точка перед ней не нужна */
.breadcrumbs__item:first-child::before {
    display: none !important;
}

/* Ссылки */
.breadcrumbs__link {
    color: #555 !important;
    text-decoration: none !important;
}

.breadcrumbs__link:hover {
    color: #000 !important;
    background-color: rgba(0,0,0,0.05);
}

/* Убираем наш предыдущий символ ">" */
.breadcrumbs__item::after {
    content: none !important;
}

/* --- ТЕМНАЯ ТЕМА --- */
html[data-theme="dark"] .breadcrumbs {
    border-bottom-color: var(--mc-gui-shadow) !important;
}

html[data-theme="dark"] .breadcrumbs__link {
    color: #bdbdbd !important;
}

html[data-theme="dark"] .breadcrumbs__item::before {
    color: #444 !important; /* Темная точка в темной теме */
}

html[data-theme="dark"] .breadcrumbs::before {
    background-color: #5d5d5d;
}

/* Убираем последний элемент (заголовок статьи) из хлебных крошек */
.single .breadcrumbs__item:last-child {
    display: none !important;
}

/* Также убираем точку-разделитель перед скрытым элементом, 
   чтобы она не висела в конце строки */
.single .breadcrumbs__item:nth-last-child(2)::after {
    display: none !important;
}

/* ======================================================
   36. БЛОК АВТОРА (Player Profile Card)
   ====================================================== */

/* Основной контейнер (может называться .about-author или .author-info) */
.about-author {
    background-color: var(--mc-gui-bg) !important;
    border: 2px solid #000 !important;
    padding: 25px !important;
    margin: 40px 0 !important;
    display: flex !important;
    align-items: center;
    gap: 20px;
    /* Тень как у панелей GUI */
    box-shadow: inset 3px 3px 0px var(--mc-gui-light), 
                inset -3px -3px 0px var(--mc-gui-shadow) !important;
    position: relative;
}

/* Аватар (Квадратная голова) */
.author-avatar img, 
.post-author-box img {
    border-radius: 0 !important; /* Никаких кругов */
    border: 3px solid #000 !important;
    background: #fff;
    width: 80px !important;
    height: 80px !important;
    padding: 0 !important;
    image-rendering: pixelated; /* Сохраняем резкость пикселей */
    box-shadow: 4px 4px 0px rgba(0,0,0,0.1);
}

/* Блок с текстом */
.author-info__text {
    flex: 1;
}

/* Имя автора */
.author-name, 
.author-info__name {
    font-size: 1.3rem !important;
    font-weight: 800 !important;
    color: #000 !important;
    margin-bottom: 8px !important;
    display: block;
    text-transform: none;
}

/* Описание автора */
.author-description, 
.author-info__desc {
    font-size: 0.95rem !important;
    line-height: 1.4 !important;
    color: #3f3f3f !important;
    margin: 0 !important;
}

/* --- ТЕМНАЯ ТЕМА (Dark GUI) --- */
html[data-theme="dark"] .about-author {
    background-color: #373737 !important;
    box-shadow: inset 3px 3px 0px #5d5d5d, 
                inset -3px -3px 0px #1a1a1a !important;
}

html[data-theme="dark"] .author-name {
    color: var(--mc-hover-text) !important; /* Желтое имя в темной теме */
}

html[data-theme="dark"] .author-description {
    color: #bdbdbd !important;
}


/* ======================================================
   37. МЕТА-ДАННЫЕ СТАТЬИ (Post Info — Тонкий стиль)
   ====================================================== */

/* 1. Очищаем родительский контейнер */
.single-post__header {
    border-bottom: none !important;
    padding-bottom: 0 !important;
    margin-bottom: 5px !important;
}

/* 2. Настраиваем блок мета-данных */
.post-info {
    display: flex !important;
    align-items: center !important;
    flex-wrap: wrap;
    gap: 15px;
    padding: 8px 0 !important; /* Еще компактнее */
    border-top: none !important;
    
    /* ЕДВА ЗАМЕТНАЯ ЛИНИЯ: 1px и прозрачность */
    border-bottom: 1px solid rgba(0, 0, 0, 0.1) !important; 
    
    margin-bottom: 20px !important;
    background: transparent !important;
}

/* Блок автора */
.post-info__author {
    display: flex !important;
    align-items: center !important;
    gap: 10px;
    padding-right: 15px;
    /* Разделитель тоже делаем едва заметным */
    border-right: 1px solid rgba(0, 0, 0, 0.1); 
}

/* Квадратный аватар */
.post-info__img img {
    border-radius: 0 !important;
    border: 2px solid #000 !important;
    padding: 0 !important;
    width: 32px !important; /* Еще чуть меньше, чтобы не доминировал */
    height: 32px !important;
    image-rendering: pixelated;
}

/* Имя и дата */
.post-info__name a {
    font-weight: 800 !important;
    color: var(--mainColor) !important;
    text-decoration: none !important;
    font-size: 14px !important;
}

.post-info__date {
    font-size: 11px !important;
    color: #999 !important; /* Более блеклый цвет для даты */
    display: block;
    line-height: 1;
}

/* Блок статистики (Время, Комменты, Лайки) */
.post-info__wrap {
    display: flex !important;
    align-items: center !important;
    gap: 15px;
    font-size: 12px !important;
    font-weight: 700;
    color: #777; /* Смягчаем цвет всего блока статистики */
}

/* Иконки */
.post-info svg {
    width: 14px !important;
    height: 14px !important;
    fill: #aaa !important; /* Светлые иконки */
}

/* --- ТЕМНАЯ ТЕМА --- */
html[data-theme="dark"] .post-info {
    border-bottom-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .post-info__author {
    border-right-color: rgba(255, 255, 255, 0.1) !important;
}

html[data-theme="dark"] .post-info__date,
html[data-theme="dark"] .post-info__wrap {
    color: #666 !important;
}

/* Возвращаем красный цвет для лайкнутого сердечка */
.post-info .sl-button.liked .sl-icon svg {
    fill: #ff5555 !important; /* Цвет сердечка Minecraft */
    filter: drop-shadow(1px 1px 0px rgba(0,0,0,0.2)); /* Легкий объем */
}

/* Эффект при наведении на лайк, чтобы было понятно, что он кликабельный */
.post-info .sl-button:hover .sl-icon svg {
    fill: #ff5555 !important;
    opacity: 0.8;
}

/* ======================================================
   38. ПОДВАЛ СТАТЬИ (Tags & Social — Lightweight)
   ====================================================== */

.single-post__footer {
    margin-top: 30px !important;
    background: transparent !important;
    border: none !important;
}

/* --- МЕТКИ (Восстановление бирок) --- */
.single-post__tags {
    display: flex !important;
    flex-wrap: wrap;
    align-items: center;
    padding: 10px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
    margin-bottom: 0 !important;
    gap: 15px !important;
}

/* Убираем мои лишние "кубики" */
.single-post__tags::before {
    content: none !important;
    display: none !important;
}

.single-post__tags a {
    position: relative !important;
    display: inline-flex !important;
    align-items: center !important;
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    /* Оставляем место под иконку слева */
    padding: 0 0 0 1.2rem !important; 
    margin: 0 !important;
    font-size: 13px !important;
    font-weight: 700 !important;
    color: #555 !important;
    text-transform: none !important;
    text-decoration: none !important;
    line-height: 1.5 !important;
}

/* Настройка родной иконки-бирки */
.single-post__tags a::before {
    content: "" !important;
    position: absolute !important;
    left: 0 !important;
    top: 50% !important;
    transform: translateY(-55%) !important; /* Центровка по вертикали */
    width: 0.85rem !important;
    height: 0.85rem !important;
    /* Правильный путь к иконке в родительскую тему */
    background-image: url("../citynews-3/assets/img/tag-outline.svg") !important;
    background-size: contain !important;
    background-repeat: no-repeat !important;
    display: inline-block !important;
    opacity: 0.6;
}

.single-post__tags a:hover {
    color: #000 !important;
    text-decoration: underline !important;
}

.single-post__tags a:hover::before {
    opacity: 1;
}

/* --- БЛОК ПОДЕЛИТЬСЯ И ЛАЙКИ --- */
.post-footer__wrap {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: 20px;
    padding: 15px 0 !important;
    border-top: 1px solid rgba(0, 0, 0, 0.1) !important;
}

/* --- ТЕМНАЯ ТЕМА --- */
html[data-theme="dark"] .single-post__tags a {
    color: #888 !important;
}

html[data-theme="dark"] .single-post__tags a::before {
    /* Инверсия иконки в белый цвет для темной темы */
    filter: brightness(0) invert(1);
    opacity: 0.5;
}

html[data-theme="dark"] .single-post__tags a:hover {
    color: #fff !important;
}

/* ======================================================
   39. СТРАНИЦА 404 (You Died — Фикс кликабельности)
   ====================================================== */

.main-404 {
    position: relative !important;
    background-color: #330000 !important;
    background-image: 
        radial-gradient(circle, transparent 20%, rgba(0,0,0,0.9) 100%),
        linear-gradient(0deg, #4a0000 0%, #800000 50%, #4a0000 100%) !important;
    background-size: 100% 100%, 100% 400%;
    animation: mc-fire-glow 6s ease infinite;
    min-height: 85vh;
    display: flex;
    align-items: center;
    justify-content: center;
    /* Создаем новый контекст наслоения */
    z-index: 1 !important; 
    overflow: hidden;
}

/* Шум и виньетка (Overlay слои) */
.main-404::before, 
.main-404::after {
    content: "";
    position: absolute;
    top: 0; left: 0; width: 100%; height: 100%;
    pointer-events: none !important; /* Клик должен проходить насквозь */
}

/* Слой 1: Шум */
.main-404::before {
    background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noiseFilter'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.65' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noiseFilter)'/%3E%3C/svg%3E");
    opacity: 0.12;
    z-index: 2 !important;
}

/* Слой 2: Виньетка */
.main-404::after {
    box-shadow: inset 0 0 150px #000;
    z-index: 3 !important;
}

/* СЛОЙ 3: КОНТЕНТ (Должен быть выше всех) */
.main-404 .container {
    position: relative !important;
    z-index: 100 !important; /* Максимальный приоритет для кликов */
}

.error-section {
    position: relative;
    z-index: 101;
}

/* Убеждаемся, что кнопки на 404 странице тоже имеют высокий приоритет */
.death-buttons {
    position: relative;
    z-index: 102;
    display: flex;
    gap: 15px;
    justify-content: center;
}

/* Заголовок "Ошибка!" */
.error-section__title {
    font-size: 5rem !important;
    color: #ffffff !important;
    text-shadow: 5px 5px 0px #000 !important;
    margin-bottom: 30px !important;
    text-transform: none !important;
}

/* Блок текста */
.error-section__text {
    margin-bottom: 50px !important;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
}

.death-reason {
    color: #ffffff !important;
    font-size: 1.3rem;
    font-weight: 700;
    text-shadow: 2px 2px 0px #000;
    background: rgba(0, 0, 0, 0.5);
    padding: 10px 20px;
    border: 2px solid #000;
}

.death-score {
    color: #ffffff !important;
    font-size: 1.2rem;
    font-weight: 800;
    text-shadow: 2px 2px 0px #000;
}

.score-value {
    color: #ffff55 !important;
}

/* ======================================================
   40. СКРОЛЛБАР (Minecraft GUI — Полная переработка)
   ====================================================== */

/* 1. Область самого скроллбара (Root) */
::-webkit-scrollbar {
    width: 20px !important;  /* Увеличили до 20px для веса */
    height: 20px !important; /* Для горизонтального */
    display: block !important;
}

/* 2. Дорожка (Background) */
::-webkit-scrollbar-track {
    background-color: #373737 !important; /* Цвет глубокого камня */
    border-left: 2px solid #000 !important;
    box-shadow: inset 2px 0px 5px rgba(0,0,0,0.5) !important;
}

/* 3. Ползунок (Кнопка-бегунок) */
::-webkit-scrollbar-thumb {
    background-color: #8b8b8b !important; /* Андезит */
    border: 2px solid #000 !important;
    /* Яркий 3D эффект как на кнопках */
    box-shadow: inset 3px 3px 0px #bdbdbd, 
                inset -3px -3px 0px #484848 !important;
}

/* Состояние при наведении */
::-webkit-scrollbar-thumb:hover {
    background-color: #bdbdbd !important;
    box-shadow: inset 3px 3px 0px #ffffff, 
                inset -3px -3px 0px #7d7d7d !important;
}

/* 4. Кнопки со стрелками (Сверху и снизу полосы) */
/* В Minecraft GUI их обычно нет, но мы их стилизуем, чтобы "пробить" форму */
::-webkit-scrollbar-button:single-button {
    background-color: #7d7d7d !important;
    display: block !important;
    border: 2px solid #000 !important;
    height: 20px !important;
    width: 20px !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
}

/* 5. Место стыка двух полос */
::-webkit-scrollbar-corner {
    background-color: #000 !important;
}

/* --- ФИКС ДЛЯ FIREFOX --- */
html {
    scrollbar-width: thick !important; /* Только "толстый" или "тонкий" */
    scrollbar-color: #8b8b8b #373737 !important;
}


/* ======================================================
   41. ОФОРМЛЕНИЕ КОДА (Command Block & Inline Style)
   ====================================================== */

/* --- БЛОЧНЫЙ КОД (Командный блок) --- */
.post-content pre {
    background-color: #2b114d !important; /* Темно-фиолетовый фон командного блока */
    border: 3px solid #000 !important;
    padding: 20px !important;
    margin: 30px 0 !important;
    overflow-x: auto;
    position: relative;
    
    /* Текст внутри блока: ярко-зеленый или белый, как в консоли */
    color: #40f1ad !important;
    font-family: Consolas, Monaco, 'Andale Mono', 'Ubuntu Mono', monospace !important;
    font-size: 14px !important;
    line-height: 1.5 !important;
    
    /* Эффект рельефа командного блока */
    box-shadow: inset 4px 4px 0px #3d1b6b, 
                inset -4px -4px 0px #1a082e !important;
}

/* --- СТРОЧНЫЙ КОД (Внутри текста) --- */
/* Используем исключение :not(pre) чтобы не портить код внутри больших блоков */
:not(pre) > code {
    background-color: rgba(0, 0, 0, 0.08) !important; /* Легкая вдавленная подложка */
    border: 1px solid rgba(0, 0, 0, 0.2) !important;
    color: #d63384 !important; /* Классический цвет для code, можно сменить на #2d0a63 */
    padding: 1px 5px !important;
    margin: 0 2px !important;
    font-family: monospace !important;
    font-size: 0.9em !important;
    font-weight: 700 !important;
    /* Убираем любые скругления */
    border-radius: 0 !important;
    vertical-align: baseline;
    
    /* Микро-эффект вдавленности */
    box-shadow: inset 1px 1px 0px rgba(0,0,0,0.1) !important;
}

/* Код внутри префиксного блока (сброс стилей строчного кода) */
pre code {
    background: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    border: none !important;
    box-shadow: none !important;
    color: inherit !important;
    font-size: inherit !important;
}

/* --- ТЕМНАЯ ТЕМА --- */
html[data-theme="dark"] :not(pre) > code {
    background-color: rgba(255, 255, 255, 0.1) !important;
    border-color: rgba(0, 0, 0, 0.5) !important;
    color: #ff79c6 !important; /* Розоватый акцент для темной темы */
    box-shadow: inset 1px 1px 0px #000 !important;
}

/* Командный блок в темной теме оставляем таким же, он и так темный */

/* ======================================================
   43. ГЛОБАЛЬНЫЕ КНОПКИ (Minecraft UI Engine — Final)
   ====================================================== */

/* 1. Глобальные визуальные стили (Цвета, рамки, тени) */
.load-more-posts, 
.comment-form .submit, 
.error404-btn,
.toggle-comments,
.back-to-top,
.site-search-btn, 
.theme-switch,
.mobile-menu-btn,
.mobile-socials-btn,
.pagination .nav-links .page-numbers,
.share-btns__item a {
    background-color: #7d7d7d !important;
    border: 2px solid #000 !important;
    border-radius: 0 !important;
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #3f3f3f !important;
    box-shadow: inset 2px 2px 0px #afafaf, 
                inset -2px -2px 0px #3f3f3f !important;
    cursor: pointer !important;
    transition: none !important;
    text-decoration: none !important;
    /* Убрали !important здесь, чтобы медиа-запросы ниже работали */
    display: inline-flex; 
    align-items: center;
    justify-content: center;
}

/* 2. ПРАВИЛА ВИДИМОСТИ И ЛОГИКИ (Фикс наслоений) */

/* Скрываем мобильные кнопки на десктопе (выше 1100px) */
@media (min-width: 1101px) {
    .mobile-menu-btn,
    .mobile-socials-btn {
        display: none !important;
    }
}

/* Скрываем кнопку комментариев после её активации */
.toggle-comments.remove-toggle {
    display: none !important;
}

/* Фикс текста внутри кнопки комментариев */
.toggle-comments p {
    color: #ffffff !important;
    text-shadow: 2px 2px 0px #3f3f3f !important;
    margin: 0 !important;
}

/* 3. ХОВЕР (Наведение) */
.load-more-posts:hover, 
.comment-form .submit:hover, 
.error404-btn:hover,
.toggle-comments:hover,
.back-to-top:hover,
.site-search-btn:hover, 
.theme-switch:hover,
.mobile-menu-btn:hover,
.mobile-socials-btn:hover,
.pagination .nav-links a.page-numbers:hover,
.share-btns__item a:hover {
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #3f3f3f !important;
    color: #ffffff !important;
}

/* 4. АКТИВ (Нажатие / Вдавливание) */
.load-more-posts:active, 
.comment-form .submit:active, 
.error404-btn:active,
.toggle-comments:active,
.back-to-top:active,
.site-search-btn:active, 
.theme-switch:active,
.mobile-menu-btn:active,
.mobile-socials-btn:active,
.pagination .nav-links .page-numbers:active,
.share-btns__item a:active {
    color: #ffffff !important;
    transform: translateY(2px) !important;
    box-shadow: inset -2px -2px 0px #ffffff, 
                inset 2px 2px 0px #3f3f3f !important;
}

/* 5. ТЕМНАЯ ТЕМА */
html[data-theme="dark"] .load-more-posts, 
html[data-theme="dark"] .comment-form .submit, 
html[data-theme="dark"] .error404-btn,
html[data-theme="dark"] .toggle-comments,
html[data-theme="dark"] .back-to-top,
html[data-theme="dark"] .site-search-btn, 
html[data-theme="dark"] .theme-switch,
html[data-theme="dark"] .mobile-menu-btn,
html[data-theme="dark"] .mobile-socials-btn,
html[data-theme="dark"] .pagination .nav-links .page-numbers,
html[data-theme="dark"] .share-btns__item a {
    background-color: #484848 !important;
    box-shadow: inset 2px 2px 0px #666, 
                inset -2px -2px 0px #1a1a1a !important;
}

html[data-theme="dark"] .load-more-posts:hover,
html[data-theme="dark"] .comment-form .submit:hover,
html[data-theme="dark"] .pagination .nav-links a.page-numbers:hover {
    box-shadow: inset 2px 2px 0px #ffffff, 
                inset -2px -2px 0px #1a1a1a !important;
}