/**
 * MedManageSCI account & registration styles.
 *
 * Loaded site-wide (it's small) so the header pill buttons render correctly
 * everywhere; the heavier form selectors are scoped to .mms-account-form.
 *
 * @see inc/user-registration.php
 * @see parts/header.html
 * @see patterns/toolkit-cta-*.php
 */

/* ------------------------------------------------------------------ */
/* Header account pills                                                 */
/* ------------------------------------------------------------------ */

.mms-header-account {
	flex-wrap: nowrap !important;
}

.mms-header-account.mms-header-account--logged-in:not(.is-mobile) {
	margin-left: var(--wp--preset--spacing--20);
	gap: var(--wp--preset--spacing--20);
}

.mms-header-account .wp-block-button.is-style-account-pill .wp-block-button__link {
	border-radius: var(--wp--custom--border--radius-large);
	padding: 0.5em 1.25em;
	text-transform: none;
	font-size: var(--wp--preset--font-size--small);
	line-height: 1.2;
	white-space: nowrap;
}

.mms-header-account .wp-block-button.is-style-account-icon .wp-block-button__link {
	width: 48px;
	height: 48px;
	padding: 0 !important;
	border-radius: 999px;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	font-size: 0;
}

.mms-header-account .wp-block-button.is-style-account-icon .wp-block-button__link::before {
	content: "\f007";
	font-family: "Font Awesome 6 Pro";
	font-size: 18px;
	font-weight: 400;
	line-height: 1;
}

.mms-header-account .wp-block-button.is-style-account-pill:not(.is-style-account-pill--ghost) .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--cornsilk) !important;
	color: var(--wp--preset--color--indigo) !important;
}

.mms-header-account .wp-block-button.is-style-account-pill--ghost .wp-block-button__link {
	background-color: transparent !important;
	border: 1px solid var(--wp--preset--color--indigo) !important;
}

.mms-header-account .wp-block-button.is-style-account-pill--ghost .wp-block-button__link:hover {
	background-color: var(--wp--preset--color--indigo) !important;
	color: var(--wp--preset--color--cornsilk) !important;
}

/* Toolkit Final CTA — Figma "Desktop Button (Arrow+Green)" */
.mms-show-when-toolkit-incomplete .wp-block-buttons .wp-block-button .wp-block-button__link {
	text-transform: uppercase;
	border-radius: var(--wp--custom--border--radius-large, 999px);
}

/* ------------------------------------------------------------------ */
/* Hero — restore myrtle-green eyebrow inside the teal content card    */
/* ------------------------------------------------------------------ */

/*
 * .is-style-eyebrow in style-shared.css sets color: indigo, which
 * overrides the card's has-myrtle-green-color text colour. Re-apply
 * myrtle-green so "CREATE AN ACCOUNT" matches the Figma design.
 */
.wp-block-group.has-myrtle-green-color .is-style-eyebrow {
	color: var(--wp--preset--color--myrtle-green);
}

/* ------------------------------------------------------------------ */
/* Create Account form                                                  */
/* ------------------------------------------------------------------ */

/*
 * Layout mirrors the "Set Up Your Account" Figma frame:
 *  - Compact vertical rhythm (no big gap between label rows)
 *  - Fields stack with a small gap between the label and its input
 *  - Submit button is left-aligned and pill-shaped (not full-width)
 *  - Quiz fieldsets sit flush against the field stack (no extra
 *    padding-top); their legend acts as the section label
 */
.mms-account-form {
	max-width: 848px;
	margin: var(--wp--preset--spacing--30) auto 0;
	padding: 0;
	display: flex;
	flex-direction: column;
	gap: var(--wp--preset--spacing--40);
}

/* If a filter still injects markup between form children, hide common strays. */
.mms-account-form > br,
.mms-account-form > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.mms-account-form__notice {
	padding: var(--wp--preset--spacing--20) var(--wp--preset--spacing--30);
	border-radius: var(--wp--custom--border--radius-small);
	font-size: var(--wp--preset--font-size--small);
}

.mms-account-form__notice--error {
	background-color: var(--wp--custom--forms--errors--color--background);
	color: var(--wp--custom--forms--errors--color--text);
	border: 1px solid var(--wp--custom--forms--errors--color--border);
}

.mms-account-form__row {
	display: grid;
	gap: var(--wp--preset--spacing--30);
}

.mms-account-form__row--split {
	grid-template-columns: 1fr 1fr;
}

@media (max-width: 600px) {
	.mms-account-form__row--split {
		grid-template-columns: 1fr;
	}
}

.mms-account-form__field {
	display: flex;
	flex-direction: column;
	/* Tight cap-to-input distance to match the Figma frame. The label's
	 * own `line-height: 1` (below) kills the font's natural leading so
	 * the visible distance equals roughly `gap`. */
	gap: var(--wp--preset--spacing--10);
}

.mms-account-form__field label {
	display: block;
	font-size: var(--wp--preset--font-size--medium);
	font-weight: 600;
	line-height: 1;
	margin: 0;
	padding: 0;
	color: var(--wp--preset--color--indigo);
}

.mms-account-form__field input {
	font-size: var(--wp--preset--font-size--medium);
	line-height: 1.35;
	width: 100%;
	margin: 0;
}

