/*
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 の m9notes_default_colors() で投入。
     当 CSS では該当プロパティを書かず、Storefront の動的 CSS
     (storefront_customizer_css) に委ねる。
   - !important は使わない: Storefront の動的 CSS を必ず後勝ちにする。
   - bare button や input[type="button"|"reset"] はあえて含めない:
     管理バー (#wpadminbar button) など WP 管理 UI に副作用が及ぶため。
   - --m9-accent は functions.php の m9notes_enqueue_assets() で
     Customizer accent から動的に上書きされ、非 alt ボタンの枠色が追従する。
   ========================================================================== */

/* --- Global: font-family -------------------------------------------------- */
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;
}

/* 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 で管理。区切り線のみ 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;
}