/* ============================================================
   WMC House — Forminator
   ============================================================

   Forminator hides the native <select> (1px tall, screen-reader only) and
   renders a select2 widget in its place. Styling `select` therefore does
   nothing at all — the grey box on screen is `.select2-selection`. Everything
   below targets what is actually painted.

   Scoped to .forminator-ui so nothing leaks into the editor or another
   plugin's markup.
   ============================================================ */

.forminator-ui.forminator-custom-form {
	--f-line: color-mix(in srgb, var(--ink) 22%, transparent);
	--f-line-on: var(--accent);
	--f-h: 3.1rem;
}

/* === Rhythm ===
   One gap between fields, everywhere. Forminator's own row margins are
   inconsistent between field types, which is what made the column look like it
   had been assembled from spare parts. */
.forminator-ui .forminator-row { margin: 0 0 var(--s-2) 0 !important; }
.forminator-ui .forminator-row:last-of-type { margin-bottom: 0 !important; }
.forminator-ui .forminator-row.forminator-no-margin { margin-bottom: var(--s-2) !important; }
.forminator-ui .forminator-field { width: 100%; }

/* === Labels === */
.forminator-ui .forminator-label {
	display: block !important;
	width: 100% !important;
	font-family: var(--font-text) !important;
	font-size: var(--eyebrow-size) !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	color: var(--ink-soft) !important;
	margin: 0 0 .35rem 0 !important;
}
.forminator-ui .forminator-required { color: var(--accent) !important; }

/* === Text fields ===
   A rule under the field rather than a box: fewer strokes, and the eye runs
   down one baseline instead of around twelve rectangles. */
.forminator-ui input[type="text"],
.forminator-ui input[type="email"],
.forminator-ui input[type="url"],
.forminator-ui input[type="number"],
.forminator-ui input[type="tel"],
.forminator-ui textarea,
.forminator-ui .forminator-input,
.forminator-ui .forminator-textarea {
	font-family: var(--font-text) !important;
	font-size: var(--body-size) !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--f-line) !important;
	border-radius: 0 !important;
	padding: 0 0 .55rem 0 !important;
	height: auto !important;
	min-height: 2.4rem !important;
	width: 100% !important;
	box-shadow: none !important;
	transition: border-color .3s ease;
}

.forminator-ui input::placeholder,
.forminator-ui textarea::placeholder { color: color-mix(in srgb, var(--ink) 34%, transparent) !important; }

.forminator-ui input:focus,
.forminator-ui textarea:focus {
	outline: none !important;
	border-bottom-color: var(--f-line-on) !important;
	border-bottom-width: 1px !important;
}

/* Forminator sets --forminator-textarea-min-height inline (140px), which is a
   lot of empty box for a 180-character note. */
.forminator-ui textarea,
.forminator-ui .forminator-textarea { --forminator-textarea-min-height: 5.5rem !important; min-height: 5.5rem !important; resize: vertical; padding-top: .4rem !important; }
.forminator-ui .forminator-description { display: block; text-align: right; font-size: var(--small-size) !important; color: var(--ink-soft) !important; margin-top: .3rem !important; }

/* === Select ===
   The visible control is select2's span, not the select. Same hairline as the
   text fields, with the default chevron replaced by a drawn one. */
/* select2 writes an inline width from the hidden select's content, which is
   how "Mr." ended up in a 53px box. A declaration with !important outranks an
   inline style that has none. */
.forminator-ui .select2-container,
.forminator-ui span.select2-container.forminator-select { width: 100% !important; min-width: 100% !important; }
.forminator-ui .select2-container .select2-selection--single {
	height: auto !important;
	background: transparent !important;
	border: 0 !important;
	border-bottom: 1px solid var(--f-line) !important;
	border-radius: 0 !important;
	transition: border-color .3s ease;
}
.forminator-ui .select2-container .select2-selection__rendered {
	font-family: var(--font-text) !important;
	font-size: var(--body-size) !important;
	line-height: 1.4 !important;
	color: var(--ink) !important;
	padding: 0 1.6rem .55rem 0 !important;
	height: auto !important;
	min-height: 2.4rem !important;
	display: flex !important;
	align-items: flex-end !important;
}
.forminator-ui .select2-container.select2-container--open .select2-selection--single { border-bottom-color: var(--f-line-on) !important; }

/* Drawn chevron. b/borders rotated 45deg reads cleaner at this size than an
   icon font, and it inherits colour for free. */
.forminator-ui .select2-container .select2-selection__arrow { top: auto !important; bottom: .9rem !important; right: .2rem !important; height: auto !important; width: auto !important; }
/* The chevron is an icon-font span, not select2's default <b>. */
.forminator-ui .select2-container .select2-selection__arrow b,
.forminator-ui .select2-container .select2-selection__arrow .forminator-icon-chevron-down { display: none !important; }
.forminator-ui .select2-container .select2-selection__arrow::after {
	content: ""; display: block; width: 7px; height: 7px;
	border-right: 1px solid var(--ink); border-bottom: 1px solid var(--ink);
	transform: rotate(45deg) translate(-1px, -1px);
	transition: transform .3s var(--ease);
}
.forminator-ui .select2-container--open .select2-selection__arrow::after { transform: rotate(-135deg) translate(-2px, -2px); }

