/*
 * IN2VATE-2669 - Responsive styles for the login recovery pages
 * (forgot password / forgot username / reset password and their result pages).
 *
 * Loaded ONLY by the pages that opt in (the recovery pages, plus index.cfm,
 * account-locked.cfm and invalid.cfm), after main_style.css. Every rule is scoped to
 * body.recovery-page (or body.login-page for index.cfm only), so other pages that
 * share main_style.css (acknowledge.cfm, verification.cfm) are not affected.
 * Desktop (>= 992px) keeps the existing layout.
 */

/* Let the page grow with its content instead of clipping at 100% height */
body.recovery-page {
	height: auto;
	min-height: 100%;
	background-color: #02131c; /* fallback while the image loads */
}

/* Keep the background image behind the whole page when it is taller than the screen
   (the body background is otherwise sized to the first screen only) */
body.recovery-page::before {
	content: "";
	position: fixed;
	top: 0;
	right: 0;
	bottom: 0;
	left: 0;
	z-index: -1;
	background: inherit;
}

/* Desktop: two-column card, same as before (height used to be an inline style) */
.recovery-page .recovery-row {
	height: 100%;
}

/* Secondary link next to the SUBMIT button (replaces   spacing) */
.recovery-page .recovery-alt-link {
	display: inline-block;
	margin-left: 12px;
}

/* Mobile-only page title shown above the form (desktop shows the title in the white panel) */
.recovery-page .recovery-mobile-title {
	color: #fff;
	font-weight: 600;
	margin-bottom: 1rem;
}

/* ---------- Phones and tablets in portrait (< 992px): single column ---------- */
@media (max-width: 991.98px) {
	body.recovery-page {
		align-items: flex-start;
		padding: 24px 16px;
	}

	.recovery-page .child {
		width: 100%;
		max-width: 560px;
		height: auto;
		padding: 0;
		background-image: none; /* body already shows the background image */
	}

	.recovery-page .recovery-row {
		height: auto;
		margin: 0;
	}

	.recovery-page .recovery-row > [class*="col-"]:not(.logdiv) {
		padding-left: 0;
		padding-right: 0;
	}

	.recovery-page .loginForm {
		width: 100%;
		padding: 8px 0 24px;
	}

	.recovery-page .loginForm h1 {
		font-size: 1.75rem;
	}

	.recovery-page .loginForm ul {
		padding-left: 36px; /* keep bullets inside the screen */
	}

	.recovery-page .loginForm .col-sm-9 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.recovery-page .loginForm .btn {
		width: 100%;
		min-height: 48px;
	}

	.recovery-page .recovery-alt-link {
		display: block;
		margin: 16px 0 0;
		text-align: center;
	}

	.recovery-page .password-container {
		display: block;
	}

	.recovery-page .logdiv {
		padding: 24px 20px;
		border-radius: 6px;
		font-size: 16px;
	}

	.recovery-page .reset_small {
		font-size: 15px;
	}
}

/* ---------- Login page (index.cfm only, via body.login-page) ---------- */

/* Gap between Privacy Policy and Cookie Policy links (was an inline 70px padding) */
.login-page .policy + .policy {
	padding-left: 70px;
}

@media (max-width: 991.98px) {
	/* account-locked.cfm heading */
	.recovery-page .loginForm h2 {
		font-size: 1.5rem;
	}

	/* Labels above inputs instead of beside them (.col-sm-9 is already full width above) */
	.login-page .loginForm .col-sm-3 {
		flex: 0 0 100%;
		max-width: 100%;
	}

	.login-page .loginForm .offset-sm-3 {
		margin-left: 0;
	}

	.login-page a.forgotLogin {
		display: block;
		padding-left: 0;
		margin-top: 16px;
		text-align: center;
	}

	.login-page .logdiv h3 {
		padding-top: 16px !important; /* overrides inline padding-top: 40px */
	}

	.login-page .logdiv .supportRequestLink {
		display: block;
		width: 100%;
		padding: 12px;
	}

	.login-page .policy {
		display: inline-block;
		margin: 4px 0;
	}

	.login-page .policy + .policy {
		padding-left: 24px;
	}
}