/**
 * Gravity Forms base
 *
 * Migrated from Elementor Custom Code: WP Customizer Additional CSS (custom_css post 129).
 * This was the fourth place form styling lived. Migrated verbatim to preserve
 * appearance across forms 2 and 3; form 1 is styled in style.css and wins on
 * specificity via #gform_wrapper_1.
 */

.gform_fields{
	column-gap: 10px !important;
    row-gap: 10px !important;
}

.gfield input, 
.gfield textarea{
	    background-color: #000000B3 !important;
    border-radius: 8px 8px 8px 8px !important;
	font-family: "Poppins", Sans-serif !important;
    font-size: 16px !important;
    font-weight: 500 !important;
    font-style: normal !important;
    line-height: 30px !important;
	color: #FFFFFF !important;
}

.ginput_container_textarea .gfield_description{
	display:none;
}

.gform_button{
	    background-color: #000000B3 !important;
    color: #ffffff !important;
    transition-duration: 200ms !important;
	    font-family: "Poppins", Sans-serif !important;
    font-size: 18px !important;
    font-weight: 700 !important;
    text-transform: uppercase !important;
	border-radius: 10px 10px 10px 10px !important;
    padding: 18px 35px 18px 35px !important;
}
.gform_button:hover{
	background:#000 !important;
}

.gform_confirmation_message{
	    color: white !important;
}

/* =====================================================================
   Contact form (Gravity Forms, form 1) - rebrand styling

   Styled through the Gravity Forms Orbital theme's own CSS custom
   properties, so hover, focus, validation and choice states inherit the
   brand instead of falling back to stock Gravity Forms blue (#204ce5)
   and stock red (#c02b0a).

   The variable block needs higher specificity than the one Gravity Forms
   prints inline (#gform_wrapper_1[data-form-index="0"].gform-theme),
   because that block sits later in the document. Adding the second theme
   class takes this to 1,3,0 and wins on specificity, not source order.
   ===================================================================== */

#gform_wrapper_1.gform-theme.gform-theme--orbital[data-form-index="0"],
[data-parent-form="1_0"] {
	/* Primitives - these cascade into most derived Orbital values */
	--gf-color-primary:               var(--sp-color-accent);
	--gf-color-primary-rgb:           255, 52, 0;
	--gf-color-primary-contrast:      var(--sp-color-primary);
	--gf-color-primary-contrast-rgb:  0, 0, 0;
	--gf-color-primary-darker:        #D62C00;
	--gf-color-primary-lighter:       #FF5C33;
	--gf-color-danger:                var(--sp-color-accent);

	/* Field surface */
	--gf-ctrl-bg-color:               var(--sp-color-surface);
	--gf-ctrl-bg-color-focus:         var(--sp-color-surface);
	--gf-ctrl-color:                  var(--sp-color-ink);
	--gf-ctrl-border-color:           var(--sp-color-warm-gray);
	--gf-ctrl-border-color-focus:     var(--sp-color-accent);

	/* Labels, descriptions, required marker */
	--gf-ctrl-label-color-primary:    var(--sp-color-ink);
	--gf-ctrl-label-color-secondary:  var(--sp-color-ink);
	--gf-ctrl-label-color-tertiary:   var(--sp-color-muted-text);
	--gf-ctrl-label-color-req:        var(--sp-color-accent);
	--gf-ctrl-desc-color:             var(--sp-color-muted-text);

	/* Radius - steps below the ~24px card the form sits in */
	--gf-radius:                      var(--sp-radius-md);
	--gf-ctrl-radius:                 var(--sp-radius-md);
	--gf-ctrl-btn-radius:             var(--sp-radius-md);

	/* Type */
	--gf-ctrl-font-family:            var(--sp-font);
	--gf-ctrl-font-size:              16px;
	--gf-ctrl-label-font-size-primary: 16px;
	--gf-ctrl-label-font-weight-primary: 500;
	--gf-ctrl-placeholder-font-size:  16px;
}

/* Field-to-field rhythm */
.gform-theme--foundation .gform_fields {
	row-gap: var(--sp-space-2) !important;
}

/* ---- Fields: text, email, tel, url, number, textarea, select ----
   Scoped to the form ID so these beat the Orbital defaults, and kept
   !important because Elementor's kit CSS also targets these elements. */

