/*
Theme Name: Kawabata Eye Clinic
Theme URI: https://kawabata-eye.jp/
Description: 川畑眼科のためのオリジナルテーマ。藍を基調に、見出しを明朝・本文をゴシックで組む。ライト／ダーク両対応。
Version: 1.0.0
Author: 川畑眼科
Requires at least: 6.0
Requires PHP: 7.4
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kawabata-eye
Tags: two-columns, custom-menu, featured-images, translation-ready
*/

/* ==========================================================================
   1. デザイントークン
   ========================================================================== */
:root {
	--ground:      #F4F6F7;
	--surface:     #FFFFFF;
	--surface-2:   #EDF1F3;
	--ink:         #141B22;
	--ink-2:       #4A5762;
	--ink-3:       #74828E;
	--line:        #DCE3E7;
	--accent:      #1B5E7E;
	--accent-deep: #10404F;
	--accent-soft: #E6EEF2;
	--panel:       #12333F;
	--panel-ink:   #EAF1F4;
	--panel-ink-2: #A7C2CC;
	--panel-line:  #2A5462;

	--font-display: "Hiragino Mincho ProN", "Hiragino Mincho Pro", "Yu Mincho", YuMincho, "Noto Serif JP", "MS PMincho", serif;
	--font-body: "Hiragino Kaku Gothic ProN", "Hiragino Sans", "Yu Gothic Medium", YuGothic, "Yu Gothic", Meiryo, sans-serif;
	--font-latin: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;

	--measure: 34em;
	--gutter: clamp(1.25rem, 5vw, 3rem);
	--shell: 68rem;
}

@media (prefers-color-scheme: dark) {
	:root {
		--ground:      #0F151A;
		--surface:     #161E25;
		--surface-2:   #1D272F;
		--ink:         #E7EDF1;
		--ink-2:       #A8B5C0;
		--ink-3:       #7C8A96;
		--line:        #263038;
		--accent:      #7FB9D1;
		--accent-deep: #A9D2E3;
		--accent-soft: #182831;
		--panel:       #0C242D;
		--panel-ink:   #E7F0F4;
		--panel-ink-2: #9DB9C4;
		--panel-line:  #234450;
	}
}

/* ==========================================================================
   2. 基本
   ========================================================================== */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--ground);
	color: var(--ink);
	font-family: var(--font-body);
	font-size: 16px;
	line-height: 1.7;
	-webkit-font-smoothing: antialiased;
}

a { color: var(--accent); }
a:hover { color: var(--accent-deep); }

img,
video,
iframe { max-width: 100%; height: auto; }

figure { margin: 0; }

:focus-visible {
	outline: 2px solid var(--accent);
	outline-offset: 3px;
	border-radius: 2px;
}

@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

.screen-reader-text {
	position: absolute !important;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: 1rem;
	left: 1rem;
	z-index: 100;
	width: auto;
	height: auto;
	clip: auto;
	margin: 0;
	padding: .75rem 1.25rem;
	background: var(--accent);
	color: #fff;
	text-decoration: none;
}

.shell {
	max-width: var(--shell);
	margin-inline: auto;
	padding-inline: var(--gutter);
}

/* 投稿・アーカイブはコードや設定ファイルの引用が多いため、
   案内ページより広く取る。 */
.shell--wide { max-width: 80rem; }

/* ==========================================================================
   3. ヘッダー
   ========================================================================== */
