/*
 * Snow Monkey Forms をテーマのデザインに合わせる
 *
 * テーマ（wp-content/themes/prance/）には一切触らない。
 * 色・角丸・フォントはすべてテーマの :root トークンを参照するため、
 * Danny さんがトークンを変えれば自動的に追従する。
 *
 * @package Prance
 */

.snow-monkey-form {
	--pf-field-border: var(--color-muted);   /* 入力欄の枠線。WCAG 1.4.11（3:1）を満たす */
	--pf-gap: 18px;

	background: var(--color-surface);
	border: 1px solid var(--color-line);
	border-radius: var(--radius-lg);
	padding: 36px;
	font-family: var(--font-base);
	color: var(--color-ink);
}

/*
 * 既にカード（.contact-form）の中に置かれている場合は、
 * カードの装飾を二重にしない。
 * テンプレート側の構造:
 *   wp:group.contact-form > wp:heading + [フォーム]
 */
.contact-form .snow-monkey-form,
.privacy-contact .snow-monkey-form {
	background: none;
	border: 0;
	border-radius: 0;
	padding: 0;
}

/* --- 項目：ラベルを上、コントロールを下に縦積み ------------------ */

.snow-monkey-form .smf-item {
	display: flex;
	flex-direction: column;
	gap: 8px;
	border: 0;
	padding: 0;
}

.snow-monkey-form .smf-item + .smf-item {
	margin-top: var(--pf-gap);
}

.snow-monkey-form .smf-item__col {
	width: 100%;
	padding: 0;
	display: block;
}

.snow-monkey-form .smf-item__label__text {
	font-size: 13px;
	font-weight: var(--fw-medium);
	color: var(--color-ink);
}

.snow-monkey-form .smf-item__description,
.snow-monkey-form .smf-control-description {
	font-size: 12px;
	color: var(--color-body);   /* muted は小さい文字だと 4.5:1 に届かないため body を使う */
	margin-top: 4px;
}

/* --- 入力欄 ------------------------------------------------------ */

.snow-monkey-form .smf-text-control__control,
.snow-monkey-form .smf-textarea-control__control,
.snow-monkey-form .smf-select-control__control {
	width: 100%;
	box-sizing: border-box;
	font-family: inherit;
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink);
	background: var(--color-surface-alt);
	border: 1px solid var(--pf-field-border);
	border-radius: var(--radius-sm);
	padding: 11px 14px;
	transition: background .15s ease, border-color .15s ease;
}

.snow-monkey-form .smf-textarea-control__control {
	min-height: 140px;
	resize: vertical;
}

.snow-monkey-form .smf-text-control__control::placeholder,
.snow-monkey-form .smf-textarea-control__control::placeholder {
	color: var(--color-muted);
}

.snow-monkey-form .smf-text-control__control:focus,
.snow-monkey-form .smf-textarea-control__control:focus,
.snow-monkey-form .smf-select-control__control:focus {
	outline: 2px solid var(--color-primary);
	outline-offset: 1px;
	background: var(--color-surface);
	border-color: var(--color-primary);
}

.snow-monkey-form .smf-select-control {
	position: relative;
	display: block;
}

.snow-monkey-form .smf-select-control__control {
	appearance: none;
	padding-right: 40px;
}

.snow-monkey-form .smf-select-control__toggle {
	color: var(--color-body);
	pointer-events: none;
}

/* --- チェックボックス -------------------------------------------- */

.snow-monkey-form .smf-checkboxes-control__control {
	display: flex;
	flex-direction: column;
	gap: 10px;
}

.snow-monkey-form .smf-checkbox-control {
	display: inline-flex;
	align-items: flex-start;
	gap: 8px;
}

.snow-monkey-form .smf-checkbox-control__control {
	width: 18px;
	height: 18px;
	margin: 1px 0 0;
	accent-color: var(--color-primary);
	flex: none;
}

.snow-monkey-form .smf-checkbox-control__label {
	font-size: 14px;
	line-height: 1.6;
	color: var(--color-ink);
	cursor: pointer;
}

.snow-monkey-form .smf-checkbox-control__label a {
	color: var(--color-primary);
	text-underline-offset: 2px;
}

/* --- ボタン ------------------------------------------------------ */

.snow-monkey-form .smf-action {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}

.snow-monkey-form .smf-button-control__control {
	appearance: none;
	border: none;
	border-radius: 100px;
	background: var(--gradient-cta);
	color: #fff;
	font-family: inherit;
	font-size: 15px;
	font-weight: var(--fw-medium);
	padding: 14px 40px;
	cursor: pointer;
	transition: filter .15s ease;
}

