/* ==========================================================================
   Contact form  --  replaces the retired Paperform embed (Triton, 2026-08-31)
   Scoped to .pope-contact-form so no other Divi form on the site is affected.
   Reproduces the previous form's appearance: label above the field, underline-
   only inputs, grey consent block, full-width black submit button.

   Divi's own rules are emitted with an ID-prefixed selector
   (.et-db #et-boc .et-l ...), which outranks a plain class selector, so the
   properties that have to win carry !important deliberately.
   ========================================================================== */

.pope-contact-form .et_pb_contact_main_title { display: none; }
.pope-contact-form .et_pb_contact_form { margin: 0; }

/* the old form was left-aligned; some wrappers here inherit text-align:center */
.pope-contact-form .et_pb_contact_field,
.pope-contact-form .et_pb_contact_field_options_wrapper,
.pope-contact-form .et_pb_contact_field_checkbox,
.pope-contact-form .et_pb_contact_field_checkbox label {
	text-align: left !important;
}

/* --- field rows ---------------------------------------------------------- */
.pope-contact-form p.et_pb_contact_field {
	padding: 0 0 28px;
	margin: 0;
}

.pope-contact-form p.et_pb_contact_field_half {
	width: 48%;
	float: left;
}

.pope-contact-form p.et_pb_contact_field_half:not(.et_pb_contact_field_last) {
	margin-right: 4%;
}

/* --- labels: Divi hides these by default; the old form showed them -------- */
.pope-contact-form label.et_pb_contact_form_label {
	display: block !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 400;
	font-size: 18px;
	line-height: 1.4;
	color: #000;
	margin: 0 0 6px;
	text-align: left;
}

/* required marker, matching the old form's "Name*" style */
.pope-contact-form p.et_pb_contact_field:has([data-required_mark="required"])
	> label.et_pb_contact_form_label::after {
	content: "*";
}

/* Divi prints a second copy of the title for checkbox/radio groups --------- */
.pope-contact-form .et_pb_contact_field_options_title { display: none !important; }

/* --- inputs: underline only, no box -------------------------------------- */
.pope-contact-form .et_pb_contact_form input.input,
.pope-contact-form .et_pb_contact_form input[type="text"],
.pope-contact-form .et_pb_contact_form textarea.et_pb_contact_message {
	width: 100%;
	background-color: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid #d8d8d8 !important;
	border-radius: 0 !important;
	padding: 6px 0 !important;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 18px;
	line-height: 32px;
	color: #000;
	box-shadow: none;
}

.pope-contact-form .et_pb_contact_form textarea.et_pb_contact_message {
	min-height: 96px !important;
	height: 96px;
	line-height: 1.6;
	resize: vertical;
}

.pope-contact-form .et_pb_contact_form input.input:focus,
.pope-contact-form .et_pb_contact_form textarea.et_pb_contact_message:focus {
	border-bottom-color: #000 !important;
	outline: none;
}

/* the old form had no placeholder text -- the label carries the name */
.pope-contact-form .et_pb_contact_form input.input::placeholder,
.pope-contact-form .et_pb_contact_form textarea::placeholder {
	color: transparent;
}

/* --- consent checkbox: grey block, control on the right ------------------- */
.pope-contact-form .et_pb_contact_field_options_list { display: block; }

.pope-contact-form .et_pb_contact_field_checkbox {
	display: block;
	position: relative;
	background-color: #f6f6f6;
	padding: 14px 18px;
}

.pope-contact-form .et_pb_contact_field_checkbox label {
	display: flex !important;
	flex-direction: row-reverse;
	align-items: flex-start;
	justify-content: space-between;
	gap: 18px;
	font-family: 'Lato', Helvetica, Arial, sans-serif;
	font-weight: 300;
	font-size: 14px;
	line-height: 1.6;
	color: #000;
	margin: 0;
	cursor: pointer;
}

/* Divi's decorative <i> becomes the visible box ... */
.pope-contact-form .et_pb_contact_field_checkbox label i {
	flex: 0 0 auto;
	display: block;
	width: 18px;
	height: 18px;
	margin: 2px 0 0;
	background-color: #fff;
	border: 1px solid #767676;
	border-radius: 0;
	position: relative;
}

/* ... and the real input stays present and keyboard-focusable, sitting
   invisibly on top of it, so Divi's :checked lookup keeps working. */
.pope-contact-form .et_pb_contact_field_checkbox input[type="checkbox"] {
	display: block !important;
	position: absolute;
	top: 16px;
	right: 18px;
	width: 20px;
	height: 20px;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}

.pope-contact-form .et_pb_contact_field_checkbox input[type="checkbox"]:checked + label i {
	background-color: #000;
	border-color: #000;
}

.pope-contact-form .et_pb_contact_field_checkbox input[type="checkbox"]:checked + label i:after {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid #fff;
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
}

.pope-contact-form .et_pb_contact_field_checkbox input[type="checkbox"]:focus-visible + label i {
	outline: 2px solid #000;
	outline-offset: 2px;
}

/* --- submit button ------------------------------------------------------- */
.pope-contact-form .et_contact_bottom_container {
	float: none !important;
	width: 100%;
	text-align: center;
	margin: 8px 0 0;
	padding: 0;
}

.pope-contact-form .et_pb_contact_submit.et_pb_button {
	display: block;
	width: 100%;
	padding: 14px 20px !important;
	background-color: #000 !important;
	border: 0 !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: 'Cormorant SC', Georgia, serif !important;
	font-weight: 700 !important;
	font-size: 24px !important;
	line-height: 1.2;
}

.pope-contact-form .et_pb_contact_submit.et_pb_button:hover {
	background-color: #2b2b2b !important;
	padding: 14px 20px !important;
}

.pope-contact-form .et_pb_contact_submit.et_pb_button:after { display: none !important; }

/* --- mobile -------------------------------------------------------------- */
@media (max-width: 767px) {
	.pope-contact-form p.et_pb_contact_field_half {
		width: 100%;
		float: none;
		margin-right: 0;
	}
}