/*
Theme Name: Farhollow Landing
Description: Одностраничный лендинг для farhollow.top (Мария). Лёгкая тема без конструкторов, только для одной посадочной страницы.
Author: Gromozeka
Version: 2.1
Text Domain: farhollow-landing

Changelog:
1.0 — первая версия (структура блоков, форма, тёплая палитра эспрессо/крем)
1.1 — плавающая кнопка на мобильных: короче текст, не переносится; нижняя кнопка — только на десктопе
1.2 — палитра пурпур/тёмное золото, декоративные акценты (орнамент, цитата с крупной кавычкой,
      карточка для трастов, свечение на CTA), плавное появление блоков при скролле,
      отступ снизу под плавающую кнопку, шрифт кнопок — Lora вместо системного
1.3 — заголовок хедера переписан; отступ снизу под плавающую кнопку теперь воздух внутри
      закрывающего блока (фон доходит до низа экрана), а не пустая полоса под ним
1.4 — текст блока «о Марии» переписан по реальным темам обращений (отношения, работа/деньги,
      здоровье близких, важные решения); блок преимуществ переписан теплее, добавлен пятый пункт;
      подводка перед формой изменена на «Оставьте контакты — я отвечу в ближайшее время»
1.5 — добавлен блок «с чем чаще всего приходят» (чипы) в конце блока «о Марии»; слово «здоровье»
      убрано из текста и заменено на «благополучие» / «переживания за близких» — во избежание
      попадания в медицинскую категорию модерации Meta
1.6 — чипы-пилюли заменены на карточки с коротким описанием каждой темы; подводка над блоком
      переписана от первого лица («...вы можете обратиться ко мне»)
1.7 — карточки с темами обращений закреплены в сетке 2×2 на всех разрешениях (на десктопе
      4 колонки в 640px-контейнере были слишком узкими)
1.8 — на мобильных карточки с темами обращений теперь в один столбец (по одной в ряд);
      сетка 2×2 осталась только на десктопе
1.9 — заголовок hero переписан: старая формулировка «скрыто на бесплатной консультации» звучала
      двусмысленно; новая — «Бесплатная консультация с Марией — разберёмся в том, что вас тревожит»
2.0 — добавлен шаблон page-success.php — страница благодарности после отправки формы (адрес /success/,
      подключается WordPress автоматически по слагу страницы), с тем же дизайном и базовым Pixel-снипетом
2.1 — убран захардкоженный Meta Pixel и домен-верификация из index.php и page-success.php: они дублировали
      сниппет HFCM, который уже вставляется на все страницы через плагин. Теперь Pixel — только в HFCM.
*/

/* ---------- Fonts (self-hosted, no third-party requests) ---------- */
@font-face {
  font-family: "Lora";
  src: url("fonts/Lora-Variable.woff2") format("woff2-variations"), url("fonts/Lora-Variable.woff2") format("woff2");
  font-weight: 400 700;
  font-style: normal;
  font-display: swap;
}

/* ---------- Design tokens ---------- */
:root {
  --color-bg: #fbf7f1;
  --color-bg-alt: #f2e9dc;
  --color-ink: #2b2019;
  --color-ink-soft: #55483c;
  --color-border: #e4d7c4;

  /* глубокий пурпур — для хедера и закрывающего блока */
  --color-deep: #241726;
  --color-deep-soft: #33203a;
  --color-cream-on-deep: #f3e7d6;
  --color-muted-on-deep: #c9b8c7;

  /* тёмное золото — акцент везде */
  --color-gold: #c9a24b;
  --color-gold-strong: #a97f2b;
  --color-gold-line: #b8862e;

  --font-heading: "Lora", Georgia, "Times New Roman", serif;
  --font-body: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;

  --container-w: 640px;
  --radius: 14px;
}

