/*
 * Ollie Owl — Gravity Forms styling.
 *
 * Gravity 2.10 renders with its "Orbital" theme, which exposes its design as
 * CSS custom properties. Overriding those is far more durable than fighting
 * Gravity's own selectors: a plugin update can rename a class, but the custom
 * property contract is the documented, supported surface.
 *
 * Values below were measured from the theme's existing form fields on
 * /contact-us/ rather than picked by eye:
 *   accent  #593097   (input borders)
 *   radius  0         (the theme uses square corners throughout)
 *   padding 12px
 *   font    Open Sans, 16px inputs / 18px labels, weight 700
 */

/* ------------------------------------------------------------------ tokens */

/*
 * Gravity prints its variables inline on
 *   #gform_wrapper_2[data-form-index="0"].gform-theme, [data-parent-form="2_0"]
 * which is an ID-based selector. No practical class selector can outrank that,
 * so the custom properties are marked !important. Custom properties honour
 * !important, and this is the one place it is genuinely warranted rather than
 * a shortcut — we are overriding generated markup we do not control.
 *
 * [data-parent-form] is included because Gravity renders some controls (date
 * pickers, for one) outside the wrapper and scopes them with that attribute.
 */
[id^="gform_wrapper_"],
[id^="gform_wrapper_"].gform-theme,
[data-parent-form] {
	/* Brand purple, measured from the theme's own input borders. */
	--gf-color-primary:              #593097 !important;
	--gf-color-primary-rgb:          89, 48, 151 !important;
	--gf-color-primary-darker:       #47257a !important;
	--gf-color-primary-lighter:      #6e3fb5 !important;
	--gf-color-primary-contrast:     #ffffff !important;
	--gf-color-primary-contrast-rgb: 255, 255, 255 !important;

	--gf-ctrl-btn-bg-color-primary:        #593097 !important;
	--gf-ctrl-btn-bg-color-hover-primary:  #47257a !important;
	--gf-ctrl-btn-border-color-primary:    #593097 !important;
	--gf-ctrl-btn-color-primary:           #ffffff !important;

	--gf-color-secondary:          #ffffff !important;
	--gf-color-secondary-contrast: #593097 !important;

	--gf-color-in-ctrl:             #ffffff !important;
	--gf-color-in-ctrl-contrast:    #000000 !important;
	--gf-color-in-ctrl-primary:     #593097 !important;
	--gf-color-in-ctrl-primary-rgb: 89, 48, 151 !important;
	--gf-ctrl-border-color:         #593097 !important;

	--gf-ctrl-label-color-primary:   #000000 !important;
	--gf-ctrl-label-color-secondary: #555555 !important;

	/* The theme is square-cornered throughout; Gravity defaults to 3px. */
	--gf-radius:           0 !important;
	--gf-ctrl-btn-radius:  0 !important;

	/* Gravity's default control height is 38px. With the theme's 12px padding
	   that leaves less room than the line box needs, which clipped the select's
	   selected option. 48px fits comfortably. */
	--gf-ctrl-size:          48px !important;
	--gf-ctrl-size-md:       48px !important;
	--gf-ctrl-btn-size:      48px !important;
	--gf-ctrl-btn-size-md:   48px !important;
	--gf-ctrl-btn-font-size: 16px !important;
	--gf-ctrl-btn-padding-x: 28px !important;
}

/* ------------------------------------------------------- type and spacing */

/* Inherit the page font rather than Gravity's stack, so the form reads as part
   of the site. Open Sans is now served locally. */
.gform_wrapper.gform-theme--framework,
.gform_wrapper input,
.gform_wrapper select,
.gform_wrapper textarea,
.gform_wrapper button {
	font-family: 'Open Sans', Helvetica, Arial, sans-serif;
}

.gform_wrapper .gfield_label {
	font-size: 18px;
	font-weight: 700;
	color: #000;
	margin-bottom: 8px;
}

/* The theme sets font-weight:700 on inputs. That is heavy for entered text and
   makes a filled field look like a label, so keep entry text at normal weight
   while the labels stay bold. */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	font-size: 16px;
	font-weight: 400;
	color: #000;
	background: #fff;
	border: 1px solid #593097;
	border-radius: 0;
	padding: 12px;
	line-height: 1.4;
}

.gform_wrapper input:focus,
.gform_wrapper select:focus,
.gform_wrapper textarea:focus {
	outline: 2px solid #593097;
	outline-offset: 1px;
	border-color: #593097;
}

