/*
 * 経営者のポルシェ整理帳 - ColorMag上書きCSS
 *
 * モデル: ZEIKEN PRESS 実測値（白 #ffffff／淡ブルーグレー #eef0f6／
 * 濃紺 #0b1f43／本文 #333333／罫線 #cccccc）に寄せる。
 * 根拠・実在確認したセレクタの一覧は design-notes.md 参照。
 *
 * 方針:
 * 1) ColorMagは --cm-color-1〜9 というCSS変数でアクセントカラーを
 *    管理しているが、customizerの差分CSS（inc/base/class-colormag-dynamic-css.php）
 *    が :root に --cm-color-N: inherit; を無条件で書き戻す処理を持ち、
 *    かつ子テーマのfunctions.php実行順の都合でそれが子テーマの:root定義より
 *    後に出力される。そのため変数上書き単独では消えることがある
 *    （詳細はdesign-notes.md）。
 * 2) よって「変数上書き」は保険として残しつつ、実際に見た目を決めるのは
 *    各実在セレクタへの直接上書き（本ファイルの本体）とする。
 */

/* ============================================================
   0. カスタムプロパティ（保険。1系統でまとめて変えられるようにしておく）
   ============================================================ */
:root {
	--cm-color-1: #0b1f43; /* Primary Color（リンク・ボタン・バッジ等） */
	--cm-color-2: #0b1f43;
	--cm-color-3: #ffffff; /* コンテナ内側背景 */
	--cm-color-4: #eef0f6;
	--cm-color-5: #0b1f43; /* ヘッダー/フッターの濃色バー */
	--cm-color-6: #0b1f43; /* Base（見出し色） */
	--cm-color-7: #5b6472; /* メタ情報のグレー */
	--cm-color-8: #cccccc; /* 罫線・ボーダー */
	--cm-color-9: #cccccc;
}

/* ============================================================
   1. 全体キャンバス・ベースタイポグラフィ
   ============================================================ */
body {
	background-color: #eef0f6;
}

body,
button,
input,
select,
textarea {
	color: #333333;
	font-family: "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", sans-serif;
}

h1,
h2,
h3,
h4,
h5,
h6 {
	color: #0b1f43;
	font-weight: 600;
	font-family: "Yu Gothic Medium", "Hiragino Kaku Gothic ProN", Meiryo, "Noto Sans JP", sans-serif;
}

/* リンク（サイト全体の既定。記事本文側は§4でさらに上書き） */
a {
	color: #0b1f43;
}
a:hover,
a:focus,
a:active {
	color: #0b1f43;
	text-decoration: underline;
}

/* ============================================================
   2. 記事タイトル（h1.cm-entry-title＝単体記事 / h2.cm-entry-title＝一覧）
   .single .cm-entry-header .cm-entry-title は親テーマ側がfont-sizeを
   上書きしている、より詳細度の高い実在セレクタ。同詳細度で明示しておく。
   ============================================================ */
.cm-entry-title,
.single .cm-entry-header .cm-entry-title {
	color: #0b1f43;
	font-weight: 600;
}
.cm-entry-title a,
.single .cm-entry-header .cm-entry-title a {
	color: #0b1f43;
}
.cm-entry-title a:hover {
	color: #0b1f43;
	text-decoration: underline;
}

/* サイトタイトル・タグライン */
.cm-site-title a {
	color: #0b1f43;
}
.cm-site-description {
	color: #5b6472;
}

/* ============================================================
   3. カテゴリバッジ（colormag_colored_category() の実出力 .cm-post-categories a）
   ============================================================ */
.cm-post-categories a {
	background-color: #0b1f43;
	text-transform: none;
}

/* ============================================================
   4. 記事本文（.cm-entry-summary＝the_content()の実ラッパー。単体・一覧共通）
   17px / 行間1.85 / 本文幅720px（1行42字, config指定）
   ============================================================ */
.cm-entry-summary {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
	color: #333333;
}
.cm-entry-summary p,
.cm-entry-summary li {
	font-size: 17px;
	line-height: 1.85;
}
.cm-entry-summary p {
	margin: 0 0 1.5em;
}
.cm-entry-summary li {
	margin-bottom: 0.5em;
}
.cm-entry-summary li::marker {
	color: #0b1f43;
}
.cm-entry-summary strong {
	color: #0b1f43;
	font-weight: 600;
}

/* 見出し階層：太字だけに頼らず罫線で作る（モデル準拠） */
.cm-entry-summary h2 {
	margin-top: 2.6em;
	margin-bottom: 1em;
	padding-bottom: 0.3em;
	border-bottom: 2px solid #0b1f43;
	font-size: 24px;
	line-height: 1.6;
}
.cm-entry-summary h3 {
	margin-top: 2em;
	margin-bottom: 0.8em;
	padding-left: 0.65em;
	border-left: 3px solid #0b1f43;
	font-size: 20px;
	line-height: 1.7;
}
.cm-entry-summary h4 {
	margin-top: 1.8em;
	margin-bottom: 0.6em;
	font-size: 18px;
	line-height: 1.7;
}

/* 記事本文内リンク：常時下線（記事のUI要素より視認性優先） */
.cm-entry-summary a {
	color: #0b1f43;
	text-decoration: underline;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.2em;
}
.cm-entry-summary a:hover,
.cm-entry-summary a:focus {
	background-color: #eef0f6;
}

