/**
 * The member's account page.
 *
 * MemberPress renders this and its markup is not ours to change, so this
 * styles what it produces: mp-form-row, mp-form-label, mepr-form-input and
 * the nav of mepr-nav-item spans. The values are the same ones forms.css
 * uses, because the account form and the details form sit on the same page
 * and looking like two different sites is the problem being solved.
 *
 * Presets with literal fallbacks throughout: this loads on a page whose
 * main content comes from a plugin, and a colour that resolves to nothing
 * is worse here than a colour that is approximately right.
 */

/* ---------------------------------------------------------------------
   The account nav

   Home, Subscriptions, Payments and a log-out link, rendered as spans
   rather than a list — so they are laid out here rather than restyled.
   --------------------------------------------------------------------- */
.mp_wrapper .mepr-nav-item,
.mepr-account-form .mepr-nav-item {
	display: inline-block;
	margin: 0 1.25rem 0 0;
	padding-block-end: 0.6rem;
}

.mp_wrapper .mepr-nav-item a {
	font-weight: 600;
	text-decoration: none;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

.mp_wrapper .mepr-nav-item a:hover,
.mp_wrapper .mepr-nav-item a:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
	text-decoration: underline;
}

/* The tab you are on, marked the way every other tab row on this site
   marks it. */
