/*
Theme Name: Avtodrom (Blocksy Child)
Theme URI: https://carhelp.org.ua/
Description: Дочірня тема Blocksy у стилі «Автодром»: графітова шапка і футер, червоний акцент, світлі картки статей зі скругленням 12px. Батьківська тема Blocksy лишається основою - вся механіка, налаштування Customizer і плагіни працюють як раніше.
Author: CarHelp
Template: blocksy
Version: 1.4.0
Requires at least: 6.0
Tested up to: 6.9
Text Domain: blocksy-child-avtodrom
*/

/* ============================================================
   1. ПАЛІТРА І ТИПОГРАФІКА
   Blocksy будує все оформлення на 8 змінних палітри. Перебиваємо
   їх - і акцент, посилання, кнопки, межі підхоплюються всюди.
   ============================================================ */

:root {
  --theme-palette-color-1: #E24B4A;   /* акцент: посилання, кнопки, бейджі */
  --theme-palette-color-2: #A32D2D;   /* акцент при наведенні */
  --theme-palette-color-3: #23272C;   /* основний текст */
  --theme-palette-color-4: #1A1D21;   /* заголовки */
  --theme-palette-color-5: #E2E0D8;   /* межі; світлий текст на темному */
  --theme-palette-color-6: #F7F5EF;   /* м'який фон блоків */
  --theme-palette-color-7: #F1EFE8;   /* фон сторінки */
  --theme-palette-color-8: #FFFFFF;   /* картки, контент */

  /* власні токени макета - використовуються нижче */
  --crh-graphite-900: #1A1D21;
  --crh-graphite-800: #23272C;
  --crh-graphite-700: #2E3339;
  --crh-accent: #E24B4A;
  --crh-accent-dark: #A32D2D;
  --crh-accent-bg: #FCEBEB;
  --crh-page: #F1EFE8;
  --crh-border: #E2E0D8;
  --crh-muted: #6E6D67;
  --crh-on-dark: #F1EFE8;
  --crh-on-dark-muted: #B4B2A9;
  --crh-radius: 12px;

  --theme-font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --theme-font-size: 16px;
  --theme-line-height: 1.6;
  --theme-content-spacing: 1.5em;
  --theme-normal-container-max-width: 1080px;
  --theme-narrow-container-max-width: 760px;
  --theme-button-font-weight: 500;
  --theme-button-font-size: 14px;
  --theme-border-radius: var(--crh-radius);
}

/* 🔴 Blocksy окремим правилом [data-prefix="single_page"] фарбує СТОРІНКИ
   у palette-8 (білий), а записи й архіви лишає на palette-7 (бежевий).
   Через це сторінка-каталог стояла на білому, а весь інший сайт - на
   бежевому, і білі картки на білому фоні втрачали контур. Зводимо до
   одного фону. Заміряно: body bg на /golovna/ = #FFF, на статті = #F1EFE8. */
body[data-prefix="single_page"] {
  background-color: var(--theme-palette-color-7);
}

/* ============================================================
   2. ШАПКА - графітова, без КАПСУ в меню
   ============================================================ */

[data-header*="type-1"] .ct-header [data-row*="top"] {
  --height: 40px;
  background-color: var(--crh-graphite-800);
}

[data-header*="type-1"] .ct-header [data-row*="middle"] {
  --height: 64px;
  background-color: var(--crh-graphite-900);
}

/* основне меню: звичайний регістр, 14px, приглушений сірий */
[data-header*="type-1"] .ct-header [data-id="menu"] > ul > li > a,
[data-header*="type-1"] .ct-header [data-id="menu-secondary"] > ul > li > a {
  --theme-font-weight: 500;
  --theme-text-transform: none;
  --theme-font-size: 14px;
  --theme-line-height: 1.3;
  --theme-link-initial-color: var(--crh-on-dark-muted);
  --theme-link-hover-color: var(--crh-on-dark);
}

[data-header*="type-1"] .ct-header [data-id="menu-secondary"] > ul > li > a {
  --theme-font-size: 13px;
}

/* індикатор активного пункту - акцент */
[data-header*="type-1"] .ct-header [data-id="menu"],
[data-header*="type-1"] .ct-header [data-id="menu-secondary"] {
  --menu-indicator-hover-color: var(--crh-accent);
  --menu-indicator-active-color: var(--crh-accent);
}

