/* Bootstrap 5 を土台にした最小限のサイト固有スタイル */

/*
 * カラーバランス（読みやすさ優先）
 * - ページ地: グレー / 本文シート(article): 白
 * - UI アクセント: 青（見出し下線・目次・TOP・リンク等）
 */
:root,
[data-bs-theme="light"] {
	--pokezo3-accent: #0d6efd;
	--pokezo3-accent-rgb: 13, 110, 253;
	--pokezo3-accent-hover: #0a58ca;
	--pokezo3-surface: #ffffff;
	--pokezo3-page: #eef1f4;
	--pokezo3-ink: #1e2930;
	--pokezo3-ink-muted: #5c6b75;
	--pokezo3-line: #d8dee6;

	--bs-primary: var(--pokezo3-accent);
	--bs-primary-rgb: var(--pokezo3-accent-rgb);
	--bs-primary-text-emphasis: #052c65;
	--bs-primary-bg-subtle: #cfe2ff;
	--bs-primary-border-subtle: #9ec5fe;

	--bs-link-color: var(--pokezo3-accent);
	--bs-link-color-rgb: var(--pokezo3-accent-rgb);
	--bs-link-hover-color: var(--pokezo3-accent-hover);
	--bs-link-hover-color-rgb: 10, 88, 202;

	--bs-body-color: var(--pokezo3-ink);
	--bs-body-color-rgb: 30, 41, 48;
	--bs-body-bg: var(--pokezo3-page);
	--bs-body-bg-rgb: 238, 241, 244;
	--bs-emphasis-color: #12191e;
	--bs-emphasis-color-rgb: 18, 25, 30;
	--bs-secondary-color: rgba(30, 41, 48, 0.72);
	--bs-secondary-color-rgb: 30, 41, 48;
	--bs-secondary-bg: #e4e8ee;
	--bs-secondary-bg-rgb: 228, 232, 238;
	--bs-tertiary-color: rgba(30, 41, 48, 0.55);
	--bs-tertiary-color-rgb: 30, 41, 48;
	--bs-tertiary-bg: #e8ecf1;
	--bs-tertiary-bg-rgb: 232, 236, 241;
	--bs-border-color: var(--pokezo3-line);
	--bs-border-color-translucent: rgba(13, 110, 253, 0.14);
	--bs-heading-color: var(--pokezo3-ink);
	--bs-code-color: #055160;
}

body {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	color: var(--bs-body-color);
	background-color: var(--bs-body-bg);
}

/* 主要 UI の primary を変数追従させる */
.btn-primary {
	--bs-btn-color: #fff;
	--bs-btn-bg: var(--pokezo3-accent);
	--bs-btn-border-color: var(--pokezo3-accent);
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--pokezo3-accent-hover);
	--bs-btn-hover-border-color: var(--pokezo3-accent-hover);
	--bs-btn-focus-shadow-rgb: var(--pokezo3-accent-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: #0a53be;
	--bs-btn-active-border-color: #0a53be;
	--bs-btn-disabled-color: #fff;
	--bs-btn-disabled-bg: var(--pokezo3-accent);
	--bs-btn-disabled-border-color: var(--pokezo3-accent);
}

.btn-outline-primary {
	--bs-btn-color: var(--pokezo3-accent);
	--bs-btn-border-color: color-mix(in srgb, var(--pokezo3-accent) 45%, var(--bs-border-color));
	--bs-btn-hover-color: #fff;
	--bs-btn-hover-bg: var(--pokezo3-accent);
	--bs-btn-hover-border-color: var(--pokezo3-accent);
	--bs-btn-focus-shadow-rgb: var(--pokezo3-accent-rgb);
	--bs-btn-active-color: #fff;
	--bs-btn-active-bg: var(--pokezo3-accent-hover);
	--bs-btn-active-border-color: var(--pokezo3-accent-hover);
	--bs-btn-disabled-color: var(--pokezo3-accent);
	--bs-btn-disabled-bg: transparent;
	--bs-btn-disabled-border-color: color-mix(in srgb, var(--pokezo3-accent) 35%, var(--bs-border-color));
}

.btn-link {
	--bs-btn-color: var(--pokezo3-accent);
	--bs-btn-hover-color: var(--pokezo3-accent-hover);
}

.page-link {
	color: var(--pokezo3-accent);
}

.page-item.active .page-link {
	background-color: var(--pokezo3-accent);
	border-color: var(--pokezo3-accent);
	color: #fff;
}

.page-link:hover {
	color: var(--pokezo3-accent-hover);
	background-color: var(--bs-primary-bg-subtle);
	border-color: var(--bs-primary-border-subtle);
}

