/*
 * EJF Canopy: form and account styles (brief §7.1, §7.2).
 *
 * Restyles Fluent Forms and Ultimate Member output to match the theme. This
 * file is deliberately UNLAYERED and loaded after the plugins' stylesheets,
 * because those are unlayered too and would otherwise win over layered rules.
 *
 * Contrast: field borders use ink at 60% (3.4:1 on paper), not the 14%
 * hairline, because WCAG 1.4.11 needs 3:1 for the edge of an input.
 */

:root {
	--ejf-field-border: rgba(23, 43, 37, .6);
	--ejf-error: #A3221A; /* 6.9:1 on paper, 7.6:1 on white */
}

/* ------------------------------------------------------------ Fluent Forms */
.ejf-form { margin-top: 2rem; }
.ejf-form .fluentform { font-family: var(--ejf-font-sans); color: var(--ejf-ink); }
.ejf-form .fluentform .ff-el-group { margin-bottom: 1.4rem; }
.ejf-form .fluentform .ff-el-input--label label,
.ejf-form .fluentform .ff-el-input--label { color: var(--ejf-ink); font-size: var(--ejf-fs-small); font-weight: 600; }
.ejf-form .fluentform .ff-el-input--label.ff-el-is-required.asterisk-right label::after { color: var(--ejf-ink); content: " *"; }
.ejf-form .fluentform .ff-el-help-message { margin-top: .35rem; color: rgba(23, 43, 37, .75); font-size: var(--ejf-fs-xs); }

.ejf-form .fluentform .ff-el-form-control,
.ejf-form .fluentform select.ff-el-form-control,
.ejf-form .fluentform textarea.ff-el-form-control {
	width: 100%;
	min-height: 2.875rem;
	padding: .65rem .9rem;
	border: 1px solid var(--ejf-field-border);
	border-radius: var(--ejf-radius);
	background-color: var(--ejf-white);
	color: var(--ejf-ink);
	font-family: inherit;
	font-size: 1rem;
	line-height: 1.4;
	box-shadow: none;
}
.ejf-form .fluentform textarea.ff-el-form-control { min-height: 8rem; }
.ejf-form .fluentform .ff-el-form-control::placeholder { color: rgba(23, 43, 37, .6); }
.ejf-form .fluentform .ff-el-form-control:focus {
	border-color: var(--ejf-blue);
	outline: 3px solid var(--ejf-blue);
	outline-offset: 1px;
	box-shadow: none;
}

/* Checkboxes and radios: native controls, brand colour, comfortable targets. */
.ejf-form .fluentform .ff-el-form-check { margin-bottom: .35rem; }
.ejf-form .fluentform .ff-el-form-check-label,
.ejf-form .fluentform .ff_t_c { display: inline-flex; align-items: flex-start; gap: .65rem; color: var(--ejf-ink); font-size: 1rem; font-weight: 400; cursor: pointer; }
.ejf-form .fluentform .ff_tc_label { align-items: flex-start; }
.ejf-form .fluentform input[type="checkbox"],
.ejf-form .fluentform input[type="radio"] {
	flex: none;
	width: 1.25rem;
	height: 1.25rem;
	margin: .2rem 0 0;
	accent-color: var(--ejf-green);
}
.ejf-form .fluentform input[type="checkbox"]:focus-visible,
.ejf-form .fluentform input[type="radio"]:focus-visible { outline: 3px solid var(--ejf-blue); outline-offset: 2px; }
.ejf-form .fluentform .ff_t_c a { color: var(--ejf-blue); }

/* Consent line: checkbox and text side by side, with a clear gap. */
.ejf-form .fluentform .ff_tc_label { display: flex; align-items: flex-start; gap: .65rem; }
.ejf-form .fluentform .ff_tc_checkbox { flex: none; margin: 0; }
.ejf-form .fluentform .ff_t_c { display: block; margin: 0; }

/* File upload */
.ejf-form .fluentform .ff_upload_btn,
.ejf-form .fluentform .ff-upload-btn {
	min-height: 2.75rem;
	padding: .6rem 1.1rem;
	border: 1px solid var(--ejf-ink);
	border-radius: var(--ejf-radius);
	background: transparent;
	color: var(--ejf-ink);
	font-weight: 500;
}

