/*
 * Festival design for Formidable forms, matching the ANF CRM mockups.
 * Loaded by the ANF Festival CRM plugin. Formidable still builds, saves and emails every form.
 * The long selectors are on purpose: they outrank Formidable's own style sheet, Divi, and the site's scrapbook theme form rules.
 */

html body .frm_forms.with_frm_style,
html body #main-content .frm_forms.with_frm_style {
	--anf-forest: #2E4A33;
	--anf-forest-dk: #1E3323;
	--anf-paper: #FFFDF8;
	--anf-tan: #D9C3A0;
	--anf-tan-lt: #F2E8D5;
	--anf-gold: #F2B632;
	--anf-gold-dk: #B98410;
	--anf-rust-ink: #9A4320;
	--anf-rust-lt: #F8E4DA;
	--anf-sage-ink: #3B5C3C;
	--anf-sage-lt: #E6EFE3;
	--anf-ink: #1F2A22;
	--anf-muted: #4C564E;
	--anf-line: #E2D5BD;
	--anf-field: #6F6450;
	background: var(--anf-paper) !important;
	border: 1px solid var(--anf-line) !important;
	border-radius: 14px !important;
	box-shadow: 0 1px 2px rgba(46, 74, 51, .08), 0 8px 24px rgba(46, 74, 51, .08) !important;
	padding: 1.5rem !important;
	max-width: 860px !important;
	margin: 0 auto 1.5rem !important;
	color: var(--anf-ink) !important;
	font: 17px/1.55 "Atkinson Hyperlegible", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif !important;
	box-sizing: border-box !important;
	overflow-wrap: break-word !important;
}

html body .frm_forms.with_frm_style *,
html body #main-content .frm_forms.with_frm_style *,
html body .frm_forms.with_frm_style *::before,
html body #main-content .frm_forms.with_frm_style *::before,
html body .frm_forms.with_frm_style *::after,
html body #main-content .frm_forms.with_frm_style *::after {
	box-sizing: border-box !important;
}

/* Titles and section headings. */
html body .frm_forms.with_frm_style h2,
html body #main-content .frm_forms.with_frm_style h2,
html body .frm_forms.with_frm_style h3,
html body #main-content .frm_forms.with_frm_style h3,
html body .frm_forms.with_frm_style .frm_form_title,
html body #main-content .frm_forms.with_frm_style .frm_form_title,
html body .frm_forms.with_frm_style .frm_section_heading h3,
html body #main-content .frm_forms.with_frm_style .frm_section_heading h3 {
	font-family: Arvo, Georgia, serif !important;
	color: var(--anf-forest-dk) !important;
	font-weight: 700 !important;
	line-height: 1.25 !important;
	margin: 0 0 .6rem !important;
	padding: 0 !important;
	border: 0 !important;
}

html body .frm_forms.with_frm_style h3.frm_form_title,
html body #main-content .frm_forms.with_frm_style h3.frm_form_title { font-size: 1.45rem !important; }

html body .frm_forms.with_frm_style .frm_section_heading,
html body #main-content .frm_forms.with_frm_style .frm_section_heading {
	margin-top: 1.25rem !important;
}

html body .frm_forms.with_frm_style .frm_section_heading h3,
html body #main-content .frm_forms.with_frm_style .frm_section_heading h3 {
	font-size: 1.2rem !important;
	padding-bottom: .4rem !important;
	border-bottom: 3px solid var(--anf-gold) !important;
}

html body .frm_forms.with_frm_style fieldset,
html body #main-content .frm_forms.with_frm_style fieldset {
	border: 0 !important;
	padding: 0 !important;
	margin: 0 !important;
	min-width: 0 !important;
}

html body .frm_forms.with_frm_style .frm_html_container,
html body #main-content .frm_forms.with_frm_style .frm_html_container,
html body .frm_forms.with_frm_style .frm_description,
html body #main-content .frm_forms.with_frm_style .frm_description,
html body .frm_forms.with_frm_style .frm_html_container p,
html body #main-content .frm_forms.with_frm_style .frm_html_container p {
	color: var(--anf-ink) !important;
	font-size: 1rem !important;
}

html body .frm_forms.with_frm_style .frm_form_field .frm_description,
html body #main-content .frm_forms.with_frm_style .frm_form_field .frm_description {
	color: var(--anf-muted) !important;
	font-size: .92rem !important;
	margin-top: .3rem !important;
}

/* Labels. */
html body .frm_forms.with_frm_style .frm_primary_label,
html body #main-content .frm_forms.with_frm_style .frm_primary_label,
html body .frm_forms.with_frm_style .frm_combo_inputs_container label,
html body #main-content .frm_forms.with_frm_style .frm_combo_inputs_container label,
html body .frm_forms.with_frm_style .frm_form_field > label,
html body #main-content .frm_forms.with_frm_style .frm_form_field > label {
	display: block !important;
	font-family: "Atkinson Hyperlegible", system-ui, sans-serif !important;
	font-weight: 700 !important;
	font-size: 1rem !important;
	color: var(--anf-ink) !important;
	margin: 0 0 .35rem !important;
	padding: 0 !important;
}

