/*
Theme Name: Сети Петра
Theme URI: https://setipetra.armenman22.tmweb.ru
Author: Медиагруппа «Сети Петра»
Description: Тема сайта медиагруппы «Сети Петра» — православные сообщества в социальных сетях, заказ молебнов, работа с храмами и епархиями.
Version: 1.19.1
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: setipetra
*/

/* ---------- tokens ---------- */
:root {
  /* Сине-золотая гамма апостола Петра: тёплая бумага, иконная синь, золото */
  --bg: #f4f2ec;
  --surface: #ffffff;
  --ink: #1b2740;
  --ink-soft: #48546c;
  /* Серый подписей: 5,3:1 на бумаге. Прежний #727c92 давал 3,7:1 —
     ниже порога читаемости, а им набраны целые абзацы и подписи полей. */
  --muted: #5c6478;
  --line: #dedad1;
  /* Рамка полей ввода и других элементов управления: 3:1 и на белом,
     и на бумаге. Тонкая --line (1,4:1) делала поля почти невидимыми. */
  --line-strong: #918b7b;
  /* Золото-заливка: линии, значки, рамки, крупные плашки. */
  --accent: #bf923d;
  /* Золото-текст для светлого фона: 4,6:1 на бумаге против 2,5:1 у --accent.
     На тёмных секциях текст остаётся на --accent — там его контраст 5,1:1. */
  --accent-ink: #8a6721;
  --dark: #16294a;
  --serif: Georgia, "Times New Roman", "PT Serif", serif;
  --sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --wrap: 1100px;
  --gap: clamp(2.5rem, 6vw, 5.5rem);
}

/* ---------- reset-ish ---------- */
*, *::before, *::after { box-sizing: border-box; }
body { margin: 0; }
img { max-width: 100%; height: auto; display: block; }

html { -webkit-text-size-adjust: 100%; }

body {
  background: var(--bg);
  color: var(--ink);
  font-family: var(--sans);
  font-size: 17px;
  line-height: 1.65;
  -webkit-font-smoothing: antialiased;
}

a { color: var(--ink); text-decoration-color: var(--accent); text-underline-offset: 3px; }
a:hover { color: var(--accent-ink); }

h1, h2, h3, h4 {
  font-family: var(--serif);
  font-weight: 400;
  line-height: 1.15;
  letter-spacing: -0.01em;
  margin: 0 0 .6em;
}
h1 { font-size: clamp(2.1rem, 5vw, 3.4rem); }
h2 { font-size: clamp(1.6rem, 3.4vw, 2.4rem); }
h3 { font-size: clamp(1.2rem, 2.2vw, 1.5rem); }
p { margin: 0 0 1.1em; }
p:last-child { margin-bottom: 0; }

.wrap { width: min(var(--wrap), calc(100% - 3rem)); margin-inline: auto; }

/* ---------- header ---------- */
.site-header {
  background: var(--surface);
  border-bottom: 1px solid var(--line);
  position: sticky; top: 0; z-index: 50;
}
.site-header__inner {
  display: flex; align-items: center; justify-content: space-between;
  gap: 1.5rem; padding: 1.1rem 0;
}
.brand { display: flex; align-items: center; gap: .8rem; text-decoration: none; }
.brand__mark { flex: none; display: block; color: var(--dark); }
.brand__mark .logo-mark { display: block; }
.footer-mark { display: block; color: #f4f2ec; margin-bottom: 1.1rem; }
.footer-mark .logo-mark { display: block; }
.brand__text { display: flex; flex-direction: column; line-height: 1.2; }
.brand__name { font-family: var(--serif); font-size: 1.12rem; color: var(--ink); }
.brand__kicker {
  font-size: .76rem; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-ink);
}

.nav-toggle {
  display: none; background: none; border: 1px solid var(--line-strong);
  border-radius: 4px; padding: .7rem 1rem; font: inherit; font-size: .9rem; cursor: pointer;
  color: var(--ink);
}
/* открытое меню видно по самой кнопке — иначе непонятно, что она же его свернёт */
.nav-toggle[aria-expanded="true"] {
  background: var(--dark); border-color: var(--dark); color: #fff;
}

.site-nav ul {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; gap: 1.4rem; align-items: center;
}
.site-nav a {
  text-decoration: none; font-size: .92rem; color: var(--ink-soft);
  padding-bottom: 2px; border-bottom: 1px solid transparent;
}
.site-nav a:hover { color: var(--accent-ink); }
.site-nav .current-menu-item > a { color: var(--ink); border-bottom-color: var(--accent); }

/* телефон в шапке: на широком экране — номер с трубкой правее меню,
   на узком — кнопка-трубка рядом с «Меню» (номер читает aria-label) */
.header-phone {
  order: 1; display: flex; align-items: center; gap: .5rem;
  text-decoration: none; white-space: nowrap;
  font-size: .95rem; font-weight: 600; color: var(--ink);
}
.header-phone::before {
  content: ""; flex: none; width: 19px; height: 19px;
  background: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'><path d='M44 33.84v6a4 4 0 0 1-4.36 4 39.58 39.58 0 0 1-17.26-6.14 39 39 0 0 1-12-12A39.58 39.58 0 0 1 4.24 8.36 4 4 0 0 1 8.22 4h6a4 4 0 0 1 4 3.44 25.68 25.68 0 0 0 1.4 5.62 4 4 0 0 1-.9 4.22l-2.54 2.54a32 32 0 0 0 12 12l2.54-2.54a4 4 0 0 1 4.22-.9 25.68 25.68 0 0 0 5.62 1.4A4 4 0 0 1 44 33.84z'/></svg>") no-repeat center / contain;
}
.header-phone:hover { color: var(--accent-ink); }

