/* Типографіка контент-сторінок (Ф5, S5.1, 5-35). Скоуп СУВОРО .tapki-content — не chrome,
   не Flatsome. Єдиний вигляд тексту: заголовки, абзаци, списки, цитати, таблиці, зображення,
   embeds. Бренд: Montserrat (заголовки) / Open Sans (текст). Mobile-first ≤549px (MEMORY). */

.tapki-content {
  font-family: 'Open Sans', -apple-system, sans-serif;
  font-size: 16px;
  line-height: 1.7;
  color: var(--tapki-ink);
}
.tapki-content > :first-child { margin-top: 0; }
.tapki-content > :last-child { margin-bottom: 0; }

/* Заголовки */
.tapki-content h2 {
  font-family: 'Montserrat', sans-serif;
  font-size: 26px;
  font-weight: 700;
  line-height: 1.25;
  margin: 36px 0 16px;
  color: var(--tapki-ink);
}
.tapki-content h3 {
  font-family: 'Montserrat', sans-serif;
  font-size: 20px;
  font-weight: 600;
  line-height: 1.3;
  margin: 28px 0 12px;
  color: var(--tapki-ink);
}
.tapki-content h2:first-child,
.tapki-content h3:first-child { margin-top: 0; }

/* Абзаци і посилання */
.tapki-content p { margin: 0 0 16px; }
.tapki-content a { color: var(--tapki-green-tx); text-decoration: underline; text-underline-offset: 2px; }
.tapki-content a:hover { color: var(--tapki-green-tx,#2e7564); }

/* Списки */
.tapki-content ul,
.tapki-content ol { margin: 0 0 16px; padding-left: 24px; }
.tapki-content li { margin: 6px 0; }
.tapki-content ul li::marker { color: var(--tapki-green); }

/* Цитати */
.tapki-content blockquote {
  margin: 24px 0;
  padding: 14px 20px;
  border-left: 3px solid var(--tapki-green);
  background: var(--tapki-green-bg,#f1f9f7);
  border-radius: 0 8px 8px 0;
  font-style: italic;
  color: var(--tapki-ink2);
}
.tapki-content blockquote p:last-child { margin-bottom: 0; }

/* Зображення */
.tapki-content img { max-width: 100%; height: auto; border-radius: 8px; }
.tapki-content figure { margin: 24px 0; }
.tapki-content figcaption { font-size: 13px; color: var(--tapki-gray); text-align: center; margin-top: 8px; }

/* Звичайні таблиці контенту (виключаємо .tapki-compare — має свій стиль) */
.tapki-content table:not(.tapki-compare) { width: 100%; border-collapse: collapse; margin: 24px 0; font-size: 15px; }
.tapki-content table:not(.tapki-compare) th,
.tapki-content table:not(.tapki-compare) td { padding: 10px 14px; border: 1px solid var(--tapki-border); text-align: left; }
.tapki-content table:not(.tapki-compare) th { background: var(--tapki-gray-bg); font-weight: 600; }

/* Embeds — responsive video 16:9 */
.tapki-content .wp-block-embed__wrapper,
.tapki-content .responsive-embed { position: relative; padding-bottom: 56.25%; height: 0; overflow: hidden; margin: 24px 0; }
.tapki-content .wp-block-embed__wrapper iframe,
.tapki-content iframe[src*="youtube"],
.tapki-content iframe[src*="vimeo"] { position: absolute; top: 0; left: 0; width: 100%; height: 100%; border: 0; border-radius: 8px; }

/* Mobile ≤549px */
@media (max-width: 549px) {
  .tapki-content { font-size: 15.5px; }
  .tapki-content h2 { font-size: 22px; margin: 28px 0 12px; }
  .tapki-content h3 { font-size: 18px; }
}

/* ── Довжина рядка (фронт-аудит S5) ──────────────────────────────────────────────────────────
   Заміряно: головна й описи товарів 960px (~125 знаків у рядку), оферта 900 (~117),
   /logo-application/ 820 (~103), категорії й /shop/ 713 (~95). Норма читабельності — до ~65-70.
   Довгий рядок втомлює саме на довгих текстах: око губить початок наступного рядка.

   ⚠ Обмежуємо ТЕКСТ, а не контейнер. max-width на .tapki-content зламав би все, що всередині
   має бути на всю ширину: таблицю порівняння матеріалів, сітки, картинки, FAQ-акордеон.
   Тому ліміт живе на абзацах і списках — рівно там, де рядок і читають. */
.tapki-content p,
.tapki-content ul,
.tapki-content ol {
  max-width: 68ch;
}
/* Всередині таблиці й акордеона ліміт зайвий — там свої колонки й своя ширина. */
.tapki-content table p,
.tapki-content table ul,
.tapki-content table ol,
.tapki-faq p,
.tapki-faq ul,
.tapki-faq ol { max-width: none; }

/* ─── Стаття блогу: усі блоки однієї ширини по одній осі ───
   ⚠ Тут свідомо перебивається загальне обмеження рядка 68ch (див. вище): у статті власник
   попросив рівні краї всіх блоків, а 68ch дає 622px — вужче за фото й таблицю, через що
   блоки знову розійшлися б. 820px = ~86 знаків: довше за ідеальні 65-70, але це ціна
   рівних ліній, названа й прийнята.
   Знайдено заміром 2026-08-10: частина статті лежить у секції з полями 30px (абзаци й фото —
   885px), а заголовки й таблиця — поза нею (945px). Через це блоки виступали одні за одних
   на 30px з кожного боку, і текст читався як «зсунутий вліво» відносно решти.
   Зводимо все до однієї ширини й центруємо. 820px — це ~86 знаків у рядку, ближче до
   комфортних 60-80, ніж попередні 95. */
.single-post .entry-content .section { padding-left: 0 !important; padding-right: 0 !important; }
.single-post .entry-content > *,
.single-post .entry-content .section-content > *,
.single-post .entry-content .tapki-compare__wrap,
/* списки теж: у них своє обмеження 68ch вище по файлу, і без цього рядка вони лишались
   вужчими за решту на 116px (заміряно на 768: усі блоки 15…753, а ul 15…637). */
.single-post .entry-content ul,
.single-post .entry-content ol {
  max-width: 820px; margin-left: auto !important; margin-right: auto !important;
}

/* Вирівнювання по ширині з переносами (рішення власника 10.08): рваний правий край
   у довгій статті читався як недбалість. hyphens обовʼязково — без переносів justify
   розганяє пробіли між словами.
   На телефоні justify вимкнений: у вузькій колонці (≈45 знаків) дірки між словами
   стають помітнішими за сам ефект рівного краю. */
@media (min-width: 550px) {
  .single-post .entry-content p,
  .single-post .entry-content li {
    text-align: justify; hyphens: auto; -webkit-hyphens: auto;
  }
}