.navbar {
	background-color: color-mix(in srgb, var(--pokezo3-surface) 92%, transparent);
	backdrop-filter: blur(8px);
}

.navbar .navbar-brand,
.navbar .nav-link {
	color: var(--pokezo3-ink);
}

.navbar .nav-link:hover,
.navbar .nav-link:focus,
.navbar .nav-link.active {
	color: var(--pokezo3-accent);
}

.site-header {
	background-color: var(--pokezo3-surface);
	border-bottom-color: var(--pokezo3-line) !important;
}

/* カード: 影より薄い枠（outline テイスト） */
.pokezo3-card {
	background-color: var(--pokezo3-surface);
	border: 1px solid var(--pokezo3-line) !important;
	box-shadow: none !important;
	transition: border-color 0.15s ease, background-color 0.15s ease;
}

.pokezo3-card:hover {
	border-color: color-mix(in srgb, var(--pokezo3-accent) 35%, var(--pokezo3-line)) !important;
}

.pokezo3-card .card-title a:hover {
	color: var(--pokezo3-accent) !important;
}

.card-thumb {
	background: var(--bs-tertiary-bg);
}

.pokezo3-archive-head h1 {
	position: relative;
	display: inline-block;
	padding-bottom: 0.35rem;
	border-bottom: 3px solid var(--pokezo3-accent);
}

/* バッジ: 塗りつぶしではなく outline */
.pokezo3-badge {
	display: inline-block;
	padding: 0.28em 0.65em;
	font-size: 0.78em;
	font-weight: 600;
	line-height: 1.3;
	color: var(--pokezo3-accent);
	text-decoration: none;
	background: var(--bs-primary-bg-subtle);
	border: 1px solid var(--bs-primary-border-subtle);
	border-radius: 0.45rem;
	transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.pokezo3-badge:hover {
	color: #fff;
	background: var(--pokezo3-accent);
	border-color: var(--pokezo3-accent);
}

/* 本文リンクは下線を薄くして読みやすさ優先 */
.post_body a:not(.btn):not(.badge):not(.pokezo3-badge):not(.stretched-link) {
	color: var(--pokezo3-accent);
	text-decoration-color: color-mix(in srgb, var(--pokezo3-accent) 35%, transparent);
	text-underline-offset: 0.15em;
}

.post_body a:not(.btn):not(.badge):not(.pokezo3-badge):not(.stretched-link):hover {
	color: var(--pokezo3-accent-hover);
	text-decoration-color: var(--pokezo3-accent-hover);
}

.site-footer {
	background-color: var(--bs-tertiary-bg) !important;
	border-top-color: var(--pokezo3-line) !important;
	color: var(--pokezo3-ink-muted);
}

.site-footer .widget h2,
.site-footer .widget .wp-block-heading,
.site-footer .h5 {
	color: var(--pokezo3-ink);
}

#content,
main {
	flex: 1 0 auto;
	background-color: var(--pokezo3-page);
}

/* 本文シート: main=グレー地 / article=白 */
body.single #content > article.container,
body.page #content .container > article {
	background-color: var(--pokezo3-surface);
	border: 1px solid var(--pokezo3-line);
	border-radius: 0.85rem;
	box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}

body.single #content > article.container {
	padding-top: 1.75rem;
	padding-bottom: 2rem;
	margin-bottom: 0.5rem;
}

body.page #content .container > article {
	padding: 1.75rem 1.5rem 2rem;
}

body.page #content .container > section {
	background-color: var(--pokezo3-surface);
	border: 1px solid var(--pokezo3-line);
	border-radius: 0.85rem;
	padding: 1.5rem;
	margin-bottom: 0.5rem;
}

.navbar-brand img {
	max-height: 2.5rem;
	width: auto;
}

/* トップバナー: 全体を表示（トリミングしない） */
.site-hero {
	line-height: 0;
	background: var(--bs-tertiary-bg);
}

.site-hero__img {
	display: block;
	width: 100%;
	height: auto;
	max-width: 100%;
	object-fit: contain;
}

/* カードサムネ: 16:9 に統一 */
.card-thumb__img,
.card-thumb img {
	position: absolute;
	inset: 0;
	width: 100% !important;
	height: 100% !important;
	max-width: none !important;
	object-fit: cover;
}

/* 記事サムネ: 本文幅に合わせ、欠けさせない */
.entry-thumbnail {
	display: block;
	width: 100%;
	height: auto;
	object-fit: contain;
}