@media (max-width: 900px) {
  .site-header__inner { gap: .75rem; }
  .header-phone {
    order: 0; margin-left: auto;
    border: 1px solid var(--line-strong); border-radius: 4px;
    padding: .7rem .8rem; font-size: .9rem;
  }
  /* высота значка = высоте строки текста «Меню» (.9rem × 1.65 body line-height):
     при одинаковых отступах и рамке кнопки выходят одной высоты */
  .header-phone::before { height: calc(.9rem * 1.65); }
  .header-phone__number { display: none; }
  .nav-toggle { display: block; }
  .site-nav { display: none; width: 100%; }
  .site-header__inner { flex-wrap: wrap; }
  .site-nav.is-open { display: block; }
  .site-nav ul { flex-direction: column; align-items: stretch; gap: 0; padding: .4rem 0 1rem; }
  /* палец попадает по строке целиком, а не по 18 px текста */
  .site-nav li + li { border-top: 1px solid var(--line); }
  .site-nav a { display: block; padding: .85rem 0; font-size: 1rem; border-bottom: 0; }
  .site-nav .current-menu-item > a { color: var(--accent-ink); }
}

/* ---------- sections ---------- */
.section { padding: var(--gap) 0; }
.section--surface { background: var(--surface); }
.section--dark { background: var(--dark); color: #e9edf5; }
.section--dark h1, .section--dark h2, .section--dark h3 { color: #fff; }
.section--dark .lead, .section--dark p { color: #c3cddf; }

.kicker {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); margin: 0 0 1rem;
}
/* на тёмном фоне золото читается и без затемнения */
.section--dark .kicker,
.section--dark .stat__value,
.section--dark .step__num,
.section--dark .flow__role,
.section--dark .timeline__when,
.section--dark .fact__mark { color: var(--accent); }
.lead { font-size: clamp(1.05rem, 1.9vw, 1.25rem); color: var(--ink-soft); max-width: 62ch; }
.measure { max-width: 68ch; }

/* ---------- hero ---------- */
.hero { background: var(--surface); border-bottom: 1px solid var(--line); }
.hero__inner { padding: clamp(1.8rem, 4vw, 3.2rem) 0 clamp(3.5rem, 9vw, 7rem); }
/* заголовок первого экрана идёт во всю ширину колонки, без узкой мерки */
.hero h1 { max-width: none; }
.hero .lead { margin-top: 1.4rem; }
.hero__actions { margin-top: 2.2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

.btn {
  display: inline-block; padding: .85rem 1.6rem; border-radius: 2px;
  text-decoration: none; font-size: .95rem; border: 1px solid var(--ink);
  background: var(--ink); color: #fff; transition: opacity .15s ease;
}
.btn:hover { opacity: .85; color: #fff; }
.btn--ghost { background: transparent; color: var(--ink); border-color: var(--line-strong); }
.btn--ghost:hover { border-color: var(--accent-ink); color: var(--accent-ink); }
/* На тёмной секции кнопка выворачивается: тёмно-синяя заливка --ink
   на фоне --dark почти не читается как кнопка. */
.section--dark .btn {
  background: #fff; color: var(--dark); border-color: #fff;
}
.section--dark .btn:hover { color: var(--dark); opacity: .88; }
.section--dark .btn--ghost { background: transparent; color: #fff; border-color: rgba(255, 255, 255, .45); }
.section--dark .btn--ghost:hover { color: var(--accent); border-color: var(--accent); }
/* внутри белой карточки формы кнопка остаётся обычной тёмной */
.section--dark .form-card .btn {
  background: var(--ink); color: #fff; border-color: var(--ink);
}
.section--dark .form-card .btn:hover { color: #fff; }

/* ---------- grids ---------- */
.grid { display: grid; gap: 2rem; }
.grid--2 { grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); }
.grid--3 { grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }

/* В текстовой колонке статьи (72ch ≈ 640 px) три карточки не помещались
   и auto-fit разворачивал их в 2 + сироту: одни и те же три шага заказа
   выглядели на главной и на странице-предложении по-разному. Даём сетке
   ту же ширину, что схемам и ленте, — трёх колонок по 240 px хватает,
   и раскладку по-прежнему считает auto-fit: одиночная карточка занимает
   всю строку, а не половину. */
@media (min-width: 761px) {
  .entry__body .grid {
    width: min(calc(100% + 220px), var(--wrap), calc(100vw - 3rem));
    gap: 1.6rem;
  }
}

/* Карточки на всём сайте открываются одной и той же золотой линией 2 px —
   раньше их было четыре вида: без линии (.card), 2 px (.step, .fact), 3 px (.gateway). */
.card {
  display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); padding: 1.9rem 1.7rem;
}
/* ссылка-продолжение прижата к низу — карточки в ряду заканчиваются на одной высоте */
.card .gateway__more { margin-top: auto; padding-top: 1.2rem; }
.section--surface .card { background: var(--bg); }
.card h3 { margin-bottom: .5rem; }
.card p { color: var(--ink-soft); font-size: .97rem; }

.step { border-top: 2px solid var(--accent); padding-top: 1.2rem; }
.step__num {
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--accent-ink); display: block; margin-bottom: .5rem;
}

/* ---------- stats ---------- */
.stats { display: grid; gap: 2.5rem; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); }
.stat__value { font-family: var(--serif); font-size: clamp(2.2rem, 5vw, 3.2rem); color: var(--accent-ink); line-height: 1; }
.stat__label { margin-top: .7rem; font-size: .98rem; }
.stat__note { margin-top: .3rem; font-size: .88rem; color: var(--muted); }
.section--dark .stat__label { color: #e9edf5; }
.section--dark .stat__note { color: #98a5bd; }

/* значки показателей — рисуются псевдоэлементом, в разметке только класс */
.stat--audience::before,
.stat--channel::before,
.stat--comments::before {
  content: ""; display: block; width: 42px; height: 42px; margin-bottom: 1rem;
  background-repeat: no-repeat; background-position: left center; background-size: contain;
}
.stat--audience::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><circle cx='9' cy='20' r='4.5'/><path d='M2.5 34.5c0-4.4 2.9-7.7 6.5-8'/><circle cx='39' cy='20' r='4.5'/><path d='M45.5 34.5c0-4.4-2.9-7.7-6.5-8'/><circle cx='24' cy='15.5' r='6.5' fill='%23bf923d' fill-opacity='.16'/><path d='M12.5 37.5c0-6.4 5.1-11 11.5-11s11.5 4.6 11.5 11'/></svg>");
}
.stat--channel::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M5 40h38'/><rect x='8' y='26' width='8' height='14' rx='1.5'/><rect x='20' y='19' width='8' height='21' rx='1.5'/><rect x='32' y='9' width='8' height='31' rx='1.5' fill='%23bf923d' fill-opacity='.16'/></svg>");
}
.stat--comments::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M26 5h14a4 4 0 0 1 4 4v6a4 4 0 0 1-4 4H26a4 4 0 0 1-4-4V9a4 4 0 0 1 4-4z' fill='%23bf923d' fill-opacity='.16'/><path d='M8 16h18a4 4 0 0 1 4 4v10a4 4 0 0 1-4 4H16l-6 5v-5H8a4 4 0 0 1-4-4V20a4 4 0 0 1 4-4z'/><circle cx='11' cy='25' r='1.4' fill='%23bf923d' stroke='none'/><circle cx='17' cy='25' r='1.4' fill='%23bf923d' stroke='none'/><circle cx='23' cy='25' r='1.4' fill='%23bf923d' stroke='none'/></svg>");
}

/* ---------- tables ---------- */
table { border-collapse: collapse; width: 100%; min-width: 560px; font-size: .96rem; }
th, td { text-align: left; padding: .95rem 1rem; border-bottom: 1px solid var(--line); vertical-align: top; }
th {
  font-family: var(--sans); font-weight: 500; font-size: .75rem;
  letter-spacing: .12em; text-transform: uppercase; color: var(--muted);
}
td strong { font-weight: 500; }
/* На узком экране таблица каналов (min-width 560px) не помещается и две правые
   колонки уезжают за край — блок листается вбок.
   Декоративных градиентов-теней у краёв здесь намеренно нет. Раньше их было
   четыре слоя (две заливки цветом фона поверх содержимого + две тени), и они
   давали ту самую «серую полосу» справа: заливка шириной 28px закрашивала край
   таблицы вместе с линиями строк, а тень при `background-attachment: scroll`
   держалась у рамки блока и не гасла, даже когда листать больше некуда.
   Подсказку о прокрутке даёт видимый текст `.table-hint`, так что тени лишние. */
.table-scroll {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
}
/* на телефоне таблица всё равно шире экрана — ужимаем поля, чтобы за краем
   оставалось меньше, и подписываем, что её можно листать. Эти правила должны
   идти после базового `table`/`th, td` выше — при равной специфичности CSS
   применяет то, что позже в файле, а не то, что внутри media query; раньше
   базовое правило стояло ниже медиазапроса и полностью гасило сужение на
   мобильных (было видно на скриншотах — четвёртая колонка таблицы «Наши
   каналы» вылетала за край экрана с обычными, не сжатыми отступами). */
@media (max-width: 760px) {
  table { min-width: 520px; font-size: .92rem; }
  th, td { padding: .8rem .6rem; }
  .table-scroll + p,
  .table-hint { margin-top: .6rem; }
}
.table-hint { display: none; font-size: .8rem; color: var(--muted); margin: .6rem 0 0; }
.table-hint::after { content: " →"; color: var(--accent-ink); }
@media (max-width: 760px) { .table-hint { display: block; } }

/* ---------- lists ---------- */
.ticks { list-style: none; margin: 0; padding: 0; }
.ticks li { position: relative; padding-left: 1.6rem; margin-bottom: .85rem; color: var(--ink-soft); }
.ticks li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}