#gform_wrapper_1 .gfield input[type="text"],
#gform_wrapper_1 .gfield input[type="email"],
#gform_wrapper_1 .gfield input[type="tel"],
#gform_wrapper_1 .gfield input[type="url"],
#gform_wrapper_1 .gfield input[type="number"],
#gform_wrapper_1 .gfield textarea,
#gform_wrapper_1 .gfield .gfield_select {
	background-color: var(--sp-color-surface) !important;
	color: var(--sp-color-ink) !important;
	border: 1px solid var(--sp-color-warm-gray) !important;
	border-radius: var(--sp-radius-md) !important;
	font-family: var(--sp-font) !important;
	font-size: 16px !important;   /* keep at 16px: iOS Safari zooms below this */
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 30px !important;
	padding: 14px 18px !important;
	min-height: 50px !important;  /* clears the 44px touch-target minimum */
	transition:
		border-color var(--sp-dur) var(--sp-ease),
		box-shadow   var(--sp-dur) var(--sp-ease),
		background-color var(--sp-dur) var(--sp-ease) !important;
}

#gform_wrapper_1 .gfield .gfield_select {
	display: flex;
	align-items: center;
}

/* Placeholder. These carry the visible field name on this form, since
   most labels are set to hidden_label, so the colour has to clear 4.5:1
   rather than sit at a decorative weight. #7A7264 measures 4.75:1. */
#gform_wrapper_1 .gfield input::placeholder,
#gform_wrapper_1 .gfield textarea::placeholder {
	color: var(--sp-color-muted-text) !important;
	opacity: 1 !important;
}

/* Hover */
#gform_wrapper_1 .gfield input[type="text"]:hover,
#gform_wrapper_1 .gfield input[type="email"]:hover,
#gform_wrapper_1 .gfield input[type="tel"]:hover,
#gform_wrapper_1 .gfield input[type="url"]:hover,
#gform_wrapper_1 .gfield input[type="number"]:hover,
#gform_wrapper_1 .gfield textarea:hover,
#gform_wrapper_1 .gfield .gfield_select:hover {
	border-color: var(--sp-color-ink-soft) !important;
}

/* Focus. Previously the base border rule carried !important and beat
   Gravity Forms' own focus border, so focusing a field changed nothing
   visible. This restores a focus indicator (WCAG 2.4.7). The transparent
   outline keeps it visible in Windows High Contrast mode, where
   box-shadow is dropped. */
#gform_wrapper_1 .gfield input[type="text"]:focus,
#gform_wrapper_1 .gfield input[type="email"]:focus,
#gform_wrapper_1 .gfield input[type="tel"]:focus,
#gform_wrapper_1 .gfield input[type="url"]:focus,
#gform_wrapper_1 .gfield input[type="number"]:focus,
#gform_wrapper_1 .gfield textarea:focus,
#gform_wrapper_1 .gfield .gfield_select:focus {
	border-color: var(--sp-color-accent) !important;
	box-shadow: 0 0 0 3px var(--sp-accent-ring) !important;
	outline: 2px solid transparent !important;
	outline-offset: 2px !important;
}

/* ---- Validation ----
   Distinguished from focus by border weight and a background wash, not
   by hue alone, since both states use the accent.

   These selectors mirror the base field selectors, add .gfield_error, and
   carry the .gform-theme wrapper class, which lands them at 1,4,1. That is
   deliberate on both sides: matching .gfield_error on its own is only 1,1,1
   and loses to the 1,2,1 base rule, and stopping at 1,3,1 ties the :hover
   rule below, which let hover repaint an invalid field's border and hide
   the error. At 1,4,1 the error state outranks both hover and focus, while
   the focus ring (a box-shadow no other rule sets) still shows through. */

#gform_wrapper_1.gform-theme .gfield.gfield_error input[type="text"],
#gform_wrapper_1.gform-theme .gfield.gfield_error input[type="email"],
#gform_wrapper_1.gform-theme .gfield.gfield_error input[type="tel"],
#gform_wrapper_1.gform-theme .gfield.gfield_error input[type="url"],
#gform_wrapper_1.gform-theme .gfield.gfield_error input[type="number"],
#gform_wrapper_1.gform-theme .gfield.gfield_error textarea,
#gform_wrapper_1.gform-theme .gfield.gfield_error .gfield_select {
	border: 2px solid var(--sp-color-accent) !important;
	background-color: var(--sp-accent-wash) !important;
}

