/* Brochure request drawer — right-side sliding panel.
   Structure mirrors assets/tour-book-modal.css but slides in from the
   right instead of a centered dialog. */

.te-brochure-drawer {
	position: fixed;
	inset: 0;
	z-index: 100000;
	display: none;
}

.te-brochure-drawer.is-open {
	display: block;
}

.te-brochure-drawer__backdrop {
	position: absolute;
	inset: 0;
	background: transparent;
}

/* Panel width/padding pixel-measured off brox-page-overlay.jpg at the
   established 0.4959 design-to-live scale factor (see
   psd-comparison-methodology memory): drawer spans 1375 design-px of the
   3456px canvas (682px live), with 108px design-px (54px live) padding on
   each side and 316px design-px (157px live) above the title. Previously a
   flat, unmeasured 480px/40px-44px guess. */
.te-brochure-drawer__panel {
	position: fixed;
	top: 0;
	right: -680px;
	bottom: 0;
	z-index: 1;
	width: min(100%, 680px);
	overflow-y: auto;
	background: #fff;
	box-shadow: -4px 0 20px rgba(0, 0, 0, 0.15);
	padding: 150px 54px 54px;
	font-family: "Roboto", sans-serif;
	transition: right 0.3s;
}

.te-brochure-drawer.is-open .te-brochure-drawer__panel {
	right: 0;
}

/* Close icon pixel-measured off brox-page-overlay.jpg: a bold near-black
   "X" glyph with a ~63x64 design-px bbox (~32px live) — was a much smaller,
   grey (#9aa3ad) "×" character. font-size is set well above the target
   glyph size since a "×" character's own glyph bbox renders notably
   smaller than its font-size. */
.te-brochure-drawer__close {
	position: absolute;
	top: 18px;
	right: 20px;
	border: 0;
	background: transparent;
	color: #292929;
	font-size: 42px;
	line-height: 1;
	cursor: pointer;
	padding: 4px;
}

.te-brochure-drawer__close:hover {
	color: #555;
}

.te-brochure-drawer__title {
	margin: 0 40px 18px 0;
	font-family: minion-pro, "Minion Pro", Georgia, serif;
	font-size: 30px;
	font-weight: 400;
	line-height: 1.25;
	color: #222;
}

.te-brochure-drawer__intro {
	margin: 0 0 26px;
	font-size: 15px;
	line-height: 1.6;
	color: #555;
}

/* Gravity Forms form #2 ("Brochure Request") markup, pixel-matched to
   brox-page-overlay.jpg (the drawer's own PSD comp) at the established
   0.4959 design-to-live scale factor. Scoped to #gform_wrapper_2 only.

   The PSD shows First Name/Surname as two separate stacked full-width
   fields (each with its own label above), not a single "Name" field split
   into side-by-side boxes — achieved here by keeping GF's Name field
   (preserves the existing entry field IDs the Marketing Radar forwarder
   reads) but hiding its group legend and laying its two sub-inputs out in
   a single column, each styled identically to every other field's label.
   The form's subLabelPlacement was also switched to "above" (via GFAPI)
   and requiredIndicator to "asterisk" (both default to text-below/
   "(Required)", which the PSD doesn't use) so the sub-labels and required
   marker match the design without extra CSS overrides fighting GF's
   default markup. */
#gform_wrapper_2 .gform_heading {
	display: none;
}

#gform_wrapper_2 .gfield_label,
#gform_wrapper_2 .gform-field-label--type-sub {
	display: block;
	margin: 0 0 14px;
	font-size: 16px;
	font-weight: 400;
	color: #222;
	font-family: "Roboto", sans-serif;
}

/* Hide the Name field's own group legend ("Name*") — the PSD shows no
   group label, only the two sub-labels below. */
#gform_wrapper_2 #field_2_1 > .gfield_label {
	display: none;
}

/* Asterisk matches the label's own colour in the PSD, not GF core's
   default red. */