.snow-monkey-form .smf-button-control__control:hover {
	filter: brightness(0.92);
}

.snow-monkey-form .smf-button-control__control:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/*
 * Disabled buttons in the action area.
 *
 * Turnstile disables every [type="submit"] inside .smf-action until it holds a
 * token, and App/Control/Button.php renders EVERY button as type="submit", so
 * this covers the back button on the confirm screen as well as the main call
 * to action. They should look alike while they are inert.
 *
 * Losing the gradient is what says "disabled" — not fading it. Measured
 * against the alternatives (2026-09-19), label against its own background:
 *
 *   opacity .5          2.44:1   the label fades along with the background
 *   opacity .7          3.46:1   reads as a washed-out CTA
 *   grayscale(1)       10.70:1   magenta and purple are dark, so the grey lands
 *                                near #3E3E3E and looks like a second ACTIVE button
 *   this rule           4.53:1   meets AA, though disabled controls sit outside
 *                                WCAG 1.4.3
 *
 * Safari overrides a disabled control's colour through -webkit-text-fill-color,
 * so `color` on its own does not hold.
 *
 * The outline is an inset shadow, NOT a border: #EFE9F1 sits at 1.19:1 against
 * the white page and loses its edge without one, but these buttons have no width
 * of their own, so a border would make them 2px wider and taller and move the
 * row. An inset shadow follows the 100px radius and changes no geometry.
 *
 * SPECIFICITY: the back button's own rule above is (0,0,5,0) — :first-child
 * counts as a class. This selector matches it exactly, so it wins on source
 * order alone; keep it BELOW that rule. A shorter selector such as
 * `.snow-monkey-form .smf-button-control__control:disabled` is (0,0,3,0) and
 * silently loses on the back button.
 *
 * Cannot be checked with curl: .smf-action is empty in the server's HTML and
 * the buttons are injected over REST, so this needs a browser.
 */
.snow-monkey-form .smf-action .smf-button-control .smf-button-control__control:disabled {
	background: #EFE9F1;
	color: #6F6777;
	-webkit-text-fill-color: #6F6777;
	box-shadow: inset 0 0 0 1px var(--pf-field-border);
	border-color: var(--pf-field-border);
	opacity: 1;
	cursor: not-allowed;
	filter: none;
}

.snow-monkey-form .smf-action .smf-button-control .smf-button-control__control:disabled:hover {
	filter: none;
	background: #EFE9F1;
}



/* 「戻る」ボタンは控えめに */
.snow-monkey-form .smf-action .smf-button-control:first-child .smf-button-control__control {
	background: none;
	color: var(--color-body);
	border: 1px solid var(--pf-field-border);
}

.snow-monkey-form .smf-action .smf-button-control:first-child .smf-button-control__control:hover {
	background: var(--color-surface-alt);
	filter: none;
}

/* --- 進行表示（入力 → 確認 → 完了） ------------------------------ */

.smf-progress-tracker {
	display: flex;
	list-style: none;
	justify-content: center;
	gap: 8px;
	list-style: none;
	margin: 0 0 28px;
	padding: 0;
	flex-wrap: wrap;
}

.smf-progress-tracker__item {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font-size: 13px;
	color: var(--color-body);
	padding: 6px 14px;
	border-radius: 100px;
	background: var(--color-surface-alt);
}

.smf-progress-tracker__item__number {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 22px;
	height: 22px;
	border-radius: 50%;
	background: var(--color-line);
	color: var(--color-ink);
	font-size: 12px;
	font-weight: var(--fw-medium);
}

/*
 * 現在のステップ。
 * Snow Monkey Forms は全項目に aria-current を出し、値で状態を示す。
 * [aria-current] だけだと3つとも当たってしまうので、値まで見る。
 */
.smf-progress-tracker__item[aria-current="true"] {
	background: var(--color-primary-tint);
	color: var(--color-primary-dark);
	font-weight: var(--fw-medium);
}

.smf-progress-tracker__item[aria-current="true"] .smf-progress-tracker__item__number {
	background: var(--color-primary);
	color: #fff;
}

/* --- エラー表示 -------------------------------------------------- */

.smf-form [role="alert"],
.snow-monkey-form .smf-error-messages {
	color: #B3261E;                 /* 白地で 5.9:1 */
	font-size: 13px;
	margin-top: 6px;
}

.snow-monkey-form .smf-item[data-invalid] .smf-text-control__control,
.snow-monkey-form .smf-item[data-invalid] .smf-textarea-control__control,
.snow-monkey-form .smf-item[data-invalid] .smf-select-control__control {
	border-color: #B3261E;
}

