/**
 * Gravity Forms Custom Styles
 *
 * Custom CSS overrides for Gravity Forms to match the Root Structure Figma design.
 * Uses !important where needed to override @tailwindcss/forms plugin defaults.
 *
 * @package Root_Structure
 */

/* ====================================
   Form Card Container
   ==================================== */

.gform_wrapper.gravity-theme {
	font-family: "freight-text-pro", Georgia, serif;
}

/* ====================================
   Form Heading
   ==================================== */

.gform_wrapper .gform_heading .gform_title {
	font-family: "Instrument Serif", Georgia, serif !important;
	font-size: 32px !important;
	line-height: 1.2;
	letter-spacing: normal !important;
	color: #60471D;
	font-weight: 400;
	margin-bottom: 8px;
}

.gform_wrapper .gform_heading .gform_description {
	font-family: "freight-text-pro", Georgia, serif;
	font-size: 18px;
	line-height: 1.5;
	color: rgba(96, 71, 29, 0.65);
	margin-bottom: 32px;
}

/* ====================================
   Field Labels
   ==================================== */

.gform_wrapper .gfield_label,
.gform_wrapper .gform-field-label {
	font-family: "degular-text", system-ui, -apple-system, sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	color: rgba(96, 71, 29, 0.5) !important;
	margin-bottom: 6px;
}

/* Hide parent "Name" label — Figma shows "First Name" / "Last Name" directly */
.gform_wrapper .gfield--type-name > .gfield_label {
	display: none !important;
}

/* Sub-labels (First Name, Last Name) */
.gform_wrapper .ginput_container label,
.gform_wrapper .name_first label,
.gform_wrapper .name_last label {
	font-family: "degular-text", system-ui, -apple-system, sans-serif !important;
	font-weight: 600 !important;
	font-size: 12px !important;
	text-transform: uppercase !important;
	letter-spacing: 2px !important;
	color: rgba(96, 71, 29, 0.5) !important;
}

/* Hide "(Required)" text indicator */
.gform_wrapper .gfield_required {
	display: none !important;
}

/* ====================================
   Text Inputs, Email, Phone
   Override @tailwindcss/forms defaults
   ==================================== */

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"] {
	background: transparent !important;
	border: none !important;
	border-bottom: 1.5px solid rgba(96, 71, 29, 0.15) !important;
	border-radius: 0 !important;
	box-shadow: none !important;
	font-family: "freight-text-pro", Georgia, serif !important;
	font-size: 18px !important;
	color: #60471D !important;
	padding: 8px 0 !important;
	outline: none !important;
	transition: border-color 0.2s ease;
	-webkit-appearance: none;
}

.gform_wrapper input[type="text"]::placeholder,
.gform_wrapper input[type="email"]::placeholder,
.gform_wrapper input[type="tel"]::placeholder {
	color: rgba(96, 71, 29, 0.35) !important;
}

.gform_wrapper input[type="text"]:focus,
.gform_wrapper input[type="email"]:focus,
.gform_wrapper input[type="tel"]:focus {
	border-bottom-color: #5A823B !important;
	border-bottom-width: 2px !important;
	box-shadow: none !important;
	outline: none !important;
	ring: none !important;
	--tw-ring-shadow: none !important;
}

/* Green label on focus */
.gform_wrapper .gfield:focus-within > .gfield_label,
.gform_wrapper .gfield:focus-within .gform-field-label {
	color: #5A823B !important;
}

/* Also color sub-labels green on focus */
.gform_wrapper .gfield:focus-within .ginput_container label {
	color: #5A823B !important;
}

/* ====================================
   Checkbox Pills (Project Type)
   Overrides GF framework's inline-grid layout on .gchoice
   ==================================== */

.gf-project-type-pills .ginput_container,
.gform_wrapper .gf-project-type-pills .ginput_container {
	padding: 0 !important;
	margin: 0 !important;
}

.gf-project-type-pills .gfield_checkbox,
.gform-theme--framework .gf-project-type-pills.gfield--type-choice .gfield_checkbox {
	display: flex !important;
	flex-direction: row !important;
	flex-wrap: wrap !important;
	justify-content: flex-start !important;
	align-items: center !important;
	gap: 8px !important;
	padding: 0 !important;
	margin: 0 !important;
}

