/*
 * Современная тема поверх styles.css.
 *
 * Отдельным файлом, а не правкой styles.css: тот — копия вёрстки образца,
 * и держать его нетронутым дешевле, чем потом искать, где своё, а где чужое.
 * Здесь только оформление: ни одного правила, которое меняло бы разметку,
 * порядок блоков или содержимое — SEO-часть страниц остаётся как была.
 */

:root {
    --m-bg: #f4f7fb;
    --m-surface: #ffffff;
    --m-line: #e8eef6;
    --m-text: #0f172a;
    /* Приглушённый серый: #64748b давал на светлом фоне страницы (#f4f7fb)
       лишь 4.47:1 — чуть ниже нормы WCAG AA (4.5:1). #475569 держит ~7:1
       и всё ещё явно «вторичный» рядом с почти чёрным основным текстом. */
    --m-muted: #475569;
    --m-primary: #2563eb;
    --m-primary-hover: #1d4ed8;
    --m-radius: 16px;
    --m-radius-sm: 12px;
    --m-shadow: 0 1px 2px rgba(15, 23, 42, .04), 0 8px 24px rgba(15, 23, 42, .05);
    --m-shadow-hover: 0 2px 6px rgba(15, 23, 42, .06), 0 16px 32px rgba(15, 23, 42, .10);
}

html, body {
    background-color: var(--m-bg);
    color: var(--m-text) !important;
    -webkit-font-smoothing: antialiased;
}

/* Заголовки — тем же гротеском, что и текст: узкий Oswald делал страницу
   тяжеловесной. */
h1, h2, h3, .h4, .h5, .h6 {
    font-family: "Inter", sans-serif;
    color: var(--m-text);
    letter-spacing: -0.02em;
}
h1 { font-weight: 800; }
h2, h3 { font-weight: 700; }

a { text-decoration: none; }
.default_link { color: var(--m-primary); }
.default_link:hover { color: var(--m-primary-hover); }

/* --- шапка: светлая, с мягкой линией снизу --- */
#header .navbar.th-tg-dark {
    background-color: var(--m-surface) !important;
    color: var(--m-text);
    border-bottom: 1px solid var(--m-line);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
    padding-top: .55rem;
    padding-bottom: .55rem;
}
#header .navbar .nav-link,
#header .navbar .search-toggle,
#header .navbar a {
    color: #334155 !important;
    font-weight: 500;
    border-radius: 10px;
}
#header .navbar .nav-link:hover,
#header .navbar .search-toggle:hover,
#header .navbar a:hover {
    color: var(--m-primary) !important;
    background-color: #f1f5f9;
}
#header .navbar .navbar-nav { gap: .15rem; }
#header .navbar .nav-link { padding: .45rem .75rem; }
/* Кнопка-гамбургер на телефоне — синяя, как кнопка «Поиск». Иконку в styles.css
   красит правило `.custom-toggler.navbar-toggler > i { color:#dadada }`, поэтому
   перебиваем её более специфичным селектором (с #header). */
#header .navbar-toggler.custom-toggler {
    background: var(--m-primary);
    border: none;
    border-radius: 10px;
    padding: .35rem .6rem;
}
#header .navbar-toggler.custom-toggler:hover {
    background: var(--m-primary-hover);
}
#header .navbar-toggler.custom-toggler:focus {
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
}
#header .navbar-toggler.custom-toggler > i {
    color: #fff;
}

