/*
Theme Name:     M9notes
Theme URI:      https://github.com/computerlib/storefront-m9notes
Description:    M9notes のための Storefront 子テーマ。デジタル庁デザインシステム (DADS) を適用しキーカラーを緑にしている。
Author:         Computer Lib
Template:       storefront
Version:        0.2.0
Text Domain:    storefront-m9notes
*/

/* ==========================================================================
   M9notes × DADS adapter styles

   - DADS トークンは assets/dads/tokens.css で定義済み。
   - ヘッダー / フッター / 背景 / タイポグラフィ / ボタンの色は
     WP 管理画面 → 外観 → カスタマイズ → 色 で設定する。
     既定値は functions.php の storefront_default_*_color フィルタで投入。
     当 CSS では該当プロパティを書かず、Storefront の動的 CSS
     (storefront_customizer_css) に委ねる。
   - !important は使わない: Storefront の動的 CSS を必ず後勝ちにする。
   - bare button や input[type="button"|"reset"] はあえて含めない:
     管理バー (#wpadminbar button) など WP 管理 UI に副作用が及ぶため。
   - --m9-accent は functions.php の m9notes_inline_token_overrides() で
     Customizer accent から動的に上書きされ、非 alt ボタンの枠色が追従する。
   ========================================================================== */

/* タイポグラフィ:
 * 文字色は storefront_text_color、本文背景は WP コア background_color、
 * 見出し色は storefront_heading_color で管理。
 * 数値は DADS std スケール (例: 16N-170, 36B-140) に揃える。 */
body,
button,
input,
select,
optgroup,
textarea {
	font-family: var(--font-family-sans);
}

/* DADS 16N-170 相当 */
body {
	font-size: 1rem;
	line-height: 1.7;
	letter-spacing: 0.02em;
}

h1, h2, h3, h4, h5, h6,
.site-title,
.entry-title {
	font-family: var(--font-family-sans);
	font-weight: 700;
	margin-block: var(--m9-space-32) var(--m9-space-12);
}

h1 { font-size: calc(36 / 16 * 1rem); line-height: 1.4; letter-spacing: 0.01em; }
h2 { font-size: calc(28 / 16 * 1rem); line-height: 1.5; letter-spacing: 0.01em; }
h3 { font-size: calc(24 / 16 * 1rem); line-height: 1.5; letter-spacing: 0.02em; }
h4 { font-size: calc(20 / 16 * 1rem); line-height: 1.5; letter-spacing: 0.02em; }
h5 { font-size: calc(18 / 16 * 1rem); line-height: 1.6; letter-spacing: 0.02em; }
h6 { font-size: calc(17 / 16 * 1rem); line-height: 1.7; letter-spacing: 0.02em; }

/* コンテンツ領域の先頭に置かれる見出しは、上の見出しグループルールが付ける
 * margin-block-start (var(--m9-space-32)) を打ち消す。
 *   - .entry-title: 投稿/固定ページのタイトル
 *   - .woocommerce-tabs .panel h2:first-of-type: 商品ページのタブ内先頭見出し
 *     (親 WooCommerce CSS は font-size と margin-bottom のみ指定し margin-top を
 *     当てないため、子の見出しグループルール由来の上マージンが残ってしまう) */
.entry-title,
.woocommerce-tabs .panel h2:first-of-type {
	margin-block-start: 0;
}

/* Storefront 親テーマは `p+h2, p+h3, p+h4, p+header h2, ...` に
 * `margin-top: 2.29em` を当てており、特異度 (0,0,2)/(0,0,3) で
 * 上の h1-h6 ルール (0,0,1) を上書きしてくる。
 * 同特異度で書き直して DADS spacing に揃える (子テーマは後ロードで勝つ)。 */
:is(p, ul, ol, dl, table, blockquote, form, figure, pre) + :is(h1, h2, h3, h4, h5, h6),
:is(p, ul, ol, dl, table, blockquote, form, figure, pre) + header :is(h1, h2, h3, h4, h5, h6) {
	margin-top: var(--m9-space-32);
}

/* 段落・リスト・引用・figure の余白 (DADS spacing スケール)。
 * 親 Storefront は p / ul / ol / pre / table / form / dd / address / blockquote に
 * (0,0,1) 単一型セレクタで margin / padding を当てている。
 * 同特異度で上書きし、子テーマが後ロードであることで後勝ちさせる
 * (:where() を使うと特異度 0 で負けるため使わない)。 */
p, ul, ol, dl, dd, blockquote, figure, pre, table, form, address {
	margin-block: 0 var(--m9-space-16);
}

ul, ol {
	margin-inline: 0;                              /* 親の margin-left: 3em をリセット */
	padding-inline-start: var(--m9-space-32);
}

li > ul, li > ol {
	margin-block: 0;
}

blockquote {
	padding-inline-start: var(--m9-space-16);
	padding-inline-end: 0;
	border-inline-start: var(--m9-space-4) solid var(--m9-border-default);
	font-style: normal;                             /* 親の font-style: italic をリセット */
}

/* 親の `h2+h3, .beta+h3 { border-top + padding-top }` (見出し連続時に区切り線を入れる挙動) は
 * DADS 仕様にないのでリセット。同特異度 (0,0,2) で後勝ち。 */