/* випадаюче підменю */
[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu,
[data-header*="type-1"] .ct-header [data-id="menu-secondary"] .sub-menu {
  --dropdown-background-color: var(--crh-graphite-800);
  --theme-border-radius: var(--crh-radius);
  --dropdown-divider: 1px solid rgba(255, 255, 255, 0.07);
  --theme-box-shadow: 0 12px 28px rgba(26, 29, 33, 0.35);
}

[data-header*="type-1"] .ct-header [data-id="menu"] .sub-menu .ct-menu-link,
[data-header*="type-1"] .ct-header [data-id="menu-secondary"] .sub-menu .ct-menu-link {
  --theme-font-size: 13px;
  --theme-text-transform: none;
  --theme-link-initial-color: var(--crh-on-dark-muted);
  --theme-link-hover-color: var(--crh-on-dark);
}

/* іконки пошуку і соцмереж на темному тлі */
[data-header*="type-1"] [data-id="search"],
[data-header*="type-1"] [data-id="socials"].ct-header-socials [data-color="custom"] {
  --theme-icon-color: var(--crh-on-dark-muted);
  --theme-icon-size: 15px;
}

[data-header*="type-1"] [data-id="socials"].ct-header-socials [data-color="custom"] {
  --background-color: rgba(255, 255, 255, 0.07);
  --background-hover-color: var(--crh-accent);
}

[data-header*="type-1"] [data-id="search"] .ct-label {
  --theme-text-transform: none;
  --theme-font-weight: 500;
  --theme-font-size: 13px;
}

/* логотип: більший і не втрачається на темному */
[data-header*="type-1"] .ct-header [data-id="logo"] .site-logo-container {
  --logo-max-height: 28px;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-title {
  --theme-link-initial-color: var(--crh-on-dark);
  --theme-font-size: 20px;
  --theme-font-weight: 600;
}

[data-header*="type-1"] .ct-header [data-id="logo"] .site-description {
  --theme-text-color: var(--crh-on-dark-muted);
}

/* мобільна панель */
[data-header*="type-1"] [data-id="trigger"] {
  --toggle-button-color: var(--crh-on-dark);
}

/* повністю непрозора панель: при 0.98 крізь меню проступали обкладинки
   і заголовки сторінки, і панель читалась як брудна */
[data-header*="type-1"] #offcanvas .ct-panel-inner {
  background-color: var(--crh-graphite-900);
}

[data-header*="type-1"] [data-id="mobile-menu"] {
  --theme-font-size: 17px;
  --theme-font-weight: 600;
  --theme-link-initial-color: var(--crh-on-dark);
}

/* ============================================================
   3. HERO / ЗАГОЛОВОК СТОРІНКИ - графітовий блок як у макеті

   ВАЖЛИВО про специфічність: Blocksy частину стилів друкує інлайном
   у <body>, тобто ПІСЛЯ нашого файла. Правило з однаковою
   специфічністю тоді програє. Тому всі селектори тут починаються з
   body[data-prefix] - це дає на одиницю більшу специфічність, і
   порядок підключення вже не має значення.
   ============================================================ */

body[data-prefix] .hero-section[data-type="type-2"] {
  background-color: var(--crh-graphite-800);
  background-image: none;
}

body[data-prefix] .hero-section[data-type="type-2"] > figure {
  background-color: var(--crh-graphite-800);
}

/* без обкладинки блок не має розпирати екран на пів висоти */
body[data-prefix] .hero-section[data-type="type-2"] > [class*="ct-container"] {
  --min-height: 170px;
  --container-padding: 38px 0;
}

body[data-prefix] .hero-section[data-type="type-2"] .entry-header .page-title,
body[data-prefix] .hero-section[data-type="type-2"] .entry-header .page-description,
body[data-prefix] .hero-section[data-type="type-2"] .entry-header .entry-meta {
  --theme-heading-color: var(--crh-on-dark);
  --theme-text-color: var(--crh-on-dark-muted);
  --theme-link-initial-color: var(--crh-on-dark-muted);
  --theme-link-hover-color: var(--crh-on-dark);
  color: var(--crh-on-dark);
}

body[data-prefix] .hero-section[data-type="type-2"] .entry-header .page-title {
  color: var(--crh-on-dark);
}

/* світлий варіант hero (type-1): заголовок темний, мета - приглушений сірий.
   Blocksy за замовчуванням фарбує мету у palette-5 (світлий) - на бежевому
   фоні вона ставала невидимою. */
body[data-prefix] .hero-section[data-type="type-1"] .page-title {
  --theme-heading-color: var(--crh-graphite-900);
  color: var(--crh-graphite-900);
}

body[data-prefix] .hero-section[data-type="type-1"] .entry-header .entry-meta,
body[data-prefix] .hero-section[data-type="type-1"] .entry-header .page-description {
  --theme-text-color: var(--crh-muted);
  --theme-link-initial-color: var(--crh-muted);
  --theme-link-hover-color: var(--crh-accent-dark);
  color: var(--crh-muted);
}

body[data-prefix] .hero-section[data-type="type-1"] .entry-header .entry-meta a {
  color: var(--crh-muted);
}

body[data-prefix] .hero-section[data-type="type-1"] .entry-header .entry-meta a:hover {
  color: var(--crh-accent-dark);
}

/* блок «Зараз популярно» від Blocksy Companion - у палітру макета */
body[data-prefix] .ct-trending-block {
  background-color: #FFFFFF;
  background-image: none;
  border-top: 1px solid var(--crh-border);
  border-bottom: 1px solid var(--crh-border);
}

body[data-prefix] .ct-trending-block .entry-title,
body[data-prefix] .ct-trending-block a {
  --theme-link-initial-color: var(--crh-graphite-800);
  --theme-link-hover-color: var(--crh-accent-dark);
}

/* Заголовок сторінки і заголовок статті - одна типографіка.
   Було: стаття 40px/1.22/600 (наше правило), сторінка 30px/1.5/700
   (дефолт Blocksy) - каталог через це виглядав чужим. */
body[data-prefix="single_blog_post"] .entry-header .page-title,
body[data-prefix="single_page"] .entry-header .page-title {
  --theme-font-weight: 600;
  --theme-line-height: 1.22;
  --theme-font-size: 40px;
}

@media (max-width: 690px) {
  body[data-prefix="single_blog_post"] .entry-header .page-title,
  body[data-prefix="single_page"] .entry-header .page-title {
    --theme-font-size: 30px;
  }
}

/* лід сторінки Blocksy ховає на мобільному (клас ct-hidden-sm) - на
   каталозі це знімало єдиний рядок, що пояснює, що це за сторінка */
@media (max-width: 689.98px) {
  body[data-prefix="single_page"] .entry-header .page-description.ct-hidden-sm {
    display: block !important;
  }
}

body[data-prefix] .entry-header .entry-meta {
  --theme-text-transform: none;
  --theme-font-weight: 500;
  --theme-font-size: 13px;
}

/* ============================================================
   4. КАРТКИ СТАТЕЙ - адаптивна сітка, скруглення, тонка межа
   ============================================================ */

/* 🔴 auto-fit схлопує порожні треки: у рубриці з ОДНІЄЮ статтею картка
   розтягувалась на всі 1080px і фото ставало на пів екрана. auto-fill
   тримає три треки завжди, тож одна картка лишається карткою. */
body[data-prefix] .entries {
  --grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  --columns-gap: 20px;
}

body[data-prefix] .entry-card {
  background-color: #FFFFFF;
  border: 1px solid var(--crh-border);
  border-radius: var(--crh-radius);
  overflow: hidden;
  --theme-box-shadow: none;
  box-shadow: none;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
  display: flex;
  flex-direction: column;
}

/* фото - першим елементом картки, як у картках каталогу.
   Blocksy виводить порядок «бейдж - заголовок - фото - опис - мета»,
   і через різну довжину заголовків фото в одному ряду починались на
   різній висоті. order:-1 ставить медіа наверх; від'ємні маргіни
   гасять padding:30px картки, щоб фото було на всю ширину. */
body[data-prefix] .entry-card .ct-media-container {
  order: -1;
  margin: -30px -30px 22px;
}

/* мета - завжди до низу картки, інакше картки з коротким заголовком
   лишали різний відступ під текстом */
body[data-prefix] .entry-card .entry-meta:last-child {
  margin-top: auto;
}

body[data-prefix] .entry-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26, 29, 33, 0.10);
}