html body .frm_forms.with_frm_style .frm_combo_inputs_container .frm_description,
html body #main-content .frm_forms.with_frm_style .frm_combo_inputs_container .frm_description,
html body .frm_forms.with_frm_style .frm_combo_inputs_container label,
html body #main-content .frm_forms.with_frm_style .frm_combo_inputs_container label {
	font-weight: 400 !important;
	font-size: .92rem !important;
	color: var(--anf-muted) !important;
}

html body .frm_forms.with_frm_style .frm_required,
html body #main-content .frm_forms.with_frm_style .frm_required {
	color: var(--anf-rust-ink) !important;
	font-weight: 700 !important;
}

/* Text fields, selects and text areas. */
html body .frm_forms.with_frm_style input[type=text],
html body #main-content .frm_forms.with_frm_style input[type=text],
html body .frm_forms.with_frm_style input[type=email],
html body #main-content .frm_forms.with_frm_style input[type=email],
html body .frm_forms.with_frm_style input[type=tel],
html body #main-content .frm_forms.with_frm_style input[type=tel],
html body .frm_forms.with_frm_style input[type=url],
html body #main-content .frm_forms.with_frm_style input[type=url],
html body .frm_forms.with_frm_style input[type=number],
html body #main-content .frm_forms.with_frm_style input[type=number],
html body .frm_forms.with_frm_style input[type=date],
html body #main-content .frm_forms.with_frm_style input[type=date],
html body .frm_forms.with_frm_style input[type=password],
html body #main-content .frm_forms.with_frm_style input[type=password],
html body .frm_forms.with_frm_style select,
html body #main-content .frm_forms.with_frm_style select,
html body .frm_forms.with_frm_style textarea,
html body #main-content .frm_forms.with_frm_style textarea {
	width: 100% !important;
	max-width: 100% !important;
	min-height: 48px !important;
	padding: .55rem .8rem !important;
	border: 2px solid var(--anf-field) !important;
	border-radius: 10px !important;
	background: #fff !important;
	color: var(--anf-ink) !important;
	font: 400 1rem/1.4 "Atkinson Hyperlegible", system-ui, sans-serif !important;
	box-shadow: none !important;
	height: auto !important;
}

html body .frm_forms.with_frm_style textarea,
html body #main-content .frm_forms.with_frm_style textarea {
	min-height: 140px !important;
}

html body .frm_forms.with_frm_style ::placeholder,
html body #main-content .frm_forms.with_frm_style ::placeholder {
	color: #5E6A60 !important;
	opacity: 1 !important;
}

html body .frm_forms.with_frm_style input:focus,
html body #main-content .frm_forms.with_frm_style input:focus,
html body .frm_forms.with_frm_style select:focus,
html body #main-content .frm_forms.with_frm_style select:focus,
html body .frm_forms.with_frm_style textarea:focus,
html body #main-content .frm_forms.with_frm_style textarea:focus,
html body .frm_forms.with_frm_style button:focus,
html body #main-content .frm_forms.with_frm_style button:focus,
html body .frm_forms.with_frm_style a:focus,
html body #main-content .frm_forms.with_frm_style a:focus,
html body .frm_forms.with_frm_style .frm_dropzone:focus-within,
html body #main-content .frm_forms.with_frm_style .frm_dropzone:focus-within {
	outline: 3px solid var(--anf-forest-dk) !important;
	outline-offset: 2px !important;
	box-shadow: 0 0 0 6px var(--anf-gold) !important;
	border-color: var(--anf-forest) !important;
}

/* Radio buttons and check boxes as option cards, like the pace picker in the mockups. */
html body .frm_forms.with_frm_style .frm_opt_container,
html body #main-content .frm_forms.with_frm_style .frm_opt_container {
	display: grid !important;
	grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)) !important;
	gap: .5rem !important;
	margin-top: .2rem !important;
}

html body .frm_forms.with_frm_style .frm_radio,
html body #main-content .frm_forms.with_frm_style .frm_radio,
html body .frm_forms.with_frm_style .frm_checkbox,
html body #main-content .frm_forms.with_frm_style .frm_checkbox {
	margin: 0 !important;
	padding: 0 !important;
	display: block !important;
}

