/* ============================================================
   Guided day: How To Book, the guiding enquiry (template-parts/guiding/
   enquiry.php; inc/contact.php handles it). Design: Guiding -
   individual page v3, desktop y 2396-3455, mobile y 4477-5914
   (gu-design.md 6). The fields themselves are the Contact form's
   (contact-form.css: 48px, Grey Dark outline, 8px radius, labels,
   errors, the thank-you); this file lays them out. Loaded on the
   guiding pages only (inc/enqueue.php).

   - Cream section with the house section padding and the shared
     section header (eyebrow, H2, intro); the form 20px under the intro,
     as drawn (the shared header's 32-48px gap is for card rows).
   - Desktop (>= 1024): two columns 32px apart across the container
     (the file's form stops 40px short of its right edge: drift), in
     the design's order - Name | Email, Phone, Objective | Recent
     Experience, Group Size | Preferred Window, Message - then the
     "SEND ENQUIRY" button (.btn--lg) centred and the privacy line,
     12px Navy, centred 20px under it.
   - Tablets (768-1023, not designed): Name | Email two across; the
     long answers and the two choices full width, so the placeholders
     and the window names (up to about 46 characters) never clip; the
     button centred.
   - Phones: one column, the button full width (as drawn).
   - Placeholders 16px as drawn (the Contact form's are 14, as its
     file). The objective is a text box: two lines on phones, where
     its placeholder wraps (the mobile file: 66px), one line from 768;
     where the browser can, it grows with what is typed.
   - Selects: the design's Navy chevron 21px from the right edge; the
     placeholder choice ("Select") Grey Dark until a choice is made.
   - Not drawn: the note under the window ("We confirm your date after
     checking the diary."), Grey Dark 14px.
   ============================================================ */

/* The hero's button ("Enquire About ...") lands here. As on the course page's
   #dates (offering-dates.css): only while the header floats does the
   heading need room under the bar. */
html:has(.site-header.is-floating) .guiding-enquiry {
	scroll-margin-top: max(0px, var(--header-bar-h) + var(--header-focus-clearance) - var(--section-pad-y));
}

.guiding-enquiry__header {
	margin-bottom: var(--enquiry-header-gap);
}

/* ---------- The grid ---------- */

.guiding-enquiry__grid {
	display: grid;
	grid-template-columns: minmax(0, 1fr);
	align-items: start;
}

@media (min-width: 768px) {
	.guiding-enquiry__grid {
		grid-template-columns: repeat(2, minmax(0, 1fr));
		column-gap: var(--enquiry-column-gap);
	}

	.guiding-enquiry__field--wide {
		grid-column: 1 / -1;
	}
}

@media (min-width: 768px) and (max-width: 1023px) {
	.guiding-enquiry__field--tablet-wide {
		grid-column: 1 / -1;
	}
}

/* ---------- Fields ---------- */

.guiding-enquiry .contact-form__input::placeholder {
	font-size: var(--fs-body);
}

/* A one-line box whose placeholder or answer is too long for it ends in
   an ellipsis rather than a clipped word (Recent Experience at 320-360px). */
.guiding-enquiry input.contact-form__input,
.guiding-enquiry input.contact-form__input::placeholder {
	text-overflow: ellipsis;
}

.guiding-enquiry__input--short {
	height: calc(2 * var(--lh-body) * 1em + 2 * var(--enquiry-area-pad) + 2 * var(--border-hairline));
	min-height: var(--field-height);
	padding-block: var(--enquiry-area-pad);
	resize: vertical;
}

@media (min-width: 768px) {
	.guiding-enquiry__input--short {
		height: var(--field-height);
	}
}

/* Where the browser sizes a text box to its text (and, empty, to its
   placeholder), the objective box grows as it is filled in. */
@supports (field-sizing: content) {
	.guiding-enquiry__input--short {
		height: auto;
		max-height: 240px;
		field-sizing: content;
		resize: none;
	}
}

.guiding-enquiry__select {
	position: relative;
	display: block;
}

.guiding-enquiry__select .contact-form__input {
	padding-right: var(--enquiry-select-pad-end);
	overflow: hidden;
	text-overflow: ellipsis;
	white-space: nowrap;
	cursor: pointer;
}

/* Until a choice is made the select shows its placeholder choice, Grey
   Dark as drawn; the choices in the list stay Navy. */
.guiding-enquiry__select .contact-form__input:has(option[value=""]:checked) {
	color: var(--color-text-muted);
}

.guiding-enquiry__select option {
	color: var(--color-text);
}

.guiding-enquiry__caret {
	position: absolute;
	top: 50%;
	right: var(--enquiry-caret-inset);
	color: var(--color-text);
	transform: translateY(-50%);
	pointer-events: none;
}

.guiding-enquiry__hint {
	margin: 6px 0 0;
	color: var(--color-text-muted);
	font-size: var(--fs-small);
	line-height: 1.4;
}

/* ---------- The button and the privacy line ---------- */

.guiding-enquiry__actions {
	text-align: center;
}

.guiding-enquiry__submit {
	width: 100%;
}

.guiding-enquiry__submit:focus-visible {
	outline-color: var(--color-focus-light);
}

@media (min-width: 768px) {
	.guiding-enquiry__submit {
		width: auto;
	}
}

.guiding-enquiry__consent {
	margin: 20px 0 0;
	color: var(--color-text);
	font-size: var(--fs-label);
	line-height: var(--lh-body);
}

/* Navy and underlined, as drawn; deep orange on hover and focus. */
.guiding-enquiry__consent a {
	color: var(--color-link);
	text-decoration: underline;
	white-space: nowrap; /* "Privacy Policy" never splits across lines */
	transition: color var(--transition);
}

@media (hover: hover) {
	.guiding-enquiry__consent a:hover {
		color: var(--color-link-accent);
	}
}

.guiding-enquiry__consent a:focus-visible {
	color: var(--color-link-accent);
	outline-color: var(--color-focus-light);
}

/* ---------- Windows High Contrast ---------- */

/* The chevron is an inline SVG drawn in the text colour, which forced
   colours leave as it is (Navy on the user's page colour): the system's
   text colour instead. */
@media (forced-colors: active) {
	.guiding-enquiry__caret {
		color: var(--color-forced-line);
	}
}