/* ---------- Reset (minimal) ---------- */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--color-bg);
  color: var(--color-ink);
  font-family: var(--font-body);
  font-size: 17px;
  line-height: 1.55;
  -webkit-font-smoothing: antialiased;
}
img { max-width: 100%; display: block; height: auto; }
h1, h2, h3 {
  font-family: var(--font-heading);
  font-weight: 600;
  line-height: 1.2;
  margin: 0 0 16px;
  color: var(--color-ink);
}
p { margin: 0 0 16px; }
.container {
  max-width: var(--container-w);
  margin: 0 auto;
  padding: 0 20px;
}
.section { padding: 48px 0; }
.section--alt { background: var(--color-bg-alt); }
.center { text-align: center; }

/* отступ под плавающую кнопку — не как пустая полоса под секцией,
   а как дополнительный воздух внутри последнего (тёмного) блока,
   чтобы его фон доходил до самого низа экрана */
@media (max-width: 899px) {
  .section--closing { padding-bottom: 140px; }
}

/* ---------- Тёмные блоки (хедер + закрывающий) ---------- */
.hero--deep {
  background: radial-gradient(120% 140% at 50% 0%, var(--color-deep-soft) 0%, var(--color-deep) 62%);
  color: var(--color-cream-on-deep);
}
.hero--deep h1,
.hero--deep h2 { color: var(--color-cream-on-deep); }
.hero--deep .hero__lede,
.hero--deep p { color: var(--color-muted-on-deep); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 17px;
  letter-spacing: .2px;
  text-decoration: none;
  padding: 16px 30px;
  border-radius: 12px;
  border: none;
  cursor: pointer;
  transition: transform .15s ease, box-shadow .15s ease, background-color .15s ease;
}
.btn--gold {
  background: linear-gradient(180deg, var(--color-gold) 0%, var(--color-gold-strong) 100%);
  color: #2b1a2e;
  box-shadow: 0 10px 24px rgba(169, 127, 43, .28);
}
.btn--gold:hover,
.btn--gold:active {
  background: linear-gradient(180deg, #d3af5c 0%, var(--color-gold-strong) 100%);
  transform: translateY(-1px);
}
.btn--block { display: block; width: 100%; text-align: center; }

/* лёгкое привлекающее внимание свечение вокруг главной кнопки в хедере */
.btn--glow { position: relative; }
.btn--glow::after {
  content: "";
  position: absolute;
  inset: -6px;
  border-radius: 16px;
  background: radial-gradient(circle, rgba(201,162,75,.55) 0%, rgba(201,162,75,0) 70%);
  z-index: -1;
  animation: glow-pulse 2.6s ease-in-out infinite;
}
@keyframes glow-pulse {
  0%, 100% { opacity: .5; transform: scale(1); }
  50% { opacity: 1; transform: scale(1.08); }
}

/* ---------- Hero ---------- */
.hero { padding: 40px 0 36px; text-align: center; }
.hero__photo {
  width: 168px;
  height: 168px;
  border-radius: 50%;
  overflow: hidden;
  margin: 0 auto 24px;
  border: 3px solid var(--color-gold);
  box-shadow: 0 0 0 6px rgba(201, 162, 75, .18), 0 10px 28px rgba(0, 0, 0, .35);
}
.hero__photo img { width: 100%; height: 100%; object-fit: cover; }
.hero h1 { font-size: 28px; letter-spacing: -0.2px; margin-bottom: 14px; }
.hero__lede { font-size: 17px; max-width: 480px; margin: 0 auto 28px; }

/* ---------- Form section ---------- */
#consultation { scroll-margin-top: 16px; }
.form-card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 24px 20px 12px;
  box-shadow: 0 10px 30px rgba(43, 32, 25, .08);
}
.form-card__lede { text-align: center; font-weight: 600; margin-bottom: 18px; }
.wpforms-container {
  --wpforms-field-border-radius: 10px;
  --wpforms-field-background-color: #fbf7f1;
  --wpforms-field-border-color: #e4d7c4;
  --wpforms-field-text-color: #2b2019;
  --wpforms-label-color: #2b2019;
  --wpforms-button-border-radius: 12px;
  --wpforms-button-background-color: #a97f2b;
  --wpforms-button-border-color: #a97f2b;
  --wpforms-button-text-color: #ffffff;
  --wpforms-button-size-font-size: 17px;
  --wpforms-button-size-height: 52px;
}