/* Списки внутри страниц набираются в редакторе WordPress обычным <ul> —
   классы там не проставить и не удержать. Поэтому фирменные золотые точки
   даём всем спискам статьи, а не только тем, что размечены вручную. */
.entry__body ul:not(.ticks):not(.gateway__facts) {
  list-style: none; padding-left: 0;
}
.entry__body ul:not(.ticks):not(.gateway__facts) > li {
  position: relative; padding-left: 1.6rem; margin-bottom: .85rem;
}
.entry__body ul:not(.ticks):not(.gateway__facts) > li::before {
  content: ""; position: absolute; left: 0; top: .62em;
  width: 7px; height: 7px; border-radius: 50%; background: var(--accent);
}
/* списки ошибок в форме остаются обычными */
.entry__body .form-msg ul { list-style: disc; padding-left: 1.2rem; }
.entry__body .form-msg li { padding-left: 0; margin-bottom: .35rem; }
.entry__body .form-msg li::before { content: none; }

/* ---------- хлебные крошки ---------- */
.breadcrumbs { margin: 0 0 1.4rem; font-size: .82rem; color: var(--muted); }
.breadcrumbs ol {
  list-style: none; margin: 0; padding: 0;
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
}
.breadcrumbs li { display: flex; align-items: center; gap: .5rem; }
.breadcrumbs li + li::before { content: "/"; color: var(--line); }
.breadcrumbs a { color: var(--muted); text-decoration: none; }
.breadcrumbs a:hover { color: var(--accent-ink); text-decoration: underline; }
.breadcrumbs [aria-current="page"] { color: var(--ink-soft); }

