/*
 * vitalcaring.com form styling. See module.php for what was measured before this existed.
 *
 * Values are the site's own, not invented: the submit button is .avia-button as it computes on
 * /careers (18px, weight 400, padding 15px 30px, 3px radius, #393b67), the control edge is the
 * #cccccc of .opportunities .flex_column, body text is #333 and the indigo is #393b67.
 */

/* ---------------------------------------------------------------- the font nothing inherits */

/*
 * A form control inherits neither font-family nor font-size. Every one on this site has therefore
 * been rendering in the browser default -- Arial 13.33px on the Gravity Forms submit, Arial 26px on
 * the careers slider arrows -- while the body is proxima-nova. One line, the whole site.
 *
 * Buttons are deliberately not swept up here: some carry an icon glyph from a font of their own,
 * and inheriting would replace the glyph with a missing character.
 */
#top input,
#top select,
#top textarea {
	font-family: inherit;
}

/* ---------------------------------------------------------------- labels */

/*
 * The hierarchy was upside down: the field's own name set at 21.6px/400 with its sub-label at
 * 16.56px/700 under it, so "First" read as more important than "Name". The name is now the heavier
 * of the two, and the sub-label is smaller and lighter, which is the order a person reads them in.
 */
#top .gform_wrapper.gravity-theme .gfield_label,
#top .gform_wrapper.gravity-theme .gform-field-label {
	margin-bottom: 8px;
	font-size: 16px;
	font-weight: 700;
	color: #333;
}

#top .gform_wrapper.gravity-theme .ginput_complex label,
#top .gform_wrapper.gravity-theme .gform-field-label--type-sub {
	margin-bottom: 4px;
	font-size: 14px;
	font-weight: 400;
	color: #555;
}

/*
 * "(Required)" only needed the space it was missing: it ran straight into the label as
 * "Name(Required)".
 *
 * Its size is left alone on purpose. The child theme already sets color and font-size to inherit on
 * this, which looked wrong only because the label it inherits from was 21.6px. With the label at
 * 16px/700 the same rule now gives 16px/400 -- the same size, lighter, correctly subordinate -- so
 * overriding it here would be fighting the site's own intent for no gain. The first version of this
 * module set 14px and silently lost the tie anyway: identical specificity, and the child theme
 * loads last.
 */
#top .gform_wrapper.gravity-theme .gfield_required {
	margin-left: 4px;
}

#top .gform_wrapper.gravity-theme .gfield_description {
	padding-top: 4px;
	font-size: 15px;
	color: #555;
}

/* ---------------------------------------------------------------- controls */

#top .gform_wrapper.gravity-theme input[type="text"],
#top .gform_wrapper.gravity-theme input[type="email"],
#top .gform_wrapper.gravity-theme input[type="tel"],
#top .gform_wrapper.gravity-theme input[type="url"],
#top .gform_wrapper.gravity-theme input[type="number"],
#top .gform_wrapper.gravity-theme input[type="password"],
#top .gform_wrapper.gravity-theme input[type="date"],
#top .gform_wrapper.gravity-theme select,
#top .gform_wrapper.gravity-theme textarea {
	padding: 0 16px;
	font-size: 16px;
	line-height: 46px;
	color: #24303a;
	background: #fff;
	border: 1px solid #ccc;
	border-radius: 3px;
	box-shadow: none;
	box-sizing: border-box;
}

/*
 * Height, not min-height. A floor lets a control's own padding push past it, which is how the
 * bereavement search button ended up taller than the field beside it.
 */
#top .gform_wrapper.gravity-theme input[type="text"],
#top .gform_wrapper.gravity-theme input[type="email"],
#top .gform_wrapper.gravity-theme input[type="tel"],
#top .gform_wrapper.gravity-theme input[type="url"],
#top .gform_wrapper.gravity-theme input[type="number"],
#top .gform_wrapper.gravity-theme input[type="password"],
#top .gform_wrapper.gravity-theme input[type="date"],
#top .gform_wrapper.gravity-theme select {
	height: 48px;
	min-height: 0;
}

#top .gform_wrapper.gravity-theme textarea {
	padding: 14px 16px;
	line-height: 1.5;
}

#top .gform_wrapper.gravity-theme input:focus,
#top .gform_wrapper.gravity-theme select:focus,
#top .gform_wrapper.gravity-theme textarea:focus {
	border-color: #393b67;
	box-shadow: 0 0 0 2px rgba(57, 59, 103, .25);
	outline: 2px solid transparent;
	outline-offset: 2px;
}

#top .gform_wrapper.gravity-theme ::placeholder {
	color: #5b6874;
	opacity: 1;
}

/* ---------------------------------------------------------------- the button */

/* .avia-button's own measured values, so a form's submit is the same object as every other button. */
#top .gform_wrapper.gravity-theme .gform_footer button,
#top .gform_wrapper.gravity-theme .gform_footer input[type="submit"],
#top .gform_wrapper.gravity-theme .gform-footer button,
#top .gform_wrapper.gravity-theme .gform-footer input[type="submit"] {
	padding: 15px 30px 13px;
	font-family: inherit;
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
	color: #fff;
	background: #393b67;
	border: 0;
	border-radius: 3px;
	cursor: pointer;
}

#top .gform_wrapper.gravity-theme .gform_footer button:hover,
#top .gform_wrapper.gravity-theme .gform_footer input[type="submit"]:hover,
#top .gform_wrapper.gravity-theme .gform-footer button:hover,
#top .gform_wrapper.gravity-theme .gform-footer input[type="submit"]:hover {
	background: #2c2e52;
}

/* ---------------------------------------------------------------- validation */

#top .gform_wrapper.gravity-theme .gfield_error input,
#top .gform_wrapper.gravity-theme .gfield_error select,
#top .gform_wrapper.gravity-theme .gfield_error textarea {
	border-color: #c0392b;
}

#top .gform_wrapper.gravity-theme .gfield_validation_message,
#top .gform_wrapper.gravity-theme .validation_message {
	font-size: 15px;
	color: #a5281b;
	background: none;
	border: 0;
}