/* ---------- About ---------- */
.about h2 { font-size: 24px; }
.about p { color: var(--color-ink-soft); }

/* ---------- Проблемы, с которыми приходят (карточки) ---------- */
.problems-lede {
  font-weight: 600;
  color: var(--color-ink);
  margin-bottom: 14px;
}
.problem-cards {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: 12px;
}
.problem-cards li {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 16px 16px 18px;
  box-shadow: 0 6px 16px rgba(43, 32, 25, .05);
}
.problem-cards__title {
  display: block;
  font-family: var(--font-heading);
  font-weight: 600;
  font-size: 15px;
  color: var(--color-ink);
  margin-bottom: 6px;
}
.problem-cards p {
  margin: 0;
  font-size: 13px;
  line-height: 1.45;
  color: var(--color-ink-soft);
}

/* ---------- Trust list ---------- */
.trust-list { list-style: none; margin: 0; padding: 0; }
.trust-list li { display: flex; gap: 12px; align-items: flex-start; padding: 10px 0; color: var(--color-ink-soft); }
.trust-list svg { flex: none; margin-top: 3px; }
.trust-list--card {
  background: #fff;
  border: 1px solid var(--color-border);
  border-radius: var(--radius);
  padding: 8px 20px;
  box-shadow: 0 8px 22px rgba(43, 32, 25, .06);
}
.trust-list--card li:not(:last-child) { border-bottom: 1px dashed var(--color-border); }

/* ---------- Quote (в тёмном блоке) ---------- */
.quote {
  font-family: var(--font-heading);
  font-size: 22px;
  line-height: 1.45;
  font-style: italic;
  max-width: 520px;
  margin: 0 auto 8px;
  position: relative;
}
.quote__mark {
  font-family: var(--font-heading);
  font-style: normal;
  font-size: 64px;
  color: var(--color-gold);
  opacity: .5;
  line-height: 0;
  vertical-align: -18px;
  margin-right: 4px;
}

/* декоративный разделитель */
.ornament { display: flex; justify-content: center; margin: 20px auto 28px; opacity: .85; }

.scarcity-text { max-width: 480px; margin: 0 auto 24px; }

/* ---------- Плавное появление блоков при скролле (только если есть JS) ---------- */
.js [data-reveal] {
  opacity: 0;
  transform: translateY(18px);
  transition: opacity .6s ease, transform .6s ease;
}
.js [data-reveal].is-in { opacity: 1; transform: translateY(0); }
@media (prefers-reduced-motion: reduce) {
  .js [data-reveal] { opacity: 1; transform: none; transition: none; }
  .btn--glow::after { animation: none; }
}

/* ---------- Floating mobile CTA ---------- */
.sticky-cta {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom));
  background: rgba(36, 23, 38, .96);
  border-top: 1px solid rgba(201, 162, 75, .35);
  backdrop-filter: saturate(180%) blur(6px);
  transform: translateY(110%);
  transition: transform .25s ease;
  z-index: 40;
}
.sticky-cta.is-visible { transform: translateY(0); }
.sticky-cta .btn {
  padding: 14px 18px;
  font-size: clamp(14px, 4.2vw, 17px);
  white-space: nowrap;
}

/* нижняя закрывающая кнопка нужна только там, где нет плавающей — на десктопе */
.btn--closing { display: none; }
@media (min-width: 900px) {
  .btn--closing { display: inline-block; }
}

/* ---------- Desktop / tablet ---------- */
@media (min-width: 900px) {
  body { font-size: 18px; }
  .hero { padding: 72px 0 56px; }
  .hero__photo { width: 200px; height: 200px; }
  .hero h1 { font-size: 38px; max-width: 640px; margin-left: auto; margin-right: auto; }
  .hero__lede { font-size: 19px; max-width: 560px; }
  .section { padding: 72px 0; }
  .form-card { padding: 36px 40px 20px; }
  .about h2 { font-size: 30px; }
  .problem-cards { grid-template-columns: 1fr 1fr; }
  .quote { font-size: 26px; }
  .sticky-cta { display: none; }
}