/* Contact Us page (post ID 8258) — styled to the definitive design
   (TE/contact-page.jpg): centred eyebrow + "Contact Us" title, left-aligned
   intro contact info, the Gravity Form (#3) laid out in two columns, then a
   full-width grey "Why Choose Travel Editions?" band reusing the shared
   reusable block ref 1767 (icon cards flipped to white on the grey band).
   Field styling matches the sitewide thick-border convention (2px #292929,
   56px height) already used on the brochure drawer / tour enquiry sidebar. */

/* ============================================================
   Title + eyebrow
   ============================================================ */
/* The design is flat white from the title down to the grey "Why Choose"
   band. By default this page is boxed (content-style-boxed → a white article
   with a drop shadow sitting on Kadence's grey page background), which shows
   a grey surround behind the title and a boxed edge around the content. Make
   the page background white and drop the box shadow so it reads as one
   seamless white area; the Why Choose band keeps its own grey, the footer
   its own blue. */
body.page-id-8258,
body.page-id-8258 #wrapper,
body.page-id-8258 #inner-wrap {
	background-color: #fff;
}

body.page-id-8258 .entry.content-bg {
	box-shadow: none;
}

/* Kadence paints a light blue-grey background behind the page title hero
   (.entry-hero-container-inner). The design has the title on plain white, so
   drop the band here. */
body.page-id-8258 .entry-hero-container-inner {
	background: transparent;
}

/* Tighten the gap between the title and the first intro paragraph to 40px.
   By default the title header carries a 200px min-height (which left ~74px
   of dead space below the title) and the content area a further 80px
   margin-top — 154px total. Collapse the min-height (keeping ~46px of top
   breathing room via padding so the eyebrow doesn't jam under the nav), zero
   the title's own bottom margin, and set the content gap to exactly 40px. */
body.page-id-8258 .entry-header.page-title {
	min-height: 0;
	padding-top: 46px;
}

body.page-id-8258 .content-area {
	margin-top: 40px;
}

body.page-id-8258 .entry-title {
	margin: 0;
	text-align: center;
	color: #333;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: clamp(2.2rem, 3.4vw, 3rem);
	font-weight: 400;
	line-height: 1.15;
}

body.page-id-8258 .entry-title::before {
	content: "Reach out to Travel Editions";
	display: block;
	margin: 0 0 0.5rem;
	color: #016d9c;
	font-family: "Roboto", sans-serif;
	font-size: 16px;
	font-weight: 700;
	letter-spacing: 0.12em;
	line-height: 1.4;
	text-transform: uppercase;
}

/* ============================================================
   Intro contact info (plain <p> blocks, left aligned)
   ============================================================ */
body.page-id-8258 .entry-content > p {
	margin: 0 0 1.35rem;
	color: #333;
	font-family: "Roboto", sans-serif;
	text-align: left;
}

/* Phone / email links read as dark body text per the design (still
   clickable), underlining only on hover. */
body.page-id-8258 .entry-content > p a {
	color: #333;
	text-decoration: none;
}

body.page-id-8258 .entry-content > p a:hover,
body.page-id-8258 .entry-content > p a:focus-visible {
	text-decoration: underline;
	text-underline-offset: 3px;
}

/* Tighten the gap between a bold label ("Call us on") and its value, and
   give a little more air before the next labelled block. */
body.page-id-8258 .entry-content > p strong {
	color: #222;
}

/* ============================================================
   Gravity Form #3 — two-column layout
   ============================================================ */
#gform_wrapper_3 {
	margin-top: 2.25rem;
}

#gform_wrapper_3 .gform_heading {
	display: none;
}

/* Field list becomes a 2-column grid; fields are placed explicitly so the
   left column holds Forename/Surname/Email/Phone and the right column holds
   Reason/Previous-customer/Enquiry, exactly as the design shows. */
#gform_wrapper_3 .gform_fields {
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 40px;
	row-gap: 0;
	align-items: start;
}

/* Left column */
#gform_wrapper_3 #field_3_1 { grid-column: 1; grid-row: 1; }
#gform_wrapper_3 #field_3_2 { grid-column: 1; grid-row: 2; }
#gform_wrapper_3 #field_3_3 { grid-column: 1; grid-row: 3; }
#gform_wrapper_3 #field_3_4 { grid-column: 1; grid-row: 4; }

/* Right column — the enquiry textarea spans the last two left-column rows so
   its box lines up with the bottom of the Phone field. */
#gform_wrapper_3 #field_3_5 { grid-column: 2; grid-row: 1; }
#gform_wrapper_3 #field_3_6 { grid-column: 2; grid-row: 2; }
#gform_wrapper_3 #field_3_7 { grid-column: 2; grid-row: 3 / 5; display: flex; flex-direction: column; }

/* reCAPTCHA field (invisible v2) — keep in flow but out of the way. */
#gform_wrapper_3 #field_3_8 { grid-column: 1 / 3; grid-row: 5; }

#gform_wrapper_3 .gfield_label {
	display: block;
	margin: 0 0 8px;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	font-family: "Roboto", sans-serif;
}

#gform_wrapper_3 .gfield_required_asterisk {
	color: #222;
}

#gform_wrapper_3 .gfield {
	margin-bottom: 22px;
}