#gform_wrapper_1 .gfield_validation_message,
#gform_wrapper_1 .validation_message {
	color: var(--sp-color-error-text) !important;
	font-family: var(--sp-font) !important;
	font-size: 14px !important;
	font-weight: 500 !important;
	background: transparent !important;
	border: 0 !important;
	padding: 4px 0 0 !important;
}

#gform_wrapper_1 .gform_validation_errors {
	border: 1px solid var(--sp-color-accent) !important;
	background: var(--sp-accent-wash) !important;
	border-radius: var(--sp-radius-md) !important;
	box-shadow: none !important;
}

#gform_wrapper_1 .gform_validation_errors > h2 {
	color: var(--sp-color-error-text) !important;
	font-family: var(--sp-font) !important;
}

/* ---- Labels ---- */

#gform_wrapper_1 .gfield_label {
	font-family: var(--sp-font) !important;
	font-size: 16px !important;
	font-weight: 500 !important;
	font-style: normal !important;
	line-height: 30px !important;
	color: var(--sp-color-ink) !important;
}

/* Labels on this form already carry a literal "*", so the generated
   required marker is suppressed to avoid a doubled asterisk. */
#gform_wrapper_1 .gfield_label .gfield_required span {
	display: none;
}

/* Character counter under the message field */
#gform_wrapper_1 .ginput_counter,
#gform_wrapper_1 .charleft {
	color: var(--sp-color-muted-text) !important;
	font-family: var(--sp-font) !important;
	font-size: 14px !important;
}

/* ---- Submit button ----
   Black at rest, accent on hover. Hover text flips to black because
   white on #FF3400 measures 3.66:1 and fails AA at this size, while
   black on #FF3400 measures 5.74:1 and passes. */

#gform_wrapper_1 .gform_button,
#gform_wrapper_1 input.gform_button,
#gform_wrapper_1 button.gform_button {
	background-color: var(--sp-color-primary) !important;
	color: var(--sp-color-surface) !important;
	border: 2px solid var(--sp-color-primary) !important;
	border-radius: var(--sp-radius-md) !important;
	font-family: var(--sp-font) !important;
	font-size: 16px !important;
	font-weight: 700 !important;
	text-transform: uppercase !important;
	letter-spacing: 1px !important;
	padding: 16px 40px !important;
	min-height: 50px !important;
	cursor: pointer !important;
	transition:
		background-color var(--sp-dur) var(--sp-ease),
		border-color     var(--sp-dur) var(--sp-ease),
		color            var(--sp-dur) var(--sp-ease),
		transform        var(--sp-dur) var(--sp-ease) !important;
}

#gform_wrapper_1 .gform_button:hover,
#gform_wrapper_1 input.gform_button:hover,
#gform_wrapper_1 button.gform_button:hover {
	background-color: var(--sp-color-accent) !important;
	border-color: var(--sp-color-accent) !important;
	color: var(--sp-color-primary) !important;
	transform: translateY(-1px) !important;
}

#gform_wrapper_1 .gform_button:focus-visible,
#gform_wrapper_1 input.gform_button:focus-visible,
#gform_wrapper_1 button.gform_button:focus-visible {
	outline: 2px solid var(--sp-color-accent) !important;
	outline-offset: 3px !important;
}

#gform_wrapper_1 .gform_button:active,
#gform_wrapper_1 input.gform_button:active,
#gform_wrapper_1 button.gform_button:active {
	transform: translateY(0) !important;
}

/* ---- Reduced motion ---- */

@media (prefers-reduced-motion: reduce) {
	#gform_wrapper_1 *,
	#gform_wrapper_1 *::before,
	#gform_wrapper_1 *::after {
		transition-duration: 0.01ms !important;
		animation-duration: 0.01ms !important;
		animation-iteration-count: 1 !important;
	}
	#gform_wrapper_1 .gform_button:hover {
		transform: none !important;
	}
}