.masthead {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.masthead__in {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: .75rem 2rem;
	padding-block: 1.15rem;
}

.wordmark {
	font-family: var(--font-display);
	font-size: 1.5rem;
	letter-spacing: .16em;
	text-decoration: none;
	color: var(--ink);
	margin-right: auto;
	line-height: 1.4;
}

.wordmark:hover { color: var(--ink); }

.wordmark__latin {
	display: block;
	font-family: var(--font-latin);
	font-size: .6rem;
	letter-spacing: .2em;
	color: var(--ink-3);
	margin-top: .2rem;
}

/* --- ナビゲーション --- */
.nav-toggle {
	display: none;
	appearance: none;
	background: transparent;
	border: 1px solid var(--line);
	color: var(--ink);
	font: inherit;
	font-size: .85rem;
	padding: .4rem .9rem;
	cursor: pointer;
}

.navlist,
.navlist ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.navlist {
	display: flex;
	flex-wrap: wrap;
	gap: 1.25rem;
	font-size: .875rem;
}

.navlist li { position: relative; }

.navlist a {
	display: inline-block;
	text-decoration: none;
	color: var(--ink);
	padding-bottom: .2rem;
	border-bottom: 1px solid transparent;
	transition: border-color .18s ease, color .18s ease;
}

.navlist a:hover,
.navlist .current-menu-item > a,
.navlist .current_page_item > a {
	color: var(--accent);
	border-bottom-color: var(--accent);
}

/* 子メニュー */
.navlist .sub-menu {
	position: absolute;
	top: 100%;
	left: 0;
	z-index: 30;
	min-width: 13rem;
	display: flex;
	flex-direction: column;
	gap: 0;
	background: var(--surface);
	border: 1px solid var(--line);
	padding: .4rem 0;
	opacity: 0;
	visibility: hidden;
	transform: translateY(-.35rem);
	transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.navlist li:hover > .sub-menu,
.navlist li:focus-within > .sub-menu {
	opacity: 1;
	visibility: visible;
	transform: translateY(0);
}

.navlist .sub-menu a {
	display: block;
	padding: .45rem 1.1rem;
	border-bottom: 0;
	font-size: .85rem;
}

.navlist .sub-menu a:hover { background: var(--accent-soft); }

@media (max-width: 55.99rem) {
	.nav-toggle { display: block; }

	.site-nav {
		flex-basis: 100%;
		display: none;
	}

	.site-nav.is-open { display: block; }

	.navlist {
		flex-direction: column;
		gap: 0;
		padding-block: .5rem;
	}

	.navlist > li { border-top: 1px solid var(--line); }

	.navlist a {
		display: block;
		padding: .7rem .1rem;
		border-bottom: 0;
	}

	.navlist .sub-menu {
		position: static;
		opacity: 1;
		visibility: visible;
		transform: none;
		border: 0;
		padding: 0 0 .35rem 1rem;
		background: transparent;
	}
}

/* ==========================================================================
   4. ヒーロー（トップページ）
   ========================================================================== */
.hero {
	background: var(--surface);
	border-bottom: 1px solid var(--line);
}

.hero__in { padding-block: clamp(2rem, 5vw, 3.25rem); }

/* キャッチコピー。ページ内でいちばん大きい文字。 */
.hero__catch {
	font-family: var(--font-latin);
	font-size: clamp(2rem, 7vw, 3.9rem);
	line-height: 1.25;
	font-weight: 400;
	letter-spacing: .015em;
	color: var(--accent);
	text-wrap: balance;
	margin: 0;
}

/* キャッチコピーを補う一行。 */
.hero__lead {
	font-family: var(--font-display);
	font-size: clamp(1.1rem, 2.8vw, 1.5rem);
	line-height: 1.6;
	font-weight: 500;
	letter-spacing: .04em;
	color: var(--ink);
	text-wrap: balance;
	margin: 1.15rem 0 0;
	max-width: 24em;
}

/* 2行目を下げて字送りに変化をつける。狭い画面では頭を揃える。 */
.hero__lead-indent {
	display: inline-block;
	margin-left: 2.75em;
}

@media (max-width: 34rem) {
	.hero__lead-indent { margin-left: 0; }
}

.hero__rule {
	width: 3.5rem;
	height: 2px;
	background: var(--accent);
	border: 0;
	margin: 1.4rem 0 0;
	opacity: .55;
}

/* 文言を左、写真を右に置く。
   看板の写真は縦長かつ実寸577pxなので、列幅を抑えて粗さを防ぐ。 */
.hero__in--split {
	display: grid;
	gap: clamp(1.75rem, 4vw, 3.25rem);
	grid-template-columns: 1fr;
	align-items: center;
}

@media (min-width: 56rem) {
	.hero__in--split { grid-template-columns: minmax(0, 1fr) minmax(0, 19rem); }
}

.hero__figure {
	margin: 0;
	max-width: 15rem;
}

@media (min-width: 56rem) {
	.hero__figure { max-width: none; }
}

.hero__image {
	display: block;
	width: 100%;
	height: auto;
}

/* ==========================================================================
   5. 本文まわり（投稿・固定ページ共通）
   ========================================================================== */
.band { padding-block: clamp(1.85rem, 4vw, 2.75rem); }
.band--alt {
	background: var(--surface);
	border-block: 1px solid var(--line);
}

.layout {
	display: grid;
	gap: clamp(2.5rem, 6vw, 4rem);
	grid-template-columns: 1fr;
	align-items: start;
}

@media (min-width: 62rem) {
	.layout--sidebar { grid-template-columns: minmax(0, 1fr) 17rem; }
}

.eyebrow {
	font-size: .75rem;
	letter-spacing: .2em;
	color: var(--accent);
	margin: 0 0 .85rem;
	font-weight: 600;
}

.entry-title {
	font-family: var(--font-display);
	font-size: clamp(1.5rem, 4vw, 2.1rem);
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.45;
	text-wrap: balance;
	margin: 0 0 1.35rem;
}

.entry-title a { color: inherit; text-decoration: none; }
.entry-title a:hover { color: var(--accent); }

.entry-meta {
	font-size: .8rem;
	color: var(--ink-3);
	letter-spacing: .06em;
	margin: 0 0 1.75rem;
	display: flex;
	flex-wrap: wrap;
	gap: .35rem 1.25rem;
	font-variant-numeric: tabular-nums;
}

.entry-meta a { color: var(--ink-2); }

.prose { max-width: 46rem; }

/* サイドバーと並ぶ本文は、列の幅そのものが行長を決めるため
   さらに絞る必要がない。コードブロックにも幅を渡せる。 */
.layout--sidebar .prose { max-width: none; }

.prose > * + * { margin-top: 1rem; }

.prose h2,
.prose h3,
.prose h4 {
	font-family: var(--font-display);
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.6;
	margin-top: 1.9rem;
	text-wrap: balance;
}

.prose h2 { font-size: 1.4rem; }
.prose h3 { font-size: 1.2rem; }
.prose h4 { font-size: 1.05rem; }

.prose p { margin: 0; }

/* 中身のない段落は場所を取らせない。
   ブロックエディタでの編集中に残りやすい。 */
.prose p:empty,
.prose p:has(> br:only-child) { display: none; }

/* 続けて置かれた素の div は、段落ではなく行の集まりとみなして間を詰める。
   旧エディタで書かれた記事や、埋め込まれたお知らせに多い形。 */
.prose > div:not([class]) + div:not([class]) { margin-top: .25rem; }

.prose ul,
.prose ol { padding-left: 1.4em; margin: 0; }
.prose li + li { margin-top: .35rem; }

.prose blockquote {
	margin: 0;
	padding-left: 1.25rem;
	border-left: 2px solid var(--accent);
	color: var(--ink-2);
}

.prose pre {
	background: var(--surface-2);
	border: 1px solid var(--line);
	padding: 1rem 1.15rem;
	overflow-x: auto;
	font-size: .85rem;
	line-height: 1.7;
}

/* 見出しや段落を含む pre は、コードではなく中身を流し込まれたもの。
   pre のままだと原文の改行がすべて空行になって間延びするため、
   通常の本文として扱う。 */
.prose pre:has(:where(h1, h2, h3, h4, p, div, ul, ol, table)) {
	white-space: normal;
	background: none;
	border: 0;
	padding: 0;
	font-family: inherit;
	font-size: inherit;
	line-height: inherit;
	overflow-x: visible;
}

.prose pre:has(:where(h1, h2, h3, h4, p, div, ul, ol, table)) code {
	font-family: inherit;
	font-size: inherit;
}

.prose code { font-size: .9em; }

.prose :where(table) {
	width: 100%;
	border-collapse: collapse;
	font-variant-numeric: tabular-nums;
}

/* 罫線はデータを並べた表にだけ引く。
   写真と文章を横に並べるための表は、素のまま置く。 */
.wp-block-table :where(th, td),
.prose table:has(th) :where(th, td) {
	border: 1px solid var(--line);
	padding: .65rem .85rem;
	text-align: left;
}

.prose table:not(:has(th)):not(.has-fixed-layout) :where(td) {
	padding: 0 1.5rem 0 0;
	vertical-align: top;
}

.prose table:not(:has(th)):not(.has-fixed-layout) :where(td):last-child {
	padding-right: 0;
}

.prose :where(th) {
	background: var(--accent-soft);
	font-weight: 600;
}

/* 横幅の広い要素はそれぞれの器の中でスクロールさせる */
.wp-block-table,
.prose .table-scroll {
	overflow-x: auto;
}

/* ==========================================================================
   6. 当院のAIについて（固定ページ内のグループブロック）
   ========================================================================== */
.kawabata-ai-intro {
	background: var(--panel);
	color: var(--panel-ink);
	padding: clamp(1.75rem, 5vw, 2.75rem);
	margin-top: 2.5rem;
}

/* ブロックエディタはグループの中身を inner-container で包む。
   直接の子だけを見ていると段落の間隔が効かないので、両方を対象にする。 */
.kawabata-ai-intro > * + *,
.kawabata-ai-intro .wp-block-group__inner-container > * + * { margin-top: .9rem; }

.kawabata-ai-intro h2 {
	font-family: var(--font-display);
	font-size: clamp(1.3rem, 3.4vw, 1.7rem);
	font-weight: 500;
	letter-spacing: .04em;
	line-height: 1.5;
	margin: 0;
	color: var(--panel-ink);
}

.kawabata-ai-intro p {
	margin: 0;
	color: var(--panel-ink-2);
	font-size: .975rem;
}

.kawabata-ai-intro a { color: var(--panel-ink); }

/* ==========================================================================
   7. ご案内カード
   ========================================================================== */
.cards {
	display: grid;
	gap: 1px;
	background: var(--line);
	border: 1px solid var(--line);
	grid-template-columns: 1fr;
}

@media (min-width: 40rem) { .cards { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 62rem) { .cards { grid-template-columns: repeat(3, 1fr); } }

.cards__item {
	background: var(--surface);
	padding: clamp(1.4rem, 3vw, 1.9rem);
	text-decoration: none;
	color: var(--ink);
	display: flex;
	flex-direction: column;
	gap: .5rem;
	transition: background .18s ease;
}

.cards__item:hover { background: var(--accent-soft); color: var(--ink); }

.cards__name {
	font-family: var(--font-display);
	font-size: 1.15rem;
	letter-spacing: .06em;
}

.cards__desc {
	font-size: .875rem;
	line-height: 1.7;
	color: var(--ink-2);
	margin: 0;
}

/* ==========================================================================
   8. 投稿一覧
   ========================================================================== */
.postlist {
	list-style: none;
	margin: 0;
	padding: 0;
}

.postlist > li { border-bottom: 1px solid var(--line); }
.postlist > li:first-child { border-top: 1px solid var(--line); }

.postlist__link {
	display: grid;
	gap: .15rem 1.75rem;
	grid-template-columns: 1fr;
	padding: 1.15rem .25rem;
	text-decoration: none;
	color: var(--ink);
	transition: color .18s ease;
}

@media (min-width: 40rem) {
	.postlist__link { grid-template-columns: 7.5rem 1fr; align-items: baseline; }
}

.postlist__link:hover { color: var(--accent); }

.postlist time {
	font-size: .8rem;
	color: var(--ink-3);
	letter-spacing: .06em;
	font-variant-numeric: tabular-nums;
}

.postlist__title {
	font-family: var(--font-display);
	font-size: 1.05rem;
	letter-spacing: .03em;
	line-height: 1.6;
}

/* ページ送り */
.pager {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	margin-top: 2.5rem;
	font-size: .875rem;
}

.pager .page-numbers {
	display: inline-block;
	padding: .45rem .85rem;
	border: 1px solid var(--line);
	text-decoration: none;
	color: var(--ink);
	font-variant-numeric: tabular-nums;
}

.pager .page-numbers:hover { background: var(--accent-soft); }

.pager .page-numbers.current {
	background: var(--accent);
	border-color: var(--accent);
	color: #fff;
}

/* ==========================================================================
   9. サイドバー
   ========================================================================== */
.sidebar {
	display: flex;
	flex-direction: column;
	gap: 2rem;
	font-size: .875rem;
}

.widget { margin: 0; }

.widget-title {
	font-family: var(--font-display);
	font-size: 1rem;
	font-weight: 500;
	letter-spacing: .08em;
	margin: 0 0 .85rem;
	padding-bottom: .5rem;
	border-bottom: 1px solid var(--line);
}

.widget ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

.widget li + li { margin-top: .5rem; }

.widget li a {
	text-decoration: none;
	color: var(--ink-2);
}

.widget li a:hover { color: var(--accent); }

.widget .children,
.widget .sub-menu {
	margin-top: .5rem;
	padding-left: 1rem;
}

.widget select,
.widget input[type="search"],
.widget input[type="text"] {
	width: 100%;
	font: inherit;
	font-size: .875rem;
	padding: .55rem .7rem;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
}

.widget table {
	width: 100%;
	border-collapse: collapse;
	font-size: .8rem;
	font-variant-numeric: tabular-nums;
}

.widget td,
.widget th {
	padding: .3rem;
	text-align: center;
	border: 1px solid var(--line);
}

/* 検索フォーム */
.searchform {
	display: flex;
	gap: .5rem;
}

.searchform input[type="search"] { flex: 1 1 auto; min-width: 0; }

.button,
.searchform button {
	appearance: none;
	font: inherit;
	font-size: .875rem;
	padding: .55rem 1.1rem;
	background: var(--accent);
	color: #fff;
	border: 1px solid var(--accent);
	cursor: pointer;
	text-decoration: none;
	transition: background .18s ease;
}

.button:hover,
.searchform button:hover { background: var(--accent-deep); border-color: var(--accent-deep); color: #fff; }

/* ==========================================================================
   10. コメント
   ========================================================================== */
.comments {
	margin-top: 3.5rem;
	padding-top: 2.5rem;
	border-top: 1px solid var(--line);
	max-width: 46rem;
}

.comments__title {
	font-family: var(--font-display);
	font-size: 1.2rem;
	font-weight: 500;
	letter-spacing: .06em;
	margin: 0 0 1.5rem;
}

.commentlist,
.commentlist .children {
	list-style: none;
	margin: 0;
	padding: 0;
}

.commentlist .children { padding-left: 1.5rem; margin-top: 1.25rem; }

.commentlist li { margin-bottom: 1.25rem; }

.comment-body {
	background: var(--surface);
	border: 1px solid var(--line);
	padding: 1.15rem 1.35rem;
	font-size: .925rem;
}

.comment-meta {
	font-size: .78rem;
	color: var(--ink-3);
	margin-bottom: .6rem;
	letter-spacing: .04em;
}

.comment-form label {
	display: block;
	font-size: .8rem;
	color: var(--ink-2);
	margin-bottom: .3rem;
}

.comment-form input[type="text"],
.comment-form input[type="email"],
.comment-form input[type="url"],
.comment-form textarea {
	width: 100%;
	font: inherit;
	font-size: .925rem;
	padding: .6rem .75rem;
	background: var(--surface);
	color: var(--ink);
	border: 1px solid var(--line);
}

.comment-form p { margin: 0 0 1rem; }

/* ==========================================================================
   10b. 投稿まわりの細部
   ========================================================================== */
.entry-thumb { margin: 0 0 2rem; }
.entry-thumb img { display: block; width: 100%; height: auto; }

.entry-views {
	margin: 2.5rem 0 0;
	padding-top: 1.25rem;
	border-top: 1px solid var(--line);
	font-size: .8rem;
	color: var(--ink-3);
	font-variant-numeric: tabular-nums;
}

.post-navigation {
	margin-top: 3rem;
	padding-top: 1.75rem;
	border-top: 1px solid var(--line);
	font-size: .875rem;
}

.post-navigation .nav-links {
	display: grid;
	gap: 1.25rem;
	grid-template-columns: 1fr;
}

@media (min-width: 44rem) {
	.post-navigation .nav-links { grid-template-columns: repeat(2, 1fr); }
	.post-navigation .nav-next { text-align: right; }
}

.post-navigation a {
	text-decoration: none;
	color: var(--ink);
	line-height: 1.7;
}

.post-navigation a:hover { color: var(--accent); }

.post-navigation .nav-label {
	display: block;
	font-size: .72rem;
	letter-spacing: .14em;
	color: var(--ink-3);
	margin-bottom: .2rem;
}

.page-links {
	margin-top: 2rem;
	font-size: .875rem;
	display: flex;
	flex-wrap: wrap;
	gap: .5rem;
	align-items: center;
}

.page-links a {
	display: inline-block;
	padding: .3rem .7rem;
	border: 1px solid var(--line);
	text-decoration: none;
}

.comment-respond .comment-reply-title {
	font-family: var(--font-display);
	font-size: 1.1rem;
	font-weight: 500;
	letter-spacing: .06em;
	margin: 2.5rem 0 1.25rem;
}

.comment-form .form-submit { margin-bottom: 0; }

/* ==========================================================================
   10c. スマートフォン向けの調整
   ========================================================================== */

/* 入力欄は 16px 未満だと iOS が勝手に拡大するため、下回らせない。 */
input[type="text"],
input[type="search"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="number"],
input[type="password"],
select,
textarea {
	font-size: 16px;
}

/* 長い URL や英単語がはみ出して横スクロールを起こすのを防ぐ。 */
.prose,
.postlist__title,
.entry-title,
.comment-body {
	overflow-wrap: anywhere;
	word-break: normal;
}

/* 2016〜2019年の記事には幅指定つきの素の表が多い。
   画面に収まらないときは、その表だけを横スクロールさせる。 */
@media (max-width: 47.99rem) {
	.prose table {
		display: block;
		width: 100%;
		overflow-x: auto;
		white-space: nowrap;
	}

	.prose :where(th, td) { white-space: normal; min-width: 7em; }
}

/* 埋め込み動画などを画面幅に収める。 */
.prose :where(iframe, embed, object) {
	max-width: 100%;
}

/* 指で押す領域を確保する。 */
@media (max-width: 55.99rem) {
	.cards__item { padding-block: 1.35rem; }
	.postlist__link { padding-block: 1.05rem; }
	.nav-toggle { padding: .55rem 1rem; }
}

/* 極端に狭い画面では、字間を詰めて折り返しを減らす。 */
@media (max-width: 22.5rem) {
	.hero__catch { font-size: 1.75rem; letter-spacing: 0; }
	.wordmark { font-size: 1.25rem; letter-spacing: .1em; }
}

/* 横向きの短い画面では上下の余白を削る。 */
@media (max-height: 32rem) and (orientation: landscape) {
	.hero__in { padding-block: 2rem; }
}

/* ==========================================================================
   11. フッター
   ========================================================================== */
.colophon {
	background: var(--surface);
	border-top: 1px solid var(--line);
	padding-block: 2.5rem;
	font-size: .8rem;
	color: var(--ink-3);
	margin-top: auto;
}

.colophon__in {
	display: flex;
	flex-wrap: wrap;
	gap: .75rem 2rem;
	justify-content: space-between;
	align-items: center;
}

.colophon a { color: var(--ink-2); }

/* ページ全体を縦に伸ばしてフッターを下端に置く */
body {
	display: flex;
	flex-direction: column;
	min-height: 100vh;
}

.site-content { flex: 1 0 auto; }