/**
 * Contact Form 7 forms, after Serj's Contact Us design (#109).
 *
 * Two layers:
 *
 * 1. Every CF7 form on the site (.wpcf7): the field look from the design.
 *    Labels in Inter medium, 48px fields with a warm grey border and no inset
 *    shadow, brand-gold radios, checkboxes and required marks. The submit
 *    button already follows the site button (style.css, #117), so it is left
 *    alone; Figma's lighter gold with dark text would be the only button on the
 *    site that differs.
 *
 * 2. Forms whose template uses the .treg-cf markup (Contact Us for now): the
 *    numbered sections and the two- and three-column rows. Any other form can
 *    take the same layout by using the same markup in its CF7 template.
 *
 * Figma's Saira is the site's Erbaum (--font-heading), as everywhere else.
 */

/* ------------------------------------------------------------------ */
/* 1. Every CF7 form                                                   */
/* ------------------------------------------------------------------ */

.wpcf7 {
	--cf-ink: #262524;
	--cf-text: #3a3a3a;
	--cf-muted: #6b6661;
	--cf-line: #d5d0c8;
	--cf-rule: #e6e5e0;
	--cf-gold: #b17e20;
	/* Gold as small text needs the darker shade to pass AA (#156). */
	--cf-gold-text: var(--color-link, #956a1b);
}

.wpcf7 form > p,
.wpcf7 fieldset > p {
	margin: 0 0 20px;
}

.wpcf7 label,
.wpcf7 .treg-cf__label {
	font-family: var(--font-body);
	font-size: 15px;
	font-weight: 500;
	line-height: 20px;
	color: var(--cf-ink);
}

.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="hidden"]),
.wpcf7 select,
.wpcf7 textarea {
	height: 48px;
	padding: 0 14px;
	border: 1px solid var(--cf-line);
	box-shadow: none;
	font-family: var(--font-body);
	font-size: 16px;
	font-weight: 400;
	line-height: 24px;
	color: var(--cf-ink);
	background-color: #fff;
}

.wpcf7 textarea {
	height: 140px;
	padding: 12px 14px;
	resize: vertical;
}

.wpcf7 input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):focus,
.wpcf7 select:focus,
.wpcf7 textarea:focus {
	border-color: var(--color-button, #956a1b);
	outline: 2px solid color-mix(in srgb, var(--color-button, #956a1b) 30%, transparent);
	outline-offset: 0;
}

.wpcf7 input[type="radio"],
.wpcf7 input[type="checkbox"] {
	width: 18px;
	height: 18px;
	margin: 0;
	accent-color: var(--cf-gold);
	vertical-align: -3px;
}

/* Older templates put the field inside its label, after a <br>: the field
   goes on its own line 8px below, as in the sectioned layout. */
.wpcf7 label > br {
	display: none;
}

.wpcf7 label > .wpcf7-form-control-wrap {
	display: block;
	margin-top: 8px;
}

/* A radio or checkbox and its words: the words are regular weight, like the
   design, not the medium of a field label. */
.wpcf7 .wpcf7-list-item {
	margin: 0;
}

.wpcf7 .wpcf7-list-item label {
	display: inline-flex;
	align-items: flex-start;
	gap: 10px;
	font-weight: 400;
	color: var(--cf-text);
	cursor: pointer;
}

.wpcf7 .wpcf7-list-item-label {
	line-height: 24px;
}

.wpcf7 .wpcf7-list-item input {
	margin-top: 3px;
	flex-shrink: 0;
}

.wpcf7 .wpcf7-not-valid-tip {
	margin-top: 6px;
	font-size: 14px;
	line-height: 20px;
	color: #b3261e;
}

.wpcf7 .wpcf7-not-valid {
	border-color: #b3261e !important;
}

/* ------------------------------------------------------------------ */
/* 2. The sectioned layout (.treg-cf markup)                           */
/* ------------------------------------------------------------------ */

.treg-cf {
	display: flex;
	flex-direction: column;
	gap: 40px;
}

.treg-cf p {
	margin: 0;
}

/* Pulled up under the intro paragraph, but not flush against it: at -24px
   (the paragraph's whole bottom margin) the two lines touched (#177). */
.treg-cf__note {
	margin-top: -14px !important;
	font-size: 14px;
	line-height: 20px;
	color: var(--cf-muted);
}

.treg-cf__req {
	color: var(--cf-gold-text);
}

.treg-cf__group {
	display: flex;
	flex-direction: column;
	gap: 20px;
	min-width: 0;
	margin: 0;
	padding: 0;
	border: 0;
}

/* "01  ABOUT YOUR INQUIRY" with a rule under it. A legend will not take
   part in the fieldset's flex layout, so it is laid out as a block with
   the gap restored below it. */
.treg-cf__legend {
	display: flex;
	align-items: baseline;
	gap: 12px;
	width: 100%;
	margin: 0 0 20px;
	padding: 0 0 12px;
	border-bottom: 1px solid var(--cf-rule);
	font-family: var(--font-heading);
	font-size: 20px;
	font-weight: 600;
	line-height: 24px;
	letter-spacing: 0.4px;
	text-transform: uppercase;
	color: #1c1c1c;
}

.treg-cf__num {
	font-size: 16px;
	letter-spacing: 1px;
	color: var(--cf-gold-text);
}

.treg-cf__help {
	font-size: 16px;
	line-height: 24px;
	color: var(--cf-text);
}

.treg-cf__row {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 24px;
}

.treg-cf__row--3 {
	grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Label above field, 8px apart. CF7 wraps each field's label and control in
   a <p>, which is what carries the column. */
.treg-cf__field > p {
	display: flex;
	flex-direction: column;
	gap: 8px;
}

.treg-cf__field > p > label {
	display: block;
	margin: 0;
}

/* "I am a(n)": four options in two columns, as in the design. */
.treg-cf__field--radios .wpcf7-radio {
	display: grid;
	grid-template-columns: repeat(2, minmax(0, 1fr));
	gap: 8px 24px;
	padding-top: 4px;
}

.treg-cf__optin .wpcf7-list-item-label {
	font-size: 14px;
	line-height: 22px;
}

.treg-cf__submit input[type="submit"] {
	width: auto;
}

@media (max-width: 767px) {

	.treg-cf__row,
	.treg-cf__row--3 {
		grid-template-columns: minmax(0, 1fr);
		gap: 20px;
	}
}