/*
 * Gravity Forms styling to match the Norlon design. Targets GF's own output
 * (plugin markup) — exempt from the "no authored content CSS" rule. Driven by
 * the global palette tokens. Contact form (#1) = dark; Plans form (#2) = light.
 */

/* ---- shared ---- */
.gform_wrapper form { --nr-red: var(--wp--preset--color--norlon-red, #DE3412); }
.gform_wrapper .gform_fields { gap: 20px 24px; }
.gform_wrapper .gfield_label {
	font-family: "Montserrat", sans-serif; font-weight: 800; font-size: 11px;
	letter-spacing: 0.15em; text-transform: uppercase; margin-bottom: 8px;
}
.gform_wrapper .gfield_required { color: var(--wp--preset--color--norlon-red, #DE3412); }
/* R2-measured (Contact 208:643, 1:1): text fields are 44px tall and the message
   textarea is 171px — ours were 38 / 192. The 44px also matches the custom select
   trigger, so every control on the row lines up. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="password"],
.gform_wrapper textarea,
.gform_wrapper select {
	width: 100%; border: 0; border-radius: 0; font-family: "Open Sans", sans-serif;
	font-size: 14px; padding: 12px 16px; box-shadow: none;
}
/* !important is load-bearing: Gravity Forms 3.0's theme framework ships a
   `.gform-theme--framework :where(…) { height: unset }` reset that our height was
   losing to, so the fields rendered at their natural 38px. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="password"],
.gform_wrapper select { height: 44px !important; }
.gform_wrapper textarea { min-height: 171px !important; height: 171px !important; }
/* Select affordance (45px red square + white chevron) is defined once, site-wide,
   in sections.css so Contact / Plans / Projects filters all match. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper .gform_footer button,
.gform_wrapper .gform_footer .gform_button,
.gform_wrapper button.gform_button,
.gform_wrapper input.gform_button {
	border: 0 !important; border-radius: 0 !important;
	background: var(--wp--preset--color--button-red, #E73613) !important;
	color: #fff !important; font-family: "Montserrat", sans-serif !important; font-weight: 700 !important;
	font-size: 11px !important; letter-spacing: 0.09em !important; text-transform: uppercase !important;
	padding: 14px 28px !important; cursor: pointer; width: auto !important;
	transition: background-color .22s ease;
}
.gform_wrapper .gform_footer { justify-content: flex-end; display: flex; }
/* Match the site buttons: fill fades to ink on hover (was Norlon-red). */
.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper .gform_footer input[type="submit"]:focus-visible,
.gform_wrapper .gform_footer button:hover,
.gform_wrapper .gform_footer button:focus-visible,
.gform_wrapper .gform_footer .gform_button:hover,
.gform_wrapper .gform_footer .gform_button:focus-visible,
.gform_wrapper button.gform_button:hover,
.gform_wrapper input.gform_button:hover { background: var(--wp--preset--color--ink, #231F20) !important; }

/* ---- Contact form (#1) — dark stripe ---- */
#gform_wrapper_1 .gfield_label { color: #fff; }
#gform_wrapper_1 input[type="text"],
#gform_wrapper_1 input[type="email"],
#gform_wrapper_1 textarea,
#gform_wrapper_1 select { background: var(--wp--preset--color--field-gray-dark, #535353); color: #fff; }
#gform_wrapper_1 input::placeholder,
#gform_wrapper_1 textarea::placeholder { color: var(--wp--preset--color--placeholder-dark, #AEAEAE); }

/* Submit-confirmation message. On success GF swaps the form for this message inside
   the same wrapper — which sits on the dark Reach Out stripe, where it inherited the
   ink colour and was invisible. Make it white. Scoped to .norlon-contact so the
   Plans form confirmation (on a light background) stays dark. */
.norlon-contact .gform_confirmation_message,
.norlon-contact .gform_confirmation_wrapper { color: #fff; }

/* ---- Plans Rooms form (#2) — light ---- */
#gform_wrapper_2 .gfield_label { color: var(--wp--preset--color--ink, #231F20); }
#gform_wrapper_2 input[type="text"],
#gform_wrapper_2 input[type="password"],
#gform_wrapper_2 select { background: var(--wp--preset--color--field-gray-light, #F0F0F0); color: var(--wp--preset--color--ink, #231F20); }
#gform_wrapper_2 input::placeholder { color: var(--wp--preset--color--placeholder-light, #898989); }

/* map image sits flush, square */
.norlon-map img { width: 100%; height: auto; display: block; }

@media (max-width: 767px) {
	.gform_wrapper .gform_footer { justify-content: stretch; }
	.gform_wrapper .gform_footer input[type="submit"] { width: 100%; }
}