/*
Theme Name: Hello idea
Theme URI: https://helloidea.org/
Author: shota
Description: helloidea.org 専用テーマ。2021年当時の twentyfifteen + カスタムCSS の見た目（白のサイドバー / #F2F2F2 の本文 / サンセリフの小さめ文字）を保ちながら、中身をゼロから書き直したもの。float ではなく Grid、固定 px ではなくカスタムプロパティと clamp()、jQuery 非依存、ダークモード対応。
Version: 1.1.0
Requires at least: 6.5
Tested up to: 7.0
Requires PHP: 8.1
License: GNU General Public License v2 or later
License URI: http://www.gnu.org/licenses/gpl-2.0.html
Text Domain: helloidea
Tags: blog, two-columns, left-sidebar, custom-colors, translation-ready, accessibility-ready
*/

/* =========================================================================
   デザイントークン
   当時の値をそのまま起点にしている:
     サイドバー #FFFFFF / 本文エリア #F2F2F2 / 文字 #333 / 補助文字 #707070
     サイトタイトル 23px / 記事タイトル 18px / 本文 13px / ウィジェット 13px
   ========================================================================= */
:root {
	--hi-bg:            #f2f2f2;
	--hi-surface:       #ffffff;
	--hi-text:          #333333;
	--hi-text-muted:    #707070;
	--hi-border:        rgba(51, 51, 51, 0.12);
	--hi-link:          #21759b;
	--hi-link-hover:    #0f3647;
	--hi-accent:        #333333;

	/* 当時は px 直指定だった。下限を当時の値に合わせ、広い画面だけ少し伸ばす */
	--hi-fs-body:       clamp(13px, 0.55rem + 0.35vw, 15px);
	--hi-fs-small:      clamp(12px, 0.5rem + 0.3vw, 13px);
	--hi-fs-entry:      clamp(18px, 0.9rem + 0.5vw, 22px);
	--hi-fs-title:      clamp(23px, 1.1rem + 0.7vw, 28px);

	--hi-sidebar-w:     clamp(260px, 25vw, 320px);
	--hi-content-max:   760px;
	--hi-gap:           clamp(12px, 2vw, 28px);
	--hi-radius:        6px;

	--hi-font: 'Lucida Grande', 'Hiragino Kaku Gothic ProN', 'Hiragino Sans',
	           Meiryo, system-ui, -apple-system, 'Segoe UI', sans-serif;
	--hi-font-mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

/* 当時は無かったが、今の閲覧環境を考えると入れておきたい */
@media (prefers-color-scheme: dark) {
	:root:not([data-hi-force-light]) {
		--hi-bg:         #1b1b1d;
		--hi-surface:    #242427;
		--hi-text:       #e6e6e6;
		--hi-text-muted: #a5a5a5;
		--hi-border:     rgba(230, 230, 230, 0.14);
		--hi-link:       #6fb3d2;
		--hi-link-hover: #a9d5e8;
		--hi-accent:     #e6e6e6;
	}
}

/* =========================================================================
   リセット
   ========================================================================= */
*, *::before, *::after { box-sizing: border-box; }

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

body {
	margin: 0;
	background-color: var(--hi-bg);
	color: var(--hi-text);
	font-family: var(--hi-font);
	font-size: var(--hi-fs-body);
	line-height: 1.8;
	overflow-wrap: break-word;
}

img, video, iframe, embed, object { max-width: 100%; height: auto; }
img { border: 0; }

a { color: var(--hi-link); text-decoration: none; }
a:hover, a:focus { color: var(--hi-link-hover); text-decoration: underline; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
	outline: 2px solid var(--hi-link);
	outline-offset: 2px;
}

/* アクセシビリティ: 読み上げ専用 */
.screen-reader-text {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0; border: 0;
	clip-path: inset(50%);
	overflow: hidden; white-space: nowrap;
}
.skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 100000;
	padding: 0.75em 1.25em;
	background: var(--hi-surface);
	color: var(--hi-text);
	border-radius: 0 0 var(--hi-radius) 0;
}
.skip-link:focus { left: 0; }

/* =========================================================================
   レイアウト
   当時は float + 固定幅。ここは Grid に置き換えているが、
   「左に白いサイドバー、右に本文」という見え方は変えない。
   ========================================================================= */
.site {
	display: grid;
	grid-template-columns: 1fr;
	min-height: 100vh;
}

/* Grid の子は min-width が auto なので、中に幅の広い要素（長い行の <pre> など）が
   あるとトラックごと viewport より広がる。2026-08-09 にモバイルで実際に発生し、
   139文字の行を持つコードブロックがページ全体を横へはみ出させていた
   （ヘッダーもサイドバーのボタンも画面外へ押し出された）。
   「縮んでよい」ことを明示する。 */