/* ---------- page content ---------- */
.entry { padding: clamp(1.8rem, 4vw, 3.2rem) 0 var(--gap); }
.entry__header { margin-bottom: 2.5rem; }
.entry__body { max-width: 72ch; }
.entry__body h2 { margin-top: 2.2em; }
.entry__body h3 { margin-top: 1.8em; }
.entry__body ul, .entry__body ol { padding-left: 1.2rem; color: var(--ink-soft); }
.entry__body li { margin-bottom: .6rem; }
.entry__body blockquote {
  margin: 2rem 0; padding-left: 1.4rem; border-left: 2px solid var(--accent);
  font-family: var(--serif); font-size: 1.2rem; color: var(--ink);
}

/* ---------- схема движения средств ---------- */
.flow {
  display: flex; align-items: stretch; flex-wrap: wrap;
  margin: 2.6rem 0 1.5rem;
}
.flow__step {
  flex: 1 1 160px; background: var(--surface);
  border: 1px solid var(--line); padding: 1.4rem 1.25rem;
}
.section--surface .flow__step { background: var(--bg); }
.flow__role {
  display: block; margin-bottom: .55rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
}
.flow__step h3 { font-size: 1.18rem; margin-bottom: .45rem; }
.flow__step p { font-size: .93rem; color: var(--ink-soft); margin: 0; }

.flow__link {
  flex: 0 0 auto; min-width: 88px; padding: 0 .7rem;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: .5rem;
}
.flow__label { font-size: .75rem; line-height: 1.35; color: var(--muted); text-align: center; }
/* Стрелку рисует сама ячейка: пустые теги вырезает визуальный редактор
   WordPress, поэтому декор держим на псевдоэлементах, а не в разметке.
   Прежний <span class="flow__arrow"> в шаблонах остаётся, но не показывается. */
.flow__link::before {
  content: ""; display: block; width: 100%; height: 9px;
  background:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='9'%3E%3Cpath d='M0 0L8 4.5L0 9Z' fill='%23bf923d'/%3E%3C/svg%3E") no-repeat right center,
    linear-gradient(var(--line), var(--line)) no-repeat left center / 100% 1px;
}
.flow__arrow { display: none; }
.flow__note { font-size: .93rem; color: var(--muted); max-width: 68ch; }

/* обратный путь: храм → «Сети Петра» */
.flow-back {
  position: relative; height: 34px; margin: -1.5rem 0 2.3rem;
}
.flow-back::before {
  content: ""; position: absolute; top: 0; left: 14%; right: 14%; height: 34px;
  border: 1px solid var(--line); border-top: 0;
}
.flow-back::after {
  content: ""; position: absolute; left: calc(14% - 4px); top: -7px;
  border-left: 4.5px solid transparent; border-right: 4.5px solid transparent;
  border-bottom: 8px solid var(--accent);
}
.flow-back__line { display: none; }
.flow-back__label {
  position: absolute; left: 50%; top: 34px; transform: translate(-50%, -50%);
  font-size: .75rem; line-height: 1.35; color: var(--muted); text-align: center;
  max-width: 56ch; background: var(--bg); padding: 0 .9rem;
}
.section--surface .flow-back__label { background: var(--surface); }

/* Внутри статьи схеме тесно в текстовой колонке — расширяем её.
   Прибавка уменьшена с 400 до 220 px: при 400 px схемы и форма вылетали
   за текстовую колонку почти на половину её ширины, и на странице
   получалось три разные ширины контента вместо двух. */
@media (min-width: 761px) {
  .entry__body .gateways,
  .entry__body .flow,
  .entry__body .flow-back,
  .entry__body .timeline,
  .entry__body .table-scroll,
  .entry__body .form-block {
    width: min(calc(100% + 220px), var(--wrap), calc(100vw - 3rem));
  }
}

@media (max-width: 760px) {
  .flow { flex-direction: column; }
  .flow__link { min-width: 0; padding: .9rem 0; }
  .flow__link::before {
    width: 9px; height: 34px;
    background:
      url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='8'%3E%3Cpath d='M0 0L9 0L4.5 8Z' fill='%23bf923d'/%3E%3C/svg%3E") no-repeat center bottom,
      linear-gradient(var(--line), var(--line)) no-repeat center top / 1px 100%;
  }
  /* Обратный путь в колонке: П-образную линию не нарисовать, но и одной
     стрелкой обойтись нельзя — раньше от неё оставался треугольник 9px без
     линии, и на телефоне обратный путь просто не читался рядом с полноценными
     связками прямых шагов (34px линия + стрелка). Теперь рисуем такую же по
     весу вертикальную связку, только стрелка смотрит вверх, а линия пунктирная
     — чтобы плата за продвижение не читалась четвёртым шагом заказа. */
  .flow-back {
    height: auto; margin: -.4rem 0 1.4rem; padding-top: 50px;
    display: block; text-align: center;
  }
  .flow-back::before {
    content: ""; position: absolute; left: 50%; top: 0;
    width: 0; height: 34px; margin-left: -.5px;
    border: 0; border-left: 1px dashed var(--line);
  }
  /* Стрелка смотрит вниз, от карточки храма к подписи. Вверх её направлять
     нельзя: в колонке острие упирается в карточку «Храм или монастырь» и
     читается как платёж храму — заказчик именно так и прочитал. Платит храм,
     получателя называет сама подпись. */
  .flow-back::after {
    left: 50%; top: 34px; margin-left: -4.5px;
    border-top: 8px solid var(--accent); border-bottom: 0;
  }
  /* Подпись в две сопоставимые строки под стрелкой: во всю ширину колонки
     она ломалась «…привлечённых / средств» и центр уезжал от стрелки. */
  .flow-back__label {
    position: static; transform: none; padding: 0; display: block;
    max-width: 40ch; margin-inline: auto; text-wrap: balance;
  }
}