#gform_wrapper_2 .gfield_required_asterisk {
	color: #222;
}

/* Hiding the Name field's group legend above also removed its required
   asterisk (GF only marks the whole composite field required once, not
   each sub-input) — restore one on each sub-label to match the PSD's
   "First Name*" / "Surname*" styling. */
#gform_wrapper_2 .ginput_complex.ginput_container--name .gform-field-label--type-sub::after {
	content: "*";
	color: #222;
	margin-left: 2px;
}

#gform_wrapper_2 .gfield {
	margin-bottom: 33px;
}

#gform_wrapper_2 .gform_fields {
	gap: 0;
}

#gform_wrapper_2 .gfield--type-hidden {
	margin-bottom: 0;
}

#gform_wrapper_2 .ginput_container input[type="text"],
#gform_wrapper_2 .ginput_container input[type="email"],
#gform_wrapper_2 .ginput_container select {
	width: 100%;
	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;
}

/* <select> text was rendering flush against the top of the box instead of
   vertically centred. Tried line-height:56px (matching the box height)
   first — the usual cross-browser fix — but it didn't hold on Windows
   Chrome/Edge, which lays out a native <select>'s closed-state text using
   its own OS-level control metrics and ignores line-height there even
   though it works fine for a plain <input>. Vertical padding, which
   participates in the actual box layout rather than a text metric the
   native control can disregard, is the reliable fix. 17px top/bottom
   (against the 2px border) leaves an 18px content strip for the 16px text
   within the 56px border-box height, centred. */
#gform_wrapper_2 .ginput_container select {
	padding-top: 17px;
	padding-bottom: 17px;
	line-height: normal;
}

/* First Name / Surname stacked in a single column, each sub-input given
   the same field-to-field rhythm (33px) as every other field on the form,
   so the pair reads as two ordinary stacked fields rather than one
   composite "Name" row. GF's own .gform-grid-row class on this container
   sets flex-wrap:wrap, which — combined with flex-direction:column —
   caused each sub-input to shrink to its content width and wrap into a
   new "column" instead of stacking full-width; flex-wrap:nowrap +
   align-items:stretch + explicit width:100% on each sub-input forces the
   plain single-column stack the PSD shows. */
#gform_wrapper_2 .ginput_complex.ginput_container--name {
	display: flex;
	flex-direction: column;
	flex-wrap: nowrap;
	align-items: stretch;
}

#gform_wrapper_2 .ginput_complex.ginput_container--name .name_first,
#gform_wrapper_2 .ginput_complex.ginput_container--name .name_last {
	width: 100%;
}

#gform_wrapper_2 .ginput_complex.ginput_container--name .name_first {
	margin-bottom: 33px;
}

#gform_wrapper_2 .gform_footer {
	margin: 8px 0 0;
	padding: 0;
	justify-content: flex-start;
}

/* The PSD's button is sized to its text/padding, not stretched full-width
   like the field inputs above it — left-aligned with them, 284px wide by
   60px tall (measured off brox-page-overlay.jpg). Set as an explicit width
   rather than relying on padding to shrink-wrap the content: this is a real
   `<input type="submit">`, a replaced element, whose intrinsic sizing
   doesn't reliably shrink-wrap padding the way a `<button>`'s would once
   Gravity Forms' own theme framework CSS (`var(--gf-local-display)`) gets
   involved. */
#gform_wrapper_2 .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: 28px;
	font-weight: 700;
	font-family: "Roboto", sans-serif;
	cursor: pointer;
}

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

#gform_wrapper_2 .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_2 .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_2 .gfield_validation_message {
	margin-top: 6px;
	font-size: 13px;
	color: #8c2c1f;
}

body.te-brochure-drawer-open {
	overflow: hidden;
}

@media (max-width: 480px) {
	.te-brochure-drawer__panel {
		padding: 32px 24px;
	}
}