/* ---------- /members/ - the sign-up landing page for non-members ---------- */

/* This page uses the theme's plain default template (it was never built in
   Elementor), which wraps content in a boxed max-width column and prints its
   own "Members" title bar - neither of which match the Elementor-built pages
   elsewhere on the site. Strip both so this page reads the same way. */
body:has(.elementor-801) .page-header {
	display: none;
}
body:has(.elementor-801) .site-main,
body:has(.elementor-801) #content {
	max-width: none !important;
	width: 100% !important;
	padding: 0 !important;
}

/* Hero band - the Elementor hero fragment rendered here (template 801, a
   literal copy of the Charity Directory page's own hero - see the plugin's
   PHP) has its own background/padding/typography, so this just needs to
   break it out to full viewport width, since it's injected inside the
   theme's constrained content column. */
.elementor-801 {
	width: 100vw;
	margin-left: calc(50% - 50vw);
	margin-right: calc(50% - 50vw);
}

/* Body content - centred column with the same 120px top/bottom gap used
   under every other hero on the site. */
.ftm-members-form-wrap {
	max-width: 700px;
	margin: 0 auto;
	padding: 120px 20px 0;
}
.ftm-members-login-link {
	max-width: 700px;
	margin: 0 auto;
	text-align: center;
	padding: 20px 20px 120px;
	font-size: 16px;
	color: var(--e-global-color-text);
}
.ftm-members-login-link a {
	color: var(--e-global-color-primary);
	font-weight: 700;
	text-decoration: underline;
}
/* MemberPress's own compact "Login" link (shown even with unauth_login set
   to "hide") - not needed, we provide our own "Already a member?" link above. */
.mepr-login-form-wrap {
	display: none;
}

/* MemberPress registration/login submit buttons - copies the site header's
   own "Membership" button exactly: solid yellow fill, border the same colour
   as the fill (so no border is visible at rest), and on hover the fill drops
   away leaving a visible blue border. Both buttons share identical styling.
   (Login form markup is `#mepr_loginform` / class "mepr-form" - it does NOT
   carry a "mepr-login-form" class, which is why an earlier attempt missed it.) */
.mepr-signup-form input.mepr-submit,
#mepr_loginform input#wp-submit {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	color: var(--e-global-color-text);
	background: var(--e-global-color-secondary);
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 10px;
	padding: 15px 25px;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
}
.mepr-signup-form input.mepr-submit:hover,
#mepr_loginform input#wp-submit:hover {
	background: transparent;
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-text);
}
@media (max-width: 767px) {
	.mepr-signup-form input.mepr-submit,
	#mepr_loginform input#wp-submit {
		font-size: 16px;
	}
}

/* ---- Sign-up: "Which areas would you like to join?" as clickable icon cards ----
   The real tick boxes stay in the form (so it still submits as normal); they are
   stretched invisibly over each card so clicking anywhere ticks / unticks it. */
