/* ==========================================================================
   Webonomics: inquiry.css   (home page, view 3 of 3: inquiry form)
   ========================================================================== */

.wbn-inquiry { display: grid; grid-template-columns: 1fr 1.35fr; gap: 64px; padding-top: 64px; padding-bottom: 110px; }
.wbn-inquiry h2 { font-weight: 500; font-size: 40px; line-height: 1.15; margin: 14px 0 16px; }
.wbn-inquiry-lede { color: var(--wbn-slate); margin-bottom: 28px; }

/* Carried-over selection summary */
.wbn-summary { border: 1px solid var(--wbn-rule); border-radius: 10px; padding: 26px; background: #fff; }
.wbn-summary h3 { font: 600 12px var(--wbn-body); letter-spacing: .18em; text-transform: uppercase; color: var(--wbn-slate); margin-bottom: 8px; }
.wbn-summary ul { list-style: none; }
.wbn-summary li { display: flex; gap: 12px; align-items: center; padding: 13px 0; border-bottom: 1px solid var(--wbn-rule); font-size: 15px; }
.wbn-summary li::before { content: ""; flex: 0 0 14px; height: 14px; border-radius: 4px; background: var(--wbn-green); }
.wbn-summary li span { flex: 1; }
.wbn-summary li em { font-style: normal; font-size: 13px; color: var(--wbn-slate); }
.wbn-summary li.is-empty { border: 0; color: var(--wbn-slate); }
.wbn-summary li.is-empty::before { display: none; }
.wbn-edit { color: var(--wbn-green); margin: 12px 0 0; }

/* JS-only and no-JS-only bits */
html:not(.js) .wbn-js-only { display: none; }
.js .wbn-nojs-only { display: none; }

/* Form */
.wbn-form { display: grid; grid-template-columns: 1fr 1fr; gap: 18px 20px; align-content: start; }
.wbn-form label { display: block; font: 600 13px var(--wbn-body); color: var(--wbn-ink); }
.wbn-form input:not([type="checkbox"]), .wbn-form textarea {
	display: block; width: 100%; margin-top: 7px; height: 48px; padding: 12px 14px;
	border: 1px solid #D5D9DD; border-radius: 6px; background: #fff;
	font: 400 16px var(--wbn-body); color: var(--wbn-ink); transition: border-color .18s ease, box-shadow .18s ease;
}
.wbn-form input:focus, .wbn-form textarea:focus { outline: none; border-color: var(--wbn-green); box-shadow: 0 0 0 3px var(--wbn-green-tint); }
.wbn-form textarea { height: 130px; resize: vertical; }
.wbn-req { color: var(--wbn-green); }
.wbn-full, .wbn-pick { grid-column: 1 / -1; }
.wbn-pick { border: 1px solid var(--wbn-rule); border-radius: 10px; padding: 14px 18px; }
.wbn-pick legend { font: 600 13px var(--wbn-body); padding: 0 6px; }
.wbn-form .wbn-check { display: flex; gap: 10px; align-items: center; font-weight: 400; padding: 6px 0; }
.wbn-check input { accent-color: var(--wbn-green); width: 18px; height: 18px; }
.wbn-submit { display: flex; align-items: center; gap: 20px; margin-top: 6px; }
.wbn-submit small { color: var(--wbn-slate); font-size: 13px; }

/* Honeypot: hidden from people, visible to bots */
.wbn-hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* Status message after sending */
.wbn-notice { border-radius: 10px; padding: 18px 22px; font-size: 15px; }
.wbn-notice-ok { border: 1px solid var(--wbn-green); background: var(--wbn-green-tint); color: var(--wbn-green-dk); }
.wbn-notice-err { border: 1px solid #B85C4A; background: #FBF1EE; color: #7A2E20; }

@media (max-width: 700px) {
	.wbn-inquiry { grid-template-columns: 1fr; gap: 30px; padding-top: 32px; padding-bottom: 70px; }
	.wbn-inquiry h2 { font-size: 30px; }
	.wbn-form { grid-template-columns: 1fr; }
	.wbn-submit { flex-direction: column; align-items: stretch; text-align: center; }
}