/* EX REDESiGN — assets/css/single.css
 * Single-post / page article body — headings, prose, separator, prev/next navigation, image fallback.
 *
 * Selectors: .ex-post-date, .ex-post-tags, .ex-post-title
 * Variables consumed: --color-border, --color-border-subtle, --color-surface-raised, --color-text-primary, --color-text-secondary
 *
 * Sections (search anchors — grep `@section <name>`):
 *   @section post-content               L15-L91  Post content
 *   @section separator                  L92-L99  Separator
 *   @section post-navigation            L100-L110  Post navigation
 *   @section single-post-layout         L111-L116  Single post layout
 *   @section featured-image-fallback-no-thumbnail L117-L125  Featured image fallback (no thumbnail)
 */

/* ── Post content ── */
body.single-post .wp-block-post-content,
body.single-post .entry-content {
  font-size: var(--exr-fs-base);
  line-height: 1.75;
  color: var(--color-text-primary);
}
body.single-post .wp-block-post-content p,
.entry-content p { margin-bottom: 1.25rem; }
body.single-post .wp-block-post-content h2,
body.single-post .entry-content h2 {
  font-size: var(--exr-fs-xl);
  font-weight: 600;
  letter-spacing: -0.015em;
  line-height: 1.35;
  margin-top: 2.5rem;
  margin-bottom: 1rem;
  padding-bottom: 0.5rem;
  border-bottom: 1px solid var(--color-border-subtle);
}
body.single-post .wp-block-post-content h3,
body.single-post .entry-content h3 {
  font-size: var(--exr-fs-base);
  font-weight: 600;
  line-height: 1.4;
  margin-top: 2rem;
  margin-bottom: 0.75rem;
  padding-inline-start: 0.75rem;
  border-inline-start: 2px solid var(--color-border);
}
body.single-post .wp-block-post-content blockquote,
body.single-post .entry-content blockquote {
  border-inline-start: 2px solid var(--color-border-subtle);
  padding-inline-start: 1rem;
  margin-inline-start: 0;
  color: var(--color-text-secondary);
  font-style: italic;
}
body.single-post .wp-block-post-content code,
body.single-post .entry-content code {
  background: var(--color-surface-raised);
  border-radius: 4px;
  padding: 0.1em 0.35em;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: 0.875em;
}
body.single-post .wp-block-post-content pre,
body.single-post .entry-content pre {
  background: #0f1117;
  color: #34d399;
  border-radius: 8px;
  padding: 1rem;
  overflow-x: auto;
  font-family: ui-monospace, 'SF Mono', monospace;
  font-size: var(--exr-fs-sm);
  line-height: 1.6;
}
body.single-post .wp-block-post-content pre code,
.entry-content pre code { background: none; padding: 0; }
body.single-post .wp-block-post-content img,
body.single-post .entry-content img {
  max-width: 100%;
  border-radius: 8px;
  display: block;
  margin: 1.5rem auto;
}
body.single-post .wp-block-post-content ul,
body.single-post .wp-block-post-content ol,
body.single-post .entry-content ul,
.entry-content ol { padding-inline-start: 1.5rem; margin-bottom: 1rem; }
body.single-post .wp-block-post-content hr,
body.single-post .entry-content hr {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin: 2rem 0;
}

/* ── Separator ── */
.wp-block-separator {
  border: none;
  border-top: 1px solid var(--color-border-subtle);
  margin-top: 0; margin-bottom: 0;
}


/* ── Post navigation ── */
.wp-block-post-navigation-link a {
  font-size: var(--exr-fs-xs);
  color: var(--color-text-secondary);
  text-decoration: none;
  transition: color 200ms;
}
.wp-block-post-navigation-link a:hover { color: var(--color-text-primary); }
.ex-post-nav {
  gap: 2.5rem;
  margin-top: 2.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--color-border-subtle);
}
.ex-post-nav .post-navigation-link-previous a::before { content: '← '; opacity: 0.6; }
.ex-post-nav .post-navigation-link-next a::after { content: ' →'; opacity: 0.6; }



