/*
Theme Name: Maslopedia - База знаний
Theme URI: http://atika1981.beget.tech/baza/
Author: Neuron
Author URI: https://neuron-group.ru
Description: Тема базы знаний doTERRA "Maslopedia" в стиле статического прототипа: список статей, рубрики, шаблон статьи. Дизайн-система вынесена в assets/base.css.
Version: 1.0
Requires at least: 6.0
Requires PHP: 7.4
License: GPL-2.0-or-later
Text Domain: efir-baza
*/

/* Базовая дизайн-система тянется из assets/base.css (enqueue в functions.php).
   Здесь - только доработки под шаблоны базы знаний. */

/* тело статьи - читаемая колонка */
.article-body { max-width: 740px; margin-inline: auto; font-size: 1.05rem; }
.article-body > p,
.article-body > ul,
.article-body > ol,
.article-body > blockquote,
.article-body > figure,
.article-body > h2,
.article-body > h3 { margin-bottom: 1.15em; }
.article-body h2 { margin-top: 1.5em; }
.article-body h3 { margin-top: 1.25em; }
.article-body p { color: var(--ink-soft); }
.article-body ul, .article-body ol { padding-left: 1.35em; }
.article-body li { margin-bottom: .45em; color: var(--ink-soft); }
.article-body img { border-radius: var(--r); margin: 1.2em 0; }
.article-body a { color: var(--clay-deep); text-decoration: underline; text-underline-offset: 2px; }
.article-body blockquote.quote p { }

/* обложка статьи */
.article-cover { border-radius: var(--r-lg); overflow: hidden; aspect-ratio: 16/8; }
.article-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* карточка статьи с обложкой */
.card__media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.card__media--empty { background: linear-gradient(135deg, var(--sage-soft), var(--sand)); }

/* пагинация WP */
.efir-pagination { display: flex; gap: 8px; justify-content: center; margin-top: 28px; flex-wrap: wrap; align-items: center; }
.efir-pagination .page-numbers {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 44px; padding: 11px 16px; border-radius: 999px;
  border: 1.5px solid var(--line); color: var(--ink); font-weight: 600; font-size: .98rem;
  transition: .2s;
}
.efir-pagination a.page-numbers:hover { border-color: var(--sage-deep); color: var(--sage-deep); }
.efir-pagination .page-numbers.current { background: var(--sage-deep); color: #fff; border-color: var(--sage-deep); }
.efir-pagination .page-numbers.dots { border: 0; }

/* автор статьи */
.author-box { display: flex; align-items: center; gap: 20px; }
.author-box .avatar { width: 84px; height: 84px; font-size: 1.8rem; flex: none; }

/* аватар-монограмма (как на статике) */
.avatar {
  width: 48px; height: 48px; border-radius: 50%; flex: none;
  display: flex; align-items: center; justify-content: center;
  background: var(--sage-soft); color: var(--sage-deep);
  font-family: var(--display); font-weight: 600; font-size: 1.05rem;
  border: 1px solid var(--line);
}

/* пустое состояние */
.efir-empty { max-width: 640px; margin: 40px auto; text-align: center; }

/* ---------- Строка поиска по базе знаний ---------- */
.kb-search {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg);
  padding: clamp(20px, 3vw, 30px); box-shadow: var(--shadow);
  display: grid; gap: 16px;
}
.kb-search .field { min-width: 0; }
.kb-search input[type="search"] { width: 100%; }
.kb-search .btn { justify-self: center; padding-inline: 44px; }
.kb-search--inline { margin-block: clamp(24px, 4vw, 38px); }
/* мобильные: подсказка мельче, чтобы влезала целиком. Уменьшаем ТОЛЬКО ::placeholder —
   у самого input font-size остаётся 16px, иначе iOS Safari зумит страницу при фокусе. */
@media (max-width: 560px) {
  .kb-search input[type="search"] { padding-inline: 13px; }
  .kb-search input[type="search"]::placeholder { font-size: .9rem; }
}

/* ============================================================
   Неделя 3 SEO-этапа: шаблон статьи и страница автора
   ============================================================ */

/* «Коротко» - тезисы в начале статьи */
.takeaways {
  background: var(--sage-soft); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(18px, 2.6vw, 26px); margin-bottom: clamp(22px, 3vw, 32px);
}
.takeaways .eyebrow { color: var(--sage-deep); }
.takeaways ul { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; }
.takeaways li { color: var(--ink); }

/* Оглавление - собирается из H2 текста */
.toc {
  background: var(--paper); border: 1px solid var(--line); border-radius: var(--r);
  padding: clamp(16px, 2.4vw, 24px); margin-bottom: clamp(24px, 3.4vw, 36px);
}
.toc .eyebrow { color: var(--muted); }
.toc ol { margin: 10px 0 0; padding-left: 22px; display: grid; gap: 7px; }
.toc a { color: var(--ink-soft); text-decoration: none; border-bottom: 1px solid transparent; }
.toc a:hover { color: var(--clay-deep); border-bottom-color: var(--clay-soft); }

/* Цитата эксперта в шапке статьи */
.quote--expert { background: var(--cream-2, var(--sand)); border-left: 3px solid var(--sage); }
.quote--expert .quote__author { display: block; color: var(--muted); font-size: .9rem; }
.quote--expert .quote__author a { color: var(--ink); text-decoration: none; }
.quote--expert .quote__author a:hover { color: var(--clay-deep); }

/* Блок автора под статьёй */
.avatar--photo { overflow: hidden; padding: 0; }
.avatar--photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; display: block; }
.author-box__name { color: var(--ink); text-decoration: none; border-bottom: 1px solid var(--line); }
.author-box__name:hover { color: var(--clay-deep); border-bottom-color: var(--clay); }
.author-box__role { display: block; color: var(--sage-deep); font-size: .88rem; margin-top: 2px; }

/* Страница автора */
.author-page { display: grid; grid-template-columns: 160px 1fr; gap: clamp(20px, 3vw, 36px); align-items: start; }
.author-page__photo img {
  width: 160px; height: 160px; border-radius: 50%; object-fit: cover;
  border: 1px solid var(--line); display: block;
}
.author-page__role { color: var(--sage-deep); font-weight: 600; margin-top: 4px; }
@media (max-width: 640px) {
  .author-page { grid-template-columns: 1fr; justify-items: center; text-align: center; }
}