.gf-project-type-pills .gfield_checkbox .gchoice,
.gform-theme--framework .gf-project-type-pills.gfield--type-choice .gchoice,
.gform-theme--framework .gfield--type-choice.gf-project-type-pills .gchoice {
	display: block !important;
	width: auto !important;
	min-height: unset !important;
	min-inline-size: unset !important;
	max-inline-size: unset !important;
	inline-size: auto !important;
	margin: 0 !important;
	padding: 0 !important;
	grid-template-columns: unset !important;
	gap: 0 !important;
}

.gf-project-type-pills .gfield_checkbox input[type="checkbox"] {
	position: absolute !important;
	opacity: 0 !important;
	width: 0 !important;
	height: 0 !important;
	pointer-events: none !important;
}

.gf-project-type-pills .gfield_checkbox label,
.gform-theme--framework .gf-project-type-pills.gfield--type-choice .gfield_checkbox label {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	height: 36px !important;
	max-height: 36px !important;
	min-height: unset !important;
	padding: 0 16px !important;
	margin: 0 !important;
	border-radius: 9999px !important;
	border: 1px solid rgba(96, 71, 29, 0.15) !important;
	background: #F7F5ED !important;
	color: rgba(96, 71, 29, 0.7) !important;
	font-family: "degular-text", system-ui, -apple-system, sans-serif !important;
	font-weight: 500 !important;
	font-size: 15px !important;
	line-height: 1 !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	cursor: pointer !important;
	transition: all 0.2s ease;
	user-select: none;
}

.gf-project-type-pills .gfield_checkbox label:hover {
	border-color: rgba(96, 71, 29, 0.3) !important;
}

.gf-project-type-pills .gfield_checkbox .gchoice:has(input:checked) label,
.gf-project-type-pills .gfield_checkbox .gchoice.pill-selected label {
	background: #5A823B !important;
	border-color: #5A823B !important;
	color: #fff !important;
}

/* ====================================
   Textarea (Message)
   ==================================== */

.gform_wrapper textarea.large,
.gform_wrapper textarea {
	border: 1.5px solid rgba(96, 71, 29, 0.15) !important;
	border-radius: 6px !important;
	background: transparent !important;
	font-family: "freight-text-pro", Georgia, serif !important;
	font-size: 18px !important;
	color: #60471D !important;
	padding: 12px 16px !important;
	min-height: 120px !important;
	box-shadow: none !important;
	outline: none !important;
	resize: vertical;
	transition: border-color 0.2s ease;
}

.gform_wrapper textarea::placeholder {
	color: rgba(96, 71, 29, 0.35) !important;
}

.gform_wrapper textarea:focus {
	border-color: #5A823B !important;
	box-shadow: none !important;
	outline: none !important;
	--tw-ring-shadow: none !important;
}

/* ====================================
   Submit Button
   ==================================== */

.gform_wrapper .gform_button,
.gform_wrapper input[type="submit"] {
	background: #5A823B !important;
	color: #fff !important;
	height: 56px !important;
	padding: 0 24px !important;
	border: none !important;
	border-radius: 0 !important;
	font-family: "degular-text", system-ui, -apple-system, sans-serif !important;
	font-weight: 600 !important;
	font-size: 16px !important;
	cursor: pointer;
	transition: background-color 0.2s ease;
	width: auto !important;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper input[type="submit"]:hover {
	background: #4a6e31 !important;
}

/* ====================================
   Layout Overrides
   ==================================== */

.gform_wrapper.gravity-theme .gfield {
	margin-bottom: 24px;
}

/* Name field — side by side */
.gform_wrapper .ginput_complex.ginput_container_name {
	display: grid !important;
	grid-template-columns: 1fr 1fr !important;
	gap: 24px;
}

/* Validation error styling */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error textarea {
	border-color: #c53030 !important;
}

.gform_wrapper .gfield_error .gfield_label {
	color: #c53030 !important;
}

.gform_wrapper .validation_message {
	font-family: "degular-text", system-ui, -apple-system, sans-serif;
	font-size: 13px;
	color: #c53030;
	margin-top: 4px;
}

/* ====================================
   Mobile
   ==================================== */

@media (max-width: 640px) {
	.gform_wrapper .ginput_complex.ginput_container_name {
		grid-template-columns: 1fr !important;
		gap: 16px;
	}

	.gform_wrapper .gform_heading .gform_title {
		font-size: 26px !important;
	}

	.gf-project-type-pills .gfield_checkbox {
		gap: 6px !important;
	}

	.gf-project-type-pills .gfield_checkbox label {
		font-size: 14px !important;
		height: 32px !important;
		padding: 0 12px !important;
	}
}