/* --- 送信中 ------------------------------------------------------ */

.smf-sending {
	color: var(--color-body);
}

/* --- 狭い画面 ---------------------------------------------------- */

@media (max-width: 860px) {
	.smf-form { padding: 24px; }
	.snow-monkey-form .smf-action { flex-direction: column-reverse; }
	.snow-monkey-form .smf-button-control__control { width: 100%; }
}

@media (max-width: 640px) {
	.smf-form { padding: 20px; }
	.smf-progress-tracker__item { font-size: 12px; padding: 5px 10px; }
}


/* ------------------------------------------------------------------
 * ボタン（.smf-action は .smf-form の外にあるため、<form> を基点にする）
 * サイト共通のCTA（ピル形・マゼンタのグラデーション・白文字）に合わせる
 * ------------------------------------------------------------------ */

.snow-monkey-form .smf-action {
	display: flex;
	gap: 12px;
	justify-content: center;
	flex-wrap: wrap;
	margin-top: 28px;
}

.snow-monkey-form .smf-action button,
.snow-monkey-form .smf-action input[type="submit"],
.snow-monkey-form .smf-action input[type="button"],
.snow-monkey-form .smf-button-control__control {
	/* テーマの .wp-block-button__link と同一の指定 */
	display: inline-flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	appearance: none;
	-webkit-appearance: none;
	border: 1px solid transparent;
	border-radius: 100px;
	background: var(--gradient-cta);
	background-image: var(--gradient-cta);
	color: #fff;
	font-family: var(--font-base);
	font-size: 15px;
	font-weight: var(--fw-bold);
	line-height: 1.4;
	padding: 15px 28px;
	white-space: nowrap;
	cursor: pointer;
	text-decoration: none;
	transition: transform .15s ease, filter .15s ease, border-color .15s ease, color .15s ease;
}

/* ホバーで少し浮く。テーマの CTA と同じ動き */
.snow-monkey-form .smf-action button:hover,
.snow-monkey-form .smf-action input[type="submit"]:hover,
.snow-monkey-form .smf-action input[type="button"]:hover,
.snow-monkey-form .smf-button-control__control:hover {
	transform: translateY(-1px);
	filter: brightness(0.92);
	color: #fff;
}

/* 押した瞬間は沈める */
.snow-monkey-form .smf-action button:active,
.snow-monkey-form .smf-action input[type="submit"]:active,
.snow-monkey-form .smf-button-control__control:active {
	transform: translateY(0);
}

.snow-monkey-form .smf-action button:focus-visible,
.snow-monkey-form .smf-button-control__control:focus-visible {
	outline: 2px solid var(--color-primary);
	outline-offset: 3px;
}

/* 「戻る」は控えめに。確認画面で送信ボタンと並ぶため */
.snow-monkey-form .smf-action [data-action="back"],
.snow-monkey-form .smf-action button[name*="back"],
.snow-monkey-form .smf-action input[name*="back"] {
	background: none;
	background-image: none;
	color: var(--color-body);
	border: 1px solid var(--color-muted);
	font-weight: var(--fw-medium);
}

.snow-monkey-form .smf-action [data-action="back"]:hover,
.snow-monkey-form .smf-action button[name*="back"]:hover,
.snow-monkey-form .smf-action input[name*="back"]:hover {
	background: var(--color-surface-alt);
	border-color: var(--color-ink);
	color: var(--color-ink);
	filter: none;
	transform: translateY(-1px);
}

@media (max-width: 640px) {
	.snow-monkey-form .smf-action { flex-direction: column-reverse; }
	.snow-monkey-form .smf-action button,
	.snow-monkey-form .smf-action input[type="submit"],
	.snow-monkey-form .smf-button-control__control { width: 100%; }
}

/* --- 必須の印 -------------------------------------------------------
 * 必須の入力欄（data-validations に required を含む）を持つ項目だけ、ラベルの後ろに印を出す。
 * フォームの中身（ブロック）を書き換えずに、検証の設定と表示を一致させるため CSS でやる。
 * 必須を外せば印も自動で消える（2026-10-02）。 */
.snow-monkey-form .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
	content: "必須";
	display: inline-block;
	margin-left: 8px;
	padding: 1px 6px;
	border-radius: 4px;
	background: #972371;
	color: #fff;
	font-size: 11px;
	font-weight: var(--fw-medium);
	line-height: 1.6;
	vertical-align: 1px;
}
:lang(en) .snow-monkey-form .smf-item:has([data-validations~="required"]) .smf-item__label__text::after {
	content: "Required";
}