/* 表：維持費の内訳表などを想定。罫線は#cccccc、見出し行は淡ブルーグレー */
.cm-entry-summary table {
	width: 100%;
	border-collapse: collapse;
	margin: 0 0 1.8em;
	font-size: 15px;
	line-height: 1.75;
}
.cm-entry-summary table th,
.cm-entry-summary table td {
	border: 1px solid #cccccc;
	padding: 8px 12px;
	text-transform: none;
}
.cm-entry-summary table thead th {
	background-color: #eef0f6;
	color: #0b1f43;
	font-weight: 600;
}

/* 引用 */
.cm-entry-summary blockquote {
	background-color: #0b1f43;
	color: #ffffff;
}

@media (max-width: 600px) {
	.cm-entry-summary h2 {
		font-size: 20px;
		margin-top: 2.2em;
	}
	.cm-entry-summary h3 {
		font-size: 18px;
	}
	/* 素のtableで入るため、ブロック用の折り返しが効かない。横スクロールで対応 */
	.cm-entry-summary table {
		display: block;
		overflow-x: auto;
		font-size: 14px;
	}
}

/* ============================================================
   5. ボタン（style.css: button, input[...], .wp-block-button__link, .cm-button 等）
   ============================================================ */
button,
input[type="button"],
input[type="reset"],
input[type="submit"],
.wp-block-button .wp-block-button__link,
.wp-element-button,
.cm-button,
.colormag-button {
	background-color: #0b1f43;
	border-color: #0b1f43;
}
button:hover,
input[type="button"]:hover,
input[type="reset"]:hover,
input[type="submit"]:hover,
.wp-block-button .wp-block-button__link:hover,
.wp-element-button:hover,
.cm-button:hover {
	color: #0b1f43;
}
.colormag-button:hover {
	background-color: #0b1f43;
	opacity: 0.85;
}
.cm-entry-button span {
	background-color: #0b1f43;
}

/* ============================================================
   6. ウィジェットタイトル（register_sidebar()の実出力 h3.cm-widget-title>span）
   実際に使う文脈（右サイドバー=.cm-secondary／フッター=.cm-footer-builder）を
   明示。他の文脈は素の .cm-widget-title で緩く受ける。
   ============================================================ */
.cm-widget-title,
.cm-secondary .cm-widget-title,
#cm-tertiary .cm-widget-title,
.cm-footer-builder .cm-widget-title {
	border-bottom-color: #0b1f43;
}
.cm-widget-title span,
.cm-secondary .cm-widget-title span,
#cm-tertiary .cm-widget-title span,
.cm-footer-builder .cm-widget-title span {
	background-color: #0b1f43;
}

/* ============================================================
   7. ヘッダー・フッターの濃色バー（既定は var(--cm-color-5, #27272A)）
   ============================================================ */
.cm-header-builder.cm-full-width .cm-header-bottom-row,
.cm-header-builder.cm-contained .cm-header-bottom-row .cm-bottom-row,
.cm-header-builder .cm-mobile-row .cm-header-bottom-row,
.cm-header-builder .cm-mobile-row .cm-mobile-open-container {
	background-color: #0b1f43;
	border-top-color: #0b1f43;
}
.cm-primary-nav a {
	text-transform: none;
}
.cm-mobile-nav li a {
	text-transform: none;
}

.cm-footer-builder .cm-footer-top-row,
.cm-footer-builder .cm-footer-main-row,
.cm-footer-builder .cm-footer-bottom-row {
	background-color: #0b1f43;
}

/* ============================================================
   8. ページネーション「現在ページ」（3箇所とも同一パターン）
   ============================================================ */
.page-numbers .current,
.wp-block-query-pagination-numbers .page-numbers.current,
.link-pagination .post-page-numbers.current {
	background-color: #0b1f43;
}

/* ============================================================
   9. text-transform: uppercase の全解除（style.css内の実在箇所を網羅）
   §3, §6, §7 で既に解除済みのセレクタは重複を避けて省略。
   ============================================================ */
table th {
	text-transform: none;
}
.call-to-action__title {
	text-transform: none;
}
.widget_call_to_action .btn--primary {
	text-transform: none;
}
.format-link .cm-entry-summary a {
	text-transform: none;
}

/* =========================================================
   フッターのウィジェット3カラム（2026-07-31 追加）
   ColorMag のフッタービルダーは main 行を flex で組むが、
   カラム幅が4分割前提のため3カラムだと右側が余る。等幅に伸ばす。
   ========================================================= */
.cm-footer-builder .cm-main-row {
	display: flex;
	flex-wrap: wrap;
}

.cm-footer-builder .cm-main-row > .cm-footer-col {
	flex: 1 1 0;
	width: auto;
	max-width: none;
	min-width: 0;
}

@media screen and (max-width: 768px) {
	.cm-footer-builder .cm-main-row > .cm-footer-col {
		flex: 1 1 100%;
	}
}


/* ============================================================
   10. タイトル・カテゴリタグ・日付を本文と同じ720px列に揃える
   （2026-07-31 追加。カテトップ・トップ一覧・投稿ページのずれ修正）
   .cm-entry-summary が max-width:720px 中央寄せのため、全幅のままの
   見出し（h1/h2）・カテゴリバッジ・日付と左端がずれていた。
   同じ720px列に載せて縦のラインを揃える。
   ============================================================ */
.cm-page-title,
.cm-entry-header,
.cm-entry-header-meta {
	max-width: 720px;
	margin-left: auto;
	margin-right: auto;
}