.gform_wrapper .gfield_required {
	color: #593097;
}

/* --------------------------------------------------------------- buttons */

/* A filled purple button, matching the site's other calls to action and the
   cookie banner. The old Ninja Forms submit was white with black text, which
   read as a secondary control rather than the primary action on the page. */
.gform_wrapper .gform_button,
.gform_wrapper .gform-theme-button {
	background: #593097;
	border: 1px solid #593097;
	color: #fff;
	font-size: 16px;
	font-weight: 700;
	border-radius: 0;
	padding: 14px 28px;
	cursor: pointer;
	transition: background-color .15s ease, border-color .15s ease;
}

.gform_wrapper .gform_button:hover,
.gform_wrapper .gform-theme-button:hover {
	background: #47257a;
	border-color: #47257a;
}

.gform_wrapper .gform_button:focus-visible {
	outline: 3px solid #6e3fb5;
	outline-offset: 2px;
}

/* ----------------------------------------------- choices, list, validation */

.gform_wrapper .gfield_radio label,
.gform_wrapper .gfield_checkbox label {
	font-weight: 400;
	font-size: 16px;
}

/* The List field's "add row" controls are icon buttons; keep them on-brand
   rather than Gravity's default blue. */
.gform_wrapper .gfield_list_group_item button,
.gform_wrapper .add_list_item,
.gform_wrapper .delete_list_item {
	color: #593097;
}

/* Validation. Gravity's default red is fine for the message, but the summary
   box and field outline should not fight the purple. */
.gform_wrapper .gfield_error input,
.gform_wrapper .gfield_error select,
.gform_wrapper .gfield_error textarea {
	border-color: #c0392b;
}

.gform_wrapper .gform_validation_errors {
	border-radius: 0;
}

/* --------------------------------------------------------------- mobile */

@media (max-width: 640px) {
	.gform_wrapper .gfield_label { font-size: 17px; }
	.gform_wrapper .gform_button { width: 100%; }
}

/* ------------------------------------------------- controls: explicit sizing */

/*
 * Belt and braces on top of the variables above. Height is left to the content
 * plus padding rather than pinned to a fixed value, so a control can never be
 * shorter than the text inside it — that is what obscured the select's chosen
 * option before.
 */
.gform_wrapper input[type="text"],
.gform_wrapper input[type="email"],
.gform_wrapper input[type="tel"],
.gform_wrapper input[type="number"],
.gform_wrapper input[type="date"],
.gform_wrapper select,
.gform_wrapper textarea {
	box-sizing: border-box;
	height: auto;
	min-height: 48px;
	line-height: 1.4;
}

.gform_wrapper textarea {
	min-height: 120px;
}

/*
 * Gravity sets appearance:none on selects and supplies the arrow through a
 * custom property. That resolved to none here, leaving a select with no visible
 * arrow at all. This draws its own, so it does not depend on that variable.
 */
.gform_wrapper select {
	-webkit-appearance: none;
	appearance: none;
	padding-right: 42px;
	background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='9' viewBox='0 0 14 9'%3E%3Cpath fill='none' stroke='%23593097' stroke-width='2' d='M1 1l6 6 6-6'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: right 14px center;
	background-size: 14px 9px;
}

/* The submit button, stated directly as well as through the variables — the
   input[type=submit] carries Gravity's own class-based rules too. */
.gform_wrapper .gform_footer input[type="submit"],
.gform_wrapper input.gform_button,
.gform_wrapper .gform_button.button {
	background-color: #593097;
	border: 1px solid #593097;
	color: #fff;
	border-radius: 0;
	height: auto;
	min-height: 48px;
	padding: 14px 28px;
	font-size: 16px;
	font-weight: 700;
}

.gform_wrapper .gform_footer input[type="submit"]:hover,
.gform_wrapper input.gform_button:hover {
	background-color: #47257a;
	border-color: #47257a;
}

/* ------------------------------------------------------------- page spacing */

/*
 * Space beneath the form.
 *
 * The theme's WPBakery columns carry no bottom padding of their own — pages
 * normally get their spacing from a per-element vc_custom_ class set in the
 * WPBakery editor. A form dropped straight into a row has none, so the submit
 * button ends up flush against the footer.
 *
 * padding rather than margin: a bottom margin on the last child collapses out
 * through the parent and produces no gap at all here.
 */
.gform_wrapper {
	padding-bottom: 60px;
}

@media (max-width: 640px) {
	.gform_wrapper { padding-bottom: 40px; }
}