/**
 * みっけ — ブロックエディターで組むページ用のスタイル
 *
 * このファイルは「表示側」と「編集画面（ブロックエディター）」の両方に読みこまれます。
 *   表示側   : functions.php の mikke_assets() で style.css のあとに読みこみ
 *   編集画面 : inc/blocks.php の add_editor_style()
 *
 * ねらい：ブロックで自由に組んでも、テーマの雰囲気（クリーム色の紙・こげ茶の枠・
 *         かたい影・まるいボタン）がそのまま出るようにすること。
 *         編集画面でも、ほぼ表示どおりの見た目で編集できます。
 *
 * ※ ここのクラス名はすべて mk-blk-* / mk-plan* に統一しています。
 *   style.css 側のクラス（.mk-card や .mk-btn など）とはぶつかりません。
 *
 * @package mikke
 */

/* ---------------------------------------------------------
 * 0. デザイントークン
 *
 * style.css と同じ値をここにも書いています。
 * 編集画面には style.css を読みこませていない（body{display:flex} などが
 * エディターの土台を壊すため）ので、変数だけはこちらにも必要です。
 * 色を変えるときは style.css と theme.json も合わせて直してください。
 * ------------------------------------------------------- */
:root {
	--bg: #f7f1d8;
	--paper: #fffdf4;
	--paper-2: #fdf8e4;
	--paper-3: #fff8e9;
	--ink: #4a2a17;
	--ink-2: #6b4a33;
	--ink-3: #8a6a52;
	--teal: #26c6b7;
	--teal-dark: #149185;
	--teal-deep: #2f6e64;
	--teal-pale: #eafaf5;
	--orange: #ea6d43;
	--rust: #c0512c;
	--yellow: #f2c94c;

	--sh-hard: 4px 5px 0 rgba(45, 24, 10, .4);
	--sh-hard-in: 1px 1px 0 rgba(45, 24, 10, .4);
	--sh-brown: 3px 4px 0 rgba(74, 42, 23, .18);
	--sh-brown-in: 1px 1px 0 rgba(74, 42, 23, .18);
	--sh-soft: 4px 5px 0 rgba(74, 42, 23, .12);

	--font-body: 'Zen Maru Gothic', 'Hiragino Maru Gothic ProN', 'Yu Gothic', sans-serif;
	--font-display: 'Fredoka', 'Zen Maru Gothic', sans-serif;
}

/* ---------------------------------------------------------
 * 1. 幅ぞろえ（alignwide / alignfull）
 *
 * ブロックの「幅広」「全幅」を、クラシックテーマでも効くようにします。
 * 基準の幅は theme.json の layout（本文760px・幅広1080px）と合わせています。
 * ------------------------------------------------------- */
.mk-blocks > * { max-width: 760px; margin-inline: auto; }
.mk-blocks > .alignwide { max-width: 1080px; }
.mk-blocks > .alignfull { max-width: none; width: auto; margin-inline: calc(50% - 50vw); padding-inline: 24px; }
.mk-blocks > .alignleft  { float: left;  margin: .3em 1.4em 1em 0; }
.mk-blocks > .alignright { float: right; margin: .3em 0 1em 1.4em; }
.mk-blocks::after { content: ""; display: block; clear: both; }

.mk-blocks > * + * { margin-top: 1.4em; }
.mk-blocks .wp-block-image img { border-radius: 14px; }
.mk-blocks .wp-block-image.is-style-rounded img { border-radius: 50%; }

/* ---------------------------------------------------------
 * 2. 見出しのかたまり（パターン「セクションの見出し」）
 * ------------------------------------------------------- */
