/* ================================================================================================
 * BASELINE — KMA CSS MODULE 13 — REGISTRATION
 * ================================================================================================
 *
 * FILE: 13-registration.css
 * VERSION: 1.0
 * Last Updated: 2026-03-21
 *
 * PURPOSE
 * -------
 * Styles the Theme My Login registration form with:
 * - fixed field order across breakpoints
 * - two-column layout on tablet/desktop
 * - one-column layout on phones
 * - widened register form area on larger screens
 * - required-field asterisk decoration
 *
 * SCOPE
 * -----
 * Targets Theme My Login registration markup using `.tml` selectors.
 *
 * NOTES
 * -----
 * - Field order is controlled with CSS Grid template areas.
 * - Mobile keeps the same logical field order as desktop.
 * - This file assumes the existing TML wrapper / field class names are present.
 *
 * IMPORTANT
 * ---------
 * - NO LOGIC OR STRUCTURAL CHANGES HAVE BEEN MADE.
 * - Duplicate / layered declarations remain intentionally preserved.
 * - This snapshot reflects the working production version.
 *
 * ================================================================================================ */


/* =========================================================
 * MODULE 13A — TML REGISTER FORM: FIXED ORDER ON DESKTOP / TABLET / PHONE
 * ========================================================= */

/* Optional: hide TML “indicator” block (your inline display:none -> CSS) */
.tml .tml-indicator-wrap {

	/**** Hide TML indicator block globally. ****/
	display: none !important;
}

/* Grid container */
.tml form {

	/**** Use grid layout for registration form. ****/
	display: grid;
	grid-template-columns: 1fr 1fr;
	column-gap: 44px;
	row-gap: 0px;
	align-items: start;

	/*  max-width: 800px; */

	/**** Center form block horizontally. ****/
	margin: 0 auto;
}

/* Bold labels */
.tml label {

	/**** Emphasize field labels. ****/
	font-weight: 700;
	display: inline-block;
	margin-bottom: 6px;
}

/* Inputs */
.tml input[type="text"],
.tml input[type="email"],
.tml input[type="password"] {

	/**** Full-width input fields within grid cells. ****/
	width: 100%;
	padding: 12px 12px;
	border: 1px solid #cfcfcf;
	border-radius: 6px;
}


/* =========================================================
 * MODULE 13B — EXPLICIT GRID LAYOUT USING TEMPLATE AREAS
 * ========================================================= */

.tml form {

	/**** Force stable field order using named grid areas. ****/
	grid-template-areas:
		"first  email"
		"last   pass1"
		"street pass2"
		"hint   hint"
		"submit submit"
		"links  links";
}

.tml-first_name-wrap     { grid-area: first; }
.tml-last_name-wrap      { grid-area: last; }
.tml-street_address-wrap { grid-area: street; }

.tml-user_email-wrap     { grid-area: email; }
.tml-user_pass1-wrap     { grid-area: pass1; }
.tml-user_pass2-wrap     { grid-area: pass2; }

/* Hint + submit full width */
.tml-indicator_hint-wrap {

	/**** Place hint row full width and pull it slightly upward. ****/
	grid-area: hint;
	margin-top: -6px;
}

.tml-submit-wrap {

	/**** Place submit row full width with slight spacing above. ****/
	grid-area: submit;
	margin-top: 6px;
}

.tml-links-wrap {

	/**** Place TML links row full width. ****/
	grid-area: links;
}

/* Add "* required field" under TML password hint */
.tml-indicator_hint-wrap::after {

	/**** Add explanatory required-field note under hint area. ****/
	content: "* required field";
	display: block;
	margin-top: 6px;
	font-size: 0.9em;
	font-style: italic;
	color: #666;
}


/* =========================================================
 * MODULE 13C — SUBMIT + LINKS ALIGNMENT
 * ========================================================= */

/* Center the Register button */
.tml-submit-wrap {

	/**** Center submit button row. ****/
	text-align: center;
}