.mepr_mepr_areas .mepr-checkboxes-field {
	display: grid;
	grid-template-columns: repeat(3, minmax(0, 1fr));
	gap: 12px;
	margin-top: 8px;
}
.mepr_mepr_areas .mepr-checkboxes-field-row {
	position: relative;
	display: block;
}
.mepr_mepr_areas .mepr-form-checkboxes-input {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	margin: 0;
	opacity: 0;
	cursor: pointer;
	z-index: 2;
}
.mepr_mepr_areas .mepr-form-checkboxes-label {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 6px;
	height: 100%;
	box-sizing: border-box;
	padding: 76px 12px 18px;
	text-align: center;
	font-family: 'Montserrat', sans-serif;
	font-size: 17px;
	font-weight: 700;
	line-height: 1.25;
	color: var(--e-global-color-text);
	background-color: #fff;
	background-repeat: no-repeat;
	background-position: center 18px;
	background-size: 44px 44px;
	border: 2px solid #cfd9ea;
	border-radius: 10px;
	transition: background-color .2s, border-color .2s, color .2s, transform .2s;
}
.mepr_mepr_areas .mepr-form-checkboxes-label::after {
	font-size: 13px;
	font-weight: 400;
}
.mepr_mepr_areas .mepr-checkboxes-field-row:hover .mepr-form-checkboxes-label {
	border-color: var(--e-global-color-primary);
	transform: translateY(-2px);
}
.mepr_mepr_areas .mepr-form-checkboxes-input:checked + .mepr-form-checkboxes-label {
	background-color: var(--e-global-color-primary);
	border-color: var(--e-global-color-primary);
	color: #fff;
}
.mepr_mepr_areas .mepr-form-checkboxes-input:focus-visible + .mepr-form-checkboxes-label {
	outline: 3px solid var(--e-global-color-secondary);
	outline-offset: 2px;
}
/* small tick badge once chosen */
.mepr_mepr_areas .mepr-form-checkboxes-input:checked + .mepr-form-checkboxes-label::before {
	content: "\2713";
	position: absolute;
	top: 8px;
	right: 10px;
	width: 22px;
	height: 22px;
	line-height: 22px;
	border-radius: 50%;
	background: var(--e-global-color-secondary);
	color: var(--e-global-color-primary);
	font-size: 14px;
}
.mepr_mepr_areas label[for$="-parents"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300489A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 40S6 29 6 17a9 9 0 0 1 18-2 9 9 0 0 1 18 2c0 12-18 23-18 23z'/%3E%3C/svg%3E"); }
.mepr_mepr_areas input:checked + label[for$="-parents"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M24 40S6 29 6 17a9 9 0 0 1 18-2 9 9 0 0 1 18 2c0 12-18 23-18 23z'/%3E%3C/svg%3E"); }
.mepr_mepr_areas label[for$="-parents"]::after { content: "Free - access straight away"; }
.mepr_mepr_areas label[for$="-community"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300489A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='16' r='5'/%3E%3Ccircle cx='10' cy='20' r='4'/%3E%3Ccircle cx='38' cy='20' r='4'/%3E%3Cpath d='M14 40v-5a10 10 0 0 1 20 0v5M2 38v-3a7 7 0 0 1 7-7M46 38v-3a7 7 0 0 0-7-7'/%3E%3C/svg%3E"); }
.mepr_mepr_areas input:checked + label[for$="-community"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='24' cy='16' r='5'/%3E%3Ccircle cx='10' cy='20' r='4'/%3E%3Ccircle cx='38' cy='20' r='4'/%3E%3Cpath d='M14 40v-5a10 10 0 0 1 20 0v5M2 38v-3a7 7 0 0 1 7-7M46 38v-3a7 7 0 0 0-7-7'/%3E%3C/svg%3E"); }
.mepr_mepr_areas label[for$="-community"]::after { content: "Paid annual membership - apply and we'll be in touch"; }
.mepr_mepr_areas label[for$="-professionals"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='%2300489A' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='15' width='36' height='24' rx='4'/%3E%3Cpath d='M17 15v-3a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3M6 26h36'/%3E%3C/svg%3E"); }
.mepr_mepr_areas input:checked + label[for$="-professionals"] { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 48 48' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Crect x='6' y='15' width='36' height='24' rx='4'/%3E%3Cpath d='M17 15v-3a3 3 0 0 1 3-3h8a3 3 0 0 1 3 3v3M6 26h36'/%3E%3C/svg%3E"); }
.mepr_mepr_areas label[for$="-professionals"]::after { content: "Paid annual membership - apply and we'll be in touch"; }
@media (max-width: 600px) {
	.mepr_mepr_areas .mepr-checkboxes-field { grid-template-columns: 1fr; }
}

/* Belt and braces: ignore any stray <br> WordPress may add inside the area cards */
.mepr_mepr_areas br { display: none !important; }
.mepr_mepr_areas .mepr-checkboxes-field { grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); }
.mepr_mepr_areas .mepr-checkboxes-field-row,
.mepr_mepr_areas .mepr-form-checkboxes-label { margin: 0; }
@media (max-width: 600px) {
	.mepr_mepr_areas .mepr-checkboxes-field { grid-auto-flow: row; grid-auto-columns: auto; }
}

/* MemberPress forces .mepr-form-input to inline-block, so state the layout firmly. */
.mp_wrapper .mepr_mepr_areas div.mepr-checkboxes-field.mepr-form-input {
	display: grid !important;
	grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
	grid-auto-flow: row !important;
	gap: 12px !important;
	width: 100% !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
	align-items: stretch;
}
.mp_wrapper .mepr_mepr_areas .mepr-checkboxes-field-row {
	display: block !important;
	position: relative !important;
	width: auto !important;
	min-width: 0;
	height: auto !important;
	margin: 0 !important;
	padding: 0 !important;
}
.mp_wrapper .mepr_mepr_areas .mepr-form-checkboxes-label {
	display: flex !important;
	position: relative !important;
	width: 100% !important;
	min-width: 0;
	height: 100% !important;
	min-height: 150px;
	margin: 0 !important;
	overflow-wrap: anywhere;
}
@media (max-width: 600px) {
	.mp_wrapper .mepr_mepr_areas div.mepr-checkboxes-field.mepr-form-input { grid-template-columns: 1fr !important; }
	.mp_wrapper .mepr_mepr_areas .mepr-form-checkboxes-label { min-height: 0; }
}

.mp_wrapper .mepr_mepr_areas .mepr-form-checkboxes-label { box-sizing: border-box !important; max-width: 100%; }

/* MemberPress theme.css hard-codes these labels to 222px wide; let the grid size them. */
.mp_wrapper .mepr_mepr_areas .mepr-checkboxes-field-row label.mepr-form-checkboxes-label {
	width: 100% !important;
	min-width: 0 !important;
	max-width: 100% !important;
	box-sizing: border-box !important;
}


/* ================= Forums (bbPress) - brand styling =================
   Matches the rest of the site: Montserrat, FED blue links, cream header rows,
   and the same yellow buttons used everywhere else. */
#bbpress-forums,
#bbpress-forums div.bbp-breadcrumb,
#bbpress-forums .bbp-template-notice,
.bbp-search-form {
	font-family: 'Montserrat', sans-serif;
	font-size: 16px;
	line-height: 1.6;
	color: var(--e-global-color-text);
}
#bbpress-forums * { font-family: inherit; }
#bbpress-forums a { color: var(--e-global-color-primary); font-weight: 600; text-decoration: none; }
#bbpress-forums a:hover { text-decoration: underline; }
#bbpress-forums div.bbp-breadcrumb p,
#bbpress-forums div.bbp-breadcrumb { font-size: 14px; margin: 0 0 18px; }

/* forum / topic / reply lists */
#bbpress-forums ul.bbp-forums,
#bbpress-forums ul.bbp-topics,
#bbpress-forums ul.bbp-replies,
#bbpress-forums ul.bbp-lead-topic {
	border: 2px solid #cfd9ea;
	border-radius: 10px;
	overflow: hidden;
	background: #fff;
	margin-bottom: 24px;
}
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-footer {
	background: var(--e-global-color-2b2b8ce);
	color: var(--e-global-color-text);
	font-weight: 700;
	border-color: #cfd9ea;
	padding: 12px 8px;
}
#bbpress-forums li.bbp-body ul.forum,
#bbpress-forums li.bbp-body ul.topic { border-top: 1px solid #e3e9f4; padding: 14px 8px; }
#bbpress-forums div.even, #bbpress-forums ul.even { background: #fff; }
#bbpress-forums div.odd,  #bbpress-forums ul.odd  { background: #fbfaf6; }
#bbpress-forums .bbp-forum-title,
#bbpress-forums .bbp-topic-permalink { font-size: 17px; font-weight: 700; }
#bbpress-forums .bbp-forum-content,
#bbpress-forums .bbp-topic-meta,
#bbpress-forums .bbp-topic-started-by { font-size: 14px; }
#bbpress-forums .bbp-topic-content p,
#bbpress-forums .bbp-reply-content p { font-size: 17px; }
#bbpress-forums div.bbp-reply-header { background: var(--e-global-color-2b2b8ce); border-color: #cfd9ea; }
#bbpress-forums div.bbp-topic-author a.bbp-author-name,
#bbpress-forums div.bbp-reply-author a.bbp-author-name { font-weight: 700; }

/* notices */
#bbpress-forums div.bbp-template-notice,
div.bbp-template-notice {
	background: var(--e-global-color-2b2b8ce);
	border: 0;
	border-left: 4px solid var(--e-global-color-secondary);
	border-radius: 8px;
	color: var(--e-global-color-text);
	padding: 12px 16px;
}
#bbpress-forums div.bbp-template-notice p { margin: 0; font-size: 15px; }

/* forms */
#bbpress-forums fieldset.bbp-form {
	border: 2px solid #cfd9ea;
	border-radius: 10px;
	padding: 20px 24px;
	background: #fff;
}
#bbpress-forums fieldset.bbp-form legend {
	font-weight: 700;
	font-size: 18px;
	color: var(--e-global-color-primary);
	padding: 0 8px;
}
#bbpress-forums fieldset.bbp-form label { font-weight: 600; }
#bbpress-forums input[type="text"],
#bbpress-forums input[type="password"],
#bbpress-forums input[type="search"],
#bbpress-forums textarea,
#bbpress-forums select,
.bbp-search-form input[type="text"] {
	border: 2px solid #cfd9ea;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 16px;
	background: #fff;
	box-shadow: none;
}
#bbpress-forums input[type="text"]:focus,
#bbpress-forums textarea:focus,
.bbp-search-form input[type="text"]:focus { outline: none; border-color: var(--e-global-color-primary); }

/* buttons - identical to the site's yellow buttons */
#bbpress-forums button:not(.ed_button),
#bbpress-forums input[type="submit"]:not(.ed_button),
#bbpress-forums a.button,
#bbpress-forums .button:not(.ed_button),
.bbp-search-form input[type="submit"],
.bbp-search-form .button {
	display: inline-block;
	font-family: 'Montserrat', sans-serif;
	font-weight: 700;
	font-size: 18px;
	line-height: 1.2;
	color: var(--e-global-color-text);
	background: var(--e-global-color-secondary);
	border: 2px solid var(--e-global-color-secondary);
	border-radius: 10px;
	padding: 15px 25px;
	text-decoration: none;
	text-transform: none;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	appearance: none;
	-webkit-appearance: none;
	transition: all .2s;
}
#bbpress-forums button:not(.ed_button):hover,
#bbpress-forums input[type="submit"]:not(.ed_button):hover,
#bbpress-forums a.button:hover,
#bbpress-forums .button:not(.ed_button):hover,
.bbp-search-form input[type="submit"]:hover,
.bbp-search-form .button:hover {
	background: transparent;
	border-color: var(--e-global-color-primary);
	color: var(--e-global-color-text);
	text-decoration: none;
}
/* the small B / I / LINK editor buttons stay small */
#bbpress-forums .quicktags-toolbar input.button.ed_button {
	font-size: 13px; font-weight: 600; padding: 4px 10px; border-radius: 6px;
	color: var(--e-global-color-text); background: #fff; border: 1px solid #cfd9ea;
}
#bbpress-forums .bbp-submit-wrapper { margin-top: 12px; }

/* pagination */
#bbpress-forums .bbp-pagination-links a,
#bbpress-forums .bbp-pagination-links span.current {
	border-radius: 8px; padding: 4px 10px; border: 2px solid #cfd9ea; background: #fff;
}
#bbpress-forums .bbp-pagination-links span.current { background: var(--e-global-color-primary); border-color: var(--e-global-color-primary); color: #fff; }
#bbpress-forums .bbp-pagination-count { font-size: 14px; }

