/* ==========================================================================
   Gravity Forms -> the source site's contact form
   Union Grove port, 2026-08-25.

   The source site hand-rolls its contact form with `.form-contact__*` markup.
   Gravity Forms emits its own structure, so the ported CSS in ug-components.css
   never matches anything. This file is the bridge: the same visual spec,
   re-expressed against Gravity Forms' selectors.

   Measured on https://www.uniongrovefamilydental.com/contact at 1440:
     column      744px wide (768 group - 2x12 padding), centred
     row gap     32px (prod: .form-contact__group margin-top)
     label       Lexend 16/200, line-height 24.64px, #000, no margin
     input       Lexend 16/400, lh 18.4px, padding 24px 12px, #fff,
                 border-bottom 8px solid #abc3b0 ONLY, radius 0  -> 74.4px tall
     textarea    same, 148px tall
     submit      Lexend 16/600, ls 1px, UPPERCASE, #3d5f39 on #fbf9f8,
                 radius 32px, padding 24px 56px  -> 68px tall
     two-up      phone | email, 360px each, 24px gutter


   SPECIFICITY / LOAD ORDER
   Gravity Forms enqueues its theme CSS when the shortcode renders, i.e. in the
   BODY - measured at offset ~31.5k on /contact, while this file is in the head
   at ~15.4k. So GF always loses ties on source order... in our favour only if
   we also match its specificity. Its button rule is

     .gform-theme.gform-theme--framework.gform_wrapper .button:where(...)

   which is (0,4,0) - `:where()` adds nothing - and it drives every value
   through --gf-local-* custom properties. A plain
   `.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_button` is (0,3,0) and loses.
   Hence the .gform-theme.gform-theme--framework prefix below: it lands at
   (0,5,0) and wins outright, with no !important anywhere.

   Scoped to .block-contact-form so it cannot leak into any other form
   (the Bricks-native form element, admin, or a future GF form elsewhere).
   ========================================================================== */

.block-contact-form .gform_wrapper {
	max-width: 744px;
	margin: 0 auto;
	text-align: left;
}

/* Layout. Prod stacks full-width groups and puts phone+email in a --row group.
   GF ships a 12-column grid; a plain 2-column one reproduces prod's geometry
   exactly (744 - 24 gutter) / 2 = 360, which is prod's half-field width. */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_fields {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	column-gap: 24px;
	row-gap: 32px;
}

.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield {
	grid-column: 1 / -1;
}

.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield--width-half {
	grid-column: span 1;
}

/* Label */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield_label {
	font-family: Lexend, helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: 200;
	line-height: 1.54;
	letter-spacing: normal;
	color: #000;
	margin: 0;
	text-transform: none;
	text-align: left;
}

/* Prod's labels read "Name", "Phone", … with no required marker. */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield_required {
	display: none;
}

/* Fields. The 8px bottom border is the whole look — no box, no radius. */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="text"],
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="email"],
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="tel"],
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework textarea {
	font-family: Lexend, helvetica, arial, sans-serif;
	font-size: 16px;
	font-weight: 400;
	line-height: 18.4px;
	color: #000;
	background-color: #fff;
	border: 0;
	border-bottom: 8px solid #abc3b0;
	border-radius: 0;
	padding: 24px 12px;
	width: 100%;
	box-shadow: none;
	/* GF sets height/min-height from --gf-local-height; prod's 74.4px comes
	   purely from 24+24 padding + 18.4 line-height + the 8px border. */
	height: auto;
	min-height: 0;
}

.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework textarea {
	height: 148px;
	resize: vertical;
	/* GF has a textarea-specific line-height that beats the shared field rule. */
	line-height: 18.4px;
}

.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="text"]:focus,
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="email"]:focus,
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework input[type="tel"]:focus,
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework textarea:focus {
	border-bottom-color: #3d5f39;
	outline: none;
	box-shadow: none;
}
.gform-theme.gform-theme--framework.gform_wrapper .button {
	    filter: drop-shadow(4px 4px 4px rgba(61, 95, 57, .6));
		transition: background .2s ease, filter .2s ease, box-shadow .2s ease, scale .2s ease, transform .2s ease;
}

/* Submit.

   The button is the one control that cannot be restyled by selector. GF's rule

     .gform-theme.gform-theme--framework.gform_wrapper .button:where(...)

   outranks anything reasonable - verified empirically: injecting an identical
   (0,5,0) rule LAST in the document still lost. Every value it applies is read
   from a --gf-local-* property fed by --gf-ctrl-btn-*, so overriding those
   variables is both the sanctioned route and the only one that works without
   !important. It also means hover / focus / disabled stay internally
   consistent instead of needing separate overrides.

   Prod: Lexend 16/600, ls 1px, UPPERCASE, #3d5f39 on #fbf9f8, radius 32px,
   padding 24px 56px, no border, no shadow -> 68px tall.
   Hover lifted from .form-contact__submit-button:hover in ug-components.css. */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework {
	/* prod's textarea line-height is 18.4px on a 16px font = 1.15 */
	--gf-ctrl-textarea-line-height: 1.15;

	--gf-ctrl-btn-bg-color-primary: #fbf9f8;
	--gf-ctrl-btn-color-primary: #3d5f39;
	--gf-ctrl-btn-border-color-primary: transparent;
	--gf-ctrl-btn-border-width-primary: 0;
	--gf-ctrl-btn-radius: 32px;
	--gf-ctrl-btn-padding-y: 24px;
	--gf-ctrl-btn-padding-x-md: 56px;
	--gf-ctrl-btn-size-md: 68px;
	--gf-ctrl-btn-font-size-md: 16px;
	--gf-ctrl-btn-font-weight: 600;
	--gf-ctrl-btn-letter-spacing: 1px;
	--gf-ctrl-btn-text-transform: uppercase;
	--gf-ctrl-btn-line-height: normal;
	--gf-ctrl-btn-shadow: none;

	--gf-ctrl-btn-bg-color-hover-primary: #3d5f39;
	--gf-ctrl-btn-color-hover-primary: #fbf9f8;
	--gf-ctrl-btn-border-color-hover-primary: transparent;
	--gf-ctrl-btn-shadow-hover: inset 4px 4px 4px rgba(51, 51, 51, .3);

	--gf-ctrl-btn-bg-color-focus-primary: #3d5f39;
	--gf-ctrl-btn-color-focus-primary: #fbf9f8;
	--gf-ctrl-btn-border-color-focus-primary: transparent;
	--gf-ctrl-btn-shadow-focus: none;
}

.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_footer {
	margin: 32px 0 0;
	padding: 0;
	justify-content: center;
}

/* Validation, styled to sit with the rest rather than GF's default red box. */
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield_description.validation_message,
.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gform_validation_errors {
	font-family: Lexend, helvetica, arial, sans-serif;
	font-size: 14px;
	font-weight: 300;
	background: none;
	border: 0;
	box-shadow: none;
	padding: 4px 12px 0;
	margin: 0;
	color: #a8322d;
}

@media (max-width: 767px) {
	.block-contact-form .gform_wrapper.gform-theme.gform-theme--framework .gfield--width-half {
		grid-column: 1 / -1;
	}
}