h2 + h3, .beta + h3 {
	border-top: 0;
	padding-top: 0;
}

/* リンク (DADS link-text 仕様):
 * 色は Customizer 委譲の例外として DADS 標準色 (青/マゼンタ/オレンジ) で固定。
 *
 * 特異度設計:
 *   - 親の Customizer 動的 CSS は `.cat-links a, .tags-links a` 等 (0,1,1) で
 *     色を当ててくる。素の `a:link` (0,1,1) ではタイ→後勝ち頼みになるが、
 *     一部の inline `<style>` (プラグイン等) が後ろに入る可能性を踏まえ
 *     `body a:link` (0,1,2) で確実に上回らせる。
 *   - 親の widget-area / post-meta / nav 系は (0,2,1) 以上で当てているため
 *     (0,1,2) では負け、Customizer のキーカラー (緑) のまま運用される。
 *     これは UI ナビと本文リンクを意図的に色分けする設計判断 (CLAUDE.md 参照)。 */
body a:link    { color: var(--m9-link-default); }
body a:visited { color: var(--m9-link-visited); }

body a:any-link {
	text-decoration: underline;
	text-decoration-thickness: var(--m9-space-1);
	text-underline-offset: 0.1875rem;
}

@media (hover: hover) {
	body a:hover {
		color: var(--m9-link-hover);
		text-decoration-thickness: 0.1875rem;
	}
}

body a:active {
	color: var(--m9-link-active);
}

/* DADS 標準のフォーカスリング (黒 outline + 黄色 box-shadow) */
:focus-visible {
	outline: var(--m9-space-4) solid var(--color-neutral-black);
	outline-offset: var(--m9-space-2);
	border-radius: var(--m9-space-4);
	box-shadow: 0 0 0 var(--m9-space-2) var(--m9-focus-ring);
}

/* --- Buttons (Storefront / WooCommerce) -----------------------------------
 * 非 alt ボタン: 背景 storefront_button_background_color /
 *               文字 storefront_button_text_color
 * Alt ボタン:    背景 storefront_button_alt_background_color /
 *               文字 storefront_button_alt_text_color
 * ボタン枠は --m9-accent を参照し、Customizer accent に追従する。
 * ホバー階調は Customizer に対応設定がないため DADS グリーンで固定。 */

input[type="submit"],
.button,
.added_to_cart,
.widget a.button,
.woocommerce a.button,
.woocommerce button.button,
.woocommerce input.button,
.woocommerce #respond input#submit {
	font-family: var(--font-family-sans);
	font-weight: 700;
	border-radius: var(--m9-space-8);
	border: var(--m9-space-1) solid var(--m9-accent);
	padding: var(--m9-space-12) var(--m9-space-20);
	line-height: 1.5;
	transition:
		background-color 0.15s ease,
		color 0.15s ease,
		box-shadow 0.15s ease;
}

input[type="submit"]:hover,
.button:hover,
.added_to_cart:hover,
.widget a.button:hover,
.woocommerce a.button:hover,
.woocommerce button.button:hover,
.woocommerce input.button:hover,
.woocommerce #respond input#submit:hover {
	background-color: var(--color-primitive-green-50);
	color: var(--m9-accent-active);
	border-color: var(--m9-accent-hover);
}

/* プライマリ (solid-fill): 色は Customizer 出力に任せ、枠だけ消す */
.button.alt,
.added_to_cart.alt,
.widget a.button.alt,
.woocommerce a.button.alt,
.woocommerce button.button.alt,
.woocommerce input.button.alt {
	border-color: transparent;
}

/* --- Forms ----------------------------------------------------------------
 * フォーム入力は Customizer に対応設定がないため DADS トークンで固定。 */

input[type="text"],
input[type="email"],
input[type="url"],
input[type="password"],
input[type="search"],
input[type="number"],
input[type="tel"],
input[type="date"],
textarea,
select {
	border: var(--m9-space-1) solid var(--m9-border-default);
	border-radius: 0.375rem;
	background-color: var(--m9-bg-base);
	color: var(--m9-text-default);
	padding: var(--m9-space-8) var(--m9-space-12);
}

input:focus,
textarea:focus,
select:focus {
	border-color: var(--m9-accent);
}

/* --- Site header / footer -------------------------------------------------
 * 背景・文字・リンク色は Customizer で管理 (storefront_header_*_color /
 * storefront_footer_*_color)。区切り線のみ Customizer 非対応のため
 * DADS トークンで固定。 */

.site-header {
	border-bottom: var(--m9-space-1) solid var(--m9-border-default);
}

.site-footer {
	border-top: var(--m9-space-1) solid var(--m9-border-default);
}

/* --- WooCommerce notice / message ----------------------------------------
 * notice の accent border は Customizer 非対応のため DADS グリーンで固定。 */

.woocommerce-message,
.woocommerce-info {
	border-top-color: var(--m9-accent);
}

.woocommerce-message::before,
.woocommerce-info::before {
	color: var(--m9-accent);
}

.woocommerce-error {
	border-top-color: var(--color-semantic-error-1);
}

/* --- Blocks ---------------------------------------------------------------
 * overflow: clip は scroll container を作らないため hidden より副作用が少ない */
.wp-block-group[style*="-radius"] {
	overflow: clip;
}