@media (max-width: 767px) {
	#bbpress-forums button:not(.ed_button),
	#bbpress-forums input[type="submit"]:not(.ed_button),
	#bbpress-forums a.button,
	.bbp-search-form input[type="submit"] { font-size: 16px; }
}

/* ---- Forum text sizes: bbPress ships 11-12px, too small next to the site's 16-18px ---- */
#bbpress-forums .bbp-forum-content,
#bbpress-forums .bbp-forum-content p { font-size: 16px !important; line-height: 1.5; }
#bbpress-forums li.bbp-forum-topic-count,
#bbpress-forums li.bbp-forum-reply-count,
#bbpress-forums li.bbp-forum-freshness,
#bbpress-forums li.bbp-forum-freshness a,
#bbpress-forums li.bbp-topic-voice-count,
#bbpress-forums li.bbp-topic-reply-count,
#bbpress-forums li.bbp-topic-freshness,
#bbpress-forums li.bbp-topic-freshness a,
#bbpress-forums li.bbp-header,
#bbpress-forums li.bbp-header li,
#bbpress-forums li.bbp-footer,
#bbpress-forums li.bbp-footer div { font-size: 15px !important; }
#bbpress-forums .bbp-topic-meta,
#bbpress-forums .bbp-topic-started-by,
#bbpress-forums .bbp-topic-meta a,
#bbpress-forums .bbp-author-name,
#bbpress-forums .bbp-author-role { font-size: 15px !important; }
#bbpress-forums .bbp-reply-post-date,
#bbpress-forums a.bbp-reply-permalink,
#bbpress-forums .bbp-reply-header .bbp-meta { font-size: 14px !important; }
#bbpress-forums div.bbp-breadcrumb,
#bbpress-forums div.bbp-breadcrumb p,
#bbpress-forums .bbp-pagination-count,
#bbpress-forums .bbp-template-notice p { font-size: 15px !important; }
#bbpress-forums div.bbp-template-notice p { font-size: 16px !important; }
#bbpress-forums .bbp-forum-title, #bbpress-forums .bbp-topic-permalink { font-size: 18px !important; }