.mms-account-form__field.has-error input {
	border-color: var(--wp--custom--forms--errors--color--border);
	background-color: var(--wp--custom--forms--errors--color--background);
}

/* wpautop can leave empty <p> between label and a former block wrapper. */
.mms-account-form__field > p:empty {
	display: none;
	margin: 0;
	padding: 0;
}

.mms-account-form__error {
	margin: 0;
	font-size: var(--wp--preset--font-size--meta-small);
	line-height: 1.4;
	color: var(--wp--custom--forms--errors--color--text);
}

/* ---- Password show/hide toggle ---- */
/* Wrapper is a <span> so wpautop does not insert <p> before a block <div> after </label>. */
.mms-account-form__password-wrap {
	display: block;
	width: 100%;
	position: relative;
}

/* wpautop may still inject <br> between sibling tags; suppress inside this control. */
.mms-account-form__password-wrap > br {
	display: none;
}

.mms-account-form__password-wrap input {
	padding-right: calc(var(--wp--custom--forms--fields--spacing--padding) * 2 + 1em);
}

.mms-account-form__password-toggle {
	position: absolute;
	top: 50%;
	right: var(--wp--custom--forms--fields--spacing--padding);
	transform: translateY(-50%);
	background: transparent !important;
	border: 0;
	padding: 0 !important;
	cursor: pointer;
	color: var(--wp--preset--color--black-coral);
	width: 1.5em;
	height: 1.5em;
	display: inline-flex;
	align-items: center;
	justify-content: center;
}

.mms-account-form__password-toggle::before {
	content: '\f06e'; /* fa-eye */
	font-family: "Font Awesome 6 Pro";
	font-weight: 400;
	font-size: var(--wp--preset--font-size--small);
}

.mms-account-form__password-toggle.is-showing::before {
	content: '\f070'; /* fa-eye-slash */
}

/* ---- Quiz fieldsets ---- */
.mms-account-form__quiz {
	display: flex;
	flex-direction: column;
	gap: 0.4em;
	padding: 0;
	border: 0;
	margin: 0;
}

.mms-account-form__quiz legend {
	font-weight: 600;
	color: var(--wp--preset--color--indigo);
	font-size: var(--wp--preset--font-size--medium);
	padding: 0;
	margin: 0;
	line-height: 1.4;
	margin-bottom: var(--wp--preset--spacing--10);
}

.mms-account-form__quiz.has-error legend {
	color: var(--wp--custom--forms--errors--color--text);
}

.mms-account-form__radios {
	display: flex;
	flex-wrap: wrap;
	gap: var(--wp--preset--spacing--30);
}

.mms-account-form__radio {
	display: inline-flex;
	align-items: center;
	gap: 0.5em;
	font-weight: 400;
	color: var(--wp--preset--color--black-coral);
	font-size: var(--wp--preset--font-size--small);
	cursor: pointer;
}

.mms-account-form__radio input[type="radio"] {
	width: 1.15em;
	height: 1.15em;
	accent-color: var(--wp--preset--color--myrtle-green);
	margin: 0;
	cursor: pointer;
}

/* ---- Welcome notice width (REDCap variant) ---- */
/*
 * The welcome notice is rendered as raw shortcode HTML, so it doesn't sit
 * inside a WordPress constrained-layout parent. Apply the same effective
 * width the footer's Final CTA block gets (alignwide inside a constrained
 * wrapper with spacing-40 side padding).
 */
.mms-create-account-welcome.is-from-redcap {
	max-width: var(--wp--style--global--wide-size);
	width: calc(100% - var(--wp--preset--spacing--40) * 2);
	margin-left: auto !important;
	margin-right: auto !important;
	box-sizing: border-box;
}

/* ---- Suppress global :invalid red styling for pristine form fields ---- */
/*
 * style-shared.css applies error colours to any :invalid input (required
 * fields are immediately invalid when empty). The MMS form handles error
 * display via the server-side .has-error class instead, so we reset the
 * browser-default :invalid appearance here.
 */
.mms-account-form :is(input, textarea):invalid {
	background-color: var(--wp--custom--forms--fields--color--background);
	border-color: var(--wp--custom--forms--fields--color--border);
	color: inherit;
}

/* ---- Submit button ---- */
.mms-account-form__actions {
	margin: 0;
	display: flex;
	justify-content: flex-start;
}

.mms-account-form__submit {
	background-color: var(--wp--preset--color--water) !important;
	color: var(--wp--preset--color--indigo) !important;
	border-radius: 999px !important;
	border: none;
	box-sizing: border-box;
	cursor: pointer;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	/* Use symmetric padding and let flexbox centering handle vertical
	 * alignment — avoids the asymmetry that min-height + WP element
	 * padding can create. */
	font-size: var(--wp--preset--font-size--medium);
	text-transform: uppercase;
	font-weight: 400;
	transition: var(--wp--custom--animation--default-transition);
}

.mms-account-form__submit::before,
.mms-account-form__submit::after {
	content: none !important;
	display: none !important;
	margin: 0 !important;
	padding: 0 !important;
}

.mms-account-form__submit:hover,
.mms-account-form__submit:focus {
	background-color: var(--wp--preset--color--indigo) !important;
	color: var(--wp--preset--color--water) !important;
}

.mms-account-form--logged-in {
	max-width: 848px;
	margin: var(--wp--preset--spacing--50) auto 0;
	text-align: center;
}