/**!
 * @file LoginPageBg.css
 * @desc  Marketing-style background treatment for the students login page.
 *
 *        The BLANK poster-girl image sits as a full-viewport fixed
 *        background. A soft brand-tinted gradient overlay keeps text on
 *        the form readable. The form card itself gets a slightly more
 *        prominent shadow + 90% opaque white background so it floats
 *        cleanly above the image without losing legibility.
 *
 *        Loaded ONLY for the students subdomain (gated in
 *        shared/src/sec_getLogin_impl.php via SITE_BUSINESS_ENTITY).
 */
/************************************************************************************************************************************/

body.login-page {
	/* Full-viewport fixed background — image stays put while page scrolls. */
	background-image:
		linear-gradient(135deg, rgba(24, 130, 62, 0.18) 0%, rgba(20, 50, 30, 0.30) 100%),
		url('../images/sw_postergirl_XL_BLANK.jpg') !important;
	background-size: cover;
	background-position: center center;
	background-attachment: fixed;
	background-repeat: no-repeat;
	min-height: 100vh;
}

/* Slight breathing room above the form. */
body.login-page main.add-page {
	margin-top: 40px;
	margin-bottom: 40px;
}

/* Lift the form card so it reads cleanly over the background image. */
body.login-page main.add-page > .page-hero,
body.login-page main.add-page > .page-form,
body.login-page main.add-page > .page-banner,
body.login-page main.add-page > section.page-form {
	background: rgba(255, 255, 255, 0.96);
	backdrop-filter: blur(6px);
	-webkit-backdrop-filter: blur(6px);
	box-shadow: 0 12px 40px rgba(15, 30, 20, 0.25),
	            0 2px 8px rgba(15, 30, 20, 0.12);
	border-radius: 14px;
}

/* The hero card needs slightly different inner padding to sit nicely
   above the form card on the background. */
body.login-page main.add-page > .page-hero {
	border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Banner stays at full readability — error/success colours win over
   the white card background. */
body.login-page main.add-page > .page-banner {
	border: 1px solid rgba(255, 255, 255, 0.6);
}

/* Optional flair: subtle slow zoom on the bg image so the page feels
   alive on first load without being distracting.
   Honors prefers-reduced-motion. */
@keyframes login-bg-zoom {
	from { background-size: 105%; }
	to   { background-size: 110%; }
}

@media (prefers-reduced-motion: no-preference) {
	body.login-page {
		animation: login-bg-zoom 22s ease-in-out infinite alternate;
	}
}

/* Centre the single Login button. AddPagesModern.css defaults .page-actions
   to justify-content:flex-end which is right for multi-button add/edit pages
   but wrong for the single-button login form, where it pushes the button
   awkwardly against the right edge of the card. */
body.login-page .page-actions {
	justify-content: center;
}

body.login-page .page-actions .page-btn {
	min-width: 200px;
}