/*
Theme Name: Astra Child
Theme URI: https://wpastra.com/
Description: Дочерняя тема Astra
Author: Brainstorm Force
Author URI: https://wpastra.com/
Template: astra
Version: 1.0.0
*/

/* ======================================================= */
/* === ГЛОБАЛЬНЫЕ СТИЛИ САЙТА (ТЕМНАЯ ТЕМА) === */
/* ======================================================= */

/* Плавная прокрутка для UX */
html {
  scroll-behavior: smooth;
}

/* Главный контейнер (Темный фон) */
.site-content {
  background: linear-gradient(120deg, #0f172a, #1e293b); /* Темно-синий градиент */
  color: #e2e8f0; /* Светлый основной текст по умолчанию */
}

/* Шапка (делаем ее темной и слегка прозрачной) */
header.site-header {
  background: rgba(15, 23, 42, 0.95) !important; /* Темный фон */
  backdrop-filter: blur(8px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.2);
  transition: background 0.4s ease;
}
/* Цвет текста и ссылок в меню шапки */
header.site-header a, 
.site-header .main-header-menu .menu-item a {
    color: #e2e8f0 !important;
}

/* Фон главного экрана (герой-секция) - оставлен светлым, как в вашем исходнике */
.hero-section {
  background: linear-gradient(135deg, #00bfff, #0072ff);
  color: #fff;
  padding: 100px 20px;
  text-align: center;
  border-radius: 0 0 60px 60px;
}

/* Заголовки (Яркий акцентный цвет и тень) */
h1, h2, h3, h4 {
  font-family: "Poppins", 'Montserrat', sans-serif !important;
  font-weight: 700 !important;
  color: #38bdf8; /* Голубой акцент */
  text-shadow: 0 0 12px rgba(56, 189, 248, 0.7); /* Усиленная тень */
  transition: color 0.3s ease;
}
h1 { font-size: 2.2rem !important; }
h2 { font-size: 1.8rem !important; }

/* Основной текст на темном фоне */
.site-content p {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  font-size: 1rem !important;
  line-height: 1.8 !important;
  color: #e2e8f0 !important; /* Светлый цвет для текста на темном фоне */
}
/* Универсальный сброс для p (если у вас были светлые стили в другом месте) */
p {
  font-family: 'Inter', 'Roboto', sans-serif !important;
  line-height: 1.8 !important;
}

/* Ссылки на темном фоне */
.site-content a {
  color: #38bdf8; 
  text-decoration: none;
  transition: color 0.3s ease;
}
.site-content a:hover {
  color: #ffffff;
  text-decoration: underline;
}

/* Кнопки (Универсальные) */
button, .button, .wp-block-button__link, .button-primary, .ast-button {
  background: linear-gradient(90deg, #3b82f6, #06b6d4) !important;
  border: none !important;
  border-radius: 50px !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 12px 28px !important;
  transition: all 0.3s ease;
}
button:hover, .button:hover, .button-primary:hover, .ast-button:hover {
  transform: scale(1.05);
  box-shadow: 0 5px 15px rgba(6, 182, 212, 0.5);
}

/* Отступы секций */
section {
  padding-top: 80px;
  padding-bottom: 80px;
}

/* Анимация плавного появления */
.fade-in {
  opacity: 0;
  transform: translateY(30px);
  animation: fadeInUp 0.9s ease forwards;
}
@keyframes fadeInUp {
  to {
    opacity: 1;
    transform: translateY(0);
  }
}


/* === СТИЛИЗАЦИЯ СКРОЛЛБАРА (для современных браузеров) === */
::-webkit-scrollbar {
  width: 8px;
}
::-webkit-scrollbar-track {
  background: #1e293b;
}
::-webkit-scrollbar-thumb {
  background: #3b82f6;
  border-radius: 10px;
}
::-webkit-scrollbar-thumb:hover {
  background: #06b6d4;
}

/*
 * FINAL FIX: СЕТКА ДЛЯ ПОПУЛЯРНЫХ СТАТЕЙ (ВСТАВИТЬ В ДОПОЛНИТЕЛЬНЫЙ CSS)
 */

/* 1. КОНТЕЙНЕР-СЕТКА: Используем более широкое родительское условие */
.uagb-container-inner-blocks-wrap .popular-articles-grid {
    /* Максимально форсируем отображение сетки */
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)) !important;
    gap: 20px !important;
    width: 100% !important;
    margin: 30px 0 0 0 !important;
}

/* 2. ОТДЕЛЬНЫЙ БЛОК СТАТЬИ */
.uagb-container-inner-blocks-wrap .popular-article-block {
    /* Оформление блока */
    background: linear-gradient(145deg, #f9fafb, #f1f5f9) !important;
    border-radius: 16px !important;
    box-shadow: 0 6px 15px rgba(0, 0, 0, 0.15);
    padding: 25px;
    transition: all 0.3s ease;

    /* Сбрасываем возможные flex/width конфликты от UAGB */
    display: block !important;
    width: auto !important; 
    height: 100%; /* Для одинаковой высоты */
}

/* Эффект при наведении */
.uagb-container-inner-blocks-wrap .popular-article-block:hover {
    transform: translateY(-6px) scale(1.02);
    box-shadow: 0 12px 25px rgba(0, 0, 0, 0.2);
    background: linear-gradient(145deg, #e0f2fe, #bae6fd) !important;
}

/* 3. СТИЛИЗАЦИЯ ТЕКСТА */
.popular-article-block h3 a {
    color: #0369a1 !important;
    font-weight: 700 !important;
    text-decoration: none;
}

.popular-article-block p {
    color: #555 !important;
    /* Ограничение текста */
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
}