body[data-prefix] .entry-card .ct-media-container,
body[data-prefix] .entry-card .ct-media-container img {
  border-radius: 0;
}

/* одна пропорція обкладинки з картками каталогу (там було 16:9,
   в архіві - 4:3, ряди через це читались по-різному).
   🔴 !important обов'язковий: Blocksy друкує style="aspect-ratio: 4/3"
   ІНЛАЙНОМ на самому <img>, і звичайне правило програє (заміряно). */
body[data-prefix] .entry-card .ct-media-container img {
  aspect-ratio: 16 / 9 !important;
  height: auto !important;
  object-fit: cover;
}

body[data-prefix] .entry-card .entry-title {
  --theme-font-size: 18px;
  --theme-font-weight: 600;
  --theme-line-height: 1.32;
  --theme-text-transform: none;
}

body[data-prefix] .entry-card:hover .entry-title a {
  color: var(--crh-accent-dark);
}

body[data-prefix] .entry-card .entry-meta {
  --theme-font-size: 12.5px;
  --theme-font-weight: 500;
  --theme-text-transform: none;
  --theme-text-color: var(--crh-muted);
  --theme-link-initial-color: var(--crh-muted);
  --theme-link-hover-color: var(--crh-accent-dark);
}

/* бейдж рубрики - пастельна плашка замість звичайного посилання */
body[data-prefix] .entry-card .meta-categories a {
  display: inline-block;
  padding: 3px 9px;
  border-radius: var(--crh-radius);
  font-size: 11px;
  font-weight: 500;
  text-transform: none;
  background: var(--crh-accent-bg);
  color: var(--crh-accent-dark);
  transition: filter 0.15s ease;
}