.site > *,
.site-content,
.site-main,
.hentry,
.page-content,
.entry-content,
.entry-summary,
.comments-area {
	min-width: 0;
}

/* 本文の直下要素が親を超えないようにする。古い記事には width を直書きした
   要素や長い URL が混ざっているため。 */
.entry-content > *,
.entry-summary > * {
	max-width: 100%;
}

/* =========================================================================
   本文用のユーティリティ

   2018年前後の記事は色やインデントを style 属性で直書きしていた。
   特に color:#000000 はダークモードで見えず、#993300 / #800000 も
   暗い背景で読みにくかったので、クラスへ寄せてここで面倒を見る
   （2026-08-09、364タグ分を変換）。

   ライト側の色は当時の色相を保ちつつ、白背景で WCAG AA(4.5:1) を
   満たすところまで暗くしている。#ff6600 のままだと約3.1:1 で不足するため。
   ========================================================================= */
:root {
	--hi-c-orange:  #c4500a;
	--hi-c-amber:   #96660a;
	--hi-c-green:   #1a7f37;
	--hi-c-red:     #cf222e;
	--hi-c-brown:   #8a4b1f;
	--hi-c-blue:    #0a58ca;
	--hi-c-magenta: #a626a4;
	--hi-c-gray:    #67707b;
	--hi-c-teal:    #0f6674;
}

@media (prefers-color-scheme: dark) {
	:root:not([data-hi-force-light]) {
		--hi-c-orange:  #ff9e5e;
		--hi-c-amber:   #ffc266;
		--hi-c-green:   #7ee787;
		--hi-c-red:     #ff7b72;
		--hi-c-brown:   #d9a06a;
		--hi-c-blue:    #79c0ff;
		--hi-c-magenta: #f0a3ff;
		--hi-c-gray:    #a5a5a5;
		--hi-c-teal:    #56d4dd;
	}
}

.hi-c-orange  { color: var(--hi-c-orange); }
.hi-c-amber   { color: var(--hi-c-amber); }
.hi-c-green   { color: var(--hi-c-green); }
.hi-c-red     { color: var(--hi-c-red); }
.hi-c-brown   { color: var(--hi-c-brown); }
.hi-c-blue    { color: var(--hi-c-blue); }
.hi-c-magenta { color: var(--hi-c-magenta); }
.hi-c-gray    { color: var(--hi-c-gray); }
.hi-c-teal    { color: var(--hi-c-teal); }

/* インデント。当時は 30/60/90px 固定だったが、狭い画面では
   本文が潰れるので画面幅に応じて詰める */
.hi-indent    { padding-left: clamp(1em, 4vw, 2em); }
.hi-indent-2  { padding-left: clamp(1.6em, 8vw, 4em); }
.hi-indent-3  { padding-left: clamp(2.2em, 12vw, 6em); }

.hi-mt    { margin-top: 1em; }
.hi-mt-lg { margin-top: 3em; }
.hi-center { text-align: center; }

/* 画像を横並びにするための行。
   2018年の記事では <div style="float: left; margin: 20px;"> を本文へ直接
   書いて横並びにしていたが、clear が無く記事の外へ漏れていたので、
   本文側を .hi-figure-row に書き換えたうえでここで面倒を見る。
   広い画面では横並び、狭い画面では自然に縦へ積まれる。 */
.hi-figure-row {
	display: flex;
	flex-wrap: wrap;
	gap: var(--hi-gap);
	justify-content: center;
	align-items: flex-start;
	margin: 1em 0;
}
.hi-figure-row > figure,
.hi-figure-row > .wp-caption,
.hi-figure-row > p {
	margin: 0;
	max-width: 100%;
}

/* 記事本文の中の float を記事の中に閉じ込める。
   2018年当時の記事には <div style="float: left; margin: 20px;"> が直接
   書かれており（スクリーンショットを横並びにするため）、clear が無いので
   float が記事のボックスを飛び出して、後続の記事まで右の細い帯に
   押し込んでいた（2026-08-09 に発覚）。
   flow-root でブロック整形コンテキストを作れば外へ漏れない。 */
.entry-content,
.entry-summary,
.hentry,
.comment-content {
	display: flow-root;
}

@media (min-width: 956px) {
	.site {
		grid-template-columns: var(--hi-sidebar-w) minmax(0, 1fr);
		align-items: start;
	}
	.site-sidebar {
		position: sticky;
		top: 0;
		max-height: 100vh;
		overflow-y: auto;
		overscroll-behavior: contain;
	}
}