/*
 * 本文フォントをやや大きくしつつ、インライン画像は px 固定で拡大しない。
 * 行ボックスは 30px アイコンに合わせる。
 */
.post_body {
	font-size: 1.125rem; /* 18px */
	line-height: 1.6667; /* ≈30px */
}

.post_body p,
.post_body li {
	line-height: inherit;
}

/* HTML の width/height/style を優先。明示的に 30px のものだけ行内アイコン扱い */
.post_body img.guidelined-link-icon,
.post_body img[width="30"],
.post_body img[height="30"],
.post_body img[style*="width: 30px"],
.post_body img[style*="width:30px"] {
	vertical-align: middle;
	max-width: none;
}

/* フッター: アーカイブ / カテゴリーを同じ見た目に */
.site-footer .widget h2,
.site-footer .widget .wp-block-heading,
.site-footer .h5 {
	font-size: 1.25rem;
	font-weight: 500;
	margin-bottom: 1rem;
	line-height: 1.2;
}

.site-footer .widget ul,
.site-footer .wp-block-archives-list,
.site-footer .wp-block-categories-list {
	margin-bottom: 0;
	padding-left: 1.25rem;
	list-style: disc;
}

.site-footer .widget ul ul,
.site-footer .wp-block-categories-list .children {
	margin-top: 0.25rem;
	margin-bottom: 0.25rem;
	padding-left: 1.25rem;
	list-style: circle;
}

.site-footer .widget a,
.site-footer .wp-block-archives-list a,
.site-footer .cat-item a {
	font-size: 1rem;
	line-height: 1.5;
	text-decoration: none;
	color: var(--bs-body-color);
}

.site-footer .widget a:hover,
.site-footer .wp-block-archives-list a:hover,
.site-footer .cat-item a:hover {
	color: var(--bs-link-color);
	text-decoration: underline;
}

/* 本文内のメディア・表 */
.post_body .alignwide {
	max-width: 100%;
}

.post_body .alignfull {
	width: 100vw;
	max-width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

.post_body iframe {
	max-width: 100%;
}

/* Bootstrap に無い pre/code の基本表示 */
.post_body :not(pre) > code,
.post_body :not(pre) > kbd,
.post_body :not(pre) > samp {
	font-family: var(--bs-font-monospace);
	font-size: 0.875em;
	color: var(--bs-code-color);
	background-color: var(--bs-primary-bg-subtle);
	padding: 0.1em 0.35em;
	border-radius: 0.25rem;
	word-wrap: break-word;
}

.post_body pre,
.post_body .wp-block-code {
	display: block;
	margin: 0 0 1rem;
	padding: 0.5rem 0.75rem;
	font-size: 0.875em;
	color: var(--bs-body-color);
	background-color: var(--bs-tertiary-bg);
	border: 1px solid var(--bs-border-color);
	border-radius: var(--bs-border-radius);
	overflow-x: auto;
}

.post_body pre code,
.post_body .wp-block-code code {
	display: block;
	padding: 0;
	font-family: var(--bs-font-monospace);
	font-size: inherit;
	color: inherit;
	background: transparent;
	border: 0;
	white-space: pre;
	word-wrap: normal;
}

.rwdwrap {
	position: relative;
	width: 100%;
	aspect-ratio: 16 / 9;
}

.rwdwrap iframe {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}

/* ポケソルテキスト: 画像 | テキスト の左右 flex */
.wp-block-group.pokesol-text.is-layout-flex,
.pokesol-text .wp-block-group.is-layout-flex {
	flex-wrap: nowrap;
	align-items: flex-start;
	gap: 0.75rem;
}

.pokesol-text .is-layout-flex > .wp-block-paragraph:first-child {
	flex: 0 0 auto;
	width: auto;
	margin: 0;
}

.pokesol-text .is-layout-flex > .wp-block-group {
	flex: 1 1 auto;
	min-width: 0;
	width: auto;
}

.pokesol-text .is-layout-flex > .wp-block-group .ctc-wrapper,
.pokesol-text .is-layout-flex > .wp-block-group pre.wp-block-code,
.pokesol-text .is-layout-flex > pre.wp-block-code {
	width: 100%;
	max-width: 100%;
	box-sizing: border-box;
	overflow-x: auto;
	margin-bottom: 0;
}

.pokesol-text pre.wp-block-code,
.pokesol-text .wp-block-code {
	background-color: #f7f8fa;
	border-color: #e6e9ee;
}

.pokesol-text pre.wp-block-code code {
	white-space: pre-wrap !important;
	word-break: break-all !important;
	overflow-wrap: break-word !important;
	padding: 1.5rem 0.3rem 0.3rem;
	position: relative;
	display: block;
	font-size: 0.8rem;
}

.pokesol-text pre.wp-block-code code::before {
	content: "ポケソルテキスト";
	position: absolute;
	top: 0.25rem;
	left: 0.25rem;
	font-size: 0.75rem;
	font-weight: 700;
	line-height: 1;
	color: var(--bs-secondary-color);
	background: #f7f8fa;
	border-radius: 0.25rem;
	z-index: 2;
}

/* スマホ: 画像の下にテキスト（上下） */
@media (max-width: 767.98px) {
	.wp-block-group.pokesol-text.is-layout-flex,
	.pokesol-text .wp-block-group.is-layout-flex,
	.pokesol-text .is-layout-flex.is-nowrap {
		flex-direction: column !important;
		flex-wrap: nowrap;
		align-items: stretch;
	}

	.pokesol-text .is-layout-flex > .wp-block-paragraph:first-child {
		flex: 0 0 auto;
		width: auto;
		max-width: 9.5rem;
	}

	.pokesol-text .is-layout-flex > .wp-block-group,
	.pokesol-text .is-layout-flex > pre.wp-block-code {
		flex: 1 1 auto;
		width: 100%;
		min-width: 0;
	}
}

.damagecalc {
	margin-bottom: 1rem;
}

.calcstat-table table {
	border: 0;
}

.calcstat-table td {
	padding: 0.25rem;
	border-width: 1px 0;
}

.calcstat-table tr:first-child td {
	border-top-width: 0;
}

.calcstat-table tr:last-child td {
	border-bottom-width: 0;
}

/* 目次（投稿詳細）— 縦一列。PC は右固定、スマホは本文先頭 */
html {
	scroll-behavior: smooth;
}

.pokezo3-toc {
	--pokezo3-toc-accent: var(--pokezo3-accent);
	position: relative;
	margin-top: 0.5rem;
	padding: 0 0 0 1rem;
	border: 0;
	background: transparent;
}

.pokezo3-toc::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.35rem;
	bottom: 0.35rem;
	width: 3px;
	border-radius: 3px;
	background: linear-gradient(
		180deg,
		var(--pokezo3-toc-accent) 0%,
		color-mix(in srgb, var(--pokezo3-toc-accent) 15%, transparent) 100%
	);
}