html body .frm_forms.with_frm_style .frm_radio label,
html body #main-content .frm_forms.with_frm_style .frm_radio label,
html body .frm_forms.with_frm_style .frm_checkbox label,
html body #main-content .frm_forms.with_frm_style .frm_checkbox label {
	display: flex !important;
	align-items: center !important;
	gap: .6rem !important;
	min-height: 52px !important;
	padding: .55rem .75rem !important;
	border: 2px solid var(--anf-field) !important;
	border-radius: 12px !important;
	background: #fff !important;
	color: var(--anf-ink) !important;
	font-weight: 400 !important;
	font-size: 1rem !important;
	cursor: pointer !important;
	line-height: 1.35 !important;
	white-space: normal !important;
}

html body .frm_forms.with_frm_style .frm_radio label:hover,
html body #main-content .frm_forms.with_frm_style .frm_radio label:hover,
html body .frm_forms.with_frm_style .frm_checkbox label:hover,
html body #main-content .frm_forms.with_frm_style .frm_checkbox label:hover {
	background: var(--anf-tan-lt) !important;
}

html body .frm_forms.with_frm_style .frm_radio label:has(input:checked),
html body #main-content .frm_forms.with_frm_style .frm_radio label:has(input:checked),
html body .frm_forms.with_frm_style .frm_checkbox label:has(input:checked),
html body #main-content .frm_forms.with_frm_style .frm_checkbox label:has(input:checked) {
	border-color: var(--anf-forest) !important;
	background: var(--anf-sage-lt) !important;
	box-shadow: inset 0 0 0 1px var(--anf-forest) !important;
	font-weight: 700 !important;
}

html body .frm_forms.with_frm_style input[type=radio],
html body #main-content .frm_forms.with_frm_style input[type=radio],
html body .frm_forms.with_frm_style input[type=checkbox],
html body #main-content .frm_forms.with_frm_style input[type=checkbox] {
	width: 22px !important;
	height: 22px !important;
	min-height: 0 !important;
	margin: 0 !important;
	flex: none !important;
	accent-color: var(--anf-forest) !important;
	appearance: auto !important;
	-webkit-appearance: auto !important;
}

/* File upload. */
html body .frm_forms.with_frm_style .frm_dropzone,
html body #main-content .frm_forms.with_frm_style .frm_dropzone {
	border: 2px dashed var(--anf-field) !important;
	border-radius: 12px !important;
	background: var(--anf-tan-lt) !important;
	color: var(--anf-ink) !important;
	max-width: 100% !important;
}

html body .frm_forms.with_frm_style .frm_dropzone .dz-message,
html body #main-content .frm_forms.with_frm_style .frm_dropzone .dz-message,
html body .frm_forms.with_frm_style .frm_dropzone .frm_upload_text,
html body #main-content .frm_forms.with_frm_style .frm_dropzone .frm_upload_text,
html body .frm_forms.with_frm_style .frm_dropzone .frm_small_text,
html body #main-content .frm_forms.with_frm_style .frm_dropzone .frm_small_text {
	color: var(--anf-ink) !important;
}

html body .frm_forms.with_frm_style .frm_dropzone .frm_upload_icon,
html body #main-content .frm_forms.with_frm_style .frm_dropzone .frm_upload_icon,
html body .frm_forms.with_frm_style .frm_dropzone svg,
html body #main-content .frm_forms.with_frm_style .frm_dropzone svg {
	color: var(--anf-forest) !important;
	fill: var(--anf-forest) !important;
}

/* Buttons. */
html body .frm_forms.with_frm_style .frm_submit,
html body #main-content .frm_forms.with_frm_style .frm_submit {
	margin-top: 1rem !important;
	display: flex !important;
	flex-wrap: wrap !important;
	gap: .6rem !important;
}

html body .frm_forms.with_frm_style .frm_submit button,
html body #main-content .frm_forms.with_frm_style .frm_submit button,
html body .frm_forms.with_frm_style .frm_submit input[type=submit],
html body #main-content .frm_forms.with_frm_style .frm_submit input[type=submit],
html body .frm_forms.with_frm_style .frm_button_submit,
html body #main-content .frm_forms.with_frm_style .frm_button_submit,
html body .frm_forms.with_frm_style .frm_prev_page,
html body #main-content .frm_forms.with_frm_style .frm_prev_page {
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	min-height: 48px !important;
	height: auto !important;
	padding: .6rem 1.4rem !important;
	border-radius: 12px !important;
	border: 2px solid var(--anf-gold-dk) !important;
	background: var(--anf-gold) !important;
	color: var(--anf-ink) !important;
	font: 700 1.05rem/1.2 "Atkinson Hyperlegible", system-ui, sans-serif !important;
	text-transform: none !important;
	letter-spacing: 0 !important;
	box-shadow: none !important;
	cursor: pointer !important;
	width: auto !important;
}

html body .frm_forms.with_frm_style .frm_submit button:hover,
html body #main-content .frm_forms.with_frm_style .frm_submit button:hover,
html body .frm_forms.with_frm_style .frm_button_submit:hover,
html body #main-content .frm_forms.with_frm_style .frm_button_submit:hover {
	background: #E9A91F !important;
}