#gform_wrapper_3 .ginput_container input[type="text"],
#gform_wrapper_3 .ginput_container input[type="email"],
#gform_wrapper_3 .ginput_container input[type="tel"],
#gform_wrapper_3 .ginput_container select {
	width: 100%;
	box-sizing: border-box;
	height: 56px;
	padding: 0 16px;
	border: 2px solid #292929;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	color: #222;
	font-family: "Roboto", sans-serif;
	appearance: auto;
}

/* Native <select> vertical centring — line-height alone doesn't hold on
   Windows Chrome/Edge (see brochure-request-drawer.css for the same fix). */
#gform_wrapper_3 .ginput_container select {
	padding-top: 17px;
	padding-bottom: 17px;
	line-height: normal;
}

/* Textarea fills the tall right-column cell (rows 3–4). */
#gform_wrapper_3 #field_3_7 .ginput_container {
	flex: 1;
	display: flex;
}

#gform_wrapper_3 .ginput_container textarea {
	width: 100%;
	box-sizing: border-box;
	min-height: 150px;
	padding: 14px 16px;
	border: 2px solid #292929;
	border-radius: 4px;
	background: #fff;
	font-size: 16px;
	color: #222;
	font-family: "Roboto", sans-serif;
	resize: vertical;
}

#gform_wrapper_3 .gfield--type-checkbox .gfield_label {
	margin-bottom: 10px;
}

#gform_wrapper_3 .gfield_checkbox {
	margin: 0;
}

#gform_wrapper_3 .gfield_checkbox .gchoice {
	display: flex;
	align-items: flex-start;
	gap: 10px;
}

#gform_wrapper_3 .gfield_checkbox input[type="checkbox"] {
	flex-shrink: 0;
	width: 18px;
	height: 18px;
	margin-top: 2px;
}

#gform_wrapper_3 .gfield_checkbox label {
	font-size: 15px;
	color: #222;
}

/* Submit button sits under the right column (aligned to its left edge). */
#gform_wrapper_3 .gform_footer {
	margin: 8px 0 0;
	padding: 0;
	margin-left: calc(50% + 20px);
	justify-content: flex-start;
}

#gform_wrapper_3 .gform_button {
	display: flex;
	align-items: center;
	justify-content: center;
	flex-shrink: 0;
	width: 284px;
	height: 60px;
	padding: 0;
	border: 0;
	border-radius: 4px;
	background: #006d9e;
	color: #fff;
	font-size: 20px;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	cursor: pointer;
}

#gform_wrapper_3 .gform_button:hover,
#gform_wrapper_3 .gform_button:focus-visible {
	background: #005a82;
	color: #fff;
}

#gform_wrapper_3 .gform_confirmation_message {
	font-size: 15px;
	line-height: 1.6;
	color: #1e5b32;
	background: #e6f4ea;
	padding: 12px 14px;
	border-radius: 6px;
	font-family: "Roboto", sans-serif;
}

#gform_wrapper_3 .validation_error {
	margin-bottom: 20px;
	padding: 12px 14px;
	border-radius: 6px;
	font-size: 14px;
	line-height: 1.5;
	background: #fbe9e7;
	color: #8c2c1f;
	border: 0;
}

#gform_wrapper_3 .gfield_validation_message {
	margin-top: 6px;
	font-size: 13px;
	color: #8c2c1f;
}

/* ============================================================
   "Why Choose Travel Editions?" grey band (reusable block ref 1767)
   ============================================================ */
body.page-id-8258 .te-contact-why {
	margin-top: 3.5rem;
	background: #eeedea;
}

body.page-id-8258 .te-contact-why > .kt-row-column-wrap {
	max-width: 1148px;
	margin-left: auto;
	margin-right: auto;
	padding: 64px var(--global-content-edge-padding, 1.5rem);
}

/* The three feature cards inside block 1767 carry a grey background by
   default (for tour pages, where they sit on white). On this grey band they
   need to be white to read as cards. */
body.page-id-8258 .te-contact-why .kadence-column1767_e20091-75 > .kt-inside-inner-col,
body.page-id-8258 .te-contact-why .kadence-column1767_1fc557-2c > .kt-inside-inner-col,
body.page-id-8258 .te-contact-why .kadence-column1767_7e5fee-1f > .kt-inside-inner-col {
	background-color: #fff !important;
}

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 767px) {
	#gform_wrapper_3 .gform_fields {
		grid-template-columns: 1fr;
		column-gap: 0;
	}

	/* Stack every field in source order on mobile. */
	#gform_wrapper_3 #field_3_1,
	#gform_wrapper_3 #field_3_2,
	#gform_wrapper_3 #field_3_3,
	#gform_wrapper_3 #field_3_4,
	#gform_wrapper_3 #field_3_5,
	#gform_wrapper_3 #field_3_6,
	#gform_wrapper_3 #field_3_7,
	#gform_wrapper_3 #field_3_8 {
		grid-column: 1;
		grid-row: auto;
	}

	#gform_wrapper_3 .gform_footer {
		margin-left: 0;
	}

	#gform_wrapper_3 .gform_button {
		width: 100%;
		max-width: 284px;
	}

	body.page-id-8258 .te-contact-why > .kt-row-column-wrap {
		padding: 44px var(--global-content-edge-padding, 1.5rem);
	}
}