.pokezo3-toc__head {
	display: flex;
	flex-direction: column;
	gap: 0.1rem;
	margin-bottom: 0.75rem;
}

.pokezo3-toc__label {
	font-size: 0.7rem;
	font-weight: 700;
	letter-spacing: 0.14em;
	text-transform: uppercase;
	color: var(--pokezo3-toc-accent);
}

.pokezo3-toc__title {
	font-size: 1.25rem;
	font-weight: 700;
	line-height: 1.2;
	letter-spacing: -0.02em;
	margin: 0;
}

.pokezo3-toc__list {
	display: block;
	margin: 0;
	padding: 0;
	list-style: none;
	counter-reset: pokezo3-toc;
}

.pokezo3-toc__list .pokezo3-toc__list {
	margin: 0.15rem 0 0.25rem;
	padding-left: 1rem;
}

.pokezo3-toc__item {
	counter-increment: pokezo3-toc;
	margin: 0.2rem 0;
}

.pokezo3-toc__link {
	display: flex;
	align-items: baseline;
	gap: 0.45rem;
	text-decoration: none;
	color: var(--bs-body-color);
	line-height: 1.4;
	transition: color 0.15s ease;
}

.pokezo3-toc__link::before {
	content: counters(pokezo3-toc, ".");
	flex: 0 0 1.75em;
	width: 1.75em;
	font-size: 0.75em;
	font-weight: 700;
	font-variant-numeric: tabular-nums;
	text-align: right;
	color: var(--pokezo3-toc-accent);
	opacity: 0.85;
}

.pokezo3-toc__list .pokezo3-toc__list .pokezo3-toc__link::before {
	flex-basis: 2.1em;
	width: 2.1em;
	font-size: 0.7em;
	font-weight: 600;
	opacity: 0.65;
}

.pokezo3-toc__text {
	flex: 1 1 auto;
	min-width: 0;
}

.pokezo3-toc__link:hover {
	color: var(--pokezo3-toc-accent);
}

.pokezo3-toc__link:hover .pokezo3-toc__text {
	text-decoration: underline;
}

/*
 * PC: 右サイド固定。
 * 本文は col-lg-8 mx-auto（半幅 ≈ lg:20rem / xl:23.75rem / xxl:27.5rem）なので
 * その右端 + 余白より外側に置く。
 */