/* --- サイドバー --------------------------------------------------------- */
.site-sidebar {
	background-color: var(--hi-surface);
	border-right: 1px solid var(--hi-border);
}

.site-header {
	padding: 5% 10%;
	margin: 2% 0;
}

.site-title {
	margin: 0;
	font-size: var(--hi-fs-title);
	line-height: 1.3;
	font-weight: 700;
	letter-spacing: -0.01em;
}
.site-title a { color: var(--hi-accent); }
.site-title a:hover { text-decoration: none; color: var(--hi-link); }

.site-description {
	margin: 0.5em 0 0;
	font-size: var(--hi-fs-small);
	color: var(--hi-text-muted);
	line-height: 1.6;
}

.widget-area { padding-bottom: 2rem; }

.widget {
	margin: 2%;
	padding: 0 5%;
	font-size: var(--hi-fs-small);
	line-height: 1.7;
}
.widget-title {
	margin: 0 0 0.6em;
	font-size: var(--hi-fs-small);
	font-weight: 700;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--hi-text-muted);
}
.widget ul { margin: 0; padding: 0; list-style: none; }
.widget li { padding: 0.28em 0; }
.widget li + li { border-top: 1px solid var(--hi-border); }
.widget_rss .rss-date,
.widget_rss cite { display: block; font-size: 0.9em; color: var(--hi-text-muted); }

.widget input[type="search"],
.widget input[type="text"] {
	width: 100%;
	padding: 0.5em 0.6em;
	font: inherit;
	color: var(--hi-text);
	background: var(--hi-bg);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
}

/* モバイルではサイドバーを折りたたむ。当時は無い機能だが、
   26個のウィジェットが記事の前に並ぶのは今の閲覧では厳しいため */
.sidebar-toggle {
	display: block;
	width: calc(100% - 4%);
	margin: 0 2% 2%;
	padding: 0.6em 1em;
	font: inherit;
	color: var(--hi-text);
	background: var(--hi-bg);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
	cursor: pointer;
}
.sidebar-toggle[aria-expanded="true"] + .widget-area { display: block; }
.sidebar-toggle[aria-expanded="false"] + .widget-area { display: none; }

@media (min-width: 956px) {
	.sidebar-toggle { display: none; }
	.sidebar-toggle + .widget-area { display: block !important; }
}

/* --- 本文 --------------------------------------------------------------- */
.site-content { background-color: var(--hi-bg); }

.site-main {
	max-width: var(--hi-content-max);
	margin: 0 auto;
	padding: var(--hi-gap) 1%;
}

.hentry, .page-header, .page-content, .no-results {
	background: var(--hi-surface);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
	padding: calc(var(--hi-gap) * 0.8) calc(var(--hi-gap) * 0.9);
}
.hentry + .hentry,
.page-header + .hentry,
.page-header + .page-content { margin-top: var(--hi-gap); }

.entry-header { margin-bottom: 0.6em; }

.entry-title {
	margin: 0 0 0.3em;
	font-size: var(--hi-fs-entry);
	line-height: 1.4;
	font-weight: 700;
}
.entry-title a { color: var(--hi-accent); }
.entry-title a:hover { color: var(--hi-link); text-decoration: none; }

.entry-meta,
.entry-footer {
	font-size: var(--hi-fs-small);
	color: var(--hi-text-muted);
}
.entry-meta > * + *::before,
.entry-footer > * + *::before { content: " · "; }

.entry-content { line-height: 1.9; }
.entry-content > * + * { margin-top: 1em; }
.entry-content h1 { font-size: 1.35em; line-height: 1.3; margin-top: 1.4em; }
.entry-content h2 { font-size: 1.25em; line-height: 1.35; margin-top: 1.4em; }
.entry-content h3 { font-size: 1.12em; margin-top: 1.3em; }
.entry-content h4, .entry-content h5, .entry-content h6 { font-size: 1em; margin-top: 1.2em; }

.entry-content blockquote {
	margin: 1em 0 1em 0.05em;
	padding: 0.2em 0 0.2em 0.85em;
	border-left: 3px solid var(--hi-border);
	color: var(--hi-text-muted);
	line-height: 1.75;
}

.entry-content pre {
	padding: 1em;
	overflow-x: auto;
	font-family: var(--hi-font-mono);
	font-size: 0.92em;
	line-height: 1.6;
	background: var(--hi-bg);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
}
.entry-content code {
	font-family: var(--hi-font-mono);
	font-size: 0.92em;
	padding: 0.1em 0.35em;
	background: var(--hi-bg);
	border-radius: 3px;
}
.entry-content pre code { padding: 0; background: none; }

