/*
 * Consultation request form.
 * Uses the Untangle theme's colors and fonts when present, with fallbacks.
 */

.utb {
	--utb-ink: var(--wp--preset--color--ink, #232220);
	--utb-body: var(--wp--preset--color--body, #4e4a44);
	--utb-muted: var(--wp--preset--color--muted, #6a655d);
	--utb-rule: var(--wp--preset--color--rule, #cbb698);
	--utb-field: var(--wp--preset--color--paper, #fafaf8);
	--utb-accent: var(--wp--preset--color--harbor, #3f6e82);
	--utb-error: #9b2c2c;
	--utb-serif: var(--wp--preset--font-family--serif, Georgia, serif);

	color: var(--utb-body);
	font-size: 1rem;
	scroll-margin-top: 2rem;
}

.utb-form__grid {
	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: 1.375rem 1.25rem;
}

.utb-field {
	grid-column: 1 / -1;
	display: flex;
	flex-direction: column;
	gap: .5rem;
	margin: 0;
}

.utb-field--half {
	grid-column: span 1;
}

@media (max-width: 600px) {
	.utb-form__grid { grid-template-columns: 1fr; }
	.utb-field--half { grid-column: 1 / -1; }
}

.utb label,
.utb legend {
	font-size: .9375rem;
	font-weight: 400;
	color: var(--utb-ink);
}

.utb fieldset {
	margin: 0;
	padding: 0;
	border: 0;
	min-width: 0;
}

.utb legend {
	margin-bottom: .5rem;
	padding: 0;
}

.utb-req { color: var(--utb-accent); }
.utb-opt { color: var(--utb-muted); font-size: .8125rem; }

.utb input[type="text"],
.utb input[type="email"],
.utb input[type="tel"],
.utb select,
.utb textarea {
	width: 100%;
	box-sizing: border-box;
	margin: 0;
	padding: .8125rem 1rem;
	border: 1px solid var(--utb-rule);
	border-radius: 10px;
	background: var(--utb-field);
	color: var(--utb-ink);
	font: inherit;
	font-weight: 400;
	line-height: 1.5;
	transition: border-color .2s ease, box-shadow .2s ease;
}

.utb select {
	appearance: none;
	padding-right: 2.5rem;
	background-image: linear-gradient(45deg, transparent 50%, var(--utb-muted) 50%), linear-gradient(135deg, var(--utb-muted) 50%, transparent 50%);
	background-position: calc(100% - 1.25rem) 55%, calc(100% - .95rem) 55%;
	background-size: 5px 5px, 5px 5px;
	background-repeat: no-repeat;
}

.utb textarea {
	min-height: 8.5rem;
	resize: vertical;
}

.utb input:focus,
.utb select:focus,
.utb textarea:focus {
	outline: none;
	border-color: var(--utb-accent);
	box-shadow: 0 0 0 3px color-mix(in srgb, var(--utb-accent) 22%, transparent);
}

.utb-choices {
	display: flex;
	flex-wrap: wrap;
	gap: .5rem 1.5rem;
	min-height: 3.2rem;
	align-items: center;
}

.utb-choice,
.utb-check {
	display: inline-flex;
	align-items: flex-start;
	gap: .625rem;
	cursor: pointer;
	line-height: 1.5;
}

.utb input[type="radio"],
.utb input[type="checkbox"] {
	flex: none;
	width: 1.125rem;
	height: 1.125rem;
	margin: .15rem 0 0;
	accent-color: var(--utb-accent);
}

.utb-check span {
	font-size: .9375rem;
	color: var(--utb-body);
}

.utb-hint,
.utb-error {
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
}

.utb-hint { color: var(--utb-muted); }
.utb-error { color: var(--utb-error); font-weight: 500; }

.utb .has-error input,
.utb .has-error select,
.utb .has-error textarea {
	border-color: var(--utb-error);
}

.utb__alert {
	margin: 0 0 1.5rem;
	padding: 1rem 1.25rem;
	border-left: 3px solid var(--utb-error);
	border-radius: 4px;
	background: #fbeeee;
	color: var(--utb-error);
	font-weight: 500;
}

.utb-form__footer {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem 1.5rem;
	margin-top: 1.75rem;
}

.utb-form__footer .wp-block-button { margin: 0; }
.utb-form__footer button { cursor: pointer; border: 0; }

.utb-form__privacy {
	flex: 1 1 14rem;
	margin: 0;
	font-size: .8125rem;
	line-height: 1.5;
	color: var(--utb-muted);
}

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

/* Confirmation */
.utb--sent {
	padding: clamp(1.5rem, 3vw, 2.5rem);
	border-radius: 18px;
	background: var(--utb-field);
}

.utb--sent .utb__title {
	margin: 0 0 .75rem;
	font-family: var(--utb-serif);
	font-size: 1.625rem;
	font-weight: 500;
	color: var(--utb-ink);
}

.utb--sent p { margin: 0; }

/* Editor preview is for looking only. */
.utb-editor-preview .utb-form {
	pointer-events: none;
}

.utb--sent:focus,
.utb__alert:focus {
	outline: none;
}