/*
Theme Name: Friends of Thomas Balch Library, Inc.
Theme URI: https://sticklecreative.com/
Version: 1.0.3
Description: Child Theme of Divi
Author: Stickle Creative LLC
Template: Divi
Text Domain: friends-of-balch
Update URI: https://mainwp.sticklecreative.com/updates/?action=get_metadata&slug=friends-of-balch
*/

/* ==========================================================================
   Fluent Forms brand styles
   Applies to every Fluent Form except the footer newsletter signup (form 5),
   which has its own styles in that form's Custom CSS. New forms pick these up
   automatically. Colors and fonts match Divi Theme Options.
   ========================================================================== */

.fluentform:not(.fluentform_wrapper_5) {
	--fob-red: #6c2519;
	--fob-red-dark: #4f1a11;
	--fob-text: #40494f;
	--fob-muted: #6b6b6b;
	--fob-border: #c4c4c4;
	--fob-tint: #f7f1ef;
	--fob-heading-font: 'Libre Franklin', Helvetica, Arial, sans-serif;
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	color: var(--fob-text);
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-group {
	margin-bottom: 24px;
}

/* Labels and subheadings use the brand heading font. Typed text, choices and help text use the body font. */
.fluentform:not(.fluentform_wrapper_5) .ff-el-input--label label {
	font-family: var(--fob-heading-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--fob-text);
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-section-title,
.fluentform:not(.fluentform_wrapper_5) .ff-custom_html h2,
.fluentform:not(.fluentform_wrapper_5) .ff-custom_html h3,
.fluentform:not(.fluentform_wrapper_5) .ff-custom_html h4 {
	font-family: var(--fob-heading-font);
	font-weight: 700;
	color: var(--fob-text);
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-is-required.asterisk-right label:after {
	color: var(--fob-red);
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-help-message {
	font-family: inherit;
	font-size: 16px;
	font-style: normal;
	color: var(--fob-muted);
}

/* Text inputs, selects and text areas */
.fluentform:not(.fluentform_wrapper_5) .ff-el-form-control {
	font-family: inherit;
	font-size: 18px;
	color: var(--fob-text);
	background-color: #fff;
	border: 1px solid var(--fob-border);
	border-radius: 6px;
	padding: 12px 14px;
	min-height: 50px;
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-form-control:focus {
	border-color: var(--fob-red);
	box-shadow: 0 0 0 3px rgba(108, 37, 25, 0.15);
	outline: none;
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-input--content .ff_input-group-prepend .ff_input-group-text {
	font-family: inherit;
	font-size: 18px;
	border-color: var(--fob-border);
	border-radius: 6px 0 0 6px;
	background: var(--fob-tint);
	color: var(--fob-text);
}

/* Radio and checkbox lists */
.fluentform:not(.fluentform_wrapper_5) .ff-el-form-check-label {
	font-size: 18px;
	color: var(--fob-text);
}

.fluentform:not(.fluentform_wrapper_5) input[type='radio'],
.fluentform:not(.fluentform_wrapper_5) input[type='checkbox'] {
	accent-color: var(--fob-red);
	width: 18px;
	height: 18px;
	vertical-align: -3px;
	margin-right: 6px;
}

/* Choices shown as buttons, such as gift amount and frequency */
.fluentform:not(.fluentform_wrapper_5) .ff_list_buttons .ff-el-form-check {
	margin: 0 10px 10px 0;
}

.fluentform:not(.fluentform_wrapper_5) .ff_list_buttons .ff-el-form-check label > span {
	font-family: var(--fob-heading-font);
	font-size: 16px;
	font-weight: 600;
	color: var(--fob-red);
	background: #fff;
	border: 2px solid var(--fob-red) !important;
	border-radius: 50px !important;
	padding: 10px 22px;
	box-shadow: none;
}

/* .ff-el-group matches Fluent Forms' own hover rule so its blue text color doesn't win */
.fluentform:not(.fluentform_wrapper_5) .ff-el-group.ff_list_buttons .ff-el-form-check label > span:hover {
	color: var(--fob-red);
	background: var(--fob-tint);
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-group.ff_list_buttons .ff-el-form-check.ff_item_selected label > span:hover {
	color: #fff;
	background: var(--fob-red);
}

.fluentform:not(.fluentform_wrapper_5) .ff_list_buttons .ff-el-form-check.ff_item_selected label > span {
	color: #fff;
	background: var(--fob-red);
	box-shadow: none;
}

/* Payment summary */
.fluentform:not(.fluentform_wrapper_5) .ff_payment_summary table {
	font-family: inherit;
	font-size: 17px;
	color: var(--fob-text);
	border-color: var(--fob-border);
}

.fluentform:not(.fluentform_wrapper_5) .ff_payment_summary th {
	font-family: var(--fob-heading-font);
	font-size: 14px;
	text-transform: uppercase;
	background: var(--fob-tint);
}

/* Submit button, matching the site's Divi buttons */
.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit,
.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit.et_pb_button,
.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit.et_pb_button:hover {
	font-family: var(--fob-heading-font);
	font-size: 14px;
	font-weight: 700;
	text-transform: uppercase;
	letter-spacing: 0.02em;
	color: #fff;
	background-color: var(--fob-red);
	border: 2px solid var(--fob-red);
	border-radius: 50px;
	padding: 14px 28px;
	line-height: 1.2;
	opacity: 1;
}

.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit:hover,
.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit:focus {
	background-color: var(--fob-red-dark);
	border-color: var(--fob-red-dark);
}

/* Divi adds an arrow icon to .et_pb_button on hover. Forms don't need it. */
.fluentform:not(.fluentform_wrapper_5) .ff-btn-submit.et_pb_button:after {
	display: none;
}

/* Errors and the thank-you message */
.fluentform:not(.fluentform_wrapper_5) .ff-el-is-error .text-danger,
.fluentform:not(.fluentform_wrapper_5) .error {
	font-size: 16px;
	color: #b3261e;
}

.fluentform:not(.fluentform_wrapper_5) .ff-el-is-error .ff-el-form-control {
	border-color: #b3261e;
}

.ff-message-success {
	font-family: 'EB Garamond', Georgia, 'Times New Roman', serif;
	font-size: 18px;
	color: #40494f;
	border: 1px solid #c4c4c4;
	border-left: 6px solid #6c2519;
	border-radius: 6px;
	box-shadow: none;
	padding: 20px 24px;
}

@media (max-width: 600px) {
	.fluentform:not(.fluentform_wrapper_5) .ff_list_buttons .ff-el-form-check label > span {
		padding: 10px 16px;
	}
}