/*
Theme Name: Syushi Blog
Theme URI: https://syushi.com/blog/
Author: 合同会社しゅし
Author URI: https://syushi.com/
Description: syushi.com 本体のデザイン資産（/styles.css・/_subpage-shell.css）をそのまま読み込む自作テーマ。配色・タイポグラフィ・ヘッダー・フッターは本体サイトと完全に共通で、本体のCSSを直せばブログ側にも自動で反映される。ここには「本体サイトに存在しないブログ固有の部品」だけを書く。
Version: 1.0.1
Requires at least: 6.0
Tested up to: 6.9
Requires PHP: 7.4
License: Proprietary
Text Domain: syushi-blog
*/

/* =================================================================
   記事一覧カード
   本体サイトの .blog-cat-card（blog.html のカテゴリ予告カード）を
   リンク化して流用する。変数は /styles.css 由来。
   ================================================================= */
.blog-post-grid {
  margin-top: 40px;
}

.blog-post-card {
  padding: 0;
  transition: border-color 0.2s ease, transform 0.2s ease;
}

.blog-post-card:hover {
  border-color: var(--accent);
  transform: translateY(-2px);
}

.blog-post-link {
  display: block;
  padding: 26px 28px;
  color: inherit;
  text-decoration: none;
}

.blog-post-meta {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
  margin: 0 0 10px;
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  align-items: center;
}

.blog-post-meta .meta-cat::before {
  content: "#";
}

.blog-post-card h3 {
  margin: 0 0 10px;
}

.blog-post-excerpt {
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0 0 14px;
}

.blog-post-more {
  font-family: var(--font-mono);
  font-size: 12px;
  color: var(--accent);
}

/* サムネイル（アイキャッチ画像がある記事のみ） */
.blog-post-thumb {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-bottom: 1px solid var(--ink-muted);
}

/* =================================================================
   記事本文
   本文の基本タイポグラフィは本体サイトの .legal-body を使い、
   ここでは記事特有の要素（引用・コード・画像・表）だけ補う。
   ================================================================= */
.blog-article .legal-body img {
  max-width: 100%;
  height: auto;
  border-radius: 6px;
}

.blog-article .legal-body figure {
  margin: 28px 0;
}

.blog-article .legal-body figcaption {
  font-size: 12.5px;
  color: var(--accent);
  margin-top: 8px;
  text-align: center;
}

.blog-article .legal-body blockquote {
  margin: 24px 0;
  padding: 4px 0 4px 20px;
  border-left: 3px solid var(--ink-muted);
  color: var(--accent);
}

.blog-article .legal-body pre {
  background: var(--paper-tint);
  border: 1px solid var(--ink-muted);
  border-radius: 6px;
  padding: 18px 20px;
  overflow-x: auto;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.8;
}

.blog-article .legal-body code {
  font-family: var(--font-mono);
  font-size: 0.92em;
}

.blog-article .legal-body :not(pre) > code {
  background: var(--paper-tint);
  border: 1px solid var(--ink-muted);
  border-radius: 3px;
  padding: 1px 5px;
}

.blog-article .legal-body table {
  width: 100%;
  border-collapse: collapse;
  margin: 24px 0;
  font-size: 14px;
}

.blog-article .legal-body th,
.blog-article .legal-body td {
  border: 1px solid var(--ink-muted);
  padding: 10px 12px;
  text-align: left;
}

.blog-article .legal-body th {
  background: var(--paper-tint);
  font-weight: 600;
}

/* 記事のメタ情報（日付・カテゴリ・タグ） */
.blog-meta {
  font-family: var(--font-mono);
  font-size: 13px;
  color: var(--accent);
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  margin: 18px 0 0;
}

.blog-meta a {
  color: inherit;
}

.blog-tags {
  margin: 40px auto 0;
  max-width: 820px;
  font-family: var(--font-mono);
  font-size: 12.5px;
  color: var(--accent);
}

.blog-tags a {
  color: inherit;
  margin-right: 10px;
}

/* =================================================================
   前後記事ナビ・ページャ
   ================================================================= */
.blog-nav {
  max-width: 820px;
  margin: 56px auto 0;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
}

.blog-nav a {
  display: block;
  padding: 18px 20px;
  border: 1px solid var(--ink-muted);
  border-radius: 6px;
  background: var(--paper-tint);
  color: inherit;
  text-decoration: none;
  font-size: 14px;
  line-height: 1.7;
  transition: border-color 0.2s ease;
}

.blog-nav a:hover {
  border-color: var(--accent);
}

.blog-nav .nav-label {
  display: block;
  font-family: var(--font-mono);
  font-size: 11.5px;
  color: var(--accent);
  margin-bottom: 6px;
}

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

.blog-pager {
  margin-top: 48px;
  text-align: center;
  font-family: var(--font-mono);
  font-size: 14px;
}

.blog-pager .page-numbers {
  display: inline-block;
  min-width: 38px;
  padding: 8px 10px;
  margin: 0 3px;
  border: 1px solid var(--ink-muted);
  border-radius: 4px;
  color: var(--ink);
  text-decoration: none;
}

.blog-pager .page-numbers.current,
.blog-pager .page-numbers:hover {
  background: var(--ink);
  border-color: var(--ink);
  color: var(--bg);
}

/* =================================================================
   検索フォーム・記事なし表示
   ================================================================= */
.blog-searchform {
  display: flex;
  gap: 8px;
  width: 100%;
  max-width: 460px;
  margin: 28px auto 0;
}

.blog-searchform input[type="search"] {
  /* min-width:0 が無いと input の初期サイズ（約20文字分）が最小幅として効いてしまい、
     狭い画面で親要素からはみ出す。box-sizing も明示して padding 分の溢れを防ぐ。 */
  flex: 1 1 auto;
  min-width: 0;
  box-sizing: border-box;
  padding: 10px 14px;
  border: 1px solid var(--ink-muted);
  border-radius: 4px;
  background: var(--bg);
  font-family: inherit;
  font-size: 16px; /* iOSでフォーカス時に自動ズームされないよう16px以上にする */
  color: var(--ink);
}

.blog-searchform button {
  flex: 0 0 auto;
  box-sizing: border-box;
  padding: 10px 18px;
  border: 1px solid var(--ink);
  border-radius: 4px;
  background: var(--ink);
  color: var(--bg);
  font-family: var(--font-mono);
  font-size: 13px;
  white-space: nowrap;
  cursor: pointer;
}

.blog-empty {
  max-width: 820px;
  margin: 40px auto 0;
  padding: 40px;
  border: 1px dashed var(--ink-muted);
  border-radius: 8px;
  background: var(--paper-tint);
  text-align: center;
}

.blog-empty h2 {
  font-family: var(--font-jp);
  font-size: 20px;
  margin: 0 0 12px;
}

.blog-empty p {
  font-size: 14.5px;
  line-height: 1.9;
  margin: 0;
}

/* =================================================================
   スマホ
   ================================================================= */
@media (max-width: 720px) {
  .blog-nav {
    grid-template-columns: 1fr;
  }
  .blog-nav .nav-next {
    text-align: left;
  }
  .blog-post-link {
    padding: 22px 22px;
  }
  /* 内側の余白が大きいと検索フォームの幅を圧迫するため狭める */
  .blog-empty {
    padding: 28px 18px;
  }
  .blog-searchform {
    gap: 6px;
  }
  .blog-searchform button {
    padding: 10px 14px;
  }
}