/* space between the search box and the list below it */
#bbpress-forums #bbp-search-form,
#bbpress-forums .bbp-search-form,
.bbp-search-form {
	display: flow-root;
	margin: 0 0 16px;
	padding-bottom: 0;
}

/* note under the area cards */
.mepr_mepr_areas fieldset::after {
	content: "Schools & Community and Healthcare Professionals are paid annual memberships, with payment made off-site. Tick them to apply and someone will be in touch. Parents & Carers is free and instant.";
	display: block;
	margin-top: 12px;
	font-size: 14px;
	line-height: 1.5;
	color: var(--e-global-color-text);
}

/* Sign-up form: names side by side, password + confirmation side by side, no Username box. */
.mepr-signup-form .mepr_username { display: none !important; }
.mepr-signup-form { display: flex; flex-wrap: wrap; column-gap: 16px; align-items: flex-start; }
.mepr-signup-form > * { flex: 1 1 100%; min-width: 0; }
.mepr-signup-form > .mepr_first_name, .mepr-signup-form > .mepr_last_name,
.mepr-signup-form > .mepr_password, .mepr-signup-form > .mepr_password_confirm { flex: 1 1 calc(50% - 8px); }
.mepr-signup-form > input[type=hidden] { flex: 0 0 0; }
@media (max-width: 600px) {
	.mepr-signup-form > .mepr_first_name, .mepr-signup-form > .mepr_last_name,
	.mepr-signup-form > .mepr_password, .mepr-signup-form > .mepr_password_confirm { flex-basis: 100%; }
}