/* Submit */
.ejf-form .fluentform .ff-btn-submit,
.ejf-form .fluentform .ff-btn-submit.ff_btn_no_style {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 2.875rem;
	padding: .7rem 1.6rem;
	border: 1.5px solid transparent;
	border-radius: var(--ejf-radius);
	background: var(--ejf-green);
	color: var(--ejf-white); /* white on green: 4.7:1 (paper would be 4.15) */
	font-family: inherit;
	font-size: var(--ejf-fs-small);
	font-weight: 500;
	cursor: pointer;
	transition: background-color .2s, transform .2s;
}
.ejf-form .fluentform .ff-btn-submit:hover,
.ejf-form .fluentform .ff-btn-submit.ff_btn_no_style:hover { background: var(--ejf-green-dark); color: var(--ejf-white); }
.ejf-form .fluentform .ff-btn-submit:focus-visible { outline: 3px solid var(--ejf-blue); outline-offset: 3px; }

/* Youth Movement contexts: pill buttons, coral with ink text (never white on coral). */
.ejf-c .ejf-form .fluentform .ff-btn-submit,
.ejf-c .ejf-form .fluentform .ff-btn-submit.ff_btn_no_style {
	border-radius: var(--ejf-radius-pill);
	background: var(--ejf-coral);
	color: var(--ejf-ink);
}
.ejf-c .ejf-form .fluentform .ff-btn-submit:hover,
.ejf-c .ejf-form .fluentform .ff-btn-submit.ff_btn_no_style:hover { background: var(--ejf-coral-light); color: var(--ejf-ink); transform: translateY(-2px); }

/* Validation and confirmation */
.ejf-form .fluentform .ff-el-is-error .ff-el-form-control { border-color: var(--ejf-error); }
.ejf-form .fluentform .error.text-danger,
.ejf-form .fluentform .ff-el-is-error .text-danger { margin-top: .35rem; color: var(--ejf-error); font-size: var(--ejf-fs-small); font-weight: 500; }
.ejf-form .ff-message-success,
.ejf-form .ff_form_instance_success_msg,
.ejf-form .fluentform .ff-message-success {
	margin-top: 1rem;
	padding: 1rem 1.25rem;
	border: 0;
	border-left: 4px solid var(--ejf-green);
	border-radius: var(--ejf-radius);
	background: var(--ejf-paper-deep);
	color: var(--ejf-ink);
	font-size: 1.0625rem;
}
.ejf-form .ff-errors-in-stack { color: var(--ejf-error); }

/* Inside the dark newsletter band the labels would be ink on blue: see home.css. */

/* ---------------------------------------------------------- Ultimate Member */
.um { font-family: var(--ejf-font-sans); color: var(--ejf-ink); }
body .um { max-width: 30rem; margin-inline: auto; }
body .um.um-account, body .um.um-profile { max-width: 56rem; }
body .um .um-form { padding: 0; }
body .um .um-field { padding: 0; margin-bottom: 1.25rem; }
body .um .um-field-label { margin: 0 0 .4rem; }
body .um .um-field-label label { color: var(--ejf-ink); font-size: var(--ejf-fs-small); font-weight: 600; }

body .um .um-form input[type="text"],
body .um .um-form input[type="password"],
body .um .um-form input[type="email"],
body .um .um-form input[type="number"],
body .um .um-form input[type="url"],
body .um .um-form input[type="tel"],
body .um .um-form textarea,
body .um .um-form select,
body .um input.um-form-field,
body .um .um-form .select2-container .select2-selection {
	width: 100%;
	min-height: 2.875rem;
	padding: .65rem .9rem;
	border: 1px solid var(--ejf-field-border);
	border-radius: var(--ejf-radius);
	background: var(--ejf-white);
	color: var(--ejf-ink);
	font-family: inherit;
	font-size: 1rem;
	box-shadow: none;
}
body .um .um-form textarea { min-height: 8rem; }
body .um .um-form input:focus,
body .um .um-form textarea:focus,
body .um .um-form select:focus { border-color: var(--ejf-blue); box-shadow: none; }

