/*
 * blog.css — LeaDena
 * Підключається на всіх blog/* і price/* сторінках ПІСЛЯ style.css
 * Визначає змінні, яких немає в style.css, і виправляє кольори тексту
 *
 * <link rel="stylesheet" href="/assets/css/blog.css">
 */

/* ═══════════════════════════════════════════════════
   1. ЗМІННІ — розширення style.css
   ═══════════════════════════════════════════════════ */
:root {
  /* Псевдоніми, щоб старий style.css і нові сторінки говорили однією мовою */
  --clr-text-1:    var(--clr-text);       /* #1A1A2E — основний темний текст */
  --clr-bg-dark:   var(--clr-dark);       /* #0F1117 — темний фон секцій */

  /* Нові токени для blog/price (не перебивають style.css) */
  --border-radius-lg: var(--radius-md);   /* 16px */
  --font-sans:        var(--font-body);
}

/* ═══════════════════════════════════════════════════
   2. ВИПРАВЛЕННЯ: темні CTA-блоки
   Проблема: background: var(--clr-text-1) = темний фон,
   а всередині текст теж --clr-text-1 → невидимий.
   ═══════════════════════════════════════════════════ */

/* Фінальний CTA на price-сторінках */
.final-cta {
  background: var(--clr-dark) !important;
}
.final-cta__title {
  color: #ffffff !important;
}
.final-cta__sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* CTA-банер всередині статей блогу */
.article-cta {
  background: var(--clr-dark) !important;
}
.article-cta__title {
  color: #ffffff !important;
}
.article-cta__sub {
  color: rgba(255, 255, 255, 0.65) !important;
}

/* Sidebar promo-картка */
.sidebar-promo {
  background: var(--clr-dark) !important;
}
.sidebar-promo__title {
  color: #ffffff !important;
}
.sidebar-promo__text {
  color: rgba(255, 255, 255, 0.65) !important;
}
.sidebar-promo__price {
  color: rgba(255, 255, 255, 0.5) !important;
}

/* pkg-order dark card */
.pkg-order {
  background: var(--clr-bg) !important;
}

/* ═══════════════════════════════════════════════════
   3. ВИПРАВЛЕННЯ: блог — hero і мета
   ═══════════════════════════════════════════════════ */
.blog-hero__title {
  color: var(--clr-text) !important;
}
.blog-hero__meta {
  color: var(--clr-text-2) !important;
}

/* ═══════════════════════════════════════════════════
   4. ВИПРАВЛЕННЯ: тіло статті
   ═══════════════════════════════════════════════════ */
.article-body p {
  color: var(--clr-text-2);
}
.article-body h2,
.article-body h3 {
  color: var(--clr-text);
}
.article-body ul li,
.article-body ol li {
  color: var(--clr-text-2);
}
.article-body strong {
  color: var(--clr-text);
}

/* Callout */
.article-callout {
  background: color-mix(in srgb, var(--clr-accent) 7%, transparent);
  border-left: 3px solid var(--clr-accent);
  color: var(--clr-text);
}
.article-callout strong {
  color: var(--clr-accent);
}

/* ═══════════════════════════════════════════════════
   5. ВИПРАВЛЕННЯ: таблиця порівняння і карти послуг
   ═══════════════════════════════════════════════════ */
.compare-tbl th {
  color: var(--clr-text);
  background: var(--clr-bg-2);
}
.compare-tbl td {
  color: var(--clr-text-2);
}
.compare-tbl td:first-child {
  color: var(--clr-text);
}
.compare-tbl .row-price td {
  color: var(--clr-text);
}

/* Trust items */
.trust-item__title {
  color: var(--clr-text);
}
.trust-item__text {
  color: var(--clr-text-2);
}

/* Mini reviews */
.mini-review__name {
  color: var(--clr-text);
}
.mini-review__role {
  color: var(--clr-text-2);
}
.mini-review__text {
  color: var(--clr-text-2);
}

/* Service cards */
.art-svc-card__title {
  color: var(--clr-text);
}
.art-svc-card__desc {
  color: var(--clr-text-2);
}

/* Related cards */
.related-card__title {
  color: var(--clr-text);
}
.related-card__desc {
  color: var(--clr-text-2);
}

/* ═══════════════════════════════════════════════════
   6. ВИПРАВЛЕННЯ: pkg (пакети) на price-сторінках
   ═══════════════════════════════════════════════════ */
.pkg-name {
  color: var(--clr-text);
}
.pkg-for {
  color: var(--clr-text-2);
}
.pkg-price {
  color: var(--clr-text);
}
.pkg-currency,
.pkg-period,
.pkg-from {
  color: var(--clr-text-2);
}
.pkg-feature span {
  color: var(--clr-text-2);
}
.pkg-feature--muted span {
  color: var(--clr-text-muted);
}
.pkg-order__title {
  color: var(--clr-text);
}
.pkg-order__sub {
  color: var(--clr-text-2);
}
.pkg-order__key {
  color: var(--clr-text-2);
}
.pkg-order__val {
  color: var(--clr-text);
}
.pkg-order__val--accent {
  color: var(--clr-accent);
}
.pkg-order__price-num {
  color: var(--clr-text);
}
.pkg-order__price-cur {
  color: var(--clr-text-2);
}
.pkg-order__price-from {
  color: var(--clr-text-muted);
}

/* ═══════════════════════════════════════════════════
   7. ВИПРАВЛЕННЯ: process steps / trust strip
   ═══════════════════════════════════════════════════ */
.process-step__title,
.article-step__title {
  color: var(--clr-text);
}
.process-step__text,
.article-step__text {
  color: var(--clr-text-2);
}

/* ═══════════════════════════════════════════════════
   8. ВИПРАВЛЕННЯ: error cards (Google Ads стаття)
   ═══════════════════════════════════════════════════ */
.error-card__title {
  color: var(--clr-text);
}
.error-card__problem,
.error-card__fix {
  color: var(--clr-text-2);
}
.error-card__fix-label {
  color: var(--clr-accent);
}

/* ═══════════════════════════════════════════════════
   9. ВИПРАВЛЕННЯ: budget table
   ═══════════════════════════════════════════════════ */
.budget-table th {
  color: var(--clr-text);
  background: var(--clr-bg-2);
}
.budget-table td {
  color: var(--clr-text-2);
}

/* ═══════════════════════════════════════════════════
   10. TOC sidebar
   ═══════════════════════════════════════════════════ */
.toc__title {
  color: var(--clr-text);
}
.toc__link {
  color: var(--clr-text-2);
}
.toc__link:hover,
.toc__link.active {
  color: var(--clr-accent);
  background: var(--clr-bg);
  border-left-color: var(--clr-accent);
}

/* ═══════════════════════════════════════════════════
   11. Section labels і заголовки (price + blog)
   ═══════════════════════════════════════════════════ */
.section-title {
  color: var(--clr-text);
}
.section-subtitle {
  color: var(--clr-text-2);
}

/* ═══════════════════════════════════════════════════
   12. Breadcrumb
   ═══════════════════════════════════════════════════ */
.breadcrumb {
  color: var(--clr-text-2);
}
.breadcrumb a {
  color: var(--clr-text-2);
}
.breadcrumb__current {
  color: var(--clr-text);
}