/*
 * jwc-blocks.css — jwc-theme ブロックスタイル本体（案1b「温かみのある家族調」）
 *
 * 前提: 色・角丸・タイポは theme.json が --wp--preset--* / --wp--custom--* として供給する。
 *       ここでは直値を書かず、必ず var(--wp--preset--*) / var(--wp--custom--*) を参照する
 *       （原本は output/design/jwc-tokens.css。theme.json がその写像）。
 * 対象: register_block_style で登録した is-style-* と、パターンで使う補助クラス。
 * ブレークポイント: 768px（jwc-tokens の --jwc-bp-mobile 準拠）。
 */

/* ================================================================== *
 * 1. ピルボタン（core/button の is-style-jwc-pill-*）
 *    高さ52px統一。塗り=主CTA / 枠線=副CTA。
 * ================================================================== */
.wp-block-button.is-style-jwc-pill-primary > .wp-block-button__link,
.wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 52px;
	border-radius: var(--wp--custom--radius--pill);
	font-family: var(--wp--preset--font-family--body);
	font-weight: var(--wp--custom--font-weight--medium);
	font-size: var(--wp--preset--font-size--body);
	line-height: 1.2;
	transition: background-color .2s ease, color .2s ease, border-color .2s ease;
}

/* 塗り（主CTA） */
.wp-block-button.is-style-jwc-pill-primary > .wp-block-button__link {
	background-color: var(--wp--preset--color--accent);
	color: var(--wp--preset--color--white);
	padding: 14px 30px;
	border: 1.5px solid transparent;
}
.wp-block-button.is-style-jwc-pill-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-jwc-pill-primary > .wp-block-button__link:focus {
	background-color: var(--wp--preset--color--accent-strong);
	color: var(--wp--preset--color--white);
}

/* 枠線（副CTA） */
.wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link {
	background-color: transparent;
	color: var(--wp--preset--color--text-nav);
	padding: 13px 26px;
	border: 1.5px solid var(--wp--preset--color--border-outline);
}
.wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link:hover,
.wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link:focus {
	/* 白フィル＋アクセント枠。peach地(#f3e3d3)上でも白が浮き、cream/白地でも枠・文字色の変化で判別可
	   （旧: peach塗り→peach背景と同化していた） */
	background-color: var(--wp--preset--color--white);
	color: var(--wp--preset--color--accent-strong);
	border-color: var(--wp--preset--color--accent);
}

/* 濃色帯（jwc-section-dark / footer 地）の中では枠線ボタンを明色化 */
.is-style-jwc-section-dark .wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link,
.has-dark-background .wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link {
	color: var(--wp--preset--color--on-dark-soft);
	border-color: var(--wp--preset--color--border-outline-dark);
}

/* ================================================================== *
 * 2. 温かカード（core/group の is-style-jwc-card-warm）
 * ================================================================== */
.wp-block-group.is-style-jwc-card-warm {
	background: var(--wp--preset--color--cream);
	border-radius: var(--wp--custom--radius--card);
	padding: 34px;
	height: 100%;
	box-shadow: var(--wp--custom--shadow--soft);
}

/* 費用ハイライト（温かグラデ枠） */
.wp-block-group.is-style-jwc-card-highlight {
	background: var(--wp--preset--gradient--warm);
	border-radius: var(--wp--custom--radius--card);
	padding: 36px 40px;
}

/* ================================================================== *
 * 3. 注意ボックス（su_box 後継 / core/group の is-style-jwc-box-note）
 *    既定=ピーチ枠（注意）。枠色バリエーションは追加クラス。
 * ================================================================== */
.wp-block-group.is-style-jwc-box-note {
	background: var(--wp--preset--color--cream);
	border: 1px solid var(--wp--preset--color--peach-bg);
	border-left: 4px solid var(--wp--preset--color--accent);
	border-radius: var(--wp--custom--radius--md);
	padding: 20px 24px;
	color: var(--wp--preset--color--text-muted);
}
.wp-block-group.is-style-jwc-box-note > :first-child { margin-top: 0; }
.wp-block-group.is-style-jwc-box-note > :last-child { margin-bottom: 0; }
/* 見出し（1行目）はアクセント強で強調 */
.wp-block-group.is-style-jwc-box-note :where(h2,h3,h4,strong):first-child {
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--heading);
}
/* バリエーション: 情報（グリーン枠） */
.wp-block-group.is-style-jwc-box-note.jwc-box-note--green {
	border-color: var(--wp--preset--color--green-bg);
	border-left-color: var(--wp--preset--color--green);
}
.wp-block-group.is-style-jwc-box-note.jwc-box-note--green :where(h2,h3,h4,strong):first-child {
	color: var(--wp--preset--color--green);
}
/* バリエーション: 警告（テラコッタ塗りタイトル寄り・強め） */
.wp-block-group.is-style-jwc-box-note.jwc-box-note--warn {
	border-color: var(--wp--preset--color--accent);
	border-left-width: 5px;
}

/* ================================================================== *
 * 4. セクション帯
 * ================================================================== */
/* 白・上角丸36px（core/group is-style-jwc-section-round） */
.wp-block-group.is-style-jwc-section-round {
	background: var(--wp--preset--color--white);
	border-radius: var(--wp--custom--radius--section) var(--wp--custom--radius--section) 0 0;
}
/* クリーム地・濃色CTA帯はパターン側で has-*-background-color を使うが、
   濃色帯の見出し/本文色は has-dark-background で担保する。 */
.has-dark-background :where(h1,h2,h3,h4) { color: var(--wp--preset--color--white); }
.has-dark-background p { color: var(--wp--preset--color--on-dark-muted); }

/* ================================================================== *
 * 5. 円形アイコンバッジ（.jwc-badge-circle） / ステップ番号（.jwc-step-num）
 *    パターン内で <span class="..."> として使う補助クラス。
 * ================================================================== */
.jwc-badge-circle {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--badge-size);
	height: var(--wp--custom--badge-size);
	border-radius: 50%;
	background: var(--wp--preset--color--peach-bg);
	color: var(--wp--preset--color--accent-strong);
	font-size: 20px;
	line-height: 1;
}
.jwc-badge-circle--green { background: var(--wp--preset--color--green-bg); color: var(--wp--preset--color--green); }

.jwc-step-num {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--step--size);
	height: var(--wp--custom--step--size);
	border-radius: 50%;
	background: var(--wp--preset--color--peach-bg);
	color: var(--wp--preset--color--accent-strong);
	font-family: var(--wp--preset--font-family--heading);
	font-weight: var(--wp--custom--font-weight--bold);
	font-size: var(--wp--preset--font-size--h3);
	margin-bottom: var(--wp--preset--spacing--20);
}
.jwc-step-num--green { background: var(--wp--preset--color--green-bg); color: var(--wp--preset--color--green); }

/* 横型ステップフロー（jwc-step-flow）: モック忠実。白帯内で flex 横並び・
   ステップ間の淡色矢印は CSS(::after)で付与（マークアップに矢印を持たせない）。 */
.jwc-step-flow {
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	gap: 0;
}
.jwc-step-flow > .jwc-step {
	flex: 1;
	text-align: center;
	position: relative;
	padding: 0 10px;
}
/* ステップ間の矢印（丸番号56pxの縦中心≒top:18px付近に揃える） */
.jwc-step-flow > .jwc-step:not(:last-child)::after {
	content: "→";
	position: absolute;
	top: 18px;
	right: 0;
	transform: translateX(50%);
	color: var(--wp--preset--color--step-arrow);
	font-size: 18px;
	line-height: 1;
}
@media (max-width: 768px) {
	/* モバイル: 縦積み＋矢印を「↓」化（丸番号は §8 で34pxに縮小） */
	.jwc-step-flow { flex-direction: column; gap: var(--wp--preset--spacing--20); }
	.jwc-step-flow > .jwc-step:not(:last-child)::after {
		content: "↓";
		position: static;
		transform: none;
		display: block;
		margin: 8px auto 0;
	}
}

/* ================================================================== *
 * 5-b. ステップ見出しのアイコン（jwc-step-head / jwc-step-icon）
 *   STEP見出しに、ピーチ地の丸(56px=トップの jwc-step-num と同寸)＋stroke系アイコン。
 *   色は currentColor で accent-strong を継承。単色・線ベース(線幅2・24グリッド)。
 *   アイコンは CSS mask + data-URI（本文にSVGを持たせない＝REIMPORT/KSES 安全）。
 *   8個は共通ヘッダ(viewBox/stroke-width/linecap)を data-URI 内で共有し、機械的に統一。
 * ================================================================== */
.jwc-step-head {
	/* 見出しとアイコンを横並び・中央揃え（縦のステップ列の可読性は維持） */
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 14px;
	flex-wrap: wrap;
}
.jwc-step-icon {
	flex: none;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: var(--wp--custom--step--size);   /* 56px */
	height: var(--wp--custom--step--size);
	border-radius: 50%;
	background: var(--wp--preset--color--peach-bg);
	color: var(--wp--preset--color--accent-strong);   /* currentColor 源 */
}
.jwc-step-icon::before {
	content: "";
	width: 26px;
	height: 26px;
	background-color: currentColor;   /* accent-strong をアイコン色に */
	-webkit-mask: var(--jwc-ic) center / contain no-repeat;
	        mask: var(--jwc-ic) center / contain no-repeat;
}
/* 8アイコン（線ベース・stroke幅2・24グリッド。mask 用に stroke=black で不透明部を供給＝色は currentColor が担う） */
.jwc-ic-envelope    { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='5' width='18' height='14' rx='2'/%3E%3Cpath d='m3 7 9 6 9-6'/%3E%3C/svg%3E"); }
.jwc-ic-document    { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M15 3H7a2 2 0 0 0-2 2v14a2 2 0 0 0 2 2h10a2 2 0 0 0 2-2V8z'/%3E%3Cpath d='M14 3v4a1 1 0 0 0 1 1h4'/%3E%3Cpath d='M9 13h6'/%3E%3Cpath d='M9 17h4'/%3E%3C/svg%3E"); }
.jwc-ic-person      { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='12' cy='8' r='4'/%3E%3Cpath d='M4 20c0-4 3.6-6 8-6s8 2 8 6'/%3E%3C/svg%3E"); }
.jwc-ic-calendar    { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='3' y='4' width='18' height='17' rx='2'/%3E%3Cpath d='M3 9h18'/%3E%3Cpath d='M8 2v4'/%3E%3Cpath d='M16 2v4'/%3E%3C/svg%3E"); }
.jwc-ic-card        { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='2' y='5' width='20' height='14' rx='2'/%3E%3Cpath d='M2 10h20'/%3E%3Cpath d='M6 15h4'/%3E%3C/svg%3E"); }
.jwc-ic-airplane    { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M22 2 11 13'/%3E%3Cpath d='M22 2 15 22l-4-9-9-4z'/%3E%3C/svg%3E"); }
.jwc-ic-stethoscope { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 3v7a5 5 0 0 0 10 0V3'/%3E%3Cpath d='M4 3H2.5'/%3E%3Cpath d='M14 3h1.5'/%3E%3Cpath d='M9 15v2a4 4 0 0 0 8 0v-1'/%3E%3Ccircle cx='18' cy='14' r='2'/%3E%3C/svg%3E"); }
.jwc-ic-house       { --jwc-ic: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m3 10 9-7 9 7'/%3E%3Cpath d='M5 9v11h14V9'/%3E%3Cpath d='M9 20v-6h6v6'/%3E%3C/svg%3E"); }
@media (max-width: 768px) {
	.jwc-step-icon { width: 44px; height: 44px; }
	.jwc-step-icon::before { width: 21px; height: 21px; }
}

/* バッジ／ピル文字（.jwc-badge-pill） */
.jwc-badge-pill {
	display: inline-block;
	background: var(--wp--preset--color--peach-bg);
	color: var(--wp--preset--color--accent-strong);
	border-radius: var(--wp--custom--radius--pill);
	padding: 7px 18px;
	font-size: var(--wp--preset--font-size--small);
	font-weight: var(--wp--custom--font-weight--bold);
}

/* ================================================================== *
 * 6. 円形サムネイル画像（core/image is-style-jwc-circle）
 * ================================================================== */
.wp-block-image.is-style-jwc-circle img {
	border-radius: 50%;
	aspect-ratio: 1 / 1;
	object-fit: cover;
}

/* ロゴチップ: 透過ロゴが地に溶けるのを防ぐカード。
 *   既定＝濃色(ink #3d332a)地 … ivfww-logo.png 等の【白インク透過PNG】用
 *   （本番ピクセル実測: ロゴ輝度255＝純白のため、白地チップでは不可視だった → 濃色地に変更）。
 *   ▼使い分け設計: ロゴのインク色で選ぶ。
 *     - 白インク（明色）ロゴ → 既定（濃色チップ）。
 *     - 濃色インクのロゴ    → 画像ブロックに追加クラス `jwc-logo-chip-light` を付与して白地チップに。 */
.wp-block-image.is-style-jwc-logo-chip img {
	background: var(--wp--preset--color--ink);
	padding: 1.5rem;
	border-radius: 16px;
	box-shadow: 0 2px 12px rgba(61, 51, 42, .07);   /* リテラル（--wp--preset--shadow-- 系は未定義のため直値）。運営調整可 */
	max-width: 240px;
	height: auto;
}
/* 濃色インクのロゴ用: 白地チップ（追加クラス jwc-logo-chip-light） */
.wp-block-image.is-style-jwc-logo-chip.jwc-logo-chip-light img {
	background: var(--wp--preset--color--white);
}

/* ================================================================== *
 * 7. 段落・リード。本文既定色は theme.json の ink-body に委ねる。
 *    muted/soft は注釈・キャプション限定（各ブロックの textColor で明示指定）。
 * ================================================================== */
.jwc-lead { font-size: var(--wp--preset--font-size--lead); }   /* 色は本文既定(ink-body)を継承 */
:where(h1,h2,h3,h4) + p { margin-top: 0; }

/* h2 セクションの呼吸: constrained/flow レイアウトの blockGap(1.2rem=19.2px)を上書きして
   上マージン 3rem を確実に適用（theme.json の elements.h2.margin は blockGap に負けるため）。
   先頭 h2（セクション冒頭）は blockGap 対象外につき据え置き。 */
h2.wp-block-heading:not(:first-child) { margin-top: 3rem !important; }

/* 共通CTAパーツ（parts/cta-section.html）内テキストの中央揃え。
   core/shortcode の電話行をピルボタン群・見出しと整列させる。 */
.jwc-cta { text-align: center; }

/* ================================================================== *
 * 8. レスポンシブ（768px以下）
 * ================================================================== */
@media (max-width: 768px) {
	.wp-block-group.is-style-jwc-card-warm { padding: 22px; border-radius: var(--wp--custom--radius--md); }
	.wp-block-group.is-style-jwc-card-highlight { padding: 24px 22px; border-radius: 20px; }
	.wp-block-group.is-style-jwc-section-round { border-radius: var(--wp--custom--radius--lg) var(--wp--custom--radius--lg) 0 0; }

	.jwc-step-num { width: var(--wp--custom--step--size-mobile); height: var(--wp--custom--step--size-mobile); font-size: var(--wp--preset--font-size--body); }
	.jwc-badge-circle { width: 40px; height: 40px; font-size: 16px; }

	/* ピルはモバイルで全幅・中央寄せ（タップしやすさ優先） */
	.wp-block-button.is-style-jwc-pill-primary,
	.wp-block-button.is-style-jwc-pill-outline { width: 100%; }
	.wp-block-button.is-style-jwc-pill-primary > .wp-block-button__link,
	.wp-block-button.is-style-jwc-pill-outline > .wp-block-button__link { width: 100%; }
}