/* SyntaxHighlighter のツールバーは position:absolute / width:11px で、
   中の "SyntaxHighlighter" という文字列が1文字ずつ縦に折り返されて
   コードブロックの右上に細長い帯として出てしまう（2026-08-09 に発覚）。
   折りたたみブロックの「ソースを表示」だけは必要なので、
   collapsed でないときだけ隠す。 */
.entry-content .syntaxhighlighter:not(.collapsed) .toolbar {
	display: none !important;
}

/* SyntaxHighlighter は自前のテーブルで描画するため、そのままだと
   コードの最長行の幅が親に伝わってはみ出す。横スクロールで閉じ込める。 */
.entry-content .syntaxhighlighter,
.entry-content .wp_syntax {
	max-width: 100%;
	overflow-x: auto !important;
}

/* 列の多い表も同様に、はみ出さず横スクロールさせる */
.entry-content > table,
.entry-content .table-scroll {
	display: block;
	max-width: 100%;
	overflow-x: auto;
}

.entry-content table {
	width: 100%;
	border-collapse: collapse;
	font-size: 0.95em;
}
.entry-content th, .entry-content td {
	padding: 0.5em 0.7em;
	border: 1px solid var(--hi-border);
	text-align: left;
}

.post-thumbnail { display: block; margin-bottom: 1em; }
.post-thumbnail img { border-radius: var(--hi-radius); }

.wp-caption { max-width: 100%; }
.wp-caption-text, .wp-element-caption {
	font-size: var(--hi-fs-small);
	color: var(--hi-text-muted);
	text-align: center;
}
.alignleft  { float: left;  margin: 0.3em 1.2em 0.8em 0; }
.alignright { float: right; margin: 0.3em 0 0.8em 1.2em; }
.aligncenter { display: block; margin-inline: auto; }
.alignwide, .alignfull { max-width: 100%; }

/* --- ナビゲーション ------------------------------------------------------ */
.pagination, .post-navigation {
	margin-top: var(--hi-gap);
	font-size: var(--hi-fs-small);
}
.pagination .nav-links {
	display: flex;
	flex-wrap: wrap;
	gap: 0.4em;
}
.pagination .page-numbers {
	display: inline-block;
	padding: 0.45em 0.8em;
	background: var(--hi-surface);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
}
.pagination .page-numbers.current {
	background: var(--hi-accent);
	color: var(--hi-surface);
	border-color: var(--hi-accent);
}

.post-navigation .nav-links {
	display: grid;
	gap: var(--hi-gap);
	grid-template-columns: 1fr;
}
@media (min-width: 640px) {
	.post-navigation .nav-links { grid-template-columns: 1fr 1fr; }
}
.post-navigation a {
	display: block;
	padding: 0.9em 1em;
	background: var(--hi-surface);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
}
.post-navigation .nav-subtitle {
	display: block;
	font-size: 0.85em;
	color: var(--hi-text-muted);
}
.post-navigation .post-title { font-size: 1.05em; font-weight: 600; }

/* --- コメント ------------------------------------------------------------ */
.comments-area {
	margin-top: var(--hi-gap);
	padding: calc(var(--hi-gap) * 0.9);
	background: var(--hi-surface);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
	font-size: var(--hi-fs-small);
}
.comments-title, .comment-reply-title { font-size: 1.15em; margin-top: 0; }
.comment-list { margin: 0; padding: 0; list-style: none; }
.comment-list ol { list-style: none; padding-left: 1.2em; }
.comment-list article { padding: 0.8em 0; border-top: 1px solid var(--hi-border); }
.comment-author .avatar { border-radius: 50%; vertical-align: middle; margin-right: 0.5em; }

/* 当時 CSS で隠していた項目をそのまま踏襲する */
.comment-notes,
.comment-form-email,
.comment-form-url,
.comment-subscription-form { display: none; }

.comment-form label { display: block; font-weight: 600; }
.comment-form input[type="text"],
.comment-form textarea {
	width: 100%;
	padding: 0.55em 0.7em;
	font: inherit;
	color: var(--hi-text);
	background: var(--hi-bg);
	border: 1px solid var(--hi-border);
	border-radius: var(--hi-radius);
}
.comment-form .submit {
	padding: 0.6em 1.4em;
	font: inherit;
	color: var(--hi-surface);
	background: var(--hi-accent);
	border: 0;
	border-radius: var(--hi-radius);
	cursor: pointer;
}

/* --- フッター ------------------------------------------------------------
   当時は .site-footer { visibility: hidden } で消していた。
   完全に消すとライセンス表記も消えるので、視覚的には控えめにしつつ
   読み上げには残す。 */