.tml input[type="submit"] {

	/**** Submit button sizing / emphasis. ****/
	padding: 12px 28px;
	border-radius: 6px;
	font-weight: 700;
}

/* If TML links are showing under the button and you want them centered too */
.tml .tml-links-wrap {

	/**** Center helper/account links below submit button. ****/
	text-align: center;
	margin-top: 6px;
}


/* =========================================================
 * MODULE 13D — PHONE LAYOUT
 * ========================================================= */

/* PHONE: stack everything but keep the SAME order as desktop */
@media (max-width: 767px) {

	.tml form {

		/**** Switch to single-column layout on phones. ****/
		grid-template-columns: 1fr;
		column-gap: 0;

		/**** Preserve desktop field order in stacked mobile layout. ****/
		grid-template-areas:
			"first"
			"last"
			"street"
			"email"
			"pass1"
			"pass2"
			"hint"
			"submit"
			"links";

		/**** Constrain form width relative to viewport. ****/
		max-width: 92vw;
	}
}


/* =========================================================
 * MODULE 13E — FORCE WIDER TML REGISTER AREA (TABLET + DESKTOP)
 * Put this LAST so it wins
 * ========================================================= */

@media (min-width: 768px) {

	/* Make the TML wrapper itself wider */
	.tml,
	.tml.tml-register,
	.tml.tml-register .tml-form,
	.tml.tml-register form,
	body .tml .tml-form,
	body .tml form {

		/**** Expand register form wrappers on tablet/desktop. ****/
		width: 100% !important;
		max-width: 1040px !important;
		margin-left: auto !important;
		margin-right: auto !important;
	}

	/* Ensure the grid stretches to the container */
	.tml.tml-register form {

		/**** Stretch grid items across widened container. ****/
		justify-items: stretch !important;
		align-items: start !important;
	}

	/* Ensure inputs actually fill their grid cell */
	.tml .tml-field-wrap input[type="text"],
	.tml .tml-field-wrap input[type="email"],
	.tml .tml-field-wrap input[type="password"] {

		/**** Force inputs to fill available width in each field wrapper. ****/
		width: 100% !important;
		max-width: none !important;
		box-sizing: border-box !important;
	}
}

@media (min-width: 1200px) {

	.tml,
	.tml.tml-register,
	.tml.tml-register .tml-form,
	.tml.tml-register form,
	body .tml .tml-form,
	body .tml form {

		/**** Increase maximum form width on larger desktops. ****/
		max-width: 1120px !important;
	}
}


/* =========================================================
 * MODULE 13F — EQUAL COLUMN ENFORCEMENT
 * ========================================================= */

@media (min-width: 768px) {

	/* Force equal columns explicitly */
	/* minmax prevents internal content from forcing one column wider than the other.
	   It’s the modern “bulletproof equal column” pattern for CSS Grid. */
	.tml form {

		/**** Enforce equal-width desktop/tablet columns. ****/
		grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
	}

	/* Ensure field wrappers stretch fully */
	.tml .tml-field-wrap {

		/**** Make field wrappers fill assigned grid area width. ****/
		width: 100% !important;
	}

	/* Ensure labels + inputs occupy full grid cell */
	.tml .tml-field-wrap > * {

		/**** Make direct field-wrapper children fill full width. ****/
		width: 100% !important;
	}
}


/* =========================================================
 * MODULE 13G — REQUIRED ASTERISKS
 * ========================================================= */

/* Required asterisks — TML Register */
body .tml label.tml-label[for="first_name"]::after,
body .tml label.tml-label[for="last_name"]::after,
body .tml label.tml-label[for="street_address"]::after,
body .tml label.tml-label[for="user_email"]::after,
body .tml label.tml-label[for="pass1"]::after,
body .tml label.tml-label[for="pass2"]::after {

	/**** Append red required-field asterisk to key registration labels. ****/
	content: " *";
	color: #d40000 !important;
	font-weight: 800 !important;
}