/* ── Single post layout ── */
.ex-post-title { font-size: var(--exr-fs-2xl) !important; letter-spacing: var(--exr-ls-2xl, -0.015em); line-height: var(--exr-lh-2xl, 1.3); margin-bottom: 0.5rem !important; }
.ex-post-date { margin-bottom: 2rem; }
/* カテゴリー (タイトル下・日付上)。 チップ装飾はタグと共通 (.wp-block-post-terms a)。
   区切りなし (= render_block)。 チップ自身の margin (0.15rem) で間隔をとり、 タグと同じ詰め具合にする
   (flex gap は使わない = チップ margin との二重間隔を避ける)。 */
.ex-post-categories { margin: 0.75rem 0; }
/* タグ。 区切りのカンマを廃止 (= render_block)。 チップ margin で間隔をとる (カード一覧のタグと同じ)。 */
.ex-post-tags { margin-top: 2.5rem; padding-top: 1.25rem; border-top: 1px solid var(--color-border-subtle); }

/* page.html: post-title と post-content の間隔。
   _exr_hide_title=ON で post-title が空文字に置換された場合、
   隣接セレクタが不一致となりマージンも発生しない（空白が残らない）。 */
.exr-main > .wp-block-post-title + .wp-block-post-content { margin-top: 2rem; }


/* -- Featured image fallback (no thumbnail) -- */
.wp-block-post-featured-image:empty,
.wp-block-post:not(:has(.wp-block-post-featured-image img)) .wp-block-post-featured-image {
  display: none;
}
.wp-block-post:not(:has(.wp-block-post-featured-image img)) {
  border-top: 3px solid var(--color-border);
}


/* ── Table of Contents (個別投稿本文冲頭に自動挿入) ──
   inc/dynamic/toc.php が the_content フィルタで出力。
   _exr_show_toc メタ = ON かつ single_toc_h2..h6 のどれかが ON で見出しがある場合のみ表示。 */
.exr-toc {
  background: var(--color-surface-raised);
  border: 1px solid var(--color-border-subtle);
  border-radius: 8px;
  padding: 1.25rem 1.5rem;
  margin: 0 0 2rem;
  font-size: var(--exr-fs-sm);
}
.exr-toc-title {
  font-size: var(--exr-fs-sm) !important;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text-secondary);
  /* margin-block のみ使用 — WP is-layout-constrained の margin-inline: auto を保存 */
  margin-block: 0 0.5rem !important;
}
.exr-toc-list,
.exr-toc-list ol {
  list-style: decimal;
  margin: 0;
  padding-inline-start: 1.5rem;
}
.exr-toc-list ol {
  margin: 0.25rem 0 0.25rem 0.25rem;
  list-style: lower-alpha;
}
.exr-toc-list li {
  line-height: 1.7;
  margin: 0.15rem 0;
}
.exr-toc-list a {
  color: var(--color-text-primary);
  text-decoration: none;
  background-image: linear-gradient(currentColor, currentColor);
  background-position: 0 100%;
  background-repeat: no-repeat;
  background-size: 0 1px;
  transition: background-size 200ms ease, color 200ms ease;
}
.exr-toc-list a:hover {
  color: var(--color-text-secondary);
  background-size: 100% 1px;
}

/* アンカージャンプ時のスムーススクロール */
html { scroll-behavior: smooth; }


/* ============================================================
   Comments (個別投稿コメント)
   single.html に実装した WP コアコメントブロック (.ex-comments スコープ) のスタイル。
   ============================================================ */

.ex-comments {
	margin-block-start: 4rem;
	padding-block-start: 2rem;
	border-top: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
}

.ex-comments-title {
	font-size: var(--exr-fs-xl, 1.5rem);
	font-weight: 600;
	margin-block-end: 1.5rem;
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}

.wp-block-comments-title {
	display: none; /* h2 を上で手入れしているため、 コアの comments-title は隠す */
}

/* コメント個別アイテム */
.ex-comment-item {
	gap: 1rem;
	padding: 1rem 0;
	border-bottom: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
}
.ex-comment-item:last-child { border-bottom: 0; }

.ex-comment-avatar {
	flex-shrink: 0;
}
.ex-comment-avatar img {
	width: 48px;
	height: 48px;
	border-radius: 50%;
	display: block;
}

.ex-comment-body {
	flex: 1;
	min-width: 0;
}

.ex-comment-meta {
	gap: 0.75rem;
	align-items: baseline;
	margin-block-end: 0.5rem;
}

