/*
 * The site's Bit Form forms (CTKP_Forms): news sign-up, launch list, contact.
 *
 * Bit Form's own per-form stylesheet is never generated for these forms (they are built from
 * files, not in its builder), so everything they need is here, written against Bit Form's stable
 * bf-* classes and scoped to .ctkp-bf. It stands on its own, so the forms look right under any
 * version of the theme; the colours come from the theme's palette with the brand values as
 * fallbacks. Fields are 16px (smaller makes iPhones zoom in on tap) and every control is at
 * least 44px tall.
 *
 * Three classes deep on purpose: the theme styles Bit Form as `.ck-form .bf-field` with
 * !important, and these must win wherever the two meet.
 */

.ctkp-bf {
	--ctkp-ember: var(--wp--preset--color--ember, #ff4d1c);
	--ctkp-ember-light: var(--wp--preset--color--ember-light, #ff8260);
	--ctkp-ember-dark: var(--wp--preset--color--ember-dark, #cc3d16);
	--ctkp-black: var(--wp--preset--color--neutral-darkest, #080808);
	--ctkp-bone: var(--wp--preset--color--bone, #f2ece1);
	--ctkp-ink: var(--wp--preset--color--neutral-darker, #202020);
	--ctkp-line: rgba(255, 255, 255, 0.2);
	--ctkp-body: var(--wp--preset--font-family--body, "Archivo", system-ui, sans-serif);
	display: block;
	gap: 0;
	font-family: var(--ctkp-body);
}

/* ---------- Bit Form's working parts (normally in its generated stylesheet) ---------- */

.ctkp-bf .d-none,
.ctkp-bf .ctkp-hp { display: none !important; }
.ctkp-bf .v-hide { visibility: hidden !important; }
.ctkp-bf .fld-hide { min-height: 0 !important; height: 0 !important; overflow: hidden !important; }
.ctkp-bf .bf-spinner {
	display: inline-block;
	width: 15px;
	height: 15px;
	margin-left: 8px;
	border-radius: 50%;
	border-top: 2px solid;
	border-right: 2px solid transparent;
	animation: ctkp-bf-spin 1s linear infinite;
}
@keyframes ctkp-bf-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .ctkp-bf .bf-spinner { animation: none; } }

/* The confirmation lives in a container Bit Form toggles between .deactive and .active. */
.ctkp-bf [class*="msg-container-"].deactive { display: none !important; }
.ctkp-bf [class*="msg-container-"].active { display: block !important; height: auto !important; opacity: 1 !important; visibility: visible !important; }
.ctkp-bf .msg-backdrop { background: none !important; height: auto !important; }
.ctkp-bf .bf-msg-close { display: none !important; } /* A thank-you needs no close button. */

/* ---------- Layout ---------- */

.ctkp-bf .bf-form-wrapper,
.ctkp-bf.ctkp-bf .bf-form { background: transparent; border: 0; box-shadow: none; padding: 0; margin: 0; }
.ctkp-bf.ctkp-bf .bf-form { display: flex; flex-direction: column; gap: 20px; }
.ctkp-bf .btcd-fld-itm { min-width: 0; }
.ctkp-bf .bf-fld-wrp { display: flex; flex-direction: column; gap: 8px; padding: 0 !important; margin: 0 !important; }
.ctkp-bf .bf-lbl-wrp { margin: 0 !important; }

/* Sign-ups: email and button on one row where there's room, as before. */
.ctkp-bf--news.ctkp-bf .bf-form,
.ctkp-bf--launch.ctkp-bf .bf-form { flex-direction: row; flex-wrap: wrap; align-items: flex-end; gap: 12px; }
.ctkp-bf--news .btcd-fld-itm:has(input),
.ctkp-bf--launch .btcd-fld-itm:has(input) { flex: 1 1 220px; }
.ctkp-bf--news .btcd-fld-itm:has(button),
.ctkp-bf--launch .btcd-fld-itm:has(button) { flex: 0 0 auto; }

/* The news sign-up keeps its label for screen readers only; the placeholder shows the format. */
.ctkp-bf--news .bf-lbl-wrp {
	position: absolute !important;
	width: 1px; height: 1px; margin: -1px !important; padding: 0;
	overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* ---------- Labels, fields, button ---------- */

.ctkp-bf.ctkp-bf .bf-label {
	color: var(--ctkp-bone) !important;
	font-family: var(--ctkp-body) !important;
	font-size: 13px !important;
	font-weight: 800 !important;
	letter-spacing: 0.05em !important;
	line-height: 1.3 !important;
	text-transform: uppercase !important;
	display: block;
}
.ctkp-bf.ctkp-bf .bf-asterisk-symbol,
.ctkp-bf.ctkp-bf .bf-label span[aria-hidden] { color: var(--ctkp-ember-light) !important; }

.ctkp-bf.ctkp-bf .bf-field {
	background-color: var(--ctkp-ink) !important;
	border: 1px solid var(--ctkp-line) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	color: #fff !important;
	font-family: var(--ctkp-body) !important;
	font-size: 16px !important;
	line-height: 1.4 !important;
	min-height: 48px !important;
	height: auto !important;
	padding: 12px 16px !important;
	width: 100% !important;
	max-width: 100%;
	box-sizing: border-box;
	margin: 0;
}
.ctkp-bf.ctkp-bf .bf-field::placeholder { color: #9a948a !important; opacity: 1 !important; }
.ctkp-bf.ctkp-bf textarea.bf-field { min-height: 168px !important; resize: vertical !important; }
.ctkp-bf.ctkp-bf select.bf-field {
	appearance: none !important;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath d='M1 1l6 6 6-6' fill='none' stroke='%23F2ECE1' stroke-width='2'/%3E%3C/svg%3E") !important;
	background-position: right 16px center !important;
	background-repeat: no-repeat !important;
	padding-right: 46px !important;
}
.ctkp-bf.ctkp-bf select.bf-field option { background: var(--ctkp-ink); color: #fff; }
.ctkp-bf.ctkp-bf .bf-field:focus,
.ctkp-bf.ctkp-bf .bf-field:focus-visible {
	border-color: var(--ctkp-ember) !important;
	outline: 2px solid var(--ctkp-ember) !important;
	outline-offset: 1px !important;
}
.ctkp-bf.ctkp-bf .bf-field[aria-invalid="true"] { border-color: var(--ctkp-ember) !important; }

.ctkp-bf.ctkp-bf .bf-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	min-height: 48px !important;
	height: auto !important;
	width: auto !important;
	/* Site review 1A: near-black on ember at rest (6:1), white on ember-dark when active. */
	background-color: var(--ctkp-ember) !important;
	color: var(--ctkp-black) !important;
	border: 0 !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 var(--ctkp-bone) !important;
	cursor: pointer;
	font-family: var(--ctkp-body) !important;
	font-size: 14px !important;
	font-weight: 800 !important;
	letter-spacing: 0.05em !important;
	line-height: 1.2 !important;
	padding: 14px 28px !important;
	text-transform: uppercase !important;
	transition: transform 0.15s ease, box-shadow 0.15s ease;
	margin: 0 4px 4px 0; /* room for the hard shadow */
}
.ctkp-bf.ctkp-bf .bf-btn:hover:not(:disabled),
.ctkp-bf.ctkp-bf .bf-btn:focus-visible {
	background-color: var(--ctkp-ember-dark) !important;
	color: #fff !important;
	box-shadow: 7px 7px 0 var(--ctkp-bone) !important;
	transform: translate(-3px, -3px);
}
.ctkp-bf.ctkp-bf .bf-btn * { color: inherit !important; }
.ctkp-bf.ctkp-bf .bf-btn:focus-visible { outline: 2px solid var(--ctkp-ember) !important; outline-offset: 4px !important; }
.ctkp-bf.ctkp-bf .bf-btn:disabled { opacity: 0.6; cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) {
	.ctkp-bf.ctkp-bf .bf-btn { transition: none; }
	.ctkp-bf.ctkp-bf .bf-btn:hover:not(:disabled),
	.ctkp-bf.ctkp-bf .bf-btn:focus-visible { transform: none; }
}

/* ---------- Errors and the confirmation ---------- */

.ctkp-bf.ctkp-bf .bf-err-txt,
.ctkp-bf.ctkp-bf .bf-err-msg {
	color: var(--ctkp-ember-light) !important;
	font-family: var(--ctkp-body) !important;
	font-size: 14px !important;
	font-weight: 600 !important;
	line-height: 1.4 !important;
	background: none !important;
	margin: 6px 0 0 !important;
}
.ctkp-bf.ctkp-bf .bf-err-txt p { margin: 0; }

/* Whole-form failures (a refused submission, no answer from the server). */
.ctkp-bf [id^="bf-form-msg-wrp"] { color: var(--ctkp-ember-light); font-size: 15px; font-weight: 600; line-height: 1.5; }
.ctkp-bf [id^="bf-form-msg-wrp"]:not(:empty) { margin-top: 16px; }
.ctkp-bf.ctkp-bf .bf-form-msg {
	height: auto !important;
	opacity: 1 !important;
	overflow: visible !important;
	background: var(--ctkp-ink) !important;
	border: 1px solid var(--ctkp-ember) !important;
	border-radius: 0 !important;
	color: var(--ctkp-ember-light) !important;
	padding: 12px 16px !important;
	margin: 0 !important;
}
.ctkp-bf.ctkp-bf .bf-form-msg:empty,
.ctkp-bf.ctkp-bf .bf-form-msg:not(.active) { display: none !important; }

.ctkp-bf.ctkp-bf .bf-msg-content {
	background: var(--ctkp-ink) !important;
	border: 1px solid var(--ctkp-ember) !important;
	border-radius: 0 !important;
	box-shadow: 4px 4px 0 var(--ctkp-ember) !important;
	color: var(--ctkp-bone) !important;
	padding: 14px 18px !important;
	margin: 0 !important;
	width: auto !important;
	max-width: 100%;
	text-align: left !important;
	word-break: normal !important;
}
.ctkp-bf .bf-msg-content .msg-content,
.ctkp-bf .bf-msg-content .msg-content p { color: var(--ctkp-bone) !important; font-size: 16px; line-height: 1.5; margin: 0; }
.ctkp-bf .bf-msg-content .msg-content strong { color: #fff; }

/* Contact: name and email share a row on wider screens, as the portal's own form did. */
@media (min-width: 768px) {
	.ctkp-bf--contact.ctkp-bf .bf-form { display: grid; grid-template-columns: 1fr 1fr; column-gap: 20px; }
	.ctkp-bf--contact .bf-form > * { grid-column: 1 / -1; }
	.ctkp-bf--contact .bf-form > .btcd-fld-itm:has(input[name="ck_name"]),
	.ctkp-bf--contact .bf-form > .btcd-fld-itm:has(input[name="ck_email"]) { grid-column: auto; }
}