/*
 * Noside Base Theme - block-styles.css
 *
 * 装飾の見た目。インライン文字装飾(.ns-marker-* / .ns-bg / .ns-uline)と、ブロックスタイル(.is-style-ns-*)。
 * 汎用ベーステンプレートのため「どの業種でも使う普遍的プリミティブ」だけを置く。
 * 案件固有の装飾はここに足すか、案件側CSSで上書きする(docs/03)。
 *
 * 方針(デザイン品質基準):
 *   - 色は theme.json トークン基準(案件で色を変えると追従)。
 *   - 見出し左の縦棒 / border-left 装飾 / 装飾目的の ::before罫線・文字content /
 *     見出し下の装飾下線 / 丸角バッジの多用 / 絵文字 は使わない。
 *   - !important は使わず、クラスの詳細度で勝つ。
 *
 * セレクタはブロック固有クラスに限定(.wp-block-group.is-style-ns-* / .ns-marker-* 等)。
 * 一意な装飾クラスにだけ効くので、本文へ広く漏れない(エディタ・フロント両方で同じ見た目)。
 */

/* =====================================================================
   インライン文字装飾 — ツールバーの[文字サイズ][文字色][マーカー]から入る
   登録は assets/js/editor-formats.js、色とサイズの定義は inc/text-formats.php。

   文字サイズ .ns-fz / 文字色 .ns-color は style 属性(font-size / color)だけで
   完結するため、ここに見た目のルールは置かない(置くと本文の指定と喧嘩する)。
   クラスは「エディタが自分の装飾だと判別するための目印」として付いている。
   ===================================================================== */

/* --- マーカー(蛍光ペン風・文字の下60%にソフトな色帯) ---
   ★色を増減したら inc/text-formats.php の 'markers' も同じ内容に揃えること。 */
mark.ns-marker-yellow,
mark.ns-marker-blue,
mark.ns-marker-red,
mark.ns-marker-green,
mark.ns-marker-orange,
mark.ns-marker-gray {
	background-color: transparent; /* mark 既定の黄ベタ塗りを打ち消す */
	color: inherit;
	background-repeat: no-repeat;
	padding-bottom: 0.04em;
	border-radius: 0;
}
mark.ns-marker-yellow { background-image: linear-gradient(transparent 58%, rgba(255, 221, 102, 0.72) 58%); }
mark.ns-marker-blue   { background-image: linear-gradient(transparent 58%, rgba(120, 178, 230, 0.45) 58%); }
mark.ns-marker-red    { background-image: linear-gradient(transparent 58%, rgba(240, 150, 150, 0.50) 58%); }
mark.ns-marker-green  { background-image: linear-gradient(transparent 58%, rgba(140, 205, 160, 0.50) 58%); }
mark.ns-marker-orange { background-image: linear-gradient(transparent 58%, rgba(255, 186, 120, 0.55) 58%); }
mark.ns-marker-gray   { background-image: linear-gradient(transparent 58%, rgba(190, 186, 178, 0.55) 58%); }

/* --- 背景色(ベタ塗り) — 色は style 属性の background-color ---
   mark 既定の文字色(marktext)を殺し、文字に少しだけ余白を持たせる。 */
mark.ns-bg {
	color: inherit;
	padding: 0.05em 0.2em;
	border-radius: 3px;
}

/* --- 下線(実線/点線/波線/二重線) — 線種と色は style 属性の text-decoration ---
   text-decoration の一括指定に含まれないプロパティだけをここで整える
   (含まれる値をここに書くと style 属性側の指定に負ける)。 */
.ns-uline {
	text-underline-offset: 0.18em;
	text-decoration-skip-ink: none; /* 日本語のはらい・ディセンダで線が途切れないように */
}

/* =====================================================================
   チェックリスト(core/list の「チェックリスト」スタイル)
   ✓ 印は単色マスクで描くので、色は theme.json の accent に自動追従する。
   ===================================================================== */
.wp-block-list.is-style-ns-check {
	list-style: none;
	padding-left: 0;
}
.wp-block-list.is-style-ns-check > li {
	position: relative;
	padding-left: 1.6em;
}
.wp-block-list.is-style-ns-check > li + li {
	margin-top: 0.4em;
}
.wp-block-list.is-style-ns-check > li::before {
	content: "";
	position: absolute;
	left: 0;
	top: 0.28em;
	width: 1em;
	height: 1em;
	background-color: var(--wp--preset--color--accent, #1f5fae);
	-webkit-mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
	        mask: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2024%2024'%3E%3Cpath%20d='M5%2013l4%204L19%207'%20fill='none'%20stroke='%23000'%20stroke-width='3'%20stroke-linecap='round'%20stroke-linejoin='round'/%3E%3C/svg%3E") no-repeat center / contain;
}

/* =====================================================================
   汎用ボックス(core/group のブロックスタイル) — 中身は自由
   ポイント=淡い地のパネル / 注意=暖色ウォッシュ / メモ=上下ヘアライン
   ===================================================================== */
.wp-block-group.is-style-ns-point,
.wp-block-group.is-style-ns-note,
.wp-block-group.is-style-ns-memo {
	margin-block: 1.5rem;
}

/* ポイント: 淡いアクセント地のパネル(結論・要点の囲み) */
.wp-block-group.is-style-ns-point {
	padding: 1.1em 1.25em;
	border-radius: 6px;
	border: 1px solid color-mix(in srgb, var(--wp--preset--color--accent, #1f5fae) 22%, var(--wp--preset--color--line, #e7e2da));
	background-color: color-mix(in srgb, var(--wp--preset--color--accent, #1f5fae) 6%, #ffffff);
}

/* 注意: 暖色のうっすらウォッシュ。色は案件で下の2変数を差し替え可 */
.wp-block-group.is-style-ns-note {
	--ns-note-bg: #fdf4e7;
	--ns-note-border: #ecd3b0;
	padding: 1.1em 1.25em;
	border-radius: 6px;
	border: 1px solid var(--ns-note-border);
	background-color: var(--ns-note-bg);
}

/* メモ: 枠なし・上下ヘアラインのアサイド(左右paddingゼロで本文最大幅) */
.wp-block-group.is-style-ns-memo {
	padding: 0.9em 0;
	border-top: 1px solid var(--wp--preset--color--line, #e7e2da);
	border-bottom: 1px solid var(--wp--preset--color--line, #e7e2da);
}

/* ボックスの内側、最初/最後の余白を詰める(WP版差の inner-container 有無に両対応) */
.wp-block-group.is-style-ns-point > :first-child,
.wp-block-group.is-style-ns-note > :first-child,
.wp-block-group.is-style-ns-memo > :first-child,
.wp-block-group.is-style-ns-point > .wp-block-group__inner-container > :first-child,
.wp-block-group.is-style-ns-note > .wp-block-group__inner-container > :first-child,
.wp-block-group.is-style-ns-memo > .wp-block-group__inner-container > :first-child {
	margin-top: 0;
}
.wp-block-group.is-style-ns-point > :last-child,
.wp-block-group.is-style-ns-note > :last-child,
.wp-block-group.is-style-ns-memo > :last-child,
.wp-block-group.is-style-ns-point > .wp-block-group__inner-container > :last-child,
.wp-block-group.is-style-ns-note > .wp-block-group__inner-container > :last-child,
.wp-block-group.is-style-ns-memo > .wp-block-group__inner-container > :last-child {
	margin-bottom: 0;
}