.mepr-signup-form select[name="mepr_location"] { width: 100%; min-height: 44px; background-color: #fff; border: 1px solid #c3c4c7; border-radius: 4px; padding: 8px 12px; font-size: 16px; color: inherit; }

/* Same field order everywhere (the popup's MemberPress template puts custom fields before Email). */
.mepr-signup-form > .mepr_first_name, .mepr-signup-form > .mepr_last_name { order: 1; }
.mepr-signup-form > .mepr_email, .mepr-signup-form > .mepr_email_stripe { order: 2; }
.mepr-signup-form > .mepr_password, .mepr-signup-form > .mepr_password_confirm { order: 3; }
.mepr-signup-form > .mepr_mepr_location { order: 4; }
.mepr-signup-form > .mepr_mepr_areas { order: 5; }
.mepr-signup-form > * { order: 6; }
.mepr-signup-form > .mp-form-submit, .mepr-signup-form > .mepr_spacer, .mepr-signup-form > .mepr-form-has-errors { order: 9; }
/* Error labels only when a field is actually invalid. */
.mepr-signup-form .mp-form-label .cc-error { display: none; }
.mepr-signup-form .invalid .cc-error, .mepr-signup-form .mepr-field-invalid .cc-error { display: inline; }
/* Show/hide password eye: an icon inside the box, not a button. */
.mepr-signup-form .mp-hide-pw { position: relative; }
.mepr-signup-form .mp-hide-pw button.mp-hide-pw, .mepr-signup-form button.mp-hide-pw { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); background: none !important; border: 0 !important; box-shadow: none !important; padding: 4px !important; min-height: 0 !important; width: auto !important; color: #6b7280 !important; }