/*
 * CRAA site: responsive fixes for content built in Elementor and for embedded third-party forms.
 * Loaded on every page. Component styles (the dining directory) live in their own files.
 */

/* One-column Elementor containers on phones (class set by the inline script in the footer). */
.e-con.e-flex.craa-col-nowrap,
.e-con.e-flex > .e-con-inner.craa-col-nowrap {
	flex-wrap: nowrap;
}

/*
 * iOS Safari zooms the page when a field under 16px gets focus. Fields that were smaller on phones:
 * the parking calculator, the homepage flight search bar, the nonstop flights search, Formidable
 * forms, Ninja Tables filters and the Lost & Found form (247 Software embed).
 */
@media (max-width: 767px) {
	.pcc-calculator .pcc-field input,
	.pcc-calculator .pcc-field select,
	input#inpFlightFilter,
	input#cmh-nonstop-q,
	.with_frm_style input[type="text"],
	.with_frm_style input[type="email"],
	.with_frm_style input[type="tel"],
	.with_frm_style input[type="number"],
	.with_frm_style input[type="url"],
	.with_frm_style input[type="password"],
	.with_frm_style select,
	.with_frm_style textarea,
	.ninja_table_wrapper select,
	.ninja_table_wrapper input[type="search"],
	.ninja_table_wrapper input[type="text"],
	#authentication-success input.form-control,
	#authentication-success select,
	#authentication-success textarea {
		font-size: 16px !important;
	}

	/* The homepage flight search placeholder is long; keep it on one line at the old size. */
	input#inpFlightFilter::placeholder {
		font-size: 12px;
	}
}

/*
 * Parking calculator: iOS gives date fields a minimum width from the date format, so in the
 * two-column phone layout the entry/exit date ran under the time menu. Dropping the native
 * appearance lets the field take its column width; tapping still opens the iOS date picker.
 */
@supports (-webkit-touch-callout: none) {
	.pcc-calculator input[type="date"] {
		-webkit-appearance: none;
		appearance: none;
		display: block;
		min-width: 0;
		max-width: 100%;
		text-align: left;
		line-height: 46px;
	}

	.pcc-calculator input[type="date"]::-webkit-date-and-time-value {
		text-align: left;
	}

	/* iOS shows an empty date field as a blank box; match the "Select time" menus beside it. */
	.pcc-calculator input[type="date"]:invalid::before {
		content: "Select date";
		color: #052C58;
	}
}

.pcc-calculator .pcc-field input,
.pcc-calculator .pcc-field select {
	min-width: 0;
}

/*
 * Formidable: the site sets text fields to weight 500 with !important but leaves email and the
 * other types at 400, so "Email address" looked lighter than "First name" in the newsletter form.
 * Typed values now share one weight; placeholders use the regular weight so they read as hints.
 */
.with_frm_style input[type="email"],
.with_frm_style input[type="tel"],
.with_frm_style input[type="number"],
.with_frm_style input[type="url"],
.with_frm_style textarea {
	font-weight: 500;
}

.with_frm_style input::placeholder,
.with_frm_style textarea::placeholder {
	font-weight: 400;
	opacity: 1;
}

/* Newsletter signup ("Stay in touch"): the 206px fields looked lost on phones. */
@media (max-width: 767px) {
	#form_subscribe-form .frm_form_field,
	#form_subscribe-form .frm_submit {
		width: 100%;
		max-width: 420px;
		margin-left: auto;
		margin-right: auto;
	}

	#form_subscribe-form input[type="text"],
	#form_subscribe-form input[type="email"],
	#form_subscribe-form .frm_button_submit {
		width: 100%;
		max-width: none;
	}
}