.site-footer {
	padding: var(--hi-gap) 1%;
	font-size: var(--hi-fs-small);
	color: var(--hi-text-muted);
	text-align: center;
}

/* =========================================================================
   SyntaxHighlighter のダークモード対応

   プラグイン同梱の shThemeDefault.css は白背景・黒文字を !important で
   固定していてダークモードを考慮していない。そのためダークモードでも
   コードブロックだけ白く浮いていた（2026-08-09 に指摘を受けて対応）。

   注意点が2つある:
     1. プラグインは CSS を JS で後から動的に注入する。後勝ちになるので、
        こちらは詳細度を上げないと勝てない。`html body` を前置している。
     2. 向こうが全部 !important なので、こちらも !important が要る。

   同梱の shCoreMidnight.css などに切り替える手もあるが、それだと
   ライトモードでも暗くなってしまうので、ここで上書きする方式にした。
   ========================================================================= */
@media (prefers-color-scheme: dark) {
	html body .syntaxhighlighter,
	html body .syntaxhighlighter .line.alt1,
	html body .syntaxhighlighter .line.alt2 {
		background-color: #1e1e22 !important;
	}

	html body .syntaxhighlighter .line.highlighted.alt1,
	html body .syntaxhighlighter .line.highlighted.alt2 {
		background-color: #3a3a44 !important;
	}
	html body .syntaxhighlighter .line.highlighted.number {
		color: #ffffff !important;
	}

	html body .syntaxhighlighter table caption {
		color: var(--hi-text) !important;
	}

	/* 行番号の溝。既定の明るい緑(#6ce26c)は暗い背景で刺さるので落とす */
	html body .syntaxhighlighter .gutter {
		color: #6f6f78 !important;
	}
	html body .syntaxhighlighter .gutter .line {
		border-right: 3px solid #3d6b3d !important;
	}
	html body .syntaxhighlighter .gutter .line.highlighted {
		background-color: #3d6b3d !important;
		color: #ffffff !important;
	}

	/* ツールバーと「ソースを表示」の折りたたみ */
	html body .syntaxhighlighter .toolbar {
		color: #dcdcdc !important;
		background: #2f4f2f !important;
		border: none !important;
	}
	html body .syntaxhighlighter .toolbar a { color: #dcdcdc !important; }
	html body .syntaxhighlighter .toolbar a:hover { color: #ffffff !important; }

	html body .syntaxhighlighter.collapsed .toolbar {
		color: var(--hi-link) !important;
		background: var(--hi-surface) !important;
		border: 1px solid #3d6b3d !important;
	}
	html body .syntaxhighlighter.collapsed .toolbar a { color: var(--hi-link) !important; }
	html body .syntaxhighlighter.collapsed .toolbar a:hover { color: var(--hi-link-hover) !important; }

	/* トークンの配色。暗い背景でコントラストが取れる値にしている */
	html body .syntaxhighlighter .plain,
	html body .syntaxhighlighter .plain a      { color: #e6e6e6 !important; }
	html body .syntaxhighlighter .comments,
	html body .syntaxhighlighter .comments a   { color: #7f9f7f !important; }
	html body .syntaxhighlighter .string,
	html body .syntaxhighlighter .string a     { color: #ce9178 !important; }
	html body .syntaxhighlighter .keyword      { color: #569cd6 !important; }
	html body .syntaxhighlighter .preprocessor { color: #9cdcfe !important; }
	html body .syntaxhighlighter .variable     { color: #dcb67a !important; }
	html body .syntaxhighlighter .value        { color: #b5cea8 !important; }
	html body .syntaxhighlighter .functions    { color: #dcdcaa !important; }
	html body .syntaxhighlighter .constants    { color: #4fc1ff !important; }
	html body .syntaxhighlighter .script       { color: #4ec9b0 !important; }
	html body .syntaxhighlighter .color1,
	html body .syntaxhighlighter .color1 a     { color: #9a9a9a !important; }
	html body .syntaxhighlighter .color2,
	html body .syntaxhighlighter .color2 a     { color: #c586c0 !important; }
	html body .syntaxhighlighter .color3,
	html body .syntaxhighlighter .color3 a     { color: #f28b82 !important; }

	/* テーマ側の <pre> もダーク寄りに揃える（SH が効かない生の pre 用） */
	html body .entry-content pre,
	html body .entry-content code {
		background: #1e1e22;
	}
}

/* 印刷時はサイドバーを落とす */
@media print {
	.site-sidebar, .pagination, .post-navigation, .comments-area { display: none; }
	.site { grid-template-columns: 1fr; }
	.hentry { border: 0; }
}