.mk-blk-head { text-align: center; }
.mk-blk-eyebrow {
	font-family: var(--font-display);
	font-weight: 700;
	letter-spacing: .26em;
	font-size: 14px;
	line-height: 1.4;
	color: var(--orange);
	margin: 0;
}
.mk-blk-title {
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1.4;
	margin: 6px 0 0;
}
.mk-blk-rule,
hr.wp-block-separator.mk-blk-rule {
	width: 74px;
	height: 0;
	border: 0;
	border-bottom: 4px dotted var(--orange);
	margin: 14px auto 0;
	background: none;
	opacity: 1;
}

/* 大きめのリード文 */
.mk-blk-lede {
	font-size: 17px;
	font-weight: 700;
	line-height: 1.95;
	text-align: center;
}

/* ---------------------------------------------------------
 * 3. カード・メモ
 * ------------------------------------------------------- */
.mk-blk-card {
	background: var(--paper);
	border: 3px solid var(--ink);
	border-radius: 18px;
	padding: 24px 26px;
	box-shadow: var(--sh-soft);
}
.mk-blk-card--teal { background: var(--teal-pale); }
.mk-blk-card--cream { background: var(--paper-2); }

/* うすい黄色のメモ（補足・注意書き用） */
.mk-blk-note {
	background: var(--paper-3);
	border: 2px dashed rgba(74, 42, 23, .35);
	border-radius: 16px;
	padding: 18px 22px;
	font-size: 14.5px;
	line-height: 1.95;
}

/* 小さなラベル（「企業協賛」「個人協賛」など） */
.mk-blk-pill {
	display: inline-block;
	background: var(--yellow);
	color: var(--ink);
	border: 2px solid var(--ink);
	border-radius: 999px;
	padding: 3px 14px;
	font-size: 13px;
	font-weight: 900;
	line-height: 1.7;
	box-shadow: var(--sh-brown);
}
.mk-blk-pill--teal { background: var(--teal); color: var(--paper); }
.mk-blk-pill--orange { background: var(--orange); color: var(--paper); }

/* ---------------------------------------------------------
 * 4. 協賛プランのカード
 *
 * 中身は「画像 + 説明」のカラムブロックです。
 * 画像を差しかえる・文章を書きかえる・行を足すのは、ぜんぶ編集画面からできます。
 * ------------------------------------------------------- */
.mk-plan {
	background: var(--paper);
	border: 3px solid var(--ink);
	border-radius: 22px;
	padding: 26px;
	box-shadow: var(--sh-soft);
}
.mk-plan + .mk-plan { margin-top: 22px; }

/* プランの色ちがい（枠の上に色帯を出す） */
.mk-plan { position: relative; overflow: hidden; }
.mk-plan::before {
	content: "";
	position: absolute;
	inset: 0 0 auto 0;
	height: 10px;
	background: var(--teal);
}
.mk-plan--gold::before   { background: var(--yellow); }
.mk-plan--silver::before { background: var(--teal); }
.mk-plan--bronze::before { background: var(--orange); }
.mk-plan--personal::before { background: repeating-linear-gradient(90deg, var(--orange) 0 14px, var(--yellow) 14px 28px); }

.mk-plan .wp-block-columns { align-items: flex-start; }
.mk-plan__photo img {
	border: 3px solid var(--ink);
	border-radius: 16px;
	box-shadow: var(--sh-brown);
	background: var(--paper-2);
	width: 100%;
	height: auto;
}
.mk-plan__name {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.4;
	margin: 0;
}
.mk-plan__price {
	font-family: var(--font-display);
	font-size: 20px;
	font-weight: 700;
	color: var(--rust);
	line-height: 1.5;
	margin: 4px 0 0;
}
.mk-plan__price small { font-family: var(--font-body); font-size: 13px; font-weight: 700; color: var(--ink-3); }
.mk-plan__text { font-size: 14.5px; line-height: 1.95; margin: 10px 0 0; }