/* ---------- полоса аудитории в таблице каналов ---------- */
.bar {
  display: block; height: 6px; max-width: 150px; margin-top: .55rem;
  background: var(--line); border-radius: 1px;
}
.bar span {
  display: block; height: 100%; background: var(--accent); border-radius: 1px;
  /* полоса тянется вместе со счётчиком, ширину подставляет assets/count-up.js */
  transition: width 1.6s cubic-bezier(.16, 1, .3, 1);
}
td .nowrap { white-space: nowrap; }

@media (prefers-reduced-motion: reduce) {
  .bar span { transition: none; }
}

/* ---------- cta ---------- */
.cta { text-align: left; }
.cta h2 { max-width: 22ch; }
/* CTA примыкает к подвалу того же цвета: свой нижний отступ секции
   складывался с верхним отступом подвала — оставляем только отступ подвала */
.cta { padding-bottom: 0; }

/* ---------- footer ---------- */
.site-footer {
  background: var(--dark); color: #b3bed2;
  padding: clamp(2.8rem, 6vw, 4rem) 0 2rem; font-size: .93rem;
}
/* Подчёркивание в подвале убрано: в шапке ссылки без него, и два разных
   способа показать ссылку на одной странице выглядели несобранно. */
.site-footer a { color: #e2e7f0; text-decoration: none; }
.site-footer a:hover { color: var(--accent); text-decoration: underline; }
.footer-grid { display: grid; gap: 2.2rem; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }
.footer-grid h4 {
  font-family: var(--sans); font-size: .75rem; letter-spacing: .14em;
  text-transform: uppercase; color: #8896b0; margin: 0 0 .9rem;
}
.footer-grid ul { list-style: none; margin: 0; padding: 0; }
.footer-grid li { margin-bottom: .55rem; }
.footer-grid a { display: inline-block; padding: .2rem 0; }
.footer-phone { font-size: 1.05rem; }
.site-footer__bottom {
  margin-top: 2.6rem; padding-top: 1.4rem; border-top: 1px solid #2c4066;
  display: flex; flex-wrap: wrap; gap: .8rem; justify-content: space-between;
  font-size: .84rem; color: #8896b0;
}

/* ---------- форма заявки ---------- */
.form-block {
  margin: 3.2rem 0 0;
  scroll-margin-top: 90px;
}
/* ширину форме задаёт общее правило расширения блоков статьи выше */
.entry__body .form-block { max-width: none; }
.form-block > .lead { margin-bottom: 2rem; }

.form-card {
  background: var(--surface);
  border: 1px solid var(--line);
  padding: clamp(1.4rem, 3vw, 2.2rem);
}
.section--surface .form-card { background: var(--bg); }

.form-grid {
  display: grid;
  gap: 1.3rem 1.6rem;
  grid-template-columns: repeat(2, minmax(0, 1fr));
}
@media (max-width: 620px) {
  .form-grid { grid-template-columns: 1fr; }
}
.field { margin: 0; display: flex; flex-direction: column; gap: .45rem; }
.field--wide { grid-column: 1 / -1; }
.field label {
  font-size: .78rem; letter-spacing: .08em; text-transform: uppercase; color: var(--muted);
}
/* звёздочка обязательного поля всегда стоит на светлой карточке */
.req { color: var(--accent-ink); }

/* Поля видны и по рамке (3:1), и по собственной заливке: прежняя тонкая
   рамка --line давала 1,4:1 — на белой карточке полей практически не было видно. */
.form-card input[type="text"],
.form-card input[type="tel"],
.form-card input[type="email"],
.form-card select,
.form-card textarea {
  width: 100%;
  font: inherit;
  font-size: 1rem;
  color: var(--ink);
  background: var(--bg);
  border: 1px solid var(--line-strong);
  border-radius: 2px;
  padding: .75rem .9rem;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.section--surface .form-card input,
.section--surface .form-card select,
.section--surface .form-card textarea { background: var(--surface); }
.form-card textarea { resize: vertical; line-height: 1.6; }
.form-card input:focus,
.form-card select:focus,
.form-card textarea:focus {
  border-color: var(--accent-ink); outline: none;
  box-shadow: 0 0 0 3px rgba(191, 146, 61, .22);
}
.form-card input::placeholder,
.form-card textarea::placeholder { color: #656b7d; }

/* примечание про звёздочки стоит внизу формы, сразу над кнопкой */
.form-note { margin: 1.5rem 0 0; font-size: .88rem; color: var(--muted); }
.form-note + .form-actions { margin-top: 1rem; }

.form-consent { margin: 1.5rem 0 0; }
.form-consent label {
  display: flex; align-items: flex-start; gap: .7rem;
  font-size: .88rem; line-height: 1.55; color: var(--ink-soft);
}
/* Галочка увеличена: 13 px было не попасть пальцем. Отмечает её посетитель
   сам — предустановленного согласия в форме больше нет. */
.form-consent input {
  flex: none; margin-top: .15em; accent-color: var(--accent-ink);
  width: 22px; height: 22px; cursor: pointer;
}
.form-consent label { cursor: pointer; }

.form-actions { margin: 1.8rem 0 0; }
.form-card .btn { cursor: pointer; font-family: inherit; }

/* ловушка для ботов — прячем от людей, но оставляем в разметке */
.form-trap {
  position: absolute; left: -9999px; width: 1px; height: 1px;
  overflow: hidden;
}

.form-msg {
  border-left: 2px solid var(--accent);
  background: var(--surface);
  padding: 1.2rem 1.4rem;
  margin: 0 0 1.8rem;
}
.section--surface .form-msg { background: var(--bg); }
.form-msg p { margin-bottom: .5rem; }
.form-msg p:last-child { margin-bottom: 0; }
.form-msg--err { border-left-color: #a33a2f; }
.form-msg--err ul { margin: 0; padding-left: 1.2rem; color: var(--ink-soft); }
.form-msg--err li { margin-bottom: .35rem; }

/* Успех — отдельный, узнаваемый с первого взгляда цвет (зелёный),
   чтобы сообщение не терялось на фоне золотых акцентов остального сайта. */
.form-msg--ok {
  border-left-width: 4px;
  border-left-color: #2f7a4a;
  background: #eaf4ee;
}
.form-msg__title {
  display: flex; align-items: center; gap: .65rem;
  font-size: 1.1rem; margin-bottom: .6rem !important;
}
.form-msg__icon {
  flex: none; width: 26px; height: 26px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='12' fill='%232f7a4a'/%3E%3Cpath d='M7 12.3l3.2 3.2L17 8.6' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-size: contain; background-repeat: no-repeat;
}
@media (prefers-reduced-motion: no-preference) {
  .form-msg--ok { animation: form-msg-in .4s ease-out; }
}
@keyframes form-msg-in {
  from { opacity: 0; transform: translateY(-6px); }
  to { opacity: 1; transform: translateY(0); }
}

/* на тёмной секции карточка остаётся светлой — возвращаем ей тёмный текст */
.section--dark .form-card,
.section--dark .form-card p,
.section--dark .form-msg,
.section--dark .form-msg p { color: var(--ink); }
.section--dark .form-card .field label,
.section--dark .form-card .form-note { color: var(--muted); }
.section--dark .form-consent label,
.section--dark .form-msg--err ul { color: var(--ink-soft); }
.section--dark .form-block { margin-top: 2.6rem; }
.section--dark .form-msg--ok { background: #eaf4ee; }

/* ---------- misc ---------- */
.skip-link {
  position: absolute; left: -9999px; top: 0;
  background: var(--ink); color: #fff; padding: .7rem 1.1rem; z-index: 100;
}
/* Показывается только после реального нажатия Tab (класс kb-nav ставит
   count-up.js): Яндекс.Браузер сам фокусирует первую ссылку при загрузке,
   и плашка выскакивала у посетителей без всякой клавиатуры. */
html.kb-nav .skip-link:focus { left: 1rem; top: 1rem; }

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

/* ---------- страница «Для епархий» ---------- */

/* полоса распределения средств: реклама · комиссия · доход храма */
/* Доли нарисованы фоном, а не вложенными элементами: пустые теги
   вырезает визуальный редактор WordPress. */
/* Три доли различимы по цвету: прежде средний сегмент был белым, а первый —
   почти цветом фона, и полоса читалась как «что-то бледное и золотая часть». */
.split__bar {
  height: 34px; margin: 2.4rem 0 1.6rem; border: 1px solid var(--line-strong);
  background: linear-gradient(to right,
    #cfc9bc 0 10%,
    var(--dark) 10% 40%,
    var(--accent) 40% 100%);
}
.split__seg { display: none; }

/* компактный вариант цифр под полосой */
/* Отступ снизу увеличен: следующий абзац подходил к мелкой подписи вплотную
   и читался как её продолжение. */
.stats--tight { gap: 1.6rem; margin-bottom: 2.6rem; }
.entry__body .stats { margin: 2.4rem 0 2.6rem; }
.stats--tight .stat__value { font-size: clamp(1.7rem, 3.5vw, 2.3rem); }

/* карточка контакта с QR-кодом */
.contact-card {
  display: flex; flex-wrap: wrap; gap: 2.2rem; align-items: center;
  background: var(--surface); border: 1px solid var(--line);
  padding: 2rem 1.9rem; margin: 1.8rem 0;
}
.contact-card__info { flex: 1 1 240px; }
.contact-card__info h3 { margin-bottom: .2rem; }
.contact-card__post { color: var(--muted); font-size: .9rem; margin-bottom: 1rem; }
.contact-card__line { margin: 0 0 .35rem; font-size: 1.02rem; }
.contact-card__qr { flex: 0 0 auto; margin: 0; }
.contact-card__qr a { display: block; background: #fff; border: 1px solid var(--line); padding: 12px; }
.contact-card__qr img { display: block; width: 132px; height: 132px; }
.contact-card__qr figcaption {
  margin-top: .55rem; font-size: .78rem; color: var(--muted);
  text-align: center; max-width: 158px;
}



/* ---------- пара опорных фактов ---------- */

/* Крупный знак слева, пояснение справа. Знак — обычный текст, а не пустой
   тег с фоном: иначе его вырежет визуальный редактор WordPress. */
.facts {
  display: grid; gap: 1.6rem;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  margin: 2.4rem 0 1.6rem;
}
.fact {
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent); padding: 1.6rem 1.5rem;
}
.section--surface .fact { background: var(--bg); }
.fact__mark {
  display: block; margin-bottom: .7rem;
  font-family: var(--serif); line-height: 1;
  font-size: clamp(2.4rem, 5vw, 3.1rem); color: var(--accent-ink);
}
.fact h3 { font-size: 1.06rem; margin: 0 0 .35rem; }
.fact p { font-size: .94rem; line-height: 1.55; color: var(--ink-soft); margin: 0; }

/* ---------- лента истории ---------- */

/* Вехи стоят на одной оси: точка-веха, а отрезок до соседней точки рисуется
   самой вехой — так линия не выходит за крайние точки. На узком экране лента
   разворачивается в столбец, и ось становится вертикальной. */
/* Колонок ровно столько, сколько вех: их число меняется вместе с текстом. */
.timeline {
  position: relative; display: grid; gap: 1.6rem;
  grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr);
  margin: 2.6rem 0 2rem;
}
.timeline__item { position: relative; padding-top: 1.9rem; }
.timeline__item::before {
  content: ""; position: absolute; top: 0; left: 0;
  width: 11px; height: 11px; border-radius: 50%;
  background: var(--bg); border: 2px solid var(--accent);
}
.section--surface .timeline__item::before { background: var(--surface); }
.timeline__item::after {
  content: ""; position: absolute; top: 5px; left: 11px;
  width: calc(100% - 11px + 1.6rem); height: 1px; background: var(--line);
}
.timeline__item:last-child::after { content: none; }
.timeline__when {
  display: block; margin-bottom: .45rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--accent-ink);
}
.timeline__item h3 { font-size: 1.08rem; margin: 0 0 .4rem; }
.timeline__item p { font-size: .91rem; line-height: 1.5; color: var(--ink-soft); margin: 0; }

@media (max-width: 760px) {
  .timeline { grid-auto-flow: row; gap: 1.5rem; padding-left: 1.9rem; }
  .timeline__item { padding-top: 0; }
  .timeline__item::before { left: -1.9rem; top: 4px; }
  /* ось разворачивается вертикально: отрезок от точки вехи до точки следующей */
  .timeline__item::after {
    top: 15px; left: calc(-1.9rem + 5px);
    width: 1px; height: calc(100% - 15px + 1.5rem + 4px);
  }
}

/* ---------- основатели (страница «О компании») ---------- */
.founders {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 1.2rem;
  margin: 2.2rem 0; max-width: 420px;
}
.founders figure {
  margin: 0; background: var(--surface); border: 1px solid var(--line);
  padding: .7rem .7rem .8rem;
}
.founders img { width: 100%; height: auto; }
.founders figcaption {
  margin-top: .65rem; font-size: .8rem; color: var(--muted); line-height: 1.4;
}
.founders figcaption strong { display: block; color: var(--ink); font-size: .88rem; }

/* ---------- развилка «Храмам и епархиям» ---------- */

/* Два больших блока-двери: приходам и монастырям — на одну страницу-предложение,
   епархиальным управлениям — на другую. Значки нарисованы фоном псевдоэлемента,
   а вся карточка кликабельна за счёт растянутой ссылки: пустые декоративные
   теги вырезает визуальный редактор WordPress. */
.gateways {
  display: grid; gap: 1.8rem;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  margin: 2.8rem 0 1.5rem;
}
.gateway {
  position: relative; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--line);
  border-top: 2px solid var(--accent);
  padding: 2rem 1.8rem 1.7rem;
  transition: border-color .15s ease, box-shadow .15s ease, transform .15s ease;
}
.section--surface .gateway { background: var(--bg); }
.gateway::before {
  content: ""; display: block; width: 54px; height: 54px; margin-bottom: 1.2rem;
  background-repeat: no-repeat; background-position: left center; background-size: contain;
}
.gateway--hramy::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M24 7c-4.4 3.2-6.5 6-6.5 9.1 0 3.6 2.9 5.9 6.5 5.9s6.5-2.3 6.5-5.9c0-3.1-2.1-5.9-6.5-9.1z'/><path d='M17.5 22V41M30.5 22V41'/><path d='M8.5 41V27l9-4.8M39.5 41V27l-9-4.8'/><path d='M4 41h40'/><path d='M21 41v-7.5a3 3 0 0 1 6 0V41'/></svg>");
}
.gateway--eparhii::before {
  background-image: url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%23bf923d' stroke-width='1.6' stroke-linecap='round' stroke-linejoin='round'><path d='M18 6.5 31.5 11.8V41.5L18 36.2Z' fill='%23bf923d' fill-opacity='.16'/><path d='M4.5 12 18 6.5l13.5 5.3L44.5 6.5v29.7L31.5 41.5 18 36.2 4.5 41.7Z'/><path d='M18 6.5V36.2M31.5 11.8V41.5'/><circle cx='24.7' cy='22.5' r='2.6' fill='%23bf923d' stroke='none'/></svg>");
}
.gateway__kicker {
  margin: 0 0 .55rem;
  font-size: .75rem; letter-spacing: .16em; text-transform: uppercase; color: var(--muted);
}
.entry__body .gateway__title {
  margin: 0 0 .65rem; font-size: clamp(1.5rem, 2.7vw, 2rem);
}
.gateway__lead { color: var(--ink-soft); font-size: .99rem; margin: 0 0 1.5rem; }
.entry__body .gateway__facts { padding-left: 0; }
.gateway__facts {
  list-style: none; margin: auto 0 1.6rem; padding: 0;
  border-top: 1px solid var(--line);
}
.gateway__facts li {
  display: flex; align-items: baseline; gap: 1rem; margin: 0;
  padding: .72rem 0; border-bottom: 1px solid var(--line);
  font-size: .93rem; line-height: 1.45; color: var(--ink-soft);
}
.gateway__facts strong {
  flex: 0 0 6.2rem; font-family: var(--serif); font-weight: 400;
  font-size: clamp(1.25rem, 2.4vw, 1.5rem); line-height: 1.1; color: var(--accent-ink);
}
/* распорка: ссылки во всех карточках развилки стоят на одной высоте,
   даже если описания разной длины */
.gateway__more { margin: auto 0 0; font-size: .97rem; }
.gateway__more::after { content: " →"; color: var(--accent-ink); }
.gateway__more a {
  text-decoration: none; color: var(--ink);
  border-bottom: 1px solid var(--accent); padding-bottom: 2px;
}
/* ссылка растягивается на всю карточку — кликается любой её участок */
.gateway__more a::after { content: ""; position: absolute; inset: 0; }
.gateway:hover {
  border-color: var(--accent);
  box-shadow: 0 12px 34px rgba(22, 41, 74, .09);
  transform: translateY(-2px);
}
.gateway:focus-within { border-color: var(--accent); }
.gateway:hover .gateway__more a { color: var(--accent-ink); }

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

/* ---------- мобильная версия: доводка ---------- */

/* Прописные с разрядкой на 10,6–11,5 px читались плохо; минимум поднят до 12 px.
   Размеры для широкого экрана заданы выше в самих правилах. */
@media (max-width: 760px) {
  .brand__kicker { font-size: .76rem; }
  .kicker,
  .step__num,
  .flow__role,
  .flow__label,
  .flow-back__label,
  .gateway__kicker,
  .timeline__when,
  .footer-grid h4,
  th { font-size: .78rem; }
  .field label { font-size: .8rem; }
}

@media (max-width: 620px) {
  /* главное действие на телефоне занимает всю ширину */
  .hero__actions .btn,
  .form-actions .btn,
  .cta__actions .btn { display: block; width: 100%; text-align: center; }
  .hero__actions,
  .cta__actions { display: block; }
  .hero__actions .btn + .btn,
  .cta__actions .btn + .btn { margin-top: .7rem; }

  /* QR-код с экрана телефона не снять — вместо него ссылка в Telegram */
  .contact-card__qr { display: none; }

  /* полоса распределения без подписей на узком экране только путает:
     доли всё равно перечислены строками ниже */
  .split__bar { display: none; }
}

/* Ссылки в подвале и крошках получают строку целиком, а не 16–18 px текста */
@media (max-width: 900px) {
  .footer-grid li { margin-bottom: 0; }
  .footer-grid a { display: inline-block; padding: .5rem 0; }
  .breadcrumbs li { min-height: 32px; }
  .breadcrumbs a { padding: .35rem 0; }
  .site-footer__bottom { gap: .6rem; }
  .site-footer__bottom a { display: inline-block; padding: .4rem 0; }
}

/* ---------- ряд кнопок ---------- */
/* Используется на странице 404. */
.cta__actions { margin-top: 2rem; display: flex; flex-wrap: wrap; gap: .9rem; }

/* ---------- страница 404 ---------- */
.notfound__code {
  font-family: var(--serif); font-size: clamp(3.4rem, 9vw, 5.5rem);
  line-height: 1; color: var(--accent-ink); margin: 0 0 .3em;
}
.notfound__links { margin-top: 2.8rem; }

/* ---------- плашка о файлах cookie ---------- */
/* Разметку и логику показа даёт inc/cookie-notice.php. Плашка приходит
   с атрибутом hidden и проявляется скриптом, поэтому переход задан
   на класс, а не на само появление элемента. */
.cookie-notice {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 50;
  background: var(--surface);
  border-top: 1px solid var(--line);
  box-shadow: 0 -6px 24px rgba(22, 41, 74, .1);
  opacity: 0; transform: translateY(100%);
  transition: opacity .25s ease, transform .25s ease;
}
.cookie-notice.is-visible { opacity: 1; transform: none; }
.cookie-notice[hidden] { display: none; }

.cookie-notice__inner {
  max-width: var(--wrap); margin: 0 auto;
  padding: 1.1rem clamp(1.1rem, 4vw, 2rem);
  display: flex; align-items: center; gap: clamp(1rem, 3vw, 2.4rem);
}
.cookie-notice__text {
  margin: 0; font-size: .92rem; line-height: 1.55; color: var(--ink-soft);
  max-width: 78ch;
}
.cookie-notice__text a { color: var(--accent-ink); }
.cookie-notice__actions { margin: 0; flex-shrink: 0; }
.cookie-notice__accept { cursor: pointer; font-family: inherit; }

@media (max-width: 760px) {
  /* На телефоне плашка съедала почти половину экрана: текст в пять строк
     плюс кнопка в полную высоту. Ужимаем интерлиньяж, кегль и отступы —
     остаётся около трети экрана, первый экран сайта ещё читается. */
  .cookie-notice__inner { display: block; padding: .9rem 1.1rem 1rem; }
  .cookie-notice__text { font-size: .82rem; line-height: 1.45; }
  /* кнопка во всю ширину — иначе она уезжает под большой палец
     правой руки и мажется мимо */
  .cookie-notice__actions { margin-top: .8rem; }
  .cookie-notice__accept { display: block; width: 100%; padding: .7rem 1rem; }
}

@media (prefers-reduced-motion: reduce) {
  .cookie-notice { transition: none; }
}

/* Разделители разделов на странице «Вопросы и ответы» */
.entry__body hr {
  border: 0;
  border-top: 1px solid rgba(191, 146, 61, .45);
  margin: 2.6rem 0 0;
}

/* Пять пунктов меню: на промежуточных ширинах (бургер включается с 900px)
   телефон сжимается до трубки, зазоры меньше — меню держится в одну строку */
@media (min-width: 901px) and (max-width: 1140px) {
  .site-header__inner { gap: 1rem; }
  .site-nav ul { gap: 1rem; }
  .header-phone__number { display: none; }
}