/*
Theme Name: GeneratePress Dark Casino (Дочерняя)
Theme URI: https://generatepress.com
Template: generatepress
Author: Vasya Pupkin
Author URI: https://vasya.com
Description: Дочерняя тема для GP с темным дизайном казино.
Version: 1.10.2
*/

/* --- 1. БАЗОВЫЕ СТИЛИ И ТЕМНАЯ ТЕМА --- */

body {
    background-color: #1a202c; /* Темно-синий фон */
    color: #e2e8f0; /* Светло-серый текст */
}

/* --- Контейнер --- */
/* Делаем основной контейнер темным */
.grid-container {
    max-width: 1140px; /* Вы можете настроить ширину здесь */
}

a {
    color: #f6e05e; /* Желтый для ссылок */
    text-decoration: none;
}
a:hover {
    color: #faf089;
    text-decoration: underline;
}

/* --- Типографика --- */
h1, h2, h3, h4, h5, h6 {
    color: #ffffff; /* Белые заголовки */
    font-weight: 700;
}

/* --- 2. СТИЛИ ДЛЯ HEADER И FOOTER --- */

/* --- Хедер --- */
header.site-header {
    background-color: #2d3748; /* Фон хедера чуть светлее */
    border-bottom: 1px solid #4a5568;
}

/* Ограничиваем ширину хедера */
header.site-header .inside-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-top: 10px;
    padding-bottom: 10px;
}

/* Логотип (название сайта) */
.site-title a {
    color: #ffffff;
    font-size: 24px;
    font-weight: 800;
    text-decoration: none;
}
.site-title a:hover {
    color: #f6e05e;
}

/* --- НОВЫЕ СТИЛИ ХЕДЕРА (v1.9.7) --- */
.header-controls {
    display: flex;
    align-items: center;
    gap: 25px; /* Расстояние между меню и "ES" */
}

.header-lang-indicator {
    color: #a0aec0;
    font-weight: 700;
    font-size: 15px;
    text-transform: uppercase;
}
/* --- КОНЕЦ НОВЫХ СТИЛЕЙ ХЕДЕРА --- */


/* --- ИСПРАВЛЕНИЕ v1.10.2: Стили меню --- */

header.site-header .main-navigation #primary-menu {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    line-height: 1.5;
    border: none !important;
    box-shadow: none !important;
}

/* * ИСПРАВЛЕНИЕ: Используем селектор прямого потомка (>), 
 * чтобы display: flex не применялся к выпадающим .sub-menu 
 */
header.site-header .main-navigation #primary-menu > ul {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    background: transparent !important;
}

/* Контейнер LI (для позиционирования .sub-menu) */
header.site-header .main-navigation #primary-menu ul li {
    margin-left: 10px;
    background: transparent !important;
    position: relative; /* <--- ВАЖНО для выпадающего списка */
}

/* Ссылки верхнего уровня (A) */
header.site-header .main-navigation #primary-menu ul li a {
    display: block;
    padding: 8px 16px;
    color: #a0aec0; /* <--- ИЗМЕНЕНО: Тусклый по умолчанию */
    text-decoration: none;
    border-radius: 6px;
    border: 1px solid transparent;
    transition: all 0.2s ease-in-out;
    font-weight: 700;
    background-color: transparent !important; /* <--- ИЗМЕНЕНО: Убран фон */
}

/* Ссылки верхнего уровня при наведении */
header.site-header .main-navigation #primary-menu ul li a:hover {
    color: #ffffff; /* <--- ИЗМЕНЕНО: Белый при наведении */
    background-color: transparent !important;
    border-color: transparent;
}

/* ИСПРАВЛЕНИЕ v1.10.2: Добавляем фон и для LI, чтобы убить белый цвет */
header.site-header .main-navigation #primary-menu ul li.menu-item-has-children {
    background-color: transparent !important;
}