/* Выпадающее меню каталога — на светлой шапке оно тоже светлое. */
.catalog-nav-menu {
    background-color: var(--m-surface);
    border: 1px solid var(--m-line);
    box-shadow: var(--m-shadow);
    padding: .35rem;
}
.catalog-nav-item { color: #334155 !important; }
.catalog-nav-item:hover,
.catalog-nav-item:focus {
    background-color: #f1f5f9;
    color: var(--m-primary) !important;
}

/* Боковое меню на телефоне — в тон шапке. */
.offcanvas.th-tg-dark { background-color: var(--m-surface) !important; }
.offcanvas.th-tg-dark .offcanvas-title { color: var(--m-text); }
.offcanvas.th-tg-dark .btn-close { filter: none; }

/* Логотип: цвета берутся из классов, чтобы одна и та же графика читалась
   и на светлой шапке, и на тёмном подвале. */
.logo-word { fill: #0f172a; }
.logo-accent { fill: var(--m-primary); }
.logo-tld { fill: #94a3b8; }
#footer .logo-word { fill: #ffffff; }
#footer .logo-accent { fill: #60a5fa; }
#footer .logo-tld { fill: #94a3b8; }

/* --- карточки --- */
.card {
    background-color: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius);
    box-shadow: 0 1px 2px rgba(15, 23, 42, .04);
}
.card-rounded { border-radius: var(--m-radius) !important; }
.shadow-sm { box-shadow: 0 1px 2px rgba(15, 23, 42, .04) !important; }
.is-shadow-hover { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
.is-shadow-hover:hover {
    transform: translateY(-2px);
    box-shadow: var(--m-shadow-hover) !important;
    border-color: #d9e5f5;
}
.card-footer,
.card-footer-custom {
    background-color: #fbfcfe;
    border-top: 1px solid var(--m-line) !important;
    color: var(--m-muted);
}
.card-preview {
    border: none;
    box-shadow: none;
    border-radius: 14px;
}
.b_radius_20 { border-radius: 14px; }

/* --- кнопки --- */
.btn {
    border-radius: var(--m-radius-sm);
    font-weight: 600;
    padding: .5rem 1rem;
}
.btn-primary,
.btn-telegram {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
}
.btn-primary:hover,
.btn-telegram:hover {
    background: var(--m-primary-hover);
    border-color: var(--m-primary-hover);
    color: #fff;
}
/* Белый текст на #16a34a — только 3.3:1 (провал WCAG AA). #15803d даёт ~5:1
   при белом тексте и остаётся насыщенно-зелёным. */
.btn-success {
    background: #15803d;
    border-color: #15803d;
}
.btn-success:hover {
    background: #166534;
    border-color: #166534;
}
.btn-outline-secondary {
    border-color: var(--m-line);
    color: #334155;
}
.btn-outline-secondary:hover {
    background: #f1f5f9;
    border-color: #cbd5e1;
    color: var(--m-text);
}

/* --- поля ввода --- */
.form-control,
.form-select,
.input-group-text {
    border-color: var(--m-line);
    padding-top: .6rem;
    padding-bottom: .6rem;
}
.form-control:focus,
.form-select:focus {
    border-color: #bfdbfe;
    box-shadow: 0 0 0 4px rgba(37, 99, 235, .12);
}
.input-group > :first-child { border-top-left-radius: var(--m-radius-sm); border-bottom-left-radius: var(--m-radius-sm); }
.input-group > :last-child { border-top-right-radius: var(--m-radius-sm); border-bottom-right-radius: var(--m-radius-sm); }

/* Форма поиска на главной — светлый «поисковый» блок вместо тёмной плашки. */
#search-form-main .card {
    background-color: var(--m-surface) !important;
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow) !important;
    border-color: transparent;
}
/* Иконка и поле — одним блоком, кнопка «поиск» отдельной таблеткой рядом. */
#search-form-main .input-group > * { border-radius: 0; }
#search-form-main .input-group > :first-child {
    border-top-left-radius: var(--m-radius-sm);
    border-bottom-left-radius: var(--m-radius-sm);
}
#search-form-main .input-group > :last-child {
    border-top-right-radius: var(--m-radius-sm);
    border-bottom-right-radius: var(--m-radius-sm);
}
#search-form-main .input-group-text {
    background: var(--m-surface) !important;
    border-right: 0 !important;
    padding-left: .9rem;
}
#search-form-main .form-control,
#search-form-main .form-select { border-left: 0 !important; }
#search-form-main .btn {
    margin-left: .5rem;
    padding-left: 1.35rem;
    padding-right: 1.35rem;
    border-radius: var(--m-radius-sm) !important;
}
#search-form-main .bg-top { background: var(--m-primary); border-radius: var(--m-radius); }