html body .frm_forms.with_frm_style .frm_prev_page,
html body #main-content .frm_forms.with_frm_style .frm_prev_page {
	background: var(--anf-paper) !important;
	border-color: var(--anf-forest) !important;
	color: var(--anf-forest-dk) !important;
}

/* Messages. Each has a text heading as well as a color, so meaning never relies on color alone. */
html body .frm_forms.with_frm_style .frm_message,
html body #main-content .frm_forms.with_frm_style .frm_message,
html body .frm_forms .frm_message,
html body #main-content .frm_forms .frm_message {
	background: var(--anf-sage-lt) !important;
	border: 1px solid #9DB79A !important;
	border-left: 6px solid var(--anf-forest) !important;
	border-radius: 12px !important;
	color: var(--anf-ink) !important;
	padding: .9rem 1.1rem !important;
	font-size: 1.05rem !important;
}

html body .frm_forms.with_frm_style .frm_message::before,
html body #main-content .frm_forms.with_frm_style .frm_message::before {
	content: "Sent. " !important;
	font-weight: 700 !important;
	color: var(--anf-sage-ink) !important;
}

html body .frm_forms.with_frm_style .frm_error_style,
html body #main-content .frm_forms.with_frm_style .frm_error_style {
	background: var(--anf-rust-lt) !important;
	border: 1px solid #DFA184 !important;
	border-left: 6px solid var(--anf-rust-ink) !important;
	border-radius: 12px !important;
	color: #5C2410 !important;
	padding: .8rem 1rem !important;
}

html body .frm_forms.with_frm_style .frm_error_style::before,
html body #main-content .frm_forms.with_frm_style .frm_error_style::before {
	content: "Please check the form. " !important;
	font-weight: 700 !important;
}

html body .frm_forms.with_frm_style .frm_blank_field input,
html body #main-content .frm_forms.with_frm_style .frm_blank_field input,
html body .frm_forms.with_frm_style .frm_blank_field select,
html body #main-content .frm_forms.with_frm_style .frm_blank_field select,
html body .frm_forms.with_frm_style .frm_blank_field textarea,
html body #main-content .frm_forms.with_frm_style .frm_blank_field textarea {
	border-color: var(--anf-rust-ink) !important;
	background: #FFF8F5 !important;
}

html body .frm_forms.with_frm_style .frm_error,
html body #main-content .frm_forms.with_frm_style .frm_error {
	color: #7E3418 !important;
	font-weight: 700 !important;
	font-size: .95rem !important;
	margin-top: .3rem !important;
}

html body .frm_forms.with_frm_style .frm_error::before,
html body #main-content .frm_forms.with_frm_style .frm_error::before {
	content: "Error: " !important;
}


/* Phones: full-width fields and buttons, and a little less padding. */
@media (max-width: 600px) {
	html body .frm_forms.with_frm_style {
		padding: 1rem;
		border-radius: 12px;
	}

	html body .frm_forms.with_frm_style .frm_fields_container {
		grid-template-columns: minmax(0, 1fr) !important;
	}

	html body .frm_forms.with_frm_style .frm_fields_container > * {
		grid-column: 1 / -1 !important;
	}

	html body .frm_forms.with_frm_style .frm_opt_container {
		grid-template-columns: minmax(0, 1fr);
	}

	html body .frm_forms.with_frm_style .frm_submit button,
	html body .frm_forms.with_frm_style .frm_button_submit {
		width: 100% !important;
	}
}

@media (prefers-reduced-motion: reduce) {
	html body .frm_forms.with_frm_style * {
		transition: none !important;
		animation: none !important;
	}
}

/* The mockup card is plain: hide the scrapbook tape strip the site theme adds above forms. */
html body .frm_forms.with_frm_style::before,
html body #main-content .frm_forms.with_frm_style::before {
	content: none !important;
	display: none !important;
}

/* Older form text uses font color tags in red. The mockups use the forest and ink colors, so those tags follow the text around them. */
html body .frm_forms.with_frm_style font[color],
html body #main-content .frm_forms.with_frm_style font[color] {
	color: inherit !important;
}

html body .frm_forms.with_frm_style h1,
html body #main-content .frm_forms.with_frm_style h1 {
	font-family: Arvo, Georgia, serif !important;
	color: var(--anf-forest-dk) !important;
	font-size: clamp(1.6rem, 4vw, 2.2rem) !important;
	line-height: 1.2 !important;
	margin: 0 0 .75rem !important;
	padding: 0 !important;
}

html body .frm_forms.with_frm_style .frm_html_container strong,
html body #main-content .frm_forms.with_frm_style .frm_html_container strong {
	color: var(--anf-forest-dk) !important;
}