/**
 * Private events, request a proposal — one section of the design.
 *
 * A picture down the left and the form down the right. What the form asks is
 * the Form editor's; this only draws it.
 */

/* The band runs the full width and carries its own ground into the margins;
   what stands in it is held to 1440 and centred. */
.custom-private-form {
	display: flex;
	align-items: stretch;
	width: 100%;
	padding: 0 max( 0px, calc( ( 100% - 1440px ) / 2 ) );
	box-sizing: border-box;
	background-color: #3a2114;
}

/* The file gives the picture half the band, drawn there as 720 of 1440. */
.custom-private-form__picture {
	position: relative;
	flex: 0 0 50%;
	overflow: hidden;
}

.custom-private-form__picture img {
	display: block;
	width: 100%;
	height: 100%;
	object-fit: cover;
	object-position: center;
}

.custom-private-form__column.custom-private-form__column {
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 12px;
	/* The file draws the column 585 across, 65 in from the picture and 70
	   from the edge, in the half of 1440 the picture leaves; each is held as
	   its share of the band. */
	flex: 0 0 40.625%;
	width: auto;
	margin: 96px 4.861% 96px 4.514%;
}

.custom-private-form__heading,
.custom-private-form__body {
	width: 100%;
	margin: 0;
	text-transform: none;
}

.custom-private-form__heading {
	text-transform: uppercase;
	padding: 0;
}

/* The form takes the column's width; left to itself it would take only its
   widest field's. */
.custom-private-form__form {
	width: 100%;
}

/* The fields, two to a row where one is asked to take half of it. */
.custom-private-form__fields {
	display: grid;
	grid-template-columns: repeat( 2, minmax( 0, 1fr ) );
	column-gap: 13px;
	row-gap: 24px;
	width: 100%;
	padding: 24px 0;
	box-sizing: border-box;
}

.custom-private-form__field {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: flex-start;
	gap: 8px;
	min-width: 0;
}

.custom-private-form__field--full {
	grid-column: 1 / -1;
}

.custom-private-form__label {
	width: 100%;
	margin: 0;
}

/* The theme paints every bare box it finds — a ground, a border and an ink — and
   names it by element and attribute, which outweighs one class. The class is
   said twice so the field is the rule the file draws: a line under it, and
   nothing else. */
.custom-private-form__input.custom-private-form__input {
	width: 100%;
	padding: 12px;
	border: 0;
	border-bottom: 1px solid currentColor;
	border-radius: 0;
	background-color: transparent;
	background-image: none;
	color: inherit;
	box-sizing: border-box;
	appearance: none;
}

/* Reached, held or pressed, a field keeps what it was resting in: the theme
   answers a focused input with an edge and an ink of its own, one step
   heavier than a resting rule, so the resting rule is said again here. */
.custom-private-form__input.custom-private-form__input:hover,
.custom-private-form__input.custom-private-form__input:focus,
.custom-private-form__input.custom-private-form__input:active {
	outline: none;
	border-bottom-color: currentColor;
	background-color: transparent;
	color: inherit;
	box-shadow: none;
}

.custom-private-form__input.custom-private-form__input::placeholder {
	color: #b0b0b0;
	opacity: 1;
}

textarea.custom-private-form__input.custom-private-form__input {
	resize: vertical;
}

/* What is chosen rather than typed carries the mark the file draws beside it.

   Drawn as a ground it would not survive: Elementor holds back every ground
   inside a container it has not yet called loaded, and says so with a weight
   nothing outranks. A container with no picture of its own is never called
   loaded, so the mark is cut out of ink instead, which that rule does not
   reach. */
select.custom-private-form__input.custom-private-form__input,
input[type="date"].custom-private-form__input.custom-private-form__input {
	padding-right: 44px;
}

.custom-private-form__field:has( select )::after,
.custom-private-form__field:has( input[type="date"] )::after {
	content: "";
	position: absolute;
	right: 12px;
	bottom: 22px;
	width: 24px;
	height: 24px;
	transform: translateY( 50% );
	background-color: currentColor;
	-webkit-mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E" );
	mask-image: url( "data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Cpath d='M7.41 8.59 12 13.17l4.59-4.58L18 10l-6 6-6-6z'/%3E%3C/svg%3E" );
	-webkit-mask-repeat: no-repeat;
	mask-repeat: no-repeat;
	-webkit-mask-position: center;
	mask-position: center;
	pointer-events: none;
}

/* The date box draws a mark of its own; the file draws one, so the browser's
   goes. */
input[type="date"].custom-private-form__input.custom-private-form__input::-webkit-calendar-picker-indicator {
	opacity: 0;
}

select.custom-private-form__input.custom-private-form__input:invalid {
	color: #d8d0c2;
}

.custom-private-form__actions {
	display: flex;
	align-items: flex-end;
	justify-content: space-between;
	width: 100%;
	padding-top: 24px;
	box-sizing: border-box;
}

.custom-private-form__send {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 120px;
	padding: 12px 24px;
	border: 0;
	border-radius: 24px;
	cursor: pointer;
	box-sizing: border-box;
	white-space: nowrap;
	transition: opacity 300ms ease-in-out;
}

.custom-private-form__send:hover {
	opacity: 0.85;
}

.custom-private-form__deck,
.custom-private-form__deck:hover,
.custom-private-form__deck:focus,
.custom-private-form__deck:active {
	color: inherit;
	text-decoration: underline;
	white-space: nowrap;
}

/* What the form says back stands under the button that sent it, 12 below —
   as padding, since the shared sheet takes every margin off a text — on the
   button's side, which is the left. */
.custom-private-form__result {
	width: 100%;
	margin: 0;
	padding: 12px 0 0;
	text-align: left;
}

@media ( prefers-reduced-motion: reduce ) {
	.custom-private-form__send {
		transition: none;
	}
}

/* What the reader has to answer stands directly above the button. */
.custom-private-form__captcha:not( :empty ) {
	width: 100%;
	padding-top: 24px;
}

/* A press that has been heard, and cannot be repeated by accident. */
.custom-private-form__send[disabled] {
	cursor: progress;
	opacity: 0.6;
}

/* Tablet and mobile — the file draws one of them (11183:12151): the form
   first, every field the width of it, and the picture under the form the
   width of the screen. The client has said a field asked to take half the
   row keeps half on the tablet, which the file does not draw, and takes the
   whole row on a phone. */
@media ( max-width: 1024px ) {
	.custom-private-form {
		flex-direction: column;
	}

	.custom-private-form__picture {
		order: 2;
		flex: 0 0 auto;
		width: 100%;
		height: 588px;
	}

	.custom-private-form__column.custom-private-form__column {
		order: 1;
		flex: 0 0 auto;
		gap: 8px;
		width: auto;
		margin: 25px 11px 41px;
	}

	.custom-private-form__fields {
		column-gap: 8px;
		row-gap: 16px;
		padding: 16px 0 0;
	}

	.custom-private-form__field {
		gap: 5px;
	}

	.custom-private-form__input.custom-private-form__input {
		padding: 8px;
	}

	.custom-private-form__actions {
		padding-top: 15px;
	}

	.custom-private-form__send {
		width: auto;
		padding: 8px 15px;
	}

	/* The mark beside what is chosen comes down with the field (11183:12119). */
	select.custom-private-form__input.custom-private-form__input,
	input[type="date"].custom-private-form__input.custom-private-form__input {
		padding-right: 32px;
	}

	.custom-private-form__field:has( select )::after,
	.custom-private-form__field:has( input[type="date"] )::after {
		right: 8px;
		bottom: 15px;
		width: 16px;
		height: 16px;
	}
}

@media ( max-width: 767px ) {
	.custom-private-form__fields {
		grid-template-columns: minmax( 0, 1fr );
	}

	.custom-private-form__field--half {
		grid-column: 1 / -1;
	}
}