/* * Активный пункт (как "Streamerzy" или "Sample Page")
 * ИСПРАВЛЕНИЕ: Добавлены !important ко всем свойствам, чтобы
 * переопределить стили .yellow-button
*/
header.site-header .main-navigation #primary-menu ul li.current-menu-item a,
header.site-header .main-navigation #primary-menu ul li.current_page_item a,
header.site-header .main-navigation #primary-menu ul li.menu-item-has-children > a {
    display: block !important;
    background-color: transparent !important; /* <--- УБИРАЕМ ЖЕЛТЫЙ ФОН */
    color: #f6e05e !important; /* <--- ОСТАВЛЯЕМ ЖЕЛТЫЙ ТЕКСТ */
    font-weight: 700 !important;
    font-size: 16px !important; /* <--- Возвращаем стандартный размер */
    text-align: left !important; /* <--- СБРОС TEXT-ALIGN */
    padding: 8px 16px !important; /* <--- ПАДДИНГ КАК У ОБЫЧНОГО МЕНЮ */
    border-radius: 6px !important;
    border: 1px solid transparent !important;
    transform: none !important;
    box-shadow: none !important;
}

/* --- Стили для выпадающего меню (Sub-Menu) v1.10.2 --- */

/* Скрываем по умолчанию */
header.site-header .main-navigation #primary-menu ul .sub-menu {
    display: none;
    position: absolute;
    left: 0;
    top: 100%; /* Выпадает ровно под родителем */
    background-color: #2d3748 !important; /* <--- ИЗМЕНЕНО: Темный фон + !important */
    min-width: 220px; /* <--- ИЗМЕНЕНО: Ширина списка */
    z-index: 1000;
    
    /* --- ИСПРАВЛЕНИЕ v1.10.2: Убираем "яму", чтобы меню не пропадало --- */
    margin-top: 0; /* <--- УБИРАЕМ ВНЕШНИЙ ОТСТУП */
    padding: 20px 10px 10px 10px; /* <--- ДОБАВЛЯЕМ ОТСТУП ВНУТРЬ (20px-сверху, 10-везде) */
    /* --- Конец исправления --- */
    
    border-radius: 4px;
    border: 1px solid #4a5568;
    box-shadow: 0 8px 15px rgba(0,0,0,0.3);
    
    /* ИСПРАВЛЕНИЕ: принудительно ставим блочное отображение */
    flex-direction: column !important;
}

/* Показываем при наведении на LI */
header.site-header .main-navigation #primary-menu ul li:hover > .sub-menu {
    display: block;
}

/* Элементы выпадающего списка (LI) */
header.site-header .main-navigation #primary-menu ul .sub-menu li {
    margin: 0 !important;
    width: 100%;
}

/* * Ссылки в выпадающем списке (A) 
 * ИСПРАВЛЕНИЕ: Добавлены !important для сброса .yellow-button
*/
header.site-header .main-navigation #primary-menu ul .sub-menu li a {
    display: block !important;
    width: 100% !important;
    background-color: transparent !important;
    color: #a0aec0 !important; 
    padding: 8px 15px !important; 
    border: none !important;
    text-align: left !important; 
    border-radius: 4px !important; 
    font-weight: 500 !important; 
    font-size: 15px !important; /* <--- Устанавливаем корректный размер */
    transform: none !important;
    box-shadow: none !important;
}

/* Ссылки в выпадающем списке при наведении */
header.site-header .main-navigation #primary-menu ul .sub-menu li a:hover {
    background-color: #4a5568 !important; /* <--- ИЗМЕНЕНО: Фон при наведении */
    color: #ffffff !important; /* <--- ИЗМЕНЕНО: Белый текст */
}

/* Стили для родительского пункта ("Top streamer") */
header.site-header .main-navigation #primary-menu ul li.menu-item-has-children > a {
    position: relative !important;
    padding-right: 25px !important; /* Место для стрелки */
}

