/*
 * Gravity Forms styling.
 *
 * Every Gravity Form gets the house field styles below (navy on white).
 * Two container block styles restyle the forms inside them:
 *   - "Form card"   (core/group, core/column): periwinkle card, as on Contact.
 *   - "Form inline" (core/group): underline email + text button, as in the footer.
 * Colours run through --ramen-form-* variables so a variant only swaps values.
 * !important is needed throughout to beat the Orbital theme's control sizing.
 */

/* ---------- Defaults: any Gravity Form ---------- */

.gform_wrapper {
	--gf-ctrl-radius: 20px;
	--ramen-form-text: var(--wp--preset--color--contrast);
	--ramen-form-field-border: #d1d5db;
	--ramen-form-radio-hover: #e5e7eb;
	--ramen-form-btn-bg: var(--wp--preset--color--contrast);
	--ramen-form-btn-color: var(--wp--preset--color--base);
	--ramen-form-btn-hover-bg: var(--wp--preset--color--accent);
	--ramen-form-btn-hover-color: var(--wp--preset--color--base);
	margin: 0;
	color: var(--ramen-form-text);
}

.gform_wrapper .gform_fields {
	row-gap: 16px !important;
}

.gform_wrapper .gfield_label,
.gform_wrapper .gfield_label.gform-field-label,
.gform_wrapper legend.gfield_label {
	font-family: var(--wp--preset--font-family--chivo-mono);
	font-size: var(--wp--preset--font-size--small) !important;
	font-weight: 400 !important;
	line-height: 1.4 !important;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ramen-form-text) !important;
	margin-bottom: 4px !important;
}

.gform_wrapper .gform-field-label__text {
	padding: 0 !important;
}

.gform_wrapper .gfield_required {
	color: inherit !important;
	font: inherit !important;
	margin: 0 !important;
	padding-left: 0 !important;
}

.gform_wrapper .gfield_required .gfield_required_text {
	display: none;
}

.gform_wrapper .gfield_required::after {
	content: "*";
}

.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="url"],
.gform_wrapper input[type="number"],
.gform_wrapper select,
.gform_wrapper textarea {
	width: 100%;
	block-size: 50px !important;
	min-block-size: 0 !important;
	padding: 13px 17px !important;
	border: 1px solid var(--ramen-form-field-border) !important;
	border-radius: 20px !important;
	background: var(--wp--preset--color--base) !important;
	color: var(--wp--preset--color--contrast) !important;
	font-family: var(--wp--preset--font-family--helvetica-now);
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: 20px !important;
	box-shadow: none !important;
}

.gform_wrapper textarea {
	block-size: 190px !important;
	padding: 8px 12px !important;
	resize: vertical;
}

.gform_wrapper input:focus-visible,
.gform_wrapper select:focus-visible,
.gform_wrapper textarea:focus-visible {
	outline: 2px solid var(--wp--preset--color--contrast);
	outline-offset: 2px;
}

.gform_wrapper .gfield--type-radio {
	padding-top: 6px;
}

.gform_wrapper .gfield--type-radio .gfield_radio {
	display: flex !important;
	flex-flow: row wrap !important;
	gap: 8px 32px !important;
}

.gform_wrapper .gchoice {
	display: flex !important;
	align-items: center;
	gap: 8px !important;
	inline-size: auto !important;
}

.gform_wrapper .gchoice input[type="radio"] {
	appearance: none;
	flex: none;
	inline-size: 20px !important;
	block-size: 20px !important;
	margin: 0 !important;
	border-radius: 50% !important;
	border: 1px solid #d1d5db !important;
	background: var(--wp--preset--color--base) !important;
	box-shadow: none !important;
	cursor: pointer;
}

.gform_wrapper .gchoice input[type="radio"]::before {
	display: none !important;
}

.gform_wrapper .gchoice input[type="radio"]:hover:not(:checked) {
	background: var(--ramen-form-radio-hover) !important;
}

.gform_wrapper .gchoice input[type="radio"]:checked {
	border: 4px solid var(--wp--preset--color--contrast) !important;
}