/* できることの一覧（チェックつき） */
.mk-plan__perks {
	list-style: none;
	margin: 14px 0 0;
	padding: 0;
	font-size: 14.5px;
	line-height: 1.8;
}
.mk-plan__perks li {
	position: relative;
	padding-left: 27px;
	margin: 0;
}
.mk-plan__perks li + li { margin-top: 7px; }
.mk-plan__perks li::before {
	content: "";
	position: absolute;
	left: 0;
	top: .45em;
	width: 17px;
	height: 9px;
	border-left: 3.5px solid var(--teal-dark);
	border-bottom: 3.5px solid var(--teal-dark);
	transform: rotate(-45deg);
	border-radius: 1px;
}
/* できないことは、うすいバツ印にする（クラスを付けた行だけ） */
.mk-plan__perks li.is-off { color: var(--ink-3); }
.mk-plan__perks li.is-off::before {
	border: 0;
	transform: none;
	top: .5em;
	width: 15px;
	height: 15px;
	background:
		linear-gradient(45deg, rgba(0,0,0,0) 44%, var(--ink-3) 44%, var(--ink-3) 56%, rgba(0,0,0,0) 56%),
		linear-gradient(-45deg, rgba(0,0,0,0) 44%, var(--ink-3) 44%, var(--ink-3) 56%, rgba(0,0,0,0) 56%);
}

/* ---------------------------------------------------------
 * 5. ボタン（ブロックの「ボタン」に付けるスタイル）
 *
 * 編集画面の「ボタン」ブロック → スタイル から選べます。
 * ------------------------------------------------------- */
.wp-block-button.is-style-mikke-primary > .wp-block-button__link,
.wp-block-button.is-style-mikke-ghost > .wp-block-button__link,
.wp-block-button.is-style-mikke-yellow > .wp-block-button__link {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-family: var(--font-body);
	font-weight: 900;
	font-size: 16.5px;
	line-height: 1.4;
	padding: 14px 28px;
	border: 3px solid var(--ink);
	border-radius: 999px;
	box-shadow: var(--sh-hard);
	transition: transform .15s, box-shadow .15s;
	text-decoration: none;
}
.wp-block-button.is-style-mikke-primary > .wp-block-button__link:hover,
.wp-block-button.is-style-mikke-ghost > .wp-block-button__link:hover,
.wp-block-button.is-style-mikke-yellow > .wp-block-button__link:hover,
.wp-block-button.is-style-mikke-primary > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-mikke-ghost > .wp-block-button__link:focus-visible,
.wp-block-button.is-style-mikke-yellow > .wp-block-button__link:focus-visible {
	transform: translate(2px, 3px);
	box-shadow: var(--sh-hard-in);
}
.wp-block-button.is-style-mikke-primary > .wp-block-button__link { background: var(--orange); color: var(--paper-3); }
.wp-block-button.is-style-mikke-ghost   > .wp-block-button__link { background: var(--paper-2); color: var(--ink); }
.wp-block-button.is-style-mikke-yellow  > .wp-block-button__link { background: var(--yellow); color: var(--ink); }

/* ---------------------------------------------------------
 * 6. 手順（1・2・3 のカード）
 * ------------------------------------------------------- */
.mk-blk-step {
	position: relative;
	background: var(--paper);
	border: 3px solid var(--ink);
	border-radius: 18px;
	padding: 30px 20px 22px;
	box-shadow: var(--sh-soft);
	text-align: center;
	height: 100%;
}
.mk-blk-step__num {
	position: absolute;
	top: -18px;
	left: 50%;
	transform: translateX(-50%);
	width: 38px;
	height: 38px;
	border-radius: 50%;
	background: var(--teal);
	color: var(--paper);
	border: 3px solid var(--ink);
	font-family: var(--font-display);
	font-weight: 700;
	font-size: 18px;
	line-height: 32px;
	text-align: center;
}
.mk-blk-step__title { font-size: 16px; font-weight: 900; margin: 0; }
.mk-blk-step__text { font-size: 14px; line-height: 1.9; color: var(--ink-2); margin: 8px 0 0; }