/* --- категории: иконка в мягкой плашке вместо цветной полосы слева.
       Полоса рисуется псевдоэлементом .card::before — гасим именно его,
       глифы icofont (i.color-N::before) при этом остаются на месте. --- */
.card::before { content: none !important; }

#catalog-categories .icon,
.card.is-shadow-hover .icon {
    background: #f1f5f9;
    border-radius: 14px;
    display: flex;
    align-items: center;
    justify-content: center;
    min-width: 54px;
    min-height: 54px;
    padding: 0 !important;
    margin-right: .25rem;
}
#catalog-categories .icon i { font-size: 1.5rem !important; }

/* --- вкладки разделов каталога --- */
.nav-pills .nav-link {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: 999px;
    color: #334155;
    font-weight: 500;
    padding: .45rem 1rem;
}
.nav-pills .nav-link:hover { border-color: #bfdbfe; color: var(--m-primary); }
.nav-pills .nav-link.active {
    background: var(--m-primary);
    border-color: var(--m-primary);
    color: #fff;
}

/* --- блок «Топ каналов по подписчикам» --- */
.bg-verified-block {
    background: linear-gradient(135deg, #2563eb, #1d4ed8) !important;
    border-color: transparent;
}
.verified-link-block { color: #fff; font-weight: 600; }
.verified-link-block:hover { color: #dbeafe; }

/* --- бейджи и пагинация --- */
.badge { border-radius: 999px; font-weight: 600; }
.pagination .page-link {
    border-radius: var(--m-radius-sm);
    border-color: var(--m-line);
    color: #334155;
    margin-right: .35rem;
}
.pagination .page-item.active .page-link {
    background: var(--m-primary);
    border-color: var(--m-primary);
}

/* --- таблицы админки --- */
.table > :not(caption) > * > * { border-color: var(--m-line); }
.table thead th { color: var(--m-muted); font-weight: 600; }

/* --- подвал --- */
#footer.th-tg-dark { background-color: #16213a !important; }
#footer .bg_body { background-color: rgba(255, 255, 255, .06); border-radius: var(--m-radius); }
#footer a { color: #cbd5e1 !important; }
#footer a:hover { color: #93c5fd !important; }

/* --- предупреждение и уведомление о cookie --- */
.card.attention { background: #fffbeb; border-color: #fde68a !important; }
.cookie-banner {
    border-radius: var(--m-radius);
    box-shadow: var(--m-shadow-hover);
}

/* --- страница ресурса --- */
.card.rounded-4 { border-radius: var(--m-radius) !important; }
.card.rounded-4 > img.rounded-4 { border-radius: var(--m-radius) !important; }
/* Счётчик аудитории — не «системный» alert, а спокойный чип. */
.alert-secondary {
    background: var(--m-surface);
    border: 1px solid var(--m-line);
    border-radius: var(--m-radius-sm);
    color: var(--m-text);
    font-weight: 600;
}
.average-rating-text { color: var(--m-muted); }

/* --- доступность: ссылки внутри текста ---
   Ссылка в абзаце прозы отличается не только цветом, но и подчёркиванием —
   иначе слабовидящий не отделит её от обычного текста (WCAG 1.4.1, аудит
   Lighthouse «link-in-text-block»). Карточки-заголовки, кнопки, пункты меню и
   хлебные крошки выделены положением, их не подчёркиваем. */
/* styles.css задаёт .default_link { text-decoration: none !important } —
   поэтому перебиваем тоже через !important и с большей специфичностью
   (селектор с элементом-предком + класс). Обычные ссылки прозы (без класса,
   напр. из admin-контента) !important не требуют. */
main p a {
    text-decoration: underline;
    text-underline-offset: 2px;
}
main p a.default_link,
main li a.default_link,
.meta-links a.default_link {
    text-decoration: underline !important;
    text-underline-offset: 2px;
}
main p a.default_link:hover,
main li a.default_link:hover,
.meta-links a.default_link:hover {
    text-decoration: underline !important;
}
/* Вкладки-«пилюли» и номера страниц — это li>a, но не проза: у них свои
   классы, подчёркивание им не нужно. */
.nav-pills .nav-link,
.pagination .page-link {
    text-decoration: none !important;
}