@media (min-width: 992px) {
	.pokezo3-toc {
		position: fixed;
		top: 9rem;
		left: calc(50% + 21.5rem);
		width: 12.5rem;
		max-height: calc(100vh - 11.5rem);
		overflow-x: hidden;
		overflow-y: auto;
		margin: 0;
		padding: 0.75rem 0.75rem 0.75rem 1rem;
		z-index: 1020;
		background: color-mix(in srgb, var(--pokezo3-surface) 94%, transparent);
		backdrop-filter: blur(6px);
		border-radius: 0.5rem;
		border: 1px solid color-mix(in srgb, var(--pokezo3-accent) 18%, var(--pokezo3-line));
	}

	.pokezo3-toc__title {
		font-size: 1.1rem;
	}
}

@media (min-width: 1200px) {
	.pokezo3-toc {
		left: calc(50% + 25.5rem);
		width: 13.5rem;
	}
}

@media (min-width: 1400px) {
	.pokezo3-toc {
		left: calc(50% + 29.5rem);
		width: 14rem;
	}
}

/* 本文見出し: 文字下は primary、行の残りは secondary。前スペース確保 */
.post_body :is(h2, h3, .wp-block-heading:is(h2, h3)) {
	display: flex;
	align-items: flex-end;
	width: 100%;
	font-weight: 700;
	letter-spacing: -0.01em;
	border-bottom: 2px solid var(--bs-secondary-border-subtle, var(--bs-border-color));
	padding-bottom: 0;
	margin-bottom: 0.9rem;
}

.post_body :is(h2, .wp-block-heading:is(h2)) {
	margin-top: 2.75rem;
	font-size: 2rem;
}

.post_body :is(h3, .wp-block-heading:is(h3)) {
	margin-top: 2rem;
	font-size: 1.5rem;
	font-weight: 600;
	border-bottom-width: 1px;
}

.post_body :is(h2, h3) .pokezo3-heading-text {
	flex: 0 1 auto;
	max-width: 100%;
	border-bottom: 2px solid var(--pokezo3-accent);
	margin-bottom: -2px;
	padding-bottom: 0.35rem;
}

.post_body h3 .pokezo3-heading-text {
	border-bottom-width: 1px;
	margin-bottom: -1px;
	padding-bottom: 0.3rem;
}

.post_body :is(h2, h3):first-child {
	margin-top: 0.5rem;
}

.post_body :is(h2, h3) {
	position: relative;
}

.post_body :is(h2, h3) > span[id]:empty {
	position: absolute;
	width: 0;
	height: 0;
	overflow: hidden;
	pointer-events: none;
}

.post_body :is(h1, h2, h3)[id],
.post_body :is(h1, h2, h3) [id] {
	scroll-margin-top: 30px;
}

/* ページ上部へ — outline フローティング */
.pokezo3-top {
	--pokezo3-top-accent: var(--pokezo3-accent);
	position: fixed;
	right: 1rem;
	bottom: 1rem;
	z-index: 1030;
	display: inline-flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: 0.15rem;
	min-width: 2.75rem;
	padding: 0.55rem 0.5rem 0.45rem;
	border: 1px solid color-mix(in srgb, var(--pokezo3-top-accent) 45%, var(--bs-border-color));
	border-radius: 0.65rem;
	background: color-mix(in srgb, var(--pokezo3-surface) 90%, transparent);
	backdrop-filter: blur(8px);
	box-shadow: none;
	color: var(--pokezo3-top-accent);
	text-decoration: none;
	opacity: 0;
	visibility: hidden;
	transform: translateY(0.6rem);
	pointer-events: none;
	transition:
		opacity 0.22s ease,
		transform 0.22s ease,
		visibility 0.22s ease,
		border-color 0.15s ease,
		background-color 0.15s ease;
}

.pokezo3-top.is-visible {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
	pointer-events: auto;
}

.pokezo3-top__icon {
	display: inline-flex;
	line-height: 1;
	font-size: 1.05rem;
}

.pokezo3-top__label {
	font-size: 0.62rem;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1;
}

.pokezo3-top:hover {
	color: var(--pokezo3-top-accent);
	border-color: var(--pokezo3-top-accent);
	background: color-mix(in srgb, var(--pokezo3-top-accent) 10%, var(--pokezo3-surface));
}

.pokezo3-top:focus-visible {
	outline: 2px solid var(--pokezo3-top-accent);
	outline-offset: 2px;
}

@media (min-width: 992px) {
	.pokezo3-top {
		right: 1.25rem;
		bottom: 1.5rem;
	}
}