/*
Theme Name: WELCOM Inquiry Forms
Theme URI: https://www.e-welcom.com/
Author: WELCOM DESIGN
Description: Standalone Snow Monkey Forms theme shared across sites with configurable branding.
Version: 1.3.4
Requires at least: 6.0
Requires PHP: 7.4
Text Domain: welcom-inquiry-theme
*/

:root {
	--wf-red: #c92f43;
	--wf-text: #292929;
	--wf-muted: #666;
	--wf-border: #d8d8d8;
	--wf-soft: #f7f7f7;
	--wf-alert: #f9e3e5;
	--wf-content-width: 960px;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
	margin: 0;
	background: #fff;
	color: var(--wf-text);
	font-family: Lato, 'Noto Sans JP', 'NotoSans JP', 'ヒラギノ角ゴ ProN', 'Hiragino Kaku Gothic ProN', 'メイリオ', Meiryo, 'ＭＳ Ｐゴシック', 'MS PGothic', sans-serif;
	font-size: 16px;
	line-height: 1.8;
}

a { color: #1769aa; }
a:hover { color: #0d4d83; }

.wf-skip-link {
	position: absolute;
	left: -9999px;
	top: 0;
	z-index: 1000;
	padding: 10px 16px;
	background: #fff;
	color: #111;
}
.wf-skip-link:focus { left: 10px; }

.wf-header {
	min-height: 62px;
	padding: 10px 20px 9px;
	border-bottom: 4px solid var(--wf-red);
	text-align: center;
}
.wf-brand { display: inline-flex; align-items: center; justify-content: center; }
.wf-brand img { display: block; width: min(var(--wf-logo-width, 205px), 70vw); height: auto; }
.wf-brand-text { display: inline-block; color: var(--wf-text); font-size: 21px; font-weight: 800; text-decoration: none; }
.wf-brand { text-decoration: none; }

.wf-main {
	width: min(var(--wf-content-width), calc(100% - 40px));
	min-height: 65vh;
	margin: 0 auto;
	padding: 36px 0 64px;
}

.wf-page-title {
	width: fit-content;
	max-width: 100%;
	margin: 22px auto 38px;
	padding: 0 0 10px;
	border-bottom: 1px solid #333;
	font-size: clamp(26px, 3.2vw, 32px);
	font-weight: 600;
	line-height: 1.45;
	text-align: center;
}

.wf-content { width: 100%; }
.wf-content > :first-child { margin-top: 0; }
.wf-content p { margin: 0 0 18px; }

/* Utility class for compact paragraph blocks in Snow Monkey Forms. */
.wp-block-paragraph.wf-tight-paragraph,
p.wf-tight-paragraph {
	margin-top: 0 !important;
	margin-bottom: 4px !important;
	line-height: 1.5 !important;
}

.snow-monkey-form {
	width: 100%;
	max-width: 100%;
	margin: 0 auto;
}

.smf-form { width: 100%; }
.smf-form h1,
.smf-form h2,
.smf-form h3,
.smf-form h4,
.smf-form h5,
.smf-form h6,
.smf-form .wp-block-heading {
	margin-top: 36px !important;
	margin-bottom: 14px !important;
}
.smf-form h2,
.smf-form h2.wp-block-heading {
	margin-top: 72px !important;
}
.smf-form > .wp-block-paragraph:first-of-type {
	margin: 0 0 24px;
	text-align: left !important;
}
/* Sales and solicitation policy: strong, red-tinted notice near the submit actions. */
.wf-sales-notice {
	width: 80%;
	max-width: 760px;
	margin: 72px auto 24px;
	padding: 18px 22px;
	border: 1px solid #e7aeb5;
	border-radius: 4px;
	background: #fff0f1;
	color: #57151e;
	text-align: center;
}
.wf-sales-notice > p { margin: 0; }
.wf-sales-notice > p:first-child {
	margin-bottom: 0;
	font-size: 18px;
	font-weight: 800;
}
.wf-sales-notice > .wf-blacklist-policy {
	font-size: 15px;
	font-weight: 400;
}

/* Keep the confirmation instruction visually distinct from the sales policy. */
.wf-confirm-banner {
	width: 80%;
	max-width: 760px;
	margin: 72px auto 24px;
	padding: 16px 20px;
	border: 1px solid #c8d5e3;
	border-radius: 4px;
	background: #f2f7fb;
	color: #173b58;
	text-align: center;
	scroll-margin-top: 16px;
}
.wf-confirm-banner__title {
	display: block;
	margin-bottom: 3px;
	font-size: 20px;
	font-weight: 800;
	line-height: 1.5;
}
.wf-confirm-banner__text {
	display: block;
	font-size: 15px;
	font-weight: 600;
	line-height: 1.7;
}

/* Highlight the confirmation notice without moving or fading its text.
   Hold the full 7px halo until 1.0s, then shrink its spread and fade its
   opacity together over the next 0.5s (total 1.5s). The smooth scroll is
   handled separately in form-layout.js. */
.wf-confirm-banner--arriving {
	animation: wf-confirm-banner-arrive 1.5s linear both;
}
@keyframes wf-confirm-banner-arrive {
	0% {
		box-shadow: 0 0 0 0 rgba(35, 108, 175, 0);
		animation-timing-function: ease-out;
	}
	13.3333% { /* 0.2s of 1.5s */
		box-shadow: 0 0 0 7px rgba(35, 108, 175, .16);
	}
	66.6667% { /* 1.0s of 1.5s */
		box-shadow: 0 0 0 7px rgba(35, 108, 175, .16);
		animation-timing-function: ease-in-out;
	}
	100% {
		box-shadow: 0 0 0 0 rgba(35, 108, 175, 0);
	}
}
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	.wf-confirm-banner--arriving { animation: none; }
}

/* SMF hides the form while data-screen="loading"; show an unmistakable,
   accessible processing notice outside the form instead of a tiny spinner
   positioned over the button. Never modify SMF's submit behavior. */
.wf-processing-enhanced .snow-monkey-form .smf-sending { display: none !important; }
.wf-processing-overlay[hidden] { display: none !important; }
.wf-processing-overlay {
	position: fixed;
	inset: 0;
	z-index: 99990;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: 24px;
	background: rgba(255, 255, 255, .76);
	animation: wf-processing-appear .18s ease-out both;
}
.wf-processing-card {
	width: min(100%, 390px);
	padding: 28px 25px;
	border: 1px solid #d7d7d7;
	border-top: 4px solid var(--wf-red);
	border-radius: 10px;
	background: #fff;
	box-shadow: 0 10px 34px rgba(0, 0, 0, .15);
	text-align: center;
}
.wf-processing-spinner {
	display: block;
	width: 34px;
	height: 34px;
	margin: 0 auto 16px;
	border: 4px solid #f0ccd0;
	border-top-color: var(--wf-red);
	border-radius: 50%;
	animation: wf-processing-spin .8s linear infinite;
}
.wf-processing-title {
	margin: 0 0 8px;
	font-size: 19px;
	font-weight: 800;
	line-height: 1.5;
	color: var(--wf-text);
}
.wf-processing-detail {
	margin: 0;
	font-size: 14px;
	line-height: 1.7;
	color: var(--wf-muted);
}
@keyframes wf-processing-spin { to { transform: rotate(360deg); } }
@keyframes wf-processing-appear { from { opacity: 0; } to { opacity: 1; } }
@media (prefers-reduced-motion: reduce) {
	.wf-processing-overlay,
	.wf-processing-spinner { animation: none; }
}

.wf-complete-return-wrap {
	margin: 28px 0 8px;
	text-align: center;
}
.wf-complete-return {
	display: inline-flex;
	min-height: 50px;
	align-items: center;
	justify-content: center;
	padding: 11px 22px;
	border: 2px solid var(--wf-red);
	border-radius: 999px;
	background: var(--wf-red);
	color: #fff !important;
	font-weight: 600;
	line-height: 1.4;
	text-decoration: none;
	transition: background-color .15s ease, box-shadow .15s ease;
}
.wf-complete-return::before {
	content: "←";
	margin-right: 8px;
	font-size: 20px;
	line-height: 1;
}
.wf-complete-return:hover {
	border-color: #a92032;
	background: #a92032;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.wf-complete-return:focus-visible {
	outline: 3px solid rgba(201, 47, 67, .28);
	outline-offset: 3px;
}

/* On confirmation, retain content order so the instruction can sit immediately
   before the first section heading. Keep the shared policy above the actions. */
form.snow-monkey-form[data-screen="confirm"] .smf-form {
	display: flex;
	flex-direction: column;
}
form.snow-monkey-form[data-screen="confirm"] .smf-form > .wf-sales-notice { order: 1; }
form.snow-monkey-form[data-screen="confirm"] .smf-form > .smf-action { order: 2; }
form.snow-monkey-form[data-screen="confirm"] .smf-form > .smf-system-error-content-ready { order: 3; }

.smf-item {
	display: grid !important;
	grid-template-columns: minmax(205px, 27%) minmax(0, 1fr);
	gap: 22px;
	align-items: start;
	margin: 0 !important;
	padding: 16px 12px !important;
	border-bottom: 1px solid var(--wf-border);
}
.smf-item__col { width: auto !important; min-width: 0; }
.smf-item__col--label { padding-top: 8px; }
.smf-item__label {
	font-size: 16px;
	font-weight: 600;
	line-height: 1.6;
}
.wf-required-mark {
	margin-left: .15em;
	color: var(--wf-red);
	font-weight: 700;
	white-space: nowrap;
}
.smf-item__controls,
.smf-placeholder { width: 100%; }

.smf-text-control__control,
.smf-textarea-control__control,
.smf-select-control__control {
	width: 100% !important;
	max-width: 100%;
	min-height: 46px;
	padding: 10px 12px;
	border: 1px solid #b8b8b8;
	border-radius: 3px;
	background: #fff;
	color: var(--wf-text);
	font: inherit;
}
.smf-text-control__control:focus,
.smf-textarea-control__control:focus,
.smf-select-control__control:focus {
	border-color: #1769aa;
	outline: 2px solid rgba(23, 105, 170, .16);
	outline-offset: 1px;
}
.smf-textarea-control__control { min-height: 180px; resize: vertical; }
.smf-radio-buttons-control__control {
	display: flex;
	flex-wrap: wrap;
	gap: 10px 24px;
}
.smf-radio-buttons-control .smf-label { margin: 0; }
.smf-radio-button-control__control { margin-right: 6px; }
.smf-error-messages,
.smf-error-messages * { color: #b42332; }

.smf-action {
	display: flex;
	flex-wrap: nowrap;
	justify-content: center;
	align-items: stretch;
	gap: 14px;
	margin: 30px 0 0;
}
.smf-button-control__control {
	min-width: 0;
	min-height: 50px;
	padding: 11px 20px !important;
	border: 2px solid var(--wf-red) !important;
	border-radius: 999px !important;
	background: var(--wf-red) !important;
	color: #fff !important;
	font: inherit !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	cursor: pointer;
	transition: background-color .15s ease, color .15s ease, box-shadow .15s ease;
}
.smf-button-control__control::after {
	content: "→";
	display: inline-block;
	margin-left: 8px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	vertical-align: -2px;
}
.smf-button-control__control[data-action="back"] {
	border-color: var(--wf-red) !important;
	background: #fff !important;
	color: var(--wf-red) !important;
}
.smf-button-control__control[data-action="back"]::before {
	content: "←";
	display: inline-block;
	margin-right: 8px;
	font-family: inherit;
	font-size: 20px;
	font-weight: 600;
	line-height: 1;
	vertical-align: -2px;
}
.smf-button-control__control[data-action="back"]::after { content: none; }
.smf-button-control__control[data-action="back"]:hover {
	border-color: #a92032 !important;
	background: #fff7f8 !important;
	color: #a92032 !important;
}
form.snow-monkey-form[data-screen="confirm"] .smf-action {
	justify-content: space-between;
	gap: 14px;
}
form.snow-monkey-form[data-screen="confirm"] .smf-action > .smf-button-control {
	flex: 1 1 0;
	width: calc(50% - 7px);
	min-width: 0;
}
form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control {
	width: 100%;
	white-space: nowrap;
}
.smf-button-control__control:hover {
	background: #a92032 !important;
	border-color: #a92032 !important;
	box-shadow: 0 2px 8px rgba(0, 0, 0, .14);
}
.smf-button-control__control:focus-visible { outline: 3px solid rgba(201, 47, 67, .28); outline-offset: 3px; }

.wf-footer {
	padding: 20px;
	border-top: 1px solid var(--wf-border);
	color: var(--wf-muted);
	font-size: 14px;
	text-align: center;
}
.wf-footer p { margin: 0; }

@media (max-width: 640px) {
	.wf-header { min-height: 56px; padding: 9px 16px 8px; }
	.wf-brand img { width: min(180px, 68vw); }
	.wf-main { width: calc(100% - 32px); padding: 28px 0 44px; }
	.wf-page-title { margin: 18px auto 32px; font-size: 25px; }
	.smf-item { grid-template-columns: 1fr; gap: 8px; padding: 14px 4px !important; }
	.smf-item__col--label { padding-top: 0; }
	.smf-textarea-control__control { min-height: 160px; }
	.smf-action { margin-top: 24px; gap: 8px; }
	form.snow-monkey-form[data-screen="confirm"] .smf-action { flex-direction: row; flex-wrap: nowrap; gap: 8px; }
	form.snow-monkey-form[data-screen="confirm"] .smf-action > .smf-button-control { flex: 1 1 0; width: calc(50% - 4px); min-width: 0; }
	form.snow-monkey-form[data-screen="confirm"] .smf-action .smf-button-control__control { width: 100%; padding: 10px 8px !important; font-size: 14px !important; }
	.smf-button-control__control { width: min(100%, 340px); }
	.wf-sales-notice { width: 90%; margin: 52px auto 18px; padding: 15px 14px; }
	.wf-sales-notice > p:first-child { font-size: 16px; }
	.wf-sales-notice > .wf-blacklist-policy { font-size: 14px; }
	.wf-confirm-banner { width: 90%; margin: 52px auto 20px; padding: 14px 12px; }
	.wf-confirm-banner__title { font-size: 18px; }
	.wf-confirm-banner__text { font-size: 14px; }
	.smf-form h1,
	.smf-form h2,
	.smf-form h3,
	.smf-form h4,
	.smf-form h5,
	.smf-form h6,
	.smf-form .wp-block-heading { margin-top: 28px !important; }
	.smf-form h2,
	.smf-form h2.wp-block-heading { margin-top: 56px !important; }
}