/* Сама стрелка */
header.site-header .main-navigation #primary-menu ul li.menu-item-has-children > a::after {
    content: '▼';
    font-size: 10px;
    color: #f6e05e; /* <--- ИЗМЕНЕНО: Желтая стрелка */
    position: absolute;
    right: 8px; /* <--- ИЗМЕНЕНО: Позиция */
    top: 50%;
    transform: translateY(-50%);
    transition: all 0.2s ease;
}
/* Поворот стрелки при наведении */
header.site-header .main-navigation #primary-menu ul li.menu-item-has-children:hover > a::after {
    transform: translateY(-50%) rotate(180deg);
}
/* --- ИСПРАВЛЕНИЕ v1.10.3: Скрываем дублирующую стрелку (галочку) --- */
header.site-header .main-navigation #primary-menu .dropdown-menu-toggle {
    display: none !important;
}
/* --- (КОНЕЦ ИСПРАВЛЕНИЯ v1.10.2) --- */


/* --- Футер --- */
footer.site-footer {
    background-color: #2d3748; /* Темный фон футера */
    color: #a0aec0; /* Более тусклый текст */
    border-top: 1px solid #4a5568;
    margin-top: 40px;
}

/* Принудительно делаем фон темным (на случай конфликтов) */
body .site-footer {
    background-color: #2d3748 !important; 
    color: #a0aec0 !important;
}

/* --- НОВЫЕ СТИЛИ ФУТЕРА (v1.9.8) --- */
.site-footer .inside-footer {
    padding-top: 40px;
    padding-bottom: 30px;
}

/* Сетка из 3-х колонок */
.footer-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 30px;
    margin-bottom: 40px; /* Отступ сетки от копирайта */
}

.footer-block {
    font-size: 15px;
    line-height: 1.6;
}

/* Стили для виджетов и меню в футере */
.footer-block .widget-title {
    color: #ffffff;
    font-size: 18px;
    font-weight: 700;
    margin-top: 0;
    margin-bottom: 15px;
}

/* Колонка 1: Брендинг */
.footer-branding .site-title a {
    color: #ffffff;
    font-size: 22px;
    font-weight: 800;
    text-decoration: none;
}
.footer-branding .site-description {
    font-size: 15px;
    color: #a0aec0;
    margin-top: 10px;
}
/* Скрываем лого-картинку, если она есть, и показываем текст */
.footer-branding .custom-logo {
    display: none;
}
.footer-branding .site-title {
    display: block !important;
    margin: 0;
}


/* Колонка 2: Меню */
.footer-navigation .footer-menu-items {
    list-style: none;
    padding: 0;
    margin: 0;
}
.footer-navigation .footer-menu-items li {
    margin-bottom: 8px;
}
.footer-navigation .footer-menu-items a {
    color: #a0aec0;
    text-decoration: none;
    font-weight: 500;
    transition: color 0.2s ease;
}
.footer-navigation .footer-menu-items a:hover {
    color: #f6e05e;
    text-decoration: none;
}

/* Колонка 3: Текст (виджет) */
.footer-block-3 p {
    margin-top: 0;
}
.footer-block-3 a {
    color: #f6e05e;
}

/* Копирайт */
.footer-copyright {
    border-top: 1px solid #4a5568;
    padding-top: 30px;
}
.footer-copyright p {
    color: #a0aec0;
    font-size: 14px;
    margin: 0;
    text-align: center;
}
/* --- КОНЕЦ НОВЫХ СТИЛЕЙ ФУТЕРА --- */


/* --- 3. СТИЛИ ДЛЯ SINGLE.PHP (ОТДЕЛЬНАЯ ЗАПИСЬ) --- */

/* Область основного контента */
main.site-main {
    background-color: #2d3748;
    padding: 24px;
    border-radius: 8px;
}
/* Отключаем стили GP, если они есть */
.separate-containers .site-main {
    padding: 24px;
}
.separate-containers .site-content {
    background-color: transparent;
}

/* --- Хлебные крошки --- */
.custom-breadcrumbs-area { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 14px;
    margin-bottom: 20px;
    color: #a0aec0;
}
.custom-breadcrumbs-area a { /* <--- ИЗМЕНЕН КЛАСС */
    color: #a0aec0;
    text-decoration: none;
}
.custom-breadcrumbs-area a:hover { /* <--- ИЗМЕНЕН КЛАСС */
    color: #f6e05e;
}
.custom-breadcrumbs-area span { /* <--- ИЗМЕНЕН КЛАСС */
    padding: 0 5px;
}

