/* Глобальные стили сайта raudonis.ru (тёмная тема, шрифты Outfit + DM Sans). */

:root {
    --bg: #0f1319;
    --bg-card: rgba(255,255,255,0.04);
    --text: #e8eaed;
    --text-muted: #7a8599;
    --accent-blue: #1579fb;
    --accent-green: #90fc9f;
    --gradient: linear-gradient(135deg, #1579fb 0%, #90fc9f 100%);
    --font-display: 'Outfit', sans-serif;
    --font-body: 'DM Sans', sans-serif;
    --max-w: 1140px;
    --max-w-text: 760px;
}

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    background: var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    -webkit-font-smoothing: antialiased;
    line-height: 1.6;
}

.site-main {
    min-height: 60vh;
}

/* ===== Типографика контента (блог, лендинги) ===== */
.content {
    max-width: var(--max-w-text);
    margin: 0 auto;
    padding: 48px 24px;
}

.content h1,
.content h2,
.content h3,
.content h4 {
    font-family: var(--font-display);
    color: var(--text);
    line-height: 1.25;
    margin: 1.6em 0 0.6em;
}
.content h1 { font-size: 40px; margin-top: 0; font-weight: 700; }
.content h2 { font-size: 28px; font-weight: 600; }
.content h3 { font-size: 22px; font-weight: 600; }

.content p { margin: 0 0 1em; }
.content a { color: var(--accent-blue); text-decoration: underline; text-underline-offset: 3px; }
.content a:hover { color: var(--accent-green); }

.content ul, .content ol { margin: 0 0 1em 1.2em; padding: 0; }
.content li { margin: 0.3em 0; }

.content blockquote {
    border-left: 3px solid var(--accent-blue);
    margin: 1.5em 0;
    padding: 0.2em 0 0.2em 1em;
    color: var(--text-muted);
    font-style: italic;
}

.content code {
    background: rgba(255,255,255,0.06);
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.9em;
}

.content img {
    max-width: 100%;
    height: auto;
    border-radius: 8px;
    display: block;
    margin: 1.4em auto;
}

.content time {
    color: var(--text-muted);
    font-size: 14px;
}

.content .lead {
    font-size: 19px;
    color: var(--text-muted);
    margin-bottom: 1.5em;
}

.content .cover {
    width: 100%;
    margin: 1.5em 0;
}

/* ===== Хлебные крошки ===== */
.breadcrumbs {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: var(--text-muted);
    margin-bottom: 24px;
}
.breadcrumbs a {
    color: var(--text-muted);
    text-decoration: none;
}
.breadcrumbs a:hover { color: var(--accent-blue); }
.breadcrumbs__sep { opacity: 0.5; }
.breadcrumbs__current { color: var(--text); }

/* ===== Список статей в блоге ===== */
/* ul.article-list — селектор с элементом, чтобы перебить .content ul (margin-left: 1.2em). */
ul.article-list {
    list-style: none;
    padding: 0;
    margin: 0;
    display: grid;
    gap: 24px;
}

.article-card {
    background: var(--bg-card);
    border: 1px solid rgba(255,255,255,0.06);
    border-radius: 12px;
    overflow: hidden;
    transition: border-color 0.2s, transform 0.2s;
    display: grid;
    grid-template-columns: 220px 1fr;
    align-items: center;
    gap: 0;
}
.article-card:hover {
    border-color: rgba(255,255,255,0.16);
    transform: translateY(-2px);
}
.article-card__cover-link {
    display: block;
    line-height: 0;
    padding: 14px 0 14px 14px;
}
.article-card__cover {
    display: block;
    width: 100%;
    aspect-ratio: 16 / 9;
    object-fit: cover;
    border-radius: 8px;
}
.article-card__body { padding: 20px 24px; }

/* Если обложки нет — карточка одной колонкой во всю ширину. */
.article-card:not(:has(.article-card__cover-link)) {
    grid-template-columns: 1fr;
}

/* Мобильный — обложка сверху, текст под ней. */
@media (max-width: 600px) {
    .article-card {
        grid-template-columns: 1fr;
    }
    .article-card__cover-link {
        padding: 14px 14px 0;
    }
}
.article-card a.article-card__title {
    font-family: var(--font-display);
    font-size: 22px;
    font-weight: 600;
    color: var(--text);
    text-decoration: none;
    display: block;
    margin-bottom: 8px;
}
.article-card a.article-card__title:hover { color: var(--accent-blue); }
.article-card p { margin: 0 0 8px; color: var(--text-muted); font-size: 15px; }
.article-card time { color: var(--text-muted); font-size: 13px; }

/* ============================================================== */
/* СВЕТЛАЯ ТЕМА (раздел калькуляторов /calc и вложенные)          */
/* Перекрашивает фон страницы, шапку и подвал. Разметка шапки/    */
/* подвала остаётся одна (см. _header.html / _footer.html) —      */
/* меняются только цвета через CSS-переменные + точечные правки   */
/* там, где цвета зашиты напрямую (дропдаун, бордеры, соцкнопки). */
/* Активируется body-классом theme-light (см. base.html).         */
/* ============================================================== */
body.theme-light {
    background: #f5f6fa;
    color: #1a1d2e;
}

/* --- Шапка --- */
.theme-light .dr-header {
    --bg: #f8f9fc;
    --bg-card: rgba(0,0,0,0.04);
    --text: #1a1d2e;
    --text-muted: #6b7085;
    --accent-blue: #3b7ddd;
    --font-display: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
    border-bottom: 1px solid #e2e4ed;
}
.theme-light .dr-header__dropdown-menu {
    background: #ffffff;
    border: 1px solid #e2e4ed;
    box-shadow: 0 4px 16px rgba(0,0,0,0.08);
}
.theme-light .dr-header__dropdown-item:hover { background: rgba(0,0,0,0.05); }
.theme-light .dr-header__mobile-link { border-bottom-color: rgba(0,0,0,0.08); }

/* --- Подвал --- */
.theme-light .dr-footer {
    --bg-footer: #f8f9fc;
    --text: #1a1d2e;
    --text-muted: #6b7085;
    --accent-blue: #3b7ddd;
    --font-display: 'Manrope', sans-serif;
    --font-body: 'Manrope', sans-serif;
    border-top: 1px solid #e2e4ed;
}
.theme-light .dr-footer__social { background: rgba(0,0,0,0.05); }
.theme-light .dr-footer__social:hover { background: rgba(0,0,0,0.1); }
.theme-light .dr-footer__bottom { border-top-color: rgba(0,0,0,0.08); }

/* Логотип — единая графика в почти белом цвете (читается на тёмном фоне).
   В светлой теме инвертируем в чёрный, иначе на белом он сливается. */
.theme-light .dr-header__logo img,
.theme-light .dr-footer__logo img { filter: invert(1); }