/* Forms

   Gravity Forms styles. Kept in their own file so the same rules can be
   loaded on the front end and as an editor style (see functions.php),
   making the form preview in the block editor match the live form. The
   preview can't be interacted with, so states that need interaction or
   JS (hover, focus, checked, page transitions) are in style.css instead. */

.gform_required_legend {
	display: none;
}
.gform-theme.gform_wrapper .gform_body .gform-field-label {
	font-size: 1.125rem;
	color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gform_body .gform-field-label:not(.gform-field-label--type-inline):not(.gform-field-label--type-sub) {
	font-size: 1.25rem;
    font-weight: 700;
}
.gform-theme.gform_wrapper .gform_body input[type="radio"],
.gform-theme.gform_wrapper .gform_body input[type="checkbox"] {
    width: 1.8rem;
    height: 1.8rem;
    border-width: 2px;
    border-color: var( --theme-accent );
}
/* Size each radio/checkbox choice to hug its input and label (rather
   than stretching to the full width of the row) so only the choice itself
   is clickable, not the empty space beside it. Top-align the two instead of centering them
   so a label that wraps onto several lines still keeps the input level
   with its first line rather than its vertical middle; the label is
   nudged down slightly with padding instead, to sit optically centred
   against the input when it's a single line. */
.gform-theme.gform_wrapper .gform_body .gchoice {
    width: fit-content;
    align-items: start;
}
.gform-theme.gform_wrapper .gform_body .gchoice label {
    padding-top: 0.2em;
}
.gform-theme.gform_wrapper .gform_body input:not([type="checkbox"],[type="radio"],[type="submit"],[type="button"],[type="hidden"]),
.gform-theme.gform_wrapper .gform_body select,
.gform-theme.gform_wrapper .gform_body textarea {
	font-size: 1.2rem;
	border-color: var( --theme-accent );
    border-width: 2px;
    min-height: 3rem;
}
.gform-theme.gform_wrapper .gform_body .gfield_description,
.gform-theme.gform_wrapper .gform_body .gform-field-label--type-sub,
.gform-theme.gform_wrapper .gform_body .ginput_counter {
	font-size: 1rem;
    color: black;
}
.gform-theme.gform_wrapper .gform_body .gfield_consent_description {
    background: color-mix(in srgb, white 90%, var( --theme-accent ) );
    border-radius: 2;
    border-width: 0;
    color: black;
}
.gform_wrapper .gform_body .gfield--type-section {
    border-block-end: 0 !important;
}
.gform-theme.gform_wrapper .button.gform_button,
.gform-theme.gform_wrapper .button.gform_next_button,
.gform-theme.gform_wrapper .button.gform_previous_button,
.gform_wrapper .form_saved_message_emailform .gform_button {
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: var( --wp--preset--font-size--large ) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	border-radius: 28px !important;
    border-width: 2px !important;
    border-style: solid !important;
    padding: calc( 0.6rem - 1px ) calc( 1.5rem - 1px ) !important;
}
/* The save and continue "Send Link" button lacks the .button class and its
   wrapper lacks .gform-theme, so it needs its own selector */
.gform-theme.gform_wrapper .button.gform_button,
.gform-theme.gform_wrapper .button.gform_next_button,
.gform_wrapper .form_saved_message_emailform .gform_button {
	background: var( --theme-accent ) !important;
	border-color: var( --theme-accent ) !important;
	color: var( --theme-accent-contrast ) !important;
	padding-top: calc( 0.5rem - 1px ) !important;
}
/* Secondary buttons are outlined. "Back to Last Page" (added by GP Multi-Page
   Navigation) also has the gform_button class, so needs a more specific
   selector to override the solid style above */
.gform-theme.gform_wrapper .button.gform_previous_button,
.gform-theme.gform_wrapper .button.gform_button.gform_last_page_button {
	background: var( --theme-accent-contrast ) !important;
	border-color: var( --theme-accent ) !important;
	color: var( --theme-accent ) !important;
	padding-top: calc( 0.6rem - 1px ) !important;
}

/* Repeater field add/remove buttons are outlined like secondary buttons,
   but smaller, as they act on part of the form rather than all of it */

.gform-theme.gform_wrapper .gfield_repeater_buttons .gform-theme-button {
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: var( --wp--preset--font-size--medium ) !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	background: var( --theme-accent-contrast ) !important;
	border: 2px solid var( --theme-accent ) !important;
	border-radius: 28px !important;
	color: var( --theme-accent ) !important;
	padding: calc( 0.45rem - 1px ) calc( 1.1rem - 1px ) !important;
	block-size: auto !important;
	box-shadow: none !important;
}
.gform-theme.gform_wrapper .gfield_repeater_buttons .gform-theme-button:disabled {
	opacity: 0.4;
}

/* File upload "Choose File" buttons are small outlined pills like the
   repeater buttons. The input grows to fit the button rather than clipping
   it, and the button is middle-aligned so the chosen filename beside it
   sits vertically centred */
.gform-theme.gform_wrapper .gform_body input[type="file"] {
	block-size: auto !important;
	line-height: 1.5 !important;
	padding: 0.4rem 0.75rem 0.4rem 0.4rem !important;
}
.gform-theme.gform_wrapper .gform_body input[type="file"]::file-selector-button {
	font-family: var( --wp--preset--font-family--heading ) !important;
	font-size: 1rem !important;
	font-weight: 700 !important;
	line-height: 1.1 !important;
	vertical-align: middle !important;
	background: var( --theme-accent-contrast ) !important;
	border: 2px solid var( --theme-accent ) !important;
	border-radius: 28px !important;
	color: var( --theme-accent ) !important;
	padding: calc( 0.45rem - 1px ) calc( 1.1rem - 1px ) !important;
	margin: 0 0.75rem 0 0 !important;
	block-size: auto !important;
	box-shadow: none !important;
	cursor: pointer !important;
}
.gform-theme.gform_wrapper .gform_body input[type="file"]:hover::file-selector-button {
	background: var( --theme-accent ) !important;
	color: var( --theme-accent-contrast ) !important;
}

/* Save and continue later should look like a plain text link, not a button */

.gform-theme.gform_wrapper .button.gform_save_link {
	display: inline !important;
    inline-size: auto !important;
    block-size: auto !important;
	background: none !important;
	border: 0 !important;
	border-radius: 0 !important;
	padding: 0 !important;
	box-shadow: none !important;
	font-family: inherit !important;
	font-size: inherit !important;
	font-weight: 700 !important;
	color: var( --theme-accent ) !important;
	text-decoration: underline !important;
	text-decoration-thickness: 2px !important;
	text-underline-offset: .2em;
}
.gform-theme.gform_wrapper .gf_progressbar_percentage {
    background-color: var( --theme-accent ) !important;
}
.gform-theme.gform_wrapper .gf_progressbar_percentage span {
    color: var( --theme-accent-contrast ) !important;
}
.gform-theme.gform_wrapper .gf_progressbar_title {
    color: var( --theme-accent ) !important;
}
.gform-theme.gform_wrapper .gf_step_number {
	color: var( --theme-accent );
	border-color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gf_step_active .gf_step_number {
	background: var( --theme-accent );
	color: var( --theme-accent-contrast );
	border-color: var( --theme-accent );
}
.gform-theme.gform_wrapper .gf_step_completed .gf_step_number::after {
	background: var( --wp--preset--color--success );
	color: white;
	border-color: var( --wp--preset--color--success );
}
.gform-theme.gform_wrapper .gf_progressbar_wrapper,
.gform-theme.gform_wrapper .gf_page_steps {
    margin-bottom: 3rem;
}
.gform-theme.gform_wrapper .gform_body .gfield_description.validation_message {
    background: var( --wp--preset--color--warning );
    width: fit-content;
    margin-top: 0.75em !important;
    padding: 0.3em 0.6em;
    border-radius: 5px;
    color: white;
}
.gform-theme.gform_wrapper .gform_footer,
.gform-theme.gform_wrapper .gform_page_footer {
    margin-top: var( --wp--preset--spacing--40 ) !important;
}