/* The dropdown is appended to <body>, so it cannot be scoped to the form. */
.select2-container--open .select2-dropdown {
	background: var(--nav-bg) !important;
	color: var(--nav-ink) !important;
	border: 0 !important;
	border-radius: 8px !important;
	box-shadow: 0 22px 60px rgba(0,0,0,.22) !important;
	overflow: hidden;
}
.select2-container--open .select2-results__option {
	font-family: var(--font-text) !important;
	font-size: var(--small-size) !important;
	color: color-mix(in srgb, var(--nav-ink) 78%, transparent) !important;
	padding: .6rem 1rem !important;
	background: transparent !important;
}
.select2-container--open .select2-results__option--highlighted,
.select2-container--open .select2-results__option[aria-selected="true"] {
	background: color-mix(in srgb, var(--nav-ink) 12%, transparent) !important;
	color: var(--nav-ink) !important;
}
.select2-container--open .select2-search--dropdown .select2-search__field {
	background: transparent !important; color: var(--nav-ink) !important;
	border: 0 !important; border-bottom: 1px solid color-mix(in srgb, var(--nav-ink) 25%, transparent) !important;
	padding: .5rem 0 !important; margin: .4rem 1rem !important; width: calc(100% - 2rem) !important;
}

/* === Date ===
   Forminator puts the icon BEFORE the input inside .forminator-input-with-icon,
   so it sat on top of the placeholder. Anchor it to that wrapper, on the right,
   and give the text its own room. */
.forminator-ui .forminator-input-with-icon { position: relative !important; display: block !important; }
.forminator-ui .forminator-icon-calendar {
	position: absolute !important; right: 0 !important; bottom: .6rem !important;
	left: auto !important; top: auto !important;
	color: var(--ink-soft) !important; pointer-events: none; z-index: 1;
}
.forminator-ui input.forminator-datepicker { padding-right: 1.8rem !important; }

/* === Submit === */
.forminator-ui .forminator-button.forminator-button-submit,
.forminator-ui .forminator-button-submit {
	font-family: var(--font-text) !important;
	font-size: var(--eyebrow-size) !important;
	font-weight: 500 !important;
	letter-spacing: .16em !important;
	text-transform: uppercase !important;
	background: var(--accent) !important;
	color: var(--accent-ink) !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 1.05rem 2.4rem !important;
	margin-top: var(--s-3) !important;
	cursor: pointer;
	transition: transform .4s var(--ease), filter .3s ease;
}
.forminator-ui .forminator-button-submit:hover { transform: translateY(-2px); filter: brightness(1.08); }

/* === Messages === */
.forminator-ui .forminator-response-message { font-size: var(--small-size) !important; border-radius: 0 !important; }
.forminator-ui .forminator-error-message { color: var(--accent) !important; font-size: var(--small-size) !important; margin-top: .3rem !important; }
.forminator-ui .forminator-char-counter { font-size: var(--small-size) !important; color: var(--ink-soft) !important; }

@media (prefers-reduced-motion: reduce) {
	.forminator-ui .forminator-button-submit:hover { transform: none; }
	.forminator-ui .select2-container .select2-selection__arrow::after { transition: none; }
}

/* The invisible reCAPTCHA still reserves a row. Nothing to show, so take the
   space back rather than leaving a gap the guest cannot explain. */
.forminator-ui .forminator-field-captcha { margin: 0 !important; }
.forminator-ui .forminator-row:has(> .forminator-field-captcha) { margin-bottom: 0 !important; }
.forminator-ui .forminator-row-last { margin-top: 0 !important; }

/* ============================================================
   Form card
   ============================================================

   On the original page the enquiry form sat in its own white section against
   the cream ground, and that contrast is what made it read as the thing to do
   rather than as more page. Same idea here, done properly: a paper card
   lifted off the ground, generous internal space, and the accent button as the
   only saturated thing inside it.

   Add "form-card" as an Additional CSS class on the column or group holding
   the form. */
.form-card {
	background: var(--paper, #fff);
	padding: clamp(1.5rem, 3vw, 2.75rem);
	border-radius: 12px;
	box-shadow: 0 1px 2px rgba(0,0,0,.04), 0 18px 50px rgba(0,0,0,.09);
}

/* The card is already a lighter ground, so the hairlines have to work a little
   harder to stay visible on it. */
.form-card .forminator-ui.forminator-custom-form { --f-line: color-mix(in srgb, var(--ink) 26%, transparent); }

.form-card > h2:first-child,
.form-card > .wp-block-heading:first-child { margin-top: 0; }

/* A rule under the heading gives the card a top edge to sit against, so the
   type does not float in the middle of a white rectangle. */
.form-card > h2 { padding-bottom: .8rem; border-bottom: 1px solid color-mix(in srgb, var(--ink) 14%, transparent); margin-bottom: var(--s-2); }

.form-card .forminator-ui .forminator-button-submit { width: 100%; text-align: center; }

@media (max-width: 780px) {
	.form-card { padding: 1.25rem; border-radius: 10px; }
}