/*
 * Booking form.
 *
 * Gravity Forms' own stylesheets are switched off in the reunionband-core
 * plugin, so this file owns the form's appearance outright rather than fighting
 * a per-form inline rule scoped with an ID selector that no class-based
 * override can beat. See plugins/reunionband-core/includes/forms.php.
 *
 * That means layout as well as decoration: the grid, the field widths and the
 * control sizing all live here. Gravity still emits its layout classes
 * (.gfield--width-half and friends), so widths chosen in the form editor keep
 * working without anyone touching CSS.
 */

.gform_wrapper {

	/*
	 * A single-column form as wide as the page is unpleasant to fill in: the eye
	 * has to travel the full measure between a label and its field.
	 */
	max-width: 46rem;
}

/*
 * Gravity's own reset used to supply this. With the plugin's CSS switched off
 * it has to be restated, or a control at width:100% adds its padding and border
 * on top and pushes the page sideways on a phone.
 */
.gform_wrapper *,
.gform_wrapper *::before,
.gform_wrapper *::after {
	box-sizing: border-box;
}

.gform_wrapper form {
	margin: 0;
}

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

.gform_wrapper .gform_fields {
	display: grid;
	gap: var(--wp--preset--spacing--40) var(--wp--preset--spacing--30);
	grid-template-columns: repeat(12, 1fr);
	list-style: none;
	margin: 0;
	padding: 0;

	/*
	 * Each field sits at the top of its row. Without this a field carrying a
	 * two-line hint stretches its neighbour and leaves an obvious hole beside
	 * it, which reads as a layout fault rather than as breathing room.
	 */
	align-items: start;
}

.gform_wrapper .gfield {
	grid-column: span 12;
	min-width: 0;
}

@media (min-width: 640px) {

	.gform_wrapper .gfield--width-half {
		grid-column: span 6;
	}

	.gform_wrapper .gfield--width-third {
		grid-column: span 4;
	}

	.gform_wrapper .gfield--width-two-thirds {
		grid-column: span 8;
	}

	.gform_wrapper .gfield--width-quarter {
		grid-column: span 3;
	}
}

/* The honeypot is a trap for robots and must never be visible. */
.gform_wrapper .gfield--type-honeypot,
.gform_wrapper .gform_validation_container,
.gform_wrapper .gform_hidden,
.gform_wrapper .gf_invisible {
	display: none;
}

/* ---------------------------------------------------------------- Labels */

.gform_wrapper .gfield_label,
.gform_wrapper legend.gfield_label {
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--label);
	font-weight: 600;
	letter-spacing: 0.16em;
	margin: 0 0 0.4rem;
	text-transform: uppercase;
}

.gform_wrapper .gfield_required {
	color: var(--wp--preset--color--oxblood);
	margin-left: 0.25em;
	text-decoration: none;
}

.gform_wrapper .gfield_description {
	color: var(--wp--preset--color--quiet);
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.4;
	padding-top: 0.35rem;
}

/* -------------------------------------------------------------- Controls */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	appearance: none;
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--rule);
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	display: block;
	font-family: var(--wp--preset--font-family--serif);
	font-size: 1rem;
	line-height: 1.4;
	min-height: 48px;
	padding: 0.7rem 0.8rem;
	width: 100%;
}

.gform_wrapper textarea {

	/*
	 * A fixed height, not a minimum. Gravity sets a rows attribute that a
	 * min-height cannot override, which left the field several hundred pixels
	 * tall and out of proportion with everything above it.
	 */
	height: 10rem;
	min-height: 0;
	resize: vertical;
}

/* The select needs its own arrow once the browser's is suppressed. */
.gform_wrapper select {
	background-image:
		linear-gradient(45deg, transparent 50%, currentcolor 50%),
		linear-gradient(135deg, currentcolor 50%, transparent 50%);
	background-position: calc(100% - 1.15rem) center, calc(100% - 0.8rem) center;
	background-repeat: no-repeat;
	background-size: 0.35rem 0.35rem, 0.35rem 0.35rem;
	padding-right: 2.25rem;
}