.gform_wrapper .gchoice label {
	font-family: var(--wp--preset--font-family--chivo-mono);
	font-size: var(--wp--preset--font-size--base) !important;
	font-weight: 400 !important;
	line-height: 1.3 !important;
	letter-spacing: 0.6px;
	text-transform: uppercase;
	color: var(--ramen-form-text) !important;
	margin: 0 !important;
	cursor: pointer;
}

.gform_wrapper .gform_footer {
	margin-top: 32px !important;
	padding: 0 !important;
}

.gform_wrapper .gform_button,
.gform_wrapper .gform_footer input[type="submit"] {
	block-size: 50px !important;
	padding: 13px 25px !important;
	border: 0 !important;
	border-radius: 6px !important;
	background: var(--ramen-form-btn-bg) !important;
	color: var(--ramen-form-btn-color) !important;
	box-shadow: none !important;
	font-family: var(--wp--preset--font-family--helvetica-now) !important;
	font-size: var(--wp--preset--font-size--base) !important;
	font-weight: 400 !important;
	line-height: 24px !important;
	cursor: pointer;
	/* Live submit buttons (contact + newsletter) have no hover change, so none is set here. */
	transition: background-color 0.2s ease, color 0.2s ease;
}

.gform_wrapper .gform_validation_errors,
.gform_wrapper .validation_message {
	border-radius: 12px;
}

.gform_confirmation_message {
	font-size: var(--wp--preset--font-size--large);
	padding: 48px 0;
}

/* ---------- "Form card" container style ---------- */

.is-style-form-card {
	box-sizing: border-box;
	background: var(--wp--preset--color--accent);
	border-radius: 20px;
	padding: 32px 32px 26px;
	color: var(--wp--preset--color--base);
}

.is-style-form-card .gform_wrapper {
	--ramen-form-text: var(--wp--preset--color--base);
	--ramen-form-field-border: transparent;
	--ramen-form-radio-hover: #ccc;
	--ramen-form-btn-bg: #e0f2fe;
	--ramen-form-btn-color: var(--wp--preset--color--contrast);
	--ramen-form-btn-hover-bg: var(--wp--preset--color--base);
	--ramen-form-btn-hover-color: var(--wp--preset--color--contrast);
}

/* ---------- "Form inline" container style ---------- */

.is-style-form-inline .gform_wrapper form {
	display: flex;
	align-items: stretch;
	gap: 0;
}

.is-style-form-inline .gform-body {
	flex: 1 1 auto;
}

.is-style-form-inline .gfield_label {
	position: absolute !important;
	width: 1px;
	height: 1px;
	overflow: hidden;
	clip: rect(0 0 0 0);
}

.is-style-form-inline .gform_wrapper input[type="email"],
.is-style-form-inline .gform_wrapper input[type="text"] {
	max-width: 280px;
	block-size: 51px !important;
	margin: 0 0 10px !important;
	padding: 16px 12px 16px 0 !important;
	border: 0 !important;
	border-bottom: 1px solid var(--wp--preset--color--contrast-2) !important;
	border-radius: 0 !important;
	background: transparent !important;
	font-family: var(--wp--preset--font-family--chivo-mono) !important;
	font-size: var(--wp--preset--font-size--base) !important;
	font-weight: 300 !important;
	line-height: 19px !important;
	letter-spacing: 0.64px !important;
	text-transform: uppercase;
}

.is-style-form-inline .gform_wrapper input::placeholder {
	color: #999;
	opacity: 1;
	font: inherit !important;
	letter-spacing: inherit !important;
}

.is-style-form-inline .gform_wrapper .gform_footer {
	display: flex !important;
	margin: 0 !important;
}

.is-style-form-inline .gform_wrapper .gform_button {
	block-size: auto !important;
	align-self: stretch;
	align-items: center !important;
	margin: 0 0 10px !important;
	padding: 9px 15px !important;
	border-radius: 0 !important;
	background: none !important;
	color: var(--wp--preset--color--contrast) !important;
	font-size: var(--wp--preset--font-size--small) !important;
	line-height: inherit !important;
}

.is-style-form-inline .gform_confirmation_message {
	font-size: var(--wp--preset--font-size--small);
	padding: 0;
}