body .um .um-button,
body .um input[type="submit"].um-button,
body .um a.um-button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 2.875rem;
	padding: .7rem 1.5rem;
	border: 1.5px solid transparent;
	border-radius: var(--ejf-radius);
	background: var(--ejf-green);
	color: var(--ejf-white);
	font-family: inherit;
	font-size: var(--ejf-fs-small);
	font-weight: 500;
	line-height: 1.2;
	text-decoration: none;
	cursor: pointer;
	transition: background-color .2s;
}
/* UM's own hover/focus/active background is a light blue (white on it is under 3:1). */
html body .um.um .um-button:hover,
html body .um.um .um-button:focus,
html body .um.um .um-button:active,
html body .um.um input[type="submit"].um-button:hover,
html body .um.um input[type="submit"].um-button:focus,
html body .um.um input[type="submit"].um-button:active { background: var(--ejf-green-dark) !important; color: var(--ejf-white) !important; }
body .um .um-button.um-alt,
body .um a.um-button.um-alt { border-color: var(--ejf-ink); background: transparent; color: var(--ejf-ink); }
html body .um.um .um-button.um-alt:hover,
html body .um.um .um-button.um-alt:focus,
html body .um.um a.um-button.um-alt:hover,
html body .um.um a.um-button.um-alt:focus { background: var(--ejf-ink) !important; color: var(--ejf-paper) !important; }
body .um .um-left.um-half, body .um .um-right.um-half { width: 100%; float: none; margin-bottom: .75rem; }
body .um .um-col-alt-b { margin-top: .5rem; text-align: left; }
body .um .um-link-alt, body .um .um-form a { color: var(--ejf-blue); text-decoration: underline; text-underline-offset: .18em; }
body .um .um-field-checkbox, body .um .um-field-radio { color: var(--ejf-ink); }
body .um .um-field-error { padding: .6rem .8rem; border-radius: var(--ejf-radius); background: #fbeceb; color: var(--ejf-error); font-size: var(--ejf-fs-small); }
body .um .um-notice, body .um .um-notice.success { border-radius: var(--ejf-radius); }
body .um .um-clear { clear: both; }

/* Keyboard focus. UM sets outline:0!important on its inputs, links and buttons (selectors up to
   .um-form input[type=text]:focus), which leaves keyboard users with no indicator (WCAG 2.4.7).
   !important and the doubled .um are the point: both are needed to out-rank it. */
html body .um.um a:focus-visible,
html body .um.um button:focus-visible,
html body .um.um input:focus-visible,
html body .um.um textarea:focus-visible,
html body .um.um select:focus-visible,
html body .um.um .um-button:focus-visible,
html body .um.um .um-form input[type="text"]:focus-visible,
html body .um.um .um-form input[type="password"]:focus-visible,
html body .um.um .um-form input[type="email"]:focus-visible,
html body .um.um .um-form textarea:focus-visible,
html body .um.um .um-form select:focus-visible,
html body .um.um .select2-container--focus .select2-selection,
html body .um-modal a:focus-visible { outline: 3px solid var(--ejf-blue) !important; outline-offset: 2px !important; }
/* UM hides the native checkbox/radio and draws a stand-in; the ring goes on the stand-in. */
html body .um.um .um-field-checkbox input:focus-visible,
html body .um.um .um-field-radio input:focus-visible { outline: 0 !important; }
body .um .um-field-checkbox input:focus-visible ~ .um-field-checkbox-state,
body .um .um-field-radio input:focus-visible ~ .um-field-radio-state { outline: 3px solid var(--ejf-blue); outline-offset: 2px; border-radius: 3px; }

/* UM hardcodes #888 (3.1:1) for these; AA needs 4.5:1. !important is the point: it overrides third-party colour. */
body .um .um-field-checkbox-option,
body .um .um-field-radio-option,
body .um .um-field-label-description,
body .um .um-field-block,
body .um .um-field-block div,
body .um .um-form .um-field-checkbox-option { color: var(--ejf-ink) !important; }
body .um .um-link-alt,
body .um a.um-link-alt,
body .um .um-col-alt-b a { color: var(--ejf-blue) !important; text-decoration: underline; }
body .um .um-form a:hover { color: var(--ejf-ink) !important; }