/*
Theme Name: kabosu
Theme URI: https://www.kabosu.info/
Author: shinn
Description: kabosu.info のためのブロックテーマ。1カラムで可読性を優先し、サーバ・ネットワークの記事を読みやすく表示します。
Version: 1.0.7
Requires at least: 6.5
Tested up to: 7.1
Requires PHP: 8.0
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: kabosu
Tags: blog, one-column, block-patterns, full-site-editing
*/

/* ---- 本文の読みやすさ（theme.json で表現しきれない部分だけ） ---- */

body {
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* 記事本文のリンクは下線を残す（可読性のため） */
.entry-content a:not(.wp-element-button) {
	text-decoration: underline;
	text-underline-offset: 0.18em;
	text-decoration-thickness: 1px;
}

/* 見出しの字間 */
h1, h2, h3, h4 {
	letter-spacing: 0.01em;
}

/* 日付は等幅にして桁を揃える */
.kabosu-meta .wp-block-post-date,
.wp-block-post-date time {
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	letter-spacing: 0.04em;
}

/* カテゴリのバッジ */
.kabosu-meta .wp-block-post-terms a {
	background: var(--wp--preset--color--accent-bg);
	color: var(--wp--preset--color--primary);
	padding: 0.15em 0.7em;
	border-radius: 3px;
	text-decoration: none;
	font-size: 0.82em;
}
.kabosu-meta .wp-block-post-terms a:hover {
	background: #e6f0dd;
}

/* ナビゲーションの現在地 */
.wp-block-navigation .current-menu-item > a {
	font-weight: 600;
	box-shadow: inset 0 -2px 0 0 var(--wp--preset--color--primary);
}

/* 記事一覧の区切り */
.kabosu-post-list > li {
	padding-block: 1.9rem;
	border-bottom: 1px solid var(--wp--preset--color--border);
}
.kabosu-post-list > li:first-child { padding-top: 0.6rem; }

/* コードブロックを読みやすく（技術記事が主成分のため） */
.wp-block-code,
.wp-block-preformatted {
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	font-size: 0.86rem;
	line-height: 1.85;
	background: #f7f8f6;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1rem 1.15rem;
	overflow-x: auto;
	tab-size: 4;
}

/* 引用 */
.wp-block-quote {
	border-left: 3px solid var(--wp--preset--color--primary);
	padding-left: 1.1rem;
	color: #555;
	font-style: normal;
}

/* テーブル（IPアドレス確認ページなどで使われている） */
.wp-block-table table,
.entry-content table {
	border-collapse: collapse;
	width: 100%;
	font-size: 0.92rem;
}
.wp-block-table th, .wp-block-table td,
.entry-content th, .entry-content td {
	border: 1px solid var(--wp--deleted, var(--wp--preset--color--border));
	padding: 0.55rem 0.8rem;
	text-align: left;
}
.wp-block-table th, .entry-content th {
	background: #f7f8f6;
	font-weight: 600;
}

/* ---- ヒーロー（企業サイト案1：かぼすの線画を濃緑地に） ---- */
/* 画像は Gemini 生成。差し替えは assets/hero-dark.png を置き換える。
   明るい版に切り替えるなら assets/hero-light.png を指定し、
   下の ::after を background:none、文字色を #22301a にする */
.kabosu-hero {
	position: relative;
	height: 300px;
	overflow: hidden;
	background-image: url( assets/hero-dark.png );
	background-size: cover;
	background-position: center;
	background-color: #22301a;   /* 画像の読み込み前・読み込み失敗時の受け皿 */
	padding: 0;
}
/* 文字を読みやすくするための、ごく薄い覆い。
   写真版では濃い覆いが必要だったが、線画は元から暗いので薄くてよい。
   **線画は写真と違って拡大してもぼけない**ので、1024px 原寸でも
   大きな画面で問題にならない（2026-09-21 に実測で確認） */
.kabosu-hero::after {
	content: "";
	position: absolute;
	inset: 0;
	background: linear-gradient(180deg, rgba(20, 35, 12, 0.10) 0%, rgba(20, 35, 12, 0.30) 100%);
}
.kabosu-hero__txt {
	position: absolute;
	inset: 0;
	z-index: 2;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	text-align: center;
	padding-inline: 1.5rem;
}
.kabosu-hero__title {
	font-size: clamp(1.9rem, 4.4vw, 2.75rem);
	font-weight: 800;
	letter-spacing: 0.02em;
	color: #fff;
	text-shadow: 0 2px 20px rgba(0, 0, 0, 0.35);
	margin: 0;
}
.kabosu-hero__tagline {
	color: #fff;
	opacity: 0.94;
	letter-spacing: 0.06em;
	font-size: 0.9rem;
	margin: 0;
}

/* ---- ヘッダーのバー（ロゴ左・メニュー右） ---- */
/* ロゴの実寸に合わせて上下の余白を詰める（header.html 側の 1rem を上書き） */
.kabosu-bar { padding-block: 0.85rem !important; }
.kabosu-bar .wp-block-site-title a {
	text-decoration: none;
	color: var(--wp--preset--color--primary);
	font-weight: 800;
}

/* ---- セクション見出し（最近の記事 / RECENT POSTS） ---- */
.kabosu-sectionhead__en {
	letter-spacing: 0.18em;
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	margin: 0;
}

/* ---- 記事カード（案B） ---- */
.kabosu-card {
	background: var(--wp--preset--color--base);
	border: 1px solid #e5ebdc;
	border-radius: 12px;
	padding: 1.4rem;
	height: 100%;
	display: flex;
	flex-direction: column;
	box-shadow: 0 1px 3px rgba(40, 50, 30, 0.04);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.kabosu-card:hover {
	box-shadow: 0 6px 18px rgba(40, 50, 30, 0.09);
	transform: translateY(-2px);
}
.kabosu-card .wp-block-post-title {
	line-height: 1.6;
}
/* 抜粋は3行で打ち切る。手書きの抜粋が1件も無く、自動生成なので長さが揃わないため */
.kabosu-card__excerpt {
	display: -webkit-box;
	-webkit-line-clamp: 3;
	-webkit-box-orient: vertical;
	overflow: hidden;
	line-height: 1.8;
	flex: 1;
}
.kabosu-card__excerpt .wp-block-post-excerpt__more-text { display: none; }
/* 日付はカードの底に揃える */
.kabosu-card__date {
	margin-top: auto;
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	letter-spacing: 0.04em;
}
.kabosu-card__cat a {
	background: var(--wp--preset--color--accent-bg);
	color: var(--wp--preset--color--primary);
	padding: 0.15em 0.7em;
	border-radius: 3px;
	text-decoration: none;
}

/* カードの並びは画面幅で段数を落とす */
@media (max-width: 900px) {
	.kabosu-cards.is-layout-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 600px) {
	.kabosu-cards.is-layout-grid { grid-template-columns: 1fr; }
	.kabosu-hero { height: 220px; }
	.kabosu-post-list > li { padding-block: 1.5rem; }
}

/* ---- 旧記事のコード表現（2008〜2010年の記事は <blockquote><code> で書かれている） ---- */

/* 文中の短いコード */
.entry-content code {
	font-family: ui-monospace, SFMono-Regular, Consolas, Menlo, monospace;
	font-size: 0.92em;
	background: #f1f3ef;
	padding: 0.1em 0.35em;
	border-radius: 3px;
}

/* ブロックとしてのコード（blockquote で囲まれた複数行） */
.entry-content blockquote:not(.wp-block-quote) {
	margin-block: 1.5rem;
	padding: 0;
	border: 0;
}
.entry-content blockquote:not(.wp-block-quote) code,
.entry-content pre code {
	display: block;
	white-space: pre-wrap;
	overflow-wrap: anywhere;
	font-size: 0.85rem;
	line-height: 1.8;
	background: #f7f8f6;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 8px;
	padding: 1rem 1.15rem;
	tab-size: 4;
}
.entry-content blockquote:not(.wp-block-quote) p {
	margin: 0;
}
/* white-space:pre-wrap で改行が生きるため、wpautop が足した <br> は重複になる */
.entry-content blockquote:not(.wp-block-quote) code br,
.entry-content pre code br {
	display: none;
}

/* ---- トップの「ツール一覧へ」 ---- */
.kabosu-more { margin: 1rem 0 0; font-size: 0.9rem; }
.kabosu-more a {
	color: var(--wp--preset--color--primary);
	text-decoration: none;
	font-weight: 600;
}
.kabosu-more a:hover { text-decoration: underline; }

/* ---- whois 検索（wp24-domain-check）の結果 ---- */
/* プラグインの CSS は .whois-info-inline pre に white-space も overflow も
   指定していないため、<pre> 既定の white-space:pre のままで、なおかつ
   overflow も visible。JPRS の長い行（"For details -> https://..." など）が
   パネルの外まで描かれてしまう。

   whois は桁を揃えた出力なので、折り返さずに「枠の中だけ横スクロール」させる。
   white-space:pre を保ったまま overflow-x:auto と max-width を与えるのが要点。
   overflow-wrap は付けないこと（付けても pre では効かないが、意図を紛らわせる）。

   font-family は指定しない。記事のコード用に使っている Consolas 系は
   1文字が 0.55em と太く、同じ px でも行が 1割ほど長くなる。 */
.whois-info-inline pre,
.whois-info pre {
	white-space: pre;
	max-width: 100%;
	overflow-x: auto;
	font-size: 0.875rem;
	line-height: 1.6;
}

/* 狭い画面では横に振る量が増えるので、1段小さくして負担を減らす。
   実測: 枠 444px に対し中身 815px（14px）→ 699px（12px）。
   スクロール量が 371px → 255px になる（約3割減）。 */
@media (max-width: 600px) {
	.whois-info-inline pre,
	.whois-info pre {
		font-size: 0.75rem;
	}
}

/* ---- 古い記事の注記（functions.php の kabosu_stale_notice が出す） ---- */
.kabosu-stale {
	background: var(--wp--preset--color--accent-bg);
	border-left: 3px solid var(--wp--preset--color--primary);
	border-radius: 0 6px 6px 0;
	padding: 0.85rem 1.1rem;
	margin-block: 0 1.8rem;
	font-size: 0.85rem;
	line-height: 1.8;
	color: #4a5344;
}

/* ---- トップの入口（道具とカテゴリ） ---- */
.kabosu-tool {
	border: 1px solid #e5ebdc;
	border-radius: 12px;
	padding: 1.3rem 1.4rem;
	background: var(--wp--preset--color--base);
	box-shadow: 0 1px 3px rgba(40, 50, 30, 0.04);
	transition: box-shadow 0.18s ease, transform 0.18s ease;
}
.kabosu-tool:hover {
	box-shadow: 0 6px 18px rgba(40, 50, 30, 0.09);
	transform: translateY(-2px);
}
.kabosu-tool__name {
	margin: 0 0 0.35rem;
	font-weight: 700;
	font-size: 1.05rem;
}
.kabosu-tool__name a {
	text-decoration: none;
	color: var(--wp--preset--color--contrast);
}
/* カード全体をクリックできるようにする（リンクを面いっぱいに広げる） */
.kabosu-tool { position: relative; }
.kabosu-tool__name a::after {
	content: "";
	position: absolute;
	inset: 0;
	border-radius: 12px;
}
.kabosu-tool__desc { margin: 0; }

/* カテゴリのチップ。
   ページの地（#f2f5ed）と accent-bg（#f2f7ee）がほぼ同色で同化してしまったため、
   白地＋緑の枠にして輪郭を出す。押せることも分かりやすくなる（2026-09-21 修正） */
.kabosu-cats p { margin: 0; }
.kabosu-cats a {
	display: inline-block;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--primary);
	border: 1px solid #c6d9b4;
	border-radius: 999px;
	padding: 0.42em 1.15em;
	font-size: 0.86rem;
	font-weight: 600;
	text-decoration: none;
	transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.kabosu-cats a:hover {
	background: var(--wp--preset--color--primary);
	border-color: var(--wp--preset--color--primary);
	color: #fff;
}

@media (max-width: 600px) {
	/* 道具カードは wp:html の素の div なので .is-layout-grid は付かない。
	   クラス名で直接指定する（2026-09-21 にスマホで2列のまま窮屈になっていた） */
	.kabosu-tools { grid-template-columns: 1fr !important; }
	/* ロゴはスマホでは小さめに */
	.kabosu-logo img { height: 44px; }
}

/* ---- プラグインが出す素のフォーム部品（whois 検索など） ---- */
/* ブロックテーマは <input> や <button> を装飾しないため、
   旧テーマ First で付いていた見た目が失われる。ここで補う */
.entry-content input[type="text"],
.entry-content input[type="search"],
.entry-content input[type="email"],
.entry-content input[type="url"],
.entry-content select {
	font: inherit;
	font-size: 0.95rem;
	padding: 0.55em 0.8em;
	border: 1px solid var(--wp--preset--color--border);
	border-radius: 6px;
	background: var(--wp--preset--color--base);
	color: var(--wp--preset--color--contrast);
	max-width: 100%;
}
.entry-content input[type="text"]:focus,
.entry-content input[type="search"]:focus,
.entry-content select:focus {
	outline: 2px solid var(--wp--preset--color--primary);
	outline-offset: 1px;
}
.entry-content input[type="submit"],
.entry-content input[type="button"],
.entry-content button:not(.wp-element-button) {
	font: inherit;
	font-size: 0.9rem;
	padding: 0.55em 1.4em;
	border: 0;
	border-radius: 6px;
	background: var(--wp--preset--color--primary);
	color: var(--wp--preset--color--base);
	cursor: pointer;
}
.entry-content input[type="submit"]:hover,
.entry-content button:not(.wp-element-button):hover {
	filter: brightness(1.08);
}

/* ---- ロゴ（Gemini 生成。assets/logo.png を差し替えれば変わる） ---- */
.kabosu-logo { display: inline-flex; line-height: 0; }
/* assets/logo.png は生成画像の余白を切り詰め済みなので、負のマージンは使わない。
   （74px に負のマージン -20px を当てていたため、絵がヘッダーの高さから
   上下に4pxずつはみ出していた。2026-09-21 修正） */
.kabosu-logo img { height: 60px; width: auto; display: block; }

/* ---- 入口の道具カード（アイコンつき） ---- */
.kabosu-tools {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: 1.4rem;
}
.kabosu-tool__icon {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px; height: 44px;
	border-radius: 11px;
	background: var(--wp--preset--color--accent-bg);
	color: var(--wp--preset--color--primary);
	margin-bottom: 0.9rem;
}
.kabosu-tool__icon svg { width: 24px; height: 24px; }
.kabosu-tool__desc {
	margin: 0;
	font-size: 0.8125rem;
	line-height: 1.85;
	color: var(--wp--preset--color--secondary);
}

/* ---- 記事・固定ページは白いパネルに載せる ---- */
/* ページの地を #fafbf8 にしたため、本文が地と同化して境目が無くなっていた。
   トップのカードと同じ考え方で、読む場所を白く抜く。
   `wp-singular` は WordPress が単体記事・固定ページの body に付けるクラス */
body.wp-singular main.wp-block-group {
	background: var(--wp--preset--color--base);
	border: 1px solid #e5ebdc;
	border-radius: 14px;
	box-shadow: 0 1px 3px rgba(40, 50, 30, 0.05), 0 10px 28px rgba(40, 50, 30, 0.04);
	/* 本文 720px ＋ 左右の内側余白。中の constrained レイアウトはそのまま効く */
	max-width: 840px;
	margin-inline: auto;
	margin-top: var(--wp--preset--spacing--40);
	/* 上下左右をきちんと揃える。テンプレート側のインライン padding-top は
	   外してあるので、ここだけで決まる（2026-09-21 に上だけ16pxになっていた） */
	padding: 3.4rem 3rem 3.2rem;
}

/* 狭い画面では角丸と左右の枠をやめて、帯として全幅に敷く */
@media (max-width: 782px) {
	body.wp-singular main.wp-block-group {
		border-radius: 0;
		border-inline: 0;
		margin-top: 0;
		padding: 2.2rem 1.3rem 2.2rem;
	}
}