/* ══════════════════════════════════════════════════════════
   現場だより（ブログ）の見た目。**案3（腕で選んでほしい形）**

   2026-11-07 村田さん「ホームページは3番をベースにしたいみたい」。
   骨組み（single.php / archive.php）は案が決まる前に作ってあり、
   クラス名だけ置いてあった。そこに案3の見た目を当てる。

   **見本（s3-blog.html / s3-post.html）と同じ形にする。**
   見本では .bc .art .pn といった短い名前だったが、ワードプレス側は
   kk- で始まる名前にしてある。対応はこう。

     見本          ワードプレス
     .pg .pin  →  .kk-main
     .pgh h1   →  .kk-arc-title
     .cats     →  .kk-cat-nav
     .blist    →  .kk-cards
     .bc       →  .kk-card
     .art      →  .kk-article
     .pn       →  .kk-pn

   **色と書体はここで持つ。**テーマの style.css には案3の定義がまだ無い
   ので、このファイルだけで完結させる（トップを案3にしたら、重なった
   定義はそのとき片付ける）。
   ══════════════════════════════════════════════════════════ */

/*
  **色と書体は style.css の :root が持つ。**ここでは持たない。
  2つの場所に同じ値を書くと、片方だけ直したときに食い違う。
*/
.kk-main {
  font-family: var(--g);
  color: var(--ink);
  background: var(--paper);
  font-size: 15px;
  line-height: 2.1;
  letter-spacing: .05em;
  -webkit-font-smoothing: antialiased;

  /* 見本の .pg ＋ .pin */
  max-width: 1180px;
  margin: 0 auto;
  padding: 64px 44px 96px;
  box-sizing: border-box;
}
/* 背景は画面いっぱいに。中身だけ 1180px に収める */
body:has(.kk-main) { background: var(--paper, #f7f4ef); }

.kk-main a { color: inherit; text-decoration: none; }
.kk-main img { display: block; max-width: 100%; }

/* ───────── 一覧の見出し ───────── */

.kk-arc-head { text-align: center; margin-bottom: 44px; }

.kk-arc-title {
  font-family: var(--m);
  font-size: 31px;
  letter-spacing: .18em;
  margin: 0 0 14px;
  font-weight: 600;
}

/* カテゴリの札。wp_list_categories は <ul><li><a> で出す */
.kk-cat-nav ul { list-style: none; margin: 0; padding: 0; display: flex; gap: 9px; justify-content: center; flex-wrap: wrap; }
.kk-cat-nav li { margin: 0; }
.kk-cat-nav a {
  display: inline-block;
  font-size: 12.5px;
  letter-spacing: .08em;
  padding: 9px 20px;
  border-radius: 999px;
  border: 1px solid var(--line);
  color: var(--ink2);
  background: #fff;
}
.kk-cat-nav a:hover { border-color: var(--or); color: var(--or); }
/* 件数（show_count）は括弧で出る。薄くして邪魔にしない */
.kk-cat-nav li { font-size: 11.5px; color: var(--ink2); }
.kk-cat-nav .current-cat > a { background: var(--or); border-color: var(--or); color: #fff; }

/* ───────── 記事の一覧（札） ───────── */

.kk-cards {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 26px;
}

.kk-card {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 3px 14px rgba(20, 20, 20, .06);
  transition: box-shadow .2s, transform .2s;
}
.kk-card:hover { box-shadow: 0 8px 22px rgba(20, 20, 20, .10); transform: translateY(-2px); }

.kk-card-img { width: 100%; height: 186px; object-fit: cover; }
.kk-card-b { padding: 20px 22px 24px; }

.kk-meta { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.kk-date { font-size: 12px; color: var(--ink2); letter-spacing: .12em; }
.kk-cat {
  font-size: 11px;
  letter-spacing: .08em;
  padding: 4px 10px;
  border-radius: 4px;
  background: var(--or);
  color: #fff;
}

.kk-card-t {
  font-family: var(--m);
  font-size: 16.5px;
  letter-spacing: .06em;
  margin: 0 0 10px;
  font-weight: 600;
  line-height: 1.72;
}
.kk-card-x { margin: 0; font-size: 12.5px; color: var(--ink2); line-height: 1.9; }

/* ───────── ページ送り ─────────
   the_posts_pagination は .navigation.pagination の中に
   .page-numbers を並べる。見本の .pager と同じ形にする。 */

.kk-main .pagination { margin-top: 52px; }
.kk-main .nav-links { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; }
.kk-main .page-numbers {
  min-width: 42px;
  height: 42px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 13.5px;
  background: #fff;
  color: var(--ink2);
}
.kk-main .page-numbers.current { background: var(--or); border-color: var(--or); color: #fff; }
.kk-main .screen-reader-text { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

/* ───────── 記事そのもの ───────── */

.kk-article { max-width: 820px; margin: 0 auto; }

.kk-article-head {
  padding-bottom: 26px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 36px;
}
.kk-article-head .kk-meta { margin-bottom: 14px; }
.kk-article-head .kk-date { font-size: 12.5px; }

.kk-title {
  font-family: var(--m);
  font-size: 28px;
  letter-spacing: .1em;
  margin: 0;
  font-weight: 600;
  line-height: 1.72;
}

.kk-body p { font-size: 14.5px; line-height: 2.2; color: var(--ink2); margin: 0 0 24px; }
.kk-body h2 {
  font-family: var(--m);
  font-size: 19px;
  letter-spacing: .1em;
  font-weight: 600;
  margin: 40px 0 16px;
  padding-left: 14px;
  border-left: 3px solid var(--or);
  line-height: 1.8;
}
.kk-body h3 { font-family: var(--m); font-size: 16.5px; letter-spacing: .08em; font-weight: 600; margin: 32px 0 12px; }
/*
  **写真は高さで止める。**アメブロの写真は縦長が混ざっていて、
  そのまま出すと1枚で画面が埋まる（見本の .artb figure と同じ）。
*/
.kk-body img { width: 100%; max-height: 520px; object-fit: cover; border-radius: 10px; margin: 0 0 28px; }
.kk-body figure { margin: 0 0 28px; }
.kk-body figcaption { margin-top: 11px; font-size: 12.5px; color: var(--ink2); letter-spacing: .04em; }
.kk-body ul, .kk-body ol { font-size: 14.5px; line-height: 2.2; color: var(--ink2); margin: 0 0 24px; padding-left: 1.4em; }
.kk-body a { color: var(--or); text-decoration: underline; text-underline-offset: 3px; }

/* ───────── 前の記事・次の記事 ───────── */

.kk-pn {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  margin-top: 56px;
  padding-top: 34px;
  border-top: 1px solid var(--line);
  max-width: 820px;
  margin-left: auto;
  margin-right: auto;
}
.kk-pn a {
  display: block;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px 22px;
}
.kk-pn a span {
  display: block;
  font-size: 11.5px;
  color: var(--or);
  letter-spacing: .12em;
  margin-bottom: 7px;
  font-weight: 700;
}
.kk-pn a b {
  font-family: var(--m);
  font-size: 14.5px;
  font-weight: 600;
  letter-spacing: .04em;
  line-height: 1.7;
}
/* 片方しか無いときに、残った1枚が横いっぱいに伸びないようにする */
.kk-pn-next { text-align: right; grid-column: 2; }
.kk-pn-prev { grid-column: 1; }

/* ───────── 同じ分類の記事 ───────── */

.kk-related { max-width: 1180px; margin: 72px auto 0; }
.kk-sub {
  font-family: var(--m);
  font-size: 19px;
  letter-spacing: .14em;
  font-weight: 600;
  margin: 0 0 24px;
  text-align: center;
}

/* ───────── 探す・見つからないとき ───────── */

.kk-search { display: flex; gap: 8px; justify-content: center; margin-top: 32px; }
.kk-search input {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13.5px;
  background: #fff;
  min-width: 240px;
}
.kk-search button {
  border: 1px solid var(--or);
  background: var(--or);
  color: #fff;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13.5px;
  letter-spacing: .08em;
  cursor: pointer;
}
.kk-none { text-align: center; color: var(--ink2); font-size: 14px; padding: 48px 0; }
.kk-back {
  display: inline-block;
  margin-top: 18px;
  border: 1px solid var(--line);
  background: #fff;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 13.5px;
}
.kk-404 { text-align: center; }

/* ───────── 細い画面 ─────────
   見本と同じ 860px で1列にする。 */

@media (max-width: 860px) {
  .kk-main { padding: 44px 18px 72px; }
  .kk-cards { grid-template-columns: 1fr; }
  .kk-arc-title { font-size: 24px; }
  .kk-title { font-size: 22px; }
  .kk-pn { grid-template-columns: 1fr; }
  .kk-pn-next, .kk-pn-prev { grid-column: 1; text-align: left; }
}