body[data-prefix] .entry-card .meta-categories a:hover {
  filter: brightness(0.95);
  color: var(--crh-accent-dark);
}

/* колір за типом рубрики - як у макеті (сенс, а не декор) */
body[data-prefix] .entry-card .meta-categories a.ct-term-4,
body[data-prefix] .entry-card .meta-categories a.ct-term-8,
body[data-prefix] .entry-card .meta-categories a.ct-term-12,
body[data-prefix] .entry-card .meta-categories a.ct-term-16 { background: #FAECE7; color: #993C1D; }

body[data-prefix] .entry-card .meta-categories a.ct-term-5,
body[data-prefix] .entry-card .meta-categories a.ct-term-9,
body[data-prefix] .entry-card .meta-categories a.ct-term-13,
body[data-prefix] .entry-card .meta-categories a.ct-term-17 { background: #E6F1FB; color: #0C447C; }

body[data-prefix] .entry-card .meta-categories a.ct-term-6,
body[data-prefix] .entry-card .meta-categories a.ct-term-10,
body[data-prefix] .entry-card .meta-categories a.ct-term-14,
body[data-prefix] .entry-card .meta-categories a.ct-term-18 { background: #E1F5EE; color: #0F6E56; }

body[data-prefix] .entry-card .meta-categories a.ct-term-3,
body[data-prefix] .entry-card .meta-categories a.ct-term-7,
body[data-prefix] .entry-card .meta-categories a.ct-term-11,
body[data-prefix] .entry-card .meta-categories a.ct-term-15 { background: #FAEEDA; color: #854F0B; }

body[data-prefix] .entry-card .entry-excerpt {
  --theme-font-size: 14.5px;
  --theme-text-color: var(--crh-muted);
}

/* ============================================================
   5. ТИПОГРАФІКА СТАТТІ + БЛОКИ GUTENBERG
   ============================================================ */

body[data-prefix] .entry-content {
  font-size: 16px;
}

body[data-prefix] .entry-content h2 {
  position: relative;
  padding-left: 16px;
  font-size: 24px;
  font-weight: 600;
  line-height: 1.25;
}

body[data-prefix] .entry-content h2::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.18em;
  bottom: 0.18em;
  width: 4px;
  border-radius: 2px;
  background: var(--crh-accent);
}

body[data-prefix] .entry-content h3 {
  font-size: 19px;
  font-weight: 600;
  line-height: 1.3;
}

/* всередині обкладинки (hero) заголовок центрований і на темному:
   акцентна смужка тут зайва, а колір має бути світлим */
body[data-prefix] .entry-content .wp-block-cover h2,
body[data-prefix] .entry-content h2.has-text-align-center {
  padding-left: 0;
}

body[data-prefix] .entry-content .wp-block-cover h2::before,
body[data-prefix] .entry-content h2.has-text-align-center::before {
  content: none;
}

body[data-prefix] .entry-content .wp-block-cover :is(h1, h2, h3, p) {
  color: #FFFFFF;
}

body[data-prefix] .entry-content a:not(.wp-block-button__link) {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 2px;
}

/* заголовок-посилання (картки, підбірки) - це не інлайн-посилання в тексті:
   без підчерку і без червоного, інакше блок виглядає як список «сирих» лінків */
body[data-prefix] .entry-content :is(h1, h2, h3, h4, h5) a:not(.wp-block-button__link) {
  text-decoration: none;
  color: inherit;
}

body[data-prefix] .entry-content :is(h1, h2, h3, h4, h5) a:not(.wp-block-button__link):hover {
  color: var(--crh-accent-dark);
  text-decoration: none;
}

/* таблиця порівняння */
/* широка таблиця скролиться всередині себе, а не розсуває сторінку.
   🔴 max-width тут НЕ ставити у 100%: Blocksy обмежує блоки статті
   змінною --theme-block-max-width (760px), і 100% перебиває це
   обмеження - таблиця стає ширшою за текст. */
body[data-prefix] .entry-content .wp-block-table {
  overflow-x: auto;
  max-width: var(--theme-block-max-width, 100%);
}

body[data-prefix] .entry-content .wp-block-table table {
  width: 100%;
  min-width: 480px;
  border-collapse: collapse;
  font-size: 15px;
}

body[data-prefix] .entry-content .wp-block-code,
body[data-prefix] .entry-content pre {
  overflow-x: auto;
  max-width: var(--theme-block-max-width, 100%);
}

body[data-prefix] .entry-content {
  overflow-wrap: break-word;
}

body[data-prefix] .entry-content .wp-block-table th {
  background: var(--crh-graphite-800);
  color: var(--crh-on-dark);
  font-weight: 600;
  text-align: left;
  padding: 10px 12px;
  border: none;
}

body[data-prefix] .entry-content .wp-block-table td {
  padding: 10px 12px;
  border: none;
  border-bottom: 1px solid var(--crh-border);
}

body[data-prefix] .entry-content .wp-block-table tbody tr:nth-child(even) td {
  background: #FAF9F5;
}

/* цитата */
body[data-prefix] .entry-content .wp-block-quote {
  border-left: 3px solid var(--crh-accent);
  border-right: none;
  padding: 2px 0 2px 18px;
  margin-left: 0;
  background: transparent;
  font-style: normal;
}

body[data-prefix] .entry-content .wp-block-quote p {
  font-size: 17px;
  color: var(--crh-graphite-800);
}

/* FAQ на details */
body[data-prefix] .entry-content .wp-block-details {
  border: 1px solid var(--crh-border);
  border-radius: var(--crh-radius);
  background: #FFFFFF;
  padding: 14px 18px;
}

body[data-prefix] .entry-content .wp-block-details + .wp-block-details {
  margin-top: 10px;
}

body[data-prefix] .entry-content .wp-block-details summary {
  font-weight: 600;
  cursor: pointer;
}

body[data-prefix] .entry-content .wp-block-details summary:hover {
  color: var(--crh-accent-dark);
}

/* зображення, розділювач, списки */
body[data-prefix] .entry-content .wp-block-image img {
  border-radius: var(--crh-radius);
}

body[data-prefix] .entry-content .wp-block-image figcaption {
  font-size: 13px;
  color: var(--crh-muted);
}

body[data-prefix] .entry-content .wp-block-separator {
  border-color: var(--crh-border);
  opacity: 1;
}

body[data-prefix] .entry-content ul li,
body[data-prefix] .entry-content ol li {
  margin-bottom: 0.4em;
}

/* кнопки */
body[data-prefix] .entry-content .wp-block-button__link,
.ct-button,
.ct-button-ghost {
  border-radius: var(--crh-radius);
}

/* ============================================================
   5b. СТОРІНКА-КАТАЛОГ (класи crh-*)

   Використовується на сторінці «Діагностика без здогадок»: темна
   смуга із заголовком і чипсами рубрик, далі щільна сітка карток
   з фото. Класи проставлені в блоках вручну (className), тому
   верстка лишається редагованою в Gutenberg.
   ============================================================ */

/* --- Секція «Свіжий розбір»: остання опублікована стаття -------------
   Виводиться кодом теми на хук `blocksy:header:after` (functions.php),
   тобто ПОЗА контейнером контенту - тому селектори тут без .entry-content.

   Це окрема частина сайту впритул до шапки, а не блок у колонці:
   смуга на всю ширину, без скруглень і без відступу зверху, всередині
   обгортка 1080px. Фон на тон світліший за шапку (graphite-800 проти
   graphite-900) - як `.hero` проти `.site-header` у макеті
   avtodrom-blog.html. Пропорції звідти ж: сітка 1.4fr/1fr, відступ 28px,
   обкладинка 16:10, червоний ярлик. */
body[data-prefix] .crh-weekly {
  background: var(--crh-graphite-800);
  color: var(--crh-on-dark);
  border-radius: 0;
  margin: 0;
  padding: 0;
}

/* Обгортка тримає текст рівно над картками.
   🔴 max-width = 1080 + 2*20: бічний padding входить у ширину блока, і
   з max-width:1080px текст починався на 20px правіше за картки
   (заміряно: заголовок x=192, картка x=172). Ширина з запасом на padding
   вирівнює ліві краї в нуль. */
body[data-prefix] .crh-weekly-inner {
  max-width: calc(var(--theme-normal-container-max-width, 1080px) + 40px);
  margin: 0 auto;
  padding: 44px 20px;
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 28px;
  align-items: center;
}

/* Сам блок заголовка сторінки на головній не друкується взагалі -
   знімається фільтром `blocksy:hero:custom-source` у functions.php.
   Через CSS його ховати не можна: H1 лишився б у розмітці другим. */

body[data-prefix] .crh-weekly-eyebrow {
  display: inline-block;
  background: var(--crh-accent);
  color: #FFFFFF;
  font-size: 12px;
  font-weight: 500;
  line-height: 1.6;
  padding: 4px 11px;
  border-radius: var(--crh-radius);
  margin-bottom: 14px;
}

/* 🔴 Колір задається САМОМУ заголовку, а не тільки посиланню всередині:
   загальне правило теми красить заголовки у графіт (--crh-graphite-900),
   а це рівно колір фону смуги - текст ставав чорним на чорному і зникав.
   Правило на `.crh-weekly-title a` заливку не перебивало. */
body[data-prefix] .crh-weekly-title {
  font-size: 34px;
  line-height: 1.22;
  font-weight: 600;
  margin: 0 0 10px;
  padding-left: 0;
  color: #FFFFFF !important;
}

/* у статті заголовки мають червону смужку зліва - тут вона зайва */
body[data-prefix] .crh-weekly-title::before {
  content: none;
}

body[data-prefix] .crh-weekly-title a {
  color: inherit !important;
  text-decoration: none;
}

body[data-prefix] .crh-weekly-title a:hover {
  color: var(--crh-accent) !important;
}

body[data-prefix] .crh-weekly-lead {
  color: var(--crh-on-dark-muted);
  font-size: 15px;
  line-height: 1.6;
  max-width: 60ch;
  /* та сама грабля constrained-layout, що і в .crh-strip-lead */
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 18px;
}

body[data-prefix] .crh-weekly-cta {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  color: #FFFFFF;
  font-size: 14px;
  font-weight: 500;
  text-decoration: none;
  border-bottom: 2px solid var(--crh-accent);
  padding-bottom: 3px;
  transition: gap 0.15s ease;
}

body[data-prefix] .crh-weekly-cta::after {
  content: "\2192";
}

body[data-prefix] .crh-weekly-cta:hover {
  gap: 12px;
  color: #FFFFFF;
}

body[data-prefix] .crh-weekly-media {
  display: block;
  border-radius: var(--crh-radius);
  overflow: hidden;
  line-height: 0;
}

body[data-prefix] .crh-weekly-media img {
  width: 100%;
  height: auto;
  aspect-ratio: 16 / 10;
  object-fit: cover;
  display: block;
}

@media (max-width: 780px) {
  body[data-prefix] .crh-weekly-inner {
    grid-template-columns: 1fr;
    gap: 20px;
    padding: 28px 20px;
  }

  /* на вузькому екрані обкладинка йде першою - як у макеті */
  body[data-prefix] .crh-weekly-media {
    order: -1;
  }

  body[data-prefix] .crh-weekly-title {
    font-size: 26px;
  }
}

body[data-prefix] .entry-content .crh-strip {
  background: var(--crh-graphite-800);
  border-radius: var(--crh-radius);
  padding: 28px 30px 24px;
  margin-bottom: 26px;
}

body[data-prefix] .entry-content .crh-strip .crh-strip-title {
  color: #FFFFFF;
  padding-left: 0;
  font-size: 26px;
  margin-bottom: 6px;
}

body[data-prefix] .entry-content .crh-strip .crh-strip-title::before {
  content: none;
}

/* 🔴 WordPress друкує для дітей constrained-контейнера правило
   `margin-left: auto !important; margin-right: auto !important`.
   Через це будь-який блок з max-width центрується, і підзаголовок
   з'їжджав від лівого краю. Перебити можна тільки таким самим !important. */
body[data-prefix] .entry-content .crh-strip .crh-strip-lead {
  color: var(--crh-on-dark-muted);
  font-size: 15px;
  max-width: 74ch;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 18px;
}

body[data-prefix] .entry-content .crh-chips {
  gap: 8px;
}

body[data-prefix] .entry-content .crh-chips .wp-block-button__link {
  font-size: 13px;
  padding: 6px 14px;
  border-radius: 20px;
  border-color: rgba(255, 255, 255, 0.35);
  color: var(--crh-on-dark);
  background: transparent;
}

body[data-prefix] .entry-content .crh-chips .wp-block-button__link:hover {
  background: var(--crh-accent);
  border-color: var(--crh-accent);
  color: #FFFFFF;
}

body[data-prefix] .entry-content .crh-row {
  gap: 18px;
  margin-bottom: 18px;
  align-items: stretch;
}

/* колонка як флекс-контейнер: картки в ряду тягнуться на однакову висоту */
body[data-prefix] .entry-content .crh-row > .wp-block-column {
  display: flex;
}

body[data-prefix] .entry-content .crh-card {
  background: #FFFFFF;
  border: 1px solid var(--crh-border);
  border-radius: var(--crh-radius);
  overflow: hidden;
  width: 100%;
  display: flex;
  flex-direction: column;
  transition: transform 0.16s ease, box-shadow 0.16s ease;
}

body[data-prefix] .entry-content .crh-card .crh-card-body {
  flex: 1;
}

body[data-prefix] .entry-content .crh-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 10px 24px rgba(26, 29, 33, 0.10);
}

body[data-prefix] .entry-content .crh-card figure.crh-card-media {
  margin: 0;
  width: 100%;
}

body[data-prefix] .entry-content .crh-card figure.crh-card-media a,
body[data-prefix] .entry-content .crh-card figure.crh-card-media img {
  display: block;
  width: 100%;
  border-radius: 0;
}

/* 16:9 - та сама пропорція, що і в картках архіву */
body[data-prefix] .entry-content .crh-card figure.crh-card-media img {
  aspect-ratio: 16 / 9;
  height: auto;
  object-fit: cover;
}

body[data-prefix] .entry-content .crh-card .crh-card-body {
  padding: 14px 16px 16px;
  display: flex;
  flex-direction: column;
}

/* бейдж - пігулка по ширині тексту. width: fit-content потрібен тому, що
   constrained-layout розтягує будь-який блок у групі на всю ширину */
body[data-prefix] .entry-content .crh-card .crh-badge {
  display: inline-block;
  width: fit-content;
  max-width: 100%;
  font-size: 11px;
  font-weight: 500;
  line-height: 1.6;
  padding: 3px 9px;
  border-radius: var(--crh-radius);
  margin-bottom: 8px;
  background: var(--crh-accent-bg);
  color: var(--crh-accent-dark);
  /* 🔴 та сама грабля, що і в .crh-cta-text: WordPress друкує для дітей
     constrained-контейнера margin-left/right: auto !important. Поки
     .crh-card-body був block-боксом, це не заважало, але після переводу
     його у flex-column бейдж поїхав у центр картки (заміряно: offset
     141px замість 16). Перебивається тільки своїм !important. */
  margin-left: 0 !important;
  margin-right: auto !important;
}

body[data-prefix] .entry-content .crh-card .crh-badge-1 { background: #FAECE7; color: #993C1D; }
body[data-prefix] .entry-content .crh-card .crh-badge-2 { background: #E6F1FB; color: #0C447C; }
body[data-prefix] .entry-content .crh-card .crh-badge-3 { background: #E1F5EE; color: #0F6E56; }
body[data-prefix] .entry-content .crh-card .crh-badge-4 { background: #FAEEDA; color: #854F0B; }

/* 18px/1.32 - як .entry-card .entry-title в архіві (було 16px) */
body[data-prefix] .entry-content .crh-card .crh-card-title {
  font-size: 18px;
  font-weight: 600;
  line-height: 1.32;
  padding-left: 0;
  margin: 0;
}

body[data-prefix] .entry-content .crh-card .crh-card-title::before {
  content: none;
}

/* margin-top:auto притискає «N хв читання» до низу картки - без цього
   картка з однорядковим заголовком лишала під текстом 38px порожнечі,
   а з дворядковим - 17px, і низи в ряду не збігались (заміряно) */
body[data-prefix] .entry-content .crh-card .crh-card-meta {
  margin-top: auto;
  padding-top: 8px;
  margin-bottom: 0;
  font-size: 12.5px;
  color: var(--crh-muted);
}

body[data-prefix] .entry-content .crh-cta {
  background: var(--crh-graphite-900);
  border-radius: var(--crh-radius);
  padding: 26px 30px;
  margin-top: 8px;
}

/* 26px - як .crh-strip-title; два темні блоки однакової ролі мали
   різний кегль (26 і 22) */
body[data-prefix] .entry-content .crh-cta .crh-cta-title {
  color: #FFFFFF;
  font-size: 26px;
  padding-left: 0;
  margin-bottom: 6px;
}

body[data-prefix] .entry-content .crh-cta .crh-cta-title::before {
  content: none;
}

body[data-prefix] .entry-content .crh-cta .crh-cta-text {
  color: var(--crh-on-dark-muted);
  font-size: 15px;
  max-width: 78ch;
  margin-left: 0 !important;
  margin-right: auto !important;
  margin-bottom: 16px;
}

@media (max-width: 780px) {
  body[data-prefix] .entry-content .crh-strip,
  body[data-prefix] .entry-content .crh-cta {
    padding: 22px 20px;
  }

}

/* на вузькому екрані картка архіву одна в ряд - від'ємні маргіни медіа
   лишаються коректними, але падінг картки менший */
@media (max-width: 689.98px) {
  body[data-prefix] .entry-card .ct-media-container {
    margin: -20px -20px 18px;
  }
}

/* ============================================================
   6. ФУТЕР - графітовий, приглушений текст
   ============================================================ */

[data-footer*="type-1"] .ct-footer {
  background-color: var(--crh-graphite-900);
}

[data-footer*="type-1"] .ct-footer [data-row] {
  --theme-text-color: var(--crh-on-dark-muted);
  --theme-link-initial-color: var(--crh-on-dark-muted);
  --theme-link-hover-color: var(--crh-on-dark);
  --theme-heading-color: var(--crh-on-dark);
  --theme-border-color: rgba(255, 255, 255, 0.08);
}

[data-footer*="type-1"] .ct-footer [data-id="menu"] ul {
  --theme-font-weight: 500;
  --theme-text-transform: none;
  --theme-font-size: 13px;
}

[data-footer*="type-1"] .ct-footer [data-id="copyright"] {
  --theme-font-size: 13px;
}

[data-footer*="type-1"] .ct-footer .widget-title {
  --theme-font-size: 15px;
  --theme-heading-color: var(--crh-on-dark);
}

[data-footer*="type-1"] [data-id="socials"].ct-footer-socials [data-color="custom"] {
  --theme-icon-color: var(--crh-on-dark-muted);
  --background-color: rgba(255, 255, 255, 0.07);
  --background-hover-color: var(--crh-accent);
}

/* ============================================================
   7. ДРІБНИЦІ: фокус, пагінація, доступність
   ============================================================ */

:focus-visible {
  outline: 2px solid var(--crh-accent);
  outline-offset: 2px;
  border-radius: 3px;
}

/* без body[data-prefix] ці правила програвали інлайну Blocksy: активна
   сторінка лишалась темно-бордовою (#A32D2D замість акценту), а
   «Назад/Далі» друкувались КАПСОМ - хоча КАПС з мети ми прибрали */
body[data-prefix] .ct-pagination .page-numbers {
  border-radius: var(--crh-radius);
}

body[data-prefix] .ct-pagination .page-numbers.current {
  background: var(--crh-accent);
  color: #FFFFFF;
}

body[data-prefix] .ct-pagination .prev,
body[data-prefix] .ct-pagination .next {
  text-transform: none;
  font-size: 13px;
  font-weight: 500;
}

@media (prefers-reduced-motion: reduce) {
  .entry-card,
  .entry-card:hover {
    transition: none;
    transform: none;
  }
}