/*
Theme Name: Karate News
Theme URI: https://krasnodar-karate.ru/news/
Description: Блог клуба киокушинкай IFK в Краснодаре. Наследует дизайн-систему лендинга (css/tokens.css, base.css, components.css, sections.css, pages.css) — собственных значений цвета, кеглей и отступов почти не добавляет.
Author: Каратэ Киокушинкай IFK Краснодар
Version: 1.0.2
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: karate-news
*/

/* ==========================================================================
   Здесь только то, чего нет в стилях лендинга: механика WordPress
   (пагинация, формы, комментарии, админ-бар). Всё остальное — из
   /css/*.css и /blog/blog.css самого лендинга, подключённых в functions.php.

   Файл не обёрнут в @layer намеренно: правила лендинга лежат в слоях
   (tokens, base, components, sections, utils), поэтому необёрнутые правила
   отсюда выигрывают у них независимо от порядка подключения. Это нужно
   только для служебных элементов WordPress — селекторы узкие и не трогают
   типографику и сетку лендинга.
   ========================================================================== */

/* --- Список записей: числа, даты, отрывки ------------------------------- */

.blog-list__excerpt {
  color: var(--c-ink-2);
  font-size: var(--fs-sm);
  line-height: var(--lh-sm);
  max-width: var(--measure);
}

.blog-list__item a {
  color: var(--c-ink);
}

.blog-list__item .blog-list__t {
  color: var(--c-ink);
}

/* Дата в карточке списка — тем же ритмом, что номер рассказа в блоге */
.blog-list__date {
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.blog-list__item a:hover .blog-list__t {
  color: var(--c-red-dark);
}

/* --- Пагинация ---------------------------------------------------------- */

.pagination {
  margin-top: var(--sp-10);
}

.pagination .nav-links {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2);
  align-items: center;
}

.pagination .page-numbers {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--tap);
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  border: var(--border);
  border-radius: var(--radius-sm);
  color: var(--c-ink);
  font-size: var(--fs-sm);
  text-decoration: none;
}

.pagination .page-numbers:hover {
  border-color: var(--c-line-2);
  background: var(--c-bg-soft);
}

.pagination .page-numbers.current {
  background: var(--c-bg-dark);
  border-color: var(--c-bg-dark);
  color: var(--c-on-dark);
  font-weight: 700;
}

.pagination .page-numbers.dots {
  border-color: transparent;
  min-width: auto;
  padding-inline: var(--sp-1);
}

/* --- Поиск и «ничего не найдено» ---------------------------------------- */

.search-form {
  display: flex;
  gap: var(--sp-2);
  margin-bottom: var(--sp-8);
  max-width: 480px;
}

.search-form .search-field {
  flex: 1 1 auto;
  min-height: var(--tap);
  padding-inline: var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-sm);
  background: var(--c-bg);
}

.search-form .search-submit {
  min-height: var(--tap);
  padding-inline: var(--sp-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-red-cta);
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  cursor: pointer;
}

.search-form .search-submit:hover {
  background: var(--c-red-dark);
}

/* --- Заголовок архива/рубрики ------------------------------------------- */

.archive-head {
  margin-bottom: var(--sp-8);
}

.archive-head__meta {
  font-family: var(--f-display);
  font-weight: 600;
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-red-dark);
  margin-bottom: var(--sp-2);
}

/* --- Содержимое записи: картинки, таблицы, цитаты, код ------------------ */

.article__body img,
.blog-article__body img {
  width: 100%;
  height: auto;
  border-radius: var(--radius-md);
}

.article__body figure,
.blog-article__body figure {
  margin: var(--sp-6) 0;
}

.article__body figcaption,
.blog-article__body figcaption {
  margin-top: var(--sp-2);
  color: var(--c-muted);
  font-size: var(--fs-sm);
}

.article__body blockquote,
.blog-article__body blockquote {
  margin: var(--sp-6) 0;
  padding: var(--sp-4) var(--sp-5);
  border-left: 3px solid var(--c-red);
  background: var(--c-bg-soft);
  border-radius: var(--radius-sm);
}

.article__body blockquote p,
.blog-article__body blockquote p {
  margin: 0;
}

.article__body h2,
.article__body h3,
.article__body h4,
.blog-article__body h2,
.blog-article__body h3,
.blog-article__body h4 {
  margin-top: var(--sp-8);
  margin-bottom: var(--sp-2);
}

.article__body a,
.blog-article__body a {
  color: var(--c-red-dark);
}

.article__body table,
.blog-article__body table {
  width: 100%;
  border-collapse: collapse;
  margin: var(--sp-6) 0;
  font-size: var(--fs-sm);
}

.article__body th,
.article__body td,
.blog-article__body th,
.blog-article__body td {
  padding: var(--sp-2) var(--sp-3);
  border-bottom: 1px solid var(--c-line);
  text-align: left;
}

.article__body th,
.blog-article__body th {
  font-family: var(--f-display);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: var(--fs-xs);
}

.article__body hr,
.blog-article__body hr {
  border: 0;
  border-top: 1px solid var(--c-line);
  margin-block: var(--sp-8);
}

/* WordPress вставляет <p> без нашего класса .article__body — выравниваем меру */
.article .container > p {
  max-width: var(--measure);
}

/* --- Ссылки «предыдущая/следующая запись» ------------------------------- */

.post-nav {
  display: grid;
  gap: var(--sp-4);
  margin-top: var(--sp-10);
  padding-top: var(--sp-6);
  border-top: 1px solid var(--c-line);
}

@media (min-width: 768px) {
  .post-nav {
    grid-template-columns: 1fr 1fr;
  }
}

.post-nav a {
  display: block;
  color: var(--c-ink);
  text-decoration: none;
}

.post-nav__label {
  display: block;
  font-family: var(--f-display);
  font-size: var(--fs-xs);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--c-muted);
  margin-bottom: var(--sp-1);
}

.post-nav a:hover .post-nav__title {
  color: var(--c-red-dark);
}

.post-nav__title {
  font-family: var(--f-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-h3);
}

.post-nav--next {
  text-align: right;
}

/* --- Админ-бар: шапка не заезжает под него ------------------------------ */

.admin-bar .header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  .admin-bar .header {
    top: 46px;
  }
}

/* --- Комментарии по умолчанию выключены, но форма не должна ломать вид -- */

.comment-respond {
  margin-top: var(--sp-10);
}

.comment-respond input[type="text"],
.comment-respond input[type="email"],
.comment-respond input[type="url"],
.comment-respond textarea {
  width: 100%;
  max-width: 480px;
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--c-line-2);
  border-radius: var(--radius-sm);
}

.comment-respond .submit {
  min-height: var(--tap);
  padding-inline: var(--sp-5);
  border: 0;
  border-radius: var(--radius-sm);
  background: var(--c-red-cta);
  color: var(--c-white);
  font-family: var(--f-display);
  font-weight: 700;
  text-transform: uppercase;
  cursor: pointer;
}


/* --- Служебный текст WordPress -----------------------------------------
   В дизайн-системе лендинга такого класса нет, поэтому подписи вроде
   «Навигация по записям» выводились на экран. Скрываем их так же, как это
   делает WordPress: они остаются доступны скринридерам. */
.screen-reader-text {
  position: absolute !important;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}