.mp_wrapper .mepr-active-nav-tab a {
	color: var(--wp--preset--color--navy, #0B1D3A);
	font-weight: 700;
	text-decoration: underline;
	text-underline-offset: 4px;
}

/* One rule under the whole row, not under each item. */
.mp_wrapper .mepr-nav-item:first-of-type {
	border-block-end: 0;
}

/* ---------------------------------------------------------------------
   Fields
   --------------------------------------------------------------------- */
.mp_wrapper .mp-form-row {
	margin-block-end: 1.25rem;
}

.mp_wrapper .mp-form-label {
	margin-block-end: 0.35rem;
}

.mp_wrapper .mp-form-label label {
	display: block;
	font-weight: 600;
	font-size: 0.9375rem;
	color: var(--wp--preset--color--navy, #0B1D3A);
}

.mp_wrapper input[type="text"],
.mp_wrapper input[type="email"],
.mp_wrapper input[type="password"],
.mp_wrapper input[type="tel"],
.mp_wrapper input[type="url"],
.mp_wrapper input[type="number"],
.mp_wrapper select,
.mp_wrapper textarea {
	/* border-box because the theme sets no global one, and a 100% width
	   plus padding is 100% plus the padding — the same overflow that ran
	   every other form on this site off the right of a phone. */
	box-sizing: border-box;
	inline-size: 100%;
	max-inline-size: 40rem;
	font: inherit;
	padding: 0.85rem 1rem;
	color: inherit;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 4px;
}

.mp_wrapper textarea {
	min-block-size: 8rem;
	resize: vertical;
}

.mp_wrapper :focus-visible {
	outline: 2px solid var(--wp--preset--color--red, #D7263D);
	outline-offset: 1px;
}

/* Nothing here for mepr-field-required. It looks like a marker for the
   asterisk and is a class on the whole row, so anything colour-shaped put
   on it colours the label and the value too — which is how five correct
   fields came to be red. The asterisk in the label already says it. */

/* Per-field validation hints.
 *
 * Hidden, which they were not. MemberPress writes one under every required
 * field and hides them in signup.css — which it does not enqueue on the
 * account page. Its validate.js would hide them too, and that is not
 * loaded here either. So thirteen messages reading "First Name Required"
 * and "Invalid Email" sat under correctly filled fields, on the one page
 * whose job is telling somebody their details are in order.
 *
 * display:none rather than anything cleverer because jQuery's .show()
 * writes an inline style, which beats this — so if the validation script
 * is ever loaded on this page, the messages still appear when they should.
 */
.mp_wrapper .cc-error {
	display: none;
}

/* Errors the server sends back after a save are a different thing and stay
   visible: those are the ones somebody needs to read. */
.mp_wrapper .cc-error,
.mp_wrapper .mepr-form-has-errors {
	margin-block-start: 0.3rem;
	font-size: 0.875rem;
	font-weight: 600;
	color: var(--wp--preset--color--red, #D7263D);
}

/* ---------------------------------------------------------------------
   Checkbox groups

   The interests and policy questions. Sixteen of them on this page, and
   the label is the target rather than the box beside it.
   --------------------------------------------------------------------- */
.mp_wrapper .mepr-checkboxes-field-row {
	display: flex;
	align-items: flex-start;
	gap: 0.6rem;
	margin-block-end: 0.15rem;
}

.mp_wrapper .mepr-form-checkboxes-input {
	inline-size: auto;
	margin: 0.45rem 0 0;
	flex: none;
	accent-color: var(--wp--preset--color--red, #D7263D);
}

.mp_wrapper .mepr-form-checkboxes-label {
	padding-block: 0.4rem;
	line-height: 1.4;
	cursor: pointer;
	font-weight: 400;
}

@media ( pointer: coarse ) {

	/* The same 44px floor the rest of the site keeps, with border-box so
	   the padding counts inside it rather than on top. */
	.mp_wrapper .mepr-form-checkboxes-label {
		box-sizing: border-box;
		display: flex;
		align-items: center;
		min-block-size: 44px;
	}
}

/* ---------------------------------------------------------------------
   The button
   --------------------------------------------------------------------- */
.mp_wrapper input[type="submit"],
.mp_wrapper button[type="submit"],
.mp_wrapper .mepr-submit {
	box-sizing: border-box;
	inline-size: auto;
	padding: 0.7em 1.5em;
	font: inherit;
	font-weight: 700;
	color: var(--wp--preset--color--paper, #fff);
	background: var(--wp--preset--color--red, #D7263D);
	border: 1px solid var(--wp--preset--color--red, #D7263D);
	border-radius: 4px;
	cursor: pointer;
}

.mp_wrapper input[type="submit"]:hover,
.mp_wrapper button[type="submit"]:hover,
.mp_wrapper .mepr-submit:hover {
	background: #B81E32;
	border-color: #B81E32;
}

/* MemberPress spaces sections with an empty div. Left in place — removing
   it would change its markup — but given a size worth having. */
.mp_wrapper .mepr_spacer {
	block-size: 1.5rem;
}

/* ---------------------------------------------------------------------
   Change password

   A bare link, so it arrived as the browser's underlined default in the
   green the theme gives links — the one loud thing on a quiet page, and
   the wrong colour for an action this site paints navy.
   --------------------------------------------------------------------- */
.mp_wrapper .mepr-account-change-password a {
	font-weight: 600;
	color: var(--wp--preset--color--navy, #0B1D3A);
	text-decoration: underline;
	text-underline-offset: 3px;
}

.mp_wrapper .mepr-account-change-password a:hover,
.mp_wrapper .mepr-account-change-password a:focus-visible {
	color: var(--wp--preset--color--red, #D7263D);
}

/* =====================================================================
   The page

   Everything above styles the plugin's own parts. This lays them out,
   and only applies on the account template, whose content section
   carries .bovf-account.

   Three top-level children arrive here: the tab row, the account form,
   and the details form from [bovf_profile]. They are siblings in the
   post content rather than nested, so the grid goes on their parent and
   each one is placed by what it contains.
   ===================================================================== */
.bovf-account .wp-block-post-content {
	display: grid;
	gap: 1.5rem;
	align-items: start;
	grid-template-columns: minmax(0, 1fr);
}

/* The theme caps .mp_wrapper at 46rem for the signup forms, which are a
   single column on their own page. Here the cap is the grid cell. */
.bovf-account .wp-block-post-content > .mp_wrapper {
	max-inline-size: none;
	margin-inline: 0;
}

@media ( min-width: 62rem ) {

	.bovf-account .wp-block-post-content {
		grid-template-columns: minmax(0, 23rem) minmax(0, 1fr);
	}

	/* The tabs are the heading for both columns, not the first item in
	   the left one. */
	.bovf-account .wp-block-post-content > .mp_wrapper:has( #mepr-account-nav ) {
		grid-column: 1 / -1;
	}

	/* Subscriptions and Payments are wide tables rather than a form, and
	   a table in a 23rem column is a table nobody can read. Those pages
	   stay one column. */
	.bovf-account .wp-block-post-content:has( .mepr-account-table ) {
		grid-template-columns: minmax(0, 1fr);
	}
}

/* Both forms as cards, on the theme's own card values, so the two halves
   read as one page rather than as a plugin with something bolted under
   it. */
.bovf-account .wp-block-post-content > .mp_wrapper:has( .mepr-account-form ),
.bovf-account .wp-block-post-content > .mp_wrapper:has( .mepr-account-table ),
.bovf-account .wp-block-post-content > .bovf-form {
	box-sizing: border-box;
	max-inline-size: none;
	margin: 0;
	padding: 1.75rem;
	background: var(--wp--preset--color--paper, #fff);
	border: 1px solid var(--wp--preset--color--line, #C6D3E5);
	border-radius: 6px;
}

.bovf-account .wp-block-post-content > .mp_wrapper:has( #mepr-account-nav ) {
	padding-block-end: 0;
	border-block-end: 1px solid var(--wp--preset--color--line, #C6D3E5);
}

.bovf-account #mepr-account-nav {
	margin-block-end: 0;
}

/* The card headings. Both are real headings in the markup — one added to
   the welcome message through MemberPress's own filter, one written by
   the shortcode — because a card whose title lives in a stylesheet is a
   card with no title for anyone not looking at it. */
.bovf-account .bovf-account__title {
	margin: 0 0 1.25rem;
	font-size: 1.25rem;
	line-height: 1.3;
	color: var(--wp--preset--color--navy, #0B1D3A);
}

.bovf-account #mepr-account-welcome-message p {
	margin: 0 0 1.25rem;
	color: var(--wp--preset--color--navy-soft, #2D4569);
}

/* One button, not two. The details form below uses .bovf-submit and the
   account form above is the plugin's own input, and on a single page they
   were arriving in different colours. */
.bovf-account .mp_wrapper input[type="submit"],
.bovf-account .mp_wrapper button[type="submit"],
.bovf-account .mp_wrapper .mepr-submit {
	inline-size: auto;
	padding: 1rem 1.75rem;
	font-weight: 700;
	color: var(--wp--preset--color--navy, #141C2C);
	background: var(--wp--preset--color--sage, #E0A42C);
	border: 0;
}

/* One step darker, and navy still reads on it at 4.7:1. The details
   form's own button has no hover state anywhere on this site, so it gets
   the same one here rather than being the only button on the page that
   does not answer the pointer. */
.bovf-account .mp_wrapper input[type="submit"]:hover,
.bovf-account .mp_wrapper button[type="submit"]:hover,
.bovf-account .mp_wrapper .mepr-submit:hover,
.bovf-account .bovf-submit:hover {
	background: #57946A;
	border: 0;
}

/* The details form sets its own measure for a page of its own; in a card
   the card is the measure. */
.bovf-account .bovf-form .bovf-field {
	max-inline-size: none;
}

/* The two cards are nowhere near the same height — three fields against
   sixteen tick boxes — so the short one follows you down rather than
   leaving half a screen of nothing beside the long one. Only where there
   are two columns to do it in, and only where the reader has not asked
   for less movement. */
@media ( min-width: 62rem ) {

	.bovf-account .wp-block-post-content > .mp_wrapper:has( .mepr-account-form ) {
		position: sticky;
		inset-block-start: 1.5rem;
	}

	/* A sticky panel is still motion to somebody who gets travel sick
	   from it. */
	@media ( prefers-reduced-motion: reduce ) {

		.bovf-account .wp-block-post-content > .mp_wrapper:has( .mepr-account-form ) {
			position: static;
		}
	}
}