/* --- Кастомный заголовок --- */
.custom-entry-header {
    background-color: #1a202c; /* Еще темнее */
    border-radius: 8px;
    padding: 24px;
    display: flex;
    align-items: center;
    margin-bottom: 30px;
}
/* Контейнер для аватара */
.custom-header-image {
    min-width: 250px; /* <--- ИСПРАВЛЕНИЕ РАЗМЕРА */
    width: 250px;      /* <--- ИСПРАВЛЕНИЕ РАЗМЕРА */
    height: 250px;     /* <--- ИСПРАВЛЕНИЕ РАЗМЕРА */
    border-radius: 50%;
    overflow: hidden;
    margin-right: 24px;
    border: 4px solid #4a5568;
    flex-shrink: 0; /* Не сжиматься */
}
/* Само изображение аватара */
.custom-header-image img.wp-post-image {
    width: 100%;
    height: 100%;
    object-fit: cover; /* Масштабирует и обрезает */
}

.custom-header-info {
    display: flex;
    flex-direction: column;
}
.custom-header-info .entry-title {
    font-size: 42px;
    line-height: 1.2;
    margin: 0 0 15px 0;
    color: #ffffff;
}
.custom-entry-meta {
    font-size: 15px;
    color: #a0aec0;
}
.custom-entry-meta .custom-meta-label {
    font-weight: 700;
    color: #e2e8f0;
}
.custom-entry-meta .custom-meta-author {
    margin-right: 20px;
}

/* --- Основной контент (текст статьи) --- */
.entry-content {
    font-size: 17px;
    line-height: 1.7;
}
.entry-content h2 {
    font-size: 30px;
    margin-top: 40px;
    margin-bottom: 20px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a5568;
}
.entry-content h3 {
    font-size: 24px;
    margin-top: 30px;
    margin-bottom: 15px;
}

/* --- Стилизация списков --- */
.entry-content ul,
.entry-content ol {
    margin-left: 20px;
    margin-bottom: 20px;
    list-style: none; /* Убираем стандартные маркеры */
    padding-left: 15px;
}
.entry-content ul li {
    position: relative;
    padding-left: 25px; /* Место для кастомного маркера */
    margin-bottom: 10px;
}
/* Кастомный маркер (желтый кружок) */
.entry-content ul li::before {
    content: '•';
    color: #f6e05e;
    font-size: 24px;
    font-weight: bold;
    position: absolute;
    left: 0;
    top: -4px;
}
.entry-content ol {
    list-style: decimal;
    padding-left: 30px;
}
.entry-content ol li {
     margin-bottom: 10px;
}

/* --- Стилизация таблиц --- */
.entry-content table {
    width: 100%;
    border-collapse: collapse; /* Убираем двойные рамки */
    margin-bottom: 20px;
    font-size: 16px;
    border: 1px solid #4a5568 !important; /* <--- РАМКА */
}
.entry-content table th,
.entry-content table td {
    padding: 12px 15px;
    text-align: left;
    border: 1px solid #4a5568 !important; /* <--- РАМКА */
}
.entry-content table th {
    background-color: #1a202c; /* Темный заголовок */
    color: #f6e05e; /* Желтый текст */
    font-weight: 700;
}
/* Чередование строк */
.entry-content table tr:nth-of-type(even) {
    background-color: #384252; /* Чуть светлее фон для четных строк */
}

/* --- Кастомная желтая кнопка --- */
.yellow-button {
    display: inline-block;
    background-color: #f6e05e;
    color: #1a202c;
    font-weight: 700;
    font-size: 16px;
    text-align: center;
    padding: 12px 24px;
    border-radius: 6px;
    text-decoration: none;
    border: none;
    transition: all 0.2s ease-in-out;
}
.yellow-button:hover {
    background-color: #faf089;
    color: #1a202c;
    text-decoration: none;
    transform: translateY(-2px);
    box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}

/* --- НОВЫЕ СТИЛИ KICK STREAM (v1.9.8) --- */
.custom-kick-stream {
    background-color: #1a202c; /* Такой же фон, как у хедера записи */
    border-radius: 8px;
    padding: 24px;
    margin-top: 30px;
    margin-bottom: 30px;
}
.custom-kick-stream h2 {
    font-size: 30px;
    margin-top: 0;
    margin-bottom: 15px;
    padding-bottom: 10px;
    border-bottom: 2px solid #4a5568;
}
.custom-kick-stream p {
    font-size: 17px;
    line-height: 1.7;
    color: #e2e8f0;
    margin-bottom: 20px;
}
.custom-kick-stream p:last-child {
    margin-bottom: 0;
    margin-top: 20px;
}

/* Контейнер для IFRAME (75% ширины, 4:3) */
.kick-iframe-container {
    width: 75%; /* <-- ИЗМЕНЕНО НА 75% */
    margin: 0 auto; /* Центрируем */
    position: relative;
    /* Пропорции 4:3 */
    padding-bottom: 56.25%; /* (3 / 4) * 75% (ширина) = 56.25% */
    height: 0;
    overflow: hidden;
    border-radius: 6px;
    border: 1px solid #4a5568;
}
.kick-iframe-container iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}
/* --- КОНЕЦ СТИЛЕЙ KICK STREAM --- */


/* --- Секция FAQ (ACF) --- */
.custom-faq-section { /* <--- ИЗМЕНЕН КЛАСС */
    margin-top: 40px;
    border-top: 2px solid #4a5568;
    padding-top: 30px;
}
.custom-faq-section h2 { /* <--- ИЗМЕНЕН КЛАСС */
    margin-top: 0;
    border-bottom: none;
}
.faq-item {
    margin-bottom: 20px;
    border-bottom: 1px solid #4a5568;
    padding-bottom: 20px;
}
.faq-question {
    font-size: 20px;
    font-weight: 700;
    color: #ffffff;
    margin: 0;
}
.faq-answer {
    font-size: 16px;
    color: #e2e8f0;
    margin-top: 10px;
}


/* --- 4. СТИЛИ ДЛЯ СЕТКИ (HOME.PHP / ARCHIVE.PHP) --- */

/* --- 
--- РЕШЕНИЕ ПРОБЛЕМЫ "ВОЙНЫ СТИЛЕЙ" ---
Мы делаем селекторы более КОНКРЕТНЫМИ, чтобы "победить"
настройки GeneratePress ("Separate Containers").
---
*/

/* --- Заголовок архива (h1) --- */
main.site-main .archive-title,
.custom-archive-header .page-title { /* <--- ДОБАВЛЕН СЕЛЕКТОР */
    font-size: 36px;
    color: #fff;
    margin-bottom: 20px;
    padding-bottom: 20px;
    border-bottom: 2px solid #4a5568;
}

/* --- Описание архива --- */
.custom-archive-header .archive-description {
    font-size: 17px;
    color: #a0aec0;
    margin-top: -10px;
    margin-bottom: 20px;
}

/* --- Контейнер сетки --- */
main.site-main .post-grid-container {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 колонки */
    gap: 20px;
    margin-bottom: 30px;
}

/* --- Карточка поста (сама <article>) --- */
/* * Принудительно отменяем стили "Separate Containers" от GP,
 * которые добавляют белый фон и отступы.
*/
.separate-containers main.site-main .post-grid-container .post-card {
    background-color: transparent !important;
    padding: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
}

/* Стили для самой карточки (ИЗМЕНЕНЫ СЕЛЕКТОРЫ v1.9.6) */
main.site-main .post-grid-container .post-card {
    background-color: #2d3748; /* Фон карточки */
    border-radius: 8px;
    overflow: hidden; /* Обрезаем углы у баннера */
    transition: all 0.3s ease;
    border: 1px solid #4a5568; /* Рамка */
    display: flex;
    flex-direction: column;
}
main.site-main .post-grid-container .post-card:hover {
    transform: translateY(-5px);
    box-shadow: 0 10px 20px rgba(0,0,0,0.4);
    border-color: #f6e05e;
}

/* 1. Баннер в карточке */
.post-card .post-card-banner { /* <--- ИЗМЕНЕН КЛАСС */
    height: 120px;
    background-color: #c53030; /* Красный баннер по умолчанию */
    background-size: cover;
    background-position: center;
    position: relative;
    border-bottom: 1px solid #4a5568;
}
/*
* Заполнитель для не-HOT постов, чтобы сетка была ровной
*/
.post-card .post-card-banner-placeholder {
    height: 120px;
}
.post-card .hot-badge { /* <--- ИЗМЕНЕН КЛАСС */
    position: absolute;
    top: 10px;
    right: 10px;
    background-color: #c53030;
    color: #fff;
    padding: 3px 8px;
    font-size: 12px;
    font-weight: 700;
    border-radius: 4px;
}

/* 2. Аватар (вылезает на баннер) */
.post-card .post-card-avatar { /* <--- ИЗМЕНЕН КЛАСС */
    width: 100px;
    height: 100px;
    border-radius: 50%;
    border: 4px solid #f6e05e; /* Желтая рамка */
    overflow: hidden;
    margin: -50px auto 0 auto; /* Выталкиваем наверх */
    position: relative; /* Чтобы был над баннером */
    background: #2d3748; /* Фон, если нет картинки */
}
.post-card .post-card-avatar img { /* <--- ИЗМЕНЕН КЛАСС */
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* 3. Контентная часть (под аватаром) */
.post-card .post-card-body { /* <--- ИЗМЕНЕН КЛАСС */
    padding: 15px 20px 20px 20px;
    text-align: center;
    display: flex;
    flex-direction: column;
    flex-grow: 1; /* Растягиваем, чтобы кнопка была внизу */
}

.post-card .entry-title { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 22px;
    font-weight: 700;
    color: #fff;
    margin: 0;
    line-height: 1.3;
}
.post-card .entry-title a { /* <--- ИЗМЕНЕН КЛАСС */
    color: #fff;
    text-decoration: none;
}
.post-card .entry-title a:hover { /* <--- ИЗМЕНЕН КЛАСС */
    color: #f6e05e;
    text-decoration: none;
}

.post-card .post-card-platform { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 14px;
    color: #a0aec0;
    margin-top: 5px;
}
.post-card .post-card-tags { /* <--- ИЗМЕНЕН КЛАСС */
    margin-top: 15px;
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: 8px;
    min-height: 30px; /* Резервируем место */
}
.post-card .post-card-tags span { /* <--- ИЗМЕНЕН КЛАСС */
    background-color: #4a5568;
    color: #e2e8f0;
    padding: 4px 10px;
    font-size: 13px;
    border-radius: 12px;
}

/* 4. Кнопка (прибита к низу) */
.post-card .read-more-button { /* <--- ИЗМЕНЕН КЛАСС */
    margin-top: auto; /* Прибивает к низу */
    padding-top: 15px; /* Отступ от тегов */
}
.post-card .yellow-button {
    font-size: 15px;
    width: 100%; /* На всю ширину карточки */
    padding: 10px;
}
/* --- (КОНЕЦ ИСПРАВЛЕНИЙ v1.9.6) --- */


/* --- Стили для Пагинации (1, 2, 3...) --- */
main.site-main .navigation.pagination {
	margin-top: 40px; /* Увеличен отступ */
	margin-bottom: 40px; /* Добавлен отступ */
	display: flex;
	justify-content: center;
}
.pagination .nav-links {
	display: flex;
	gap: 8px; /* Немного увеличено расстояние */
	font-family: Arial, sans-serif;
	list-style: none;
	padding: 0;
}
.pagination .nav-links .page-numbers {
	display: block;
	padding: 10px 15px;
	background-color: #2d3748; /* Фон темный */
	color: #a0aec0; /* Цвет текста серый */
	border: 1px solid #4a5568; /* Borde sutil */
	border-radius: 8px; /* Скругленные углы */
	text-decoration: none;
	transition: background-color 0.3s, color 0.3s;
	font-weight: bold;
}
.pagination .nav-links .page-numbers:hover {
	background-color: #f6e05e; /* Желтый фон */
	color: #2d3748; /* Темный текст */
	border-color: #f6e05e;
}
.pagination .nav-links .page-numbers.current {
	background-color: #f6e05e; /* Желтый фон */
	color: #2d3748; /* Темный текст */
	border-color: #f6e05e;
	font-weight: bold;
}

/* Стиль для точек (...) */
.pagination .nav-links .dots {
	background-color: transparent;
	border: none;
	color: #a0aec0;
	padding: 10px 0; /* Выравнивание по вертикали */
}

/* --- Стили для 404.PHP --- */
main.site-main .error-404-container { /* <--- ИЗМЕНЕН КЛАСС */
    text-align: center;
    padding: 40px 0;
}
.error-404-container h1 { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 80px;
    color: #f6e05e;
    margin: 0;
}
.error-404-container h2 { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 30px;
    color: #fff;
    margin-top: 0;
    margin-bottom: 20px;
}
.error-404-container p { /* <--- ИЗМЕНЕН КЛАСС */
    font-size: 18px;
    color: #a0aec0;
    margin-bottom: 30px;
}

/* --- Адаптивность (Медиа-запросы) --- */

/* Планшеты (до 900px) - 2 колонки */
@media (max-width: 900px) {
    main.site-main .post-grid-container {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* Телефоны (до 768px) - 1 колонка футер */
@media (max-width: 768px) {
    .footer-grid {
        grid-template-columns: 1fr; /* 1 колонка */
        gap: 25px;
    }
    .footer-block {
        text-align: center; /* Центрируем контент */
    }
    .footer-navigation .footer-menu-items {
        justify-content: center;
    }
}

/* Телефоны (до 600px) - 1 колонка */
@media (max-width: 600px) {
    main.site-main .post-grid-container {
        grid-template-columns: 1fr;
    }
    
    /* Уменьшаем заголовок в шапке записи */
    .custom-entry-header {
        flex-direction: column;
        text-align: center;
    }
    .custom-header-image {
        width: 150px;
        height: 150px;
        margin-right: 0;
        margin-bottom: 20px;
    }
    .custom-header-info .entry-title {
        font-size: 32px;
    }

    /* Адаптивность для Kick Stream */
    .kick-iframe-container {
        width: 100%; /* На 100% ширины на мобильных */
         /* (3 / 4) * 100% (ширина) = 75% */
        padding-bottom: 75%;
    }
    .custom-kick-stream {
        padding: 15px;
    }

    /* Скрываем меню в шапке (пока нет мобильного меню) */
    #primary-menu {
        display: none; 
    }
    /* Показываем индикатор языка */
    .header-controls {
        gap: 0;
    }

    /* Уменьшаем отступы в основном контенте */
    main.site-main,
    .separate-containers .site-main {
        padding: 15px;
    }
    .custom-entry-header {
        padding: 15px;
    }
}

 .custom-faq-section {
            /* Семейство шрифтов удалено, чтобы использовались шрифты вашего сайта.
              Вы можете раскомментировать, если это отдельная страница.
            */
            /* font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; */
            max-width: 800px;
            margin: 25px auto;
            padding: 20px 30px;
        }

        /* --- Заголовок H2 (стилизован под ваш скриншот) --- */
        .custom-faq-section h2 {
            text-align: center;
            margin-bottom: 25px;
            /* Цвет и шрифт из вашего скриншота */
            color: #fff; /* Коричневатый цвет */
            font-family: 'serif'; /* Шрифт с засечками, как у вас */
            font-size: 2.2em;
            font-weight: 600;
        }

        /* --- Стили для каждой пары Вопрос/Ответ --- */
        .custom-faq-section section > div {
            /* Разделитель, подходящий для темного фона */
            border-bottom: 1px solid #455a64; 
            padding: 18px 0;
        }

        .custom-faq-section section > div:last-child {
            border-bottom: none;
        }

        /* --- Стиль Вопроса (H3) --- */
        .custom-faq-section h3 {
            cursor: pointer;
            position: relative;
            padding-right: 30px; 
            user-select: none;
            font-size: 1.15em;
            font-weight: 600;
            /* Цвет неактивного вопроса (светло-серый) */
            color: #b0bec5; 
            margin: 0;
            transition: color 0.2s ease;
        }

        .custom-faq-section h3:hover {
            color: #40c4ff; /* Ярко-голубой при наведении */
        }

        /* --- Индикатор (+ / -) --- */
        .custom-faq-section h3::after {
            content: '+';
            position: absolute;
            right: 5px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 1.4em;
            font-weight: 700;
            color: #40c4ff; /* Ярко-голубой, как на скриншоте */
            transition: transform 0.3s ease, content 0.3s ease;
        }

        /* --- Контейнер Ответа (Сворачиваемый) --- */
        .custom-faq-section section > div > div {
            overflow: hidden;
            position: relative; /* Необходимо для градиента */
            transition: max-height 0.4s cubic-bezier(0.25, 0.8, 0.25, 1), 
                        color 0.4s ease-out;
        }

        /* --- ГЛАВНОЕ ИСПРАВЛЕНИЕ: Градиент (fade-out) ---
          Теперь он переходит в темный цвет, а не в белый
        */
        .custom-faq-section section > div > div::after {
            content: '';
            position: absolute;
            bottom: 0;
            left: 0;
            right: 0;
            height: 25px; 
            /* Градиент от прозрачного к фону вашего сайта 
              Я предполагаю, что фон это #2c303a (rgb(44, 48, 58))
              Если фон другой, просто замените значения rgba()
            */
            background: linear-gradient(
                to bottom,
                rgba(44, 48, 58, 0) 0%,   /* Прозрачный */
                rgba(44, 48, 58, 1) 100%  /* Фон вашего сайта */
            );
            pointer-events: none;
            transition: opacity 0.3s ease-in-out;
            opacity: 1; /* Виден в свернутом состоянии */
        }

        /* --- Текст Ответа (P) --- */
        .custom-faq-section p {
            margin: 0;
            padding-top: 10px;
            padding-right: 5px;
            line-height: 1.6;
            color: #fff; /* Цвет будет управляться через JS */
        }

        /* --- Стили Активного (Раскрытого) Состояния --- */

        /* Прячем градиент при раскрытии */
        .custom-faq-section section > div.active > div::after {
            opacity: 0;
        }

        /* Поворачиваем индикатор в '−' */
        .custom-faq-section section > div.active > h3::after {
            content: '−';
            transform: translateY(-50%) rotate(180deg);
        }

        /* Цвет активного вопроса */
        .custom-faq-section section > div.active > h3 {
            color: #40c4ff; /* Ярко-голубой */
        }

/* --- ОБЩИЕ СТИЛИ ДЛЯ ТАБЛИЦЫ (для красоты) --- */
/* Вы можете использовать свои стили, это просто для примера */
table {
  width: 100%;
  border-collapse: collapse; /* Убирает двойные рамки */
  margin-bottom: 20px;
  font-family: Arial, sans-serif;
  box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

table th, table td {
  padding: 12px 15px;
  border: 1px solid #ddd;
  text-align: left;
}

table th {
  background-color: #f4f4f4;
  font-weight: bold;
}

table tbody tr:nth-of-type(even) {
  background-color: #f9f9f9;
}

table tbody tr:hover {
  background-color: #f1f1f1;
}


/* --- ВАРИАНТ 1: ГОРИЗОНТАЛЬНАЯ ПРОКРУТКА (РЕКОМЕНДУЕТСЯ) --- */
/* Это лучший способ, если вы не можете изменить HTML.
  Он заставляет саму таблицу прокручиваться по горизонтали
  внутри себя на маленьких экранах.
*/
@media (max-width: 768px) {
  table {
    display: block; /* Меняем display с 'table' на 'block' */
    width: 100%; /* Убеждаемся, что блок таблицы занимает всю ширину */
    overflow-x: auto; /* Добавляем горизонтальную прокрутку */
    
    /* Плавная прокрутка на мобильных устройствах Apple */
    -webkit-overflow-scrolling: touch; 
  }
}