.gform_wrapper input::placeholder,
.gform_wrapper textarea::placeholder {
	color: var(--wp--preset--color--quiet);
	opacity: 1;
}

.gform_wrapper input:hover,
.gform_wrapper select:hover,
.gform_wrapper textarea:hover {
	border-color: var(--wp--preset--color--quiet);
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	border-color: var(--wp--preset--color--oxblood);
	outline: 2px solid var(--wp--preset--color--brass);
	outline-offset: 1px;
}

/*
 * The datepicker trigger. Gravity renders it as a sibling after the input, so
 * left alone it stacks underneath and makes the date field taller than every
 * other control on its row. Anchoring it inside the input's right edge keeps
 * the row even and puts the control where people expect to find it.
 */
.gform_wrapper .ginput_container_date {
	position: relative;
}

.gform_wrapper .ginput_container_date input {
	padding-right: 3rem;
}

.gform_wrapper .gform-datepicker-toggle {
	align-items: center;
	background: none;
	border: 0;
	bottom: 0;
	color: var(--wp--preset--color--quiet);
	cursor: pointer;
	display: inline-flex;
	justify-content: center;
	margin: auto 0;
	min-height: 44px;
	min-width: 44px;
	position: absolute;
	right: 0;
	top: 0;
}

.gform_wrapper .gform-datepicker-toggle:hover,
.gform_wrapper .gform-datepicker-toggle:focus {
	color: var(--wp--preset--color--oxblood);
}

/* ---------------------------------------------------------------- Submit */

.gform_wrapper .gform_footer {
	margin: var(--wp--preset--spacing--40) 0 0;
	padding: 0;
}

.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper button.gform_button {
	align-items: center;
	background: var(--wp--preset--color--brass);
	border: 0;
	border-radius: 0;
	color: var(--wp--preset--color--ink);
	cursor: pointer;
	display: inline-flex;
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--large);
	font-weight: 600;
	letter-spacing: 0.12em;
	min-height: 48px;
	padding: 0.9rem 2rem;
	text-transform: uppercase;
	transition: background-color 0.16s ease, color 0.16s ease;
	width: auto;
}

.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_footer button:focus,
.gform_wrapper button.gform_button:hover,
.gform_wrapper button.gform_button:focus {
	background: var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--page);
}

.gform_wrapper .gform_ajax_spinner {
	margin-left: 0.75rem;
	vertical-align: middle;
}

/* ------------------------------------------------------------ Validation */

.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: var(--wp--preset--color--oxblood);
}

.gform_wrapper .gfield_validation_message,
.gform_wrapper .validation_message {
	border-left: 3px solid var(--wp--preset--color--oxblood);
	color: var(--wp--preset--color--oxblood);
	font-size: var(--wp--preset--font-size--small);
	margin-top: 0.4rem;
	padding: 0.3rem 0 0.3rem 0.7rem;
}

.gform_wrapper .gform_validation_errors {
	background: var(--wp--preset--color--page);
	border: 1px solid var(--wp--preset--color--oxblood);
	border-radius: 0;
	box-shadow: none;
	margin-bottom: var(--wp--preset--spacing--40);
	padding: 1rem 1.15rem;
}

.gform_wrapper .gform_validation_errors > h2 {
	color: var(--wp--preset--color--oxblood);
	font-family: var(--wp--preset--font-family--condensed);
	font-size: var(--wp--preset--font-size--large);
	letter-spacing: 0.1em;
	margin: 0;
	text-transform: uppercase;
}

.gform_wrapper .gform_validation_errors ol {
	margin: 0.5rem 0 0;
	padding-left: 1.15rem;
}

.gform_confirmation_message {
	border-left: 5px solid var(--wp--preset--color--brass);
	font-size: var(--wp--preset--font-size--large);
	padding: 1rem 0 1rem 1.25rem;
}