.ex-comment-author {
	font-weight: 600;
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
	font-size: 0.95rem;
}
.ex-comment-author a { color: inherit; text-decoration: none; }
.ex-comment-author a:hover { text-decoration: underline; }

.ex-comment-date {
	color: var(--color-text-muted, var(--wp--preset--color--text-muted));
	font-size: 0.8rem;
}
.ex-comment-date a { color: inherit; text-decoration: none; }

.ex-comment-content {
	margin-block: 0.5rem 0.75rem;
	line-height: 1.7;
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
.ex-comment-content p { margin-block: 0.5rem; }

.ex-comment-actions {
	gap: 1rem;
	font-size: 0.85rem;
	color: var(--color-text-muted, var(--wp--preset--color--text-muted));
}
.ex-comment-reply a, .ex-comment-edit a {
	color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
	text-decoration: none;
	font-weight: 500;
}
.ex-comment-reply a:hover, .ex-comment-edit a:hover {
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
	text-decoration: underline;
}

/* ページネーション */
.ex-comments-pagination {
	margin-block: 2rem;
	gap: 0.5rem;
}
.ex-comments-pagination a, .ex-comments-pagination .page-numbers {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-width: 2rem;
	height: 2rem;
	padding: 0 0.5rem;
	color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
	text-decoration: none;
	border-radius: 4px;
	transition: background 0.15s ease;
}
.ex-comments-pagination a:hover {
	background: var(--color-surface-raised, var(--wp--preset--color--bg-base));
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
.ex-comments-pagination .current {
	background: var(--color-text-primary, var(--wp--preset--color--text-primary));
	color: var(--wp--preset--color--surface);
}

/* コメントフォーム */
.ex-comments-form {
	margin-block-start: 3rem;
	padding-block-start: 2rem;
	border-top: 1px solid var(--color-border-subtle, var(--wp--preset--color--border-subtle));
}
.ex-comments-form .comment-form label {
	display: block;
	font-weight: 500;
	margin-block-end: 0.5rem;
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
	font-size: 0.9rem;
}
.ex-comments-form .comment-form input[type="text"],
.ex-comments-form .comment-form input[type="email"],
.ex-comments-form .comment-form input[type="url"],
.ex-comments-form .comment-form textarea {
	width: 100%;
	padding: 0.65rem 0.85rem;
	border: 1px solid var(--color-border, #d1d5db);
	border-radius: 4px;
	font-family: inherit;
	font-size: 0.95rem;
	background: var(--wp--preset--color--surface);
	color: var(--color-text-primary, var(--wp--preset--color--text-primary));
	transition: border-color 0.15s ease;
	box-sizing: border-box;
}
.ex-comments-form .comment-form input:focus,
.ex-comments-form .comment-form textarea:focus {
	outline: none;
	border-color: var(--color-text-primary, var(--wp--preset--color--text-primary));
}
.ex-comments-form .comment-form textarea {
	min-height: 120px;
	resize: vertical;
}
.ex-comments-form .comment-form-cookies-consent {
	display: flex;
	align-items: flex-start;
	gap: 0.5rem;
	margin-block: 1rem;
	font-size: 0.85rem;
	color: var(--color-text-secondary, var(--wp--preset--color--text-secondary));
}
.ex-comments-form .comment-form-cookies-consent input { margin-top: 0.25em; }
.ex-comments-form .form-submit .submit {
	display: inline-block;
	padding: 0.75rem 1.75rem;
	background: var(--color-text-primary, var(--wp--preset--color--text-primary));
	color: var(--wp--preset--color--surface);
	border: 0;
	border-radius: 4px;
	font-size: 0.95rem;
	font-weight: 500;
	cursor: pointer;
	transition: background 0.15s ease;
}
.ex-comments-form .form-submit .submit:hover {
	background: var(--color-text-secondary, #374151);
}
.ex-comments-form .comment-notes {
	color: var(--color-text-muted, var(--wp--preset--color--text-muted));
	font-size: 0.85rem;
	margin-block: 0.5rem 1rem;
}
.ex-comments-form .form-row {
	margin-block: 0.75rem;
}

/* コメント隨広 (reply form) */
.ex-comments .children {
	margin-inline-start: 2rem;
	list-style: none;
	padding: 0;
}
@media (max-width: 600px) {
	.ex-comments .children { margin-inline-start: 1rem; }
	.ex-comment-avatar img { width: 36px; height: 36px; }
}