/* ---------------------------------------------------------
 * 7. Q&A（詳細ブロック）
 * ------------------------------------------------------- */
.mk-blk-qa {
	background: var(--paper);
	border: 3px solid var(--ink);
	border-radius: 16px;
	padding: 16px 20px;
	box-shadow: var(--sh-brown);
}
.mk-blk-qa + .mk-blk-qa { margin-top: 12px; }
.mk-blk-qa summary { font-weight: 900; cursor: pointer; font-size: 15px; }
.mk-blk-qa > *:not(summary) { font-size: 14.5px; line-height: 1.95; margin-top: 10px; }

/* ---------------------------------------------------------
 * 8. せまい画面
 * ------------------------------------------------------- */
@media (max-width: 781px) {
	.mk-plan { padding: 20px; border-radius: 18px; }
	.mk-plan__name { font-size: 20px; }
	.mk-blk-lede { font-size: 15.5px; }
	.mk-blocks > .alignfull { padding-inline: 16px; }
}

/* ---------------------------------------------------------
 * 9. 編集画面だけの調整
 *
 * エディターは背景が白いので、テーマの背景色をしいておきます。
 * （表示側では body の背景が効くので、この指定は使われません）
 * ------------------------------------------------------- */
.editor-styles-wrapper {
	background: var(--bg);
	color: var(--ink);
	font-family: var(--font-body);
	font-weight: 500;
}
.editor-styles-wrapper .mk-plan__perks li::before { top: .45em; }

/* ---------------------------------------------------------
 * 10. 下層ページの本文スタイルとの調整
 *
 * .mk-page__body（style.css）は読みものむけに h2 へ点線の下じきを引きます。
 * パターンで作った見出し（.mk-blk-title など）にはそれが要らないので、
 * ここで打ち消しています（ふつうの見出しには、これまでどおり点線が出ます）。
 * ------------------------------------------------------- */
.mk-blocks .mk-blk-title {
	font-size: clamp(24px, 3.2vw, 32px);
	font-weight: 900;
	letter-spacing: .05em;
	line-height: 1.4;
	margin: 6px 0 0;
	padding-bottom: 0;
	border-bottom: 0;
}
.mk-blocks .mk-plan__name {
	font-size: 22px;
	font-weight: 900;
	line-height: 1.4;
	margin: 0;
}
.mk-blocks .mk-blk-note h3 {
	font-size: 16.5px;
	margin: 0 0 6px;
	padding-bottom: 0;
	border-bottom: 0;
}
.mk-blocks .mk-plan__perks { padding-left: 0; margin: 14px 0 0; }
.mk-blocks .mk-blk-step__title { margin: 0; }

/* ---------------------------------------------------------
 * 11. ブロックどうしの間隔
 *
 * WordPress はグループの中の要素に「ブロック間の余白」を自動で入れます。
 * 見出しのかたまりや手順カードは、こちらで決めた間隔にしたいので上書きします。
 * ------------------------------------------------------- */
.mk-blk-head > *      { margin-block-start: 0; }
.mk-blk-head > .mk-blk-title { margin-block-start: 4px; }
.mk-blk-head > .mk-blk-rule  { margin-block-start: 14px; }

.mk-blk-step > *                  { margin-block-start: 0; }
.mk-blk-step > .mk-blk-step__text { margin-block-start: 8px; }

.mk-plan .wp-block-column > *                 { margin-block-start: 0; }
.mk-plan .wp-block-column > .mk-plan__price   { margin-block-start: 4px; }
.mk-plan .wp-block-column > .mk-plan__text    { margin-block-start: 10px; }
.mk-plan .wp-block-column > .mk-plan__perks   { margin-block-start: 14px; }
.mk-plan .wp-block-column > .wp-block-buttons { margin-block-start: 20px; }
.mk-plan .wp-block-column > .mk-plan__name    { margin-block-start: 8px; }