/*
 * Branded wp-login.php redesign (also used as the site's "homepage" -- logged-out visitors to
 * the site root are redirected straight here; see FYP_MS_Login_Home::maybe_redirect_homepage()).
 *
 * Deliberately does NOT touch WordPress's actual <form id="loginform"> markup, its error/message
 * handling, "Lost your password?", registration, or the password-visibility toggle WordPress
 * already builds in -- all of that keeps working exactly as before. This stylesheet (plus the
 * HTML injected via the login_header/login_footer actions in FYP_MS_Login_Home) purely re-skins
 * the page around that untouched form.
 *
 * Layout trick: WordPress fires the 'login_header' action as a plain sibling BEFORE <div id="login">
 * opens, and 'login_footer' as a plain sibling AFTER it closes -- so our nav+hero block, the real
 * #login card, and our footer block are all direct children of <body>, in that order. That lets a
 * single flexbox on <body> lay them out as one continuous two-column-then-full-width page with no
 * JS and no fragile DOM surgery.
 */

:root {
	--fyp-hp-red: #ed1b24;
	--fyp-hp-red-dark: #b3131a;
	--fyp-hp-ink: #1b1f27;
	--fyp-hp-muted: #667085;
	--fyp-hp-border: #e4e7ec;
	--fyp-hp-bg: #f7f8fa;
	--fyp-hp-navy: #1a2030;
}

body.login {
	background: var(--fyp-hp-bg) !important;
	display: flex;
	flex-flow: row wrap;
	align-items: stretch;
	justify-content: center;
	min-height: 100vh;
	padding: 0 !important;
	margin: 0 !important;
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
}
body.login * { box-sizing: border-box; }
body.login #wp-auth-check-wrap { box-sizing: content-box; } /* leave WP's own session-expiry modal alone */

/* --------------------------------------------------------------------------------- Navbar ---- */

.fyp-hp-navbar {
	flex: 0 0 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 16px 32px;
	background: #fff;
	border-bottom: 1px solid var(--fyp-hp-border);
}
.fyp-hp-navbar img.fyp-hp-crest { width: 40px; height: 40px; border-radius: 8px; flex-shrink: 0; }
.fyp-hp-navbar-text { line-height: 1.25; }
.fyp-hp-navbar-title { font-size: 16px; font-weight: 700; color: var(--fyp-hp-ink); }
.fyp-hp-navbar-sub { font-size: 12px; color: var(--fyp-hp-muted); }
.fyp-hp-navbar-sub b { color: var(--fyp-hp-red); font-weight: 600; }

/* ----------------------------------------------------------------------------------- Hero ---- */

.fyp-hp-hero {
	flex: 0 1 620px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: 48px 24px 48px 5vw;
}
.fyp-hp-eyebrow {
	color: var(--fyp-hp-red);
	font-size: 12px;
	font-weight: 700;
	letter-spacing: 1.5px;
	text-transform: uppercase;
	margin: 0 0 10px;
}
.fyp-hp-hero h1 {
	font-size: clamp(28px, 3.6vw, 42px);
	line-height: 1.15;
	font-weight: 800;
	color: var(--fyp-hp-ink);
	margin: 0 0 14px;
}
.fyp-hp-hero h1 span { color: var(--fyp-hp-red); }
.fyp-hp-hero p.fyp-hp-lede {
	color: var(--fyp-hp-muted);
	font-size: 15.5px;
	line-height: 1.6;
	max-width: 46ch;
	margin: 0 0 28px;
}
.fyp-hp-illustration { max-width: 620px; width: 100%; height: auto; }

/* -------------------------------------------------------------------------- Login card ---- */

body.login #login {
	flex: 0 1 440px;
	width: auto !important;
	max-width: 440px;
	padding: 40px 5vw 40px 24px;
	margin: 0 !important;
	align-self: center;
}
body.login #login h1 { display: none; } /* WP's own site-name logo link -- our navbar replaces it */

.fyp-hp-card {
	background: #fff;
	border: 1px solid var(--fyp-hp-border);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 34px rgba(20, 24, 40, 0.08);
}

body.login #login #login_error,
body.login #login p.message {
	background: #fdecec;
	border: 1px solid #f6c7c9;
	color: #7a1418;
	border-radius: 10px;
	padding: 12px 14px;
	font-size: 13.5px;
	margin: 0 0 18px;
}

/* #loginform is the everyday sign-in form; #lostpasswordform/#registerform/#resetpassform are
   WordPress's other wp-login.php screens ("Lost your password?", registration, choosing a new
   password) -- styled the same way so the whole login area feels consistent, not just the form
   that happens to match the mockup. */
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform,
body.login #resetpassform {
	background: #fff;
	border: 1px solid var(--fyp-hp-border);
	border-radius: 16px;
	padding: 32px;
	box-shadow: 0 10px 34px rgba(20, 24, 40, 0.08);
}
body.login #loginform p,
body.login #lostpasswordform p,
body.login #registerform p,
body.login #resetpassform p { margin-bottom: 18px; }
body.login #loginform label,
body.login #lostpasswordform label,
body.login #registerform label,
body.login #resetpassform label {
	display: block;
	font-size: 13px;
	font-weight: 700;
	color: var(--fyp-hp-ink);
	margin-bottom: 7px;
}
body.login #loginform input[type="text"],
body.login #loginform input[type="password"],
body.login #loginform input[type="email"],
body.login #loginform input#user_login,
body.login #loginform input#user_pass,
body.login #lostpasswordform input[type="text"],
body.login #registerform input[type="text"],
body.login #registerform input[type="email"],
body.login #resetpassform input[type="text"],
body.login #resetpassform input[type="password"] {
	width: 100% !important;
	padding: 11px 14px !important;
	border: 1px solid var(--fyp-hp-border) !important;
	border-radius: 9px !important;
	font-size: 14px !important;
	box-shadow: none !important;
	background: #fff;
}
body.login #loginform input:focus,
body.login #lostpasswordform input:focus,
body.login #registerform input:focus,
body.login #resetpassform input:focus {
	border-color: var(--fyp-hp-red) !important;
	box-shadow: 0 0 0 3px rgba(237, 27, 36, 0.12) !important;
}
body.login #loginform .forgetmenot { display: flex; align-items: center; gap: 8px; margin-bottom: 22px !important; }
body.login #loginform .forgetmenot label { margin: 0; font-weight: 400; font-size: 13.5px; color: var(--fyp-hp-muted); }
body.login #loginform .forgetmenot input { margin: 0; }

/* Sign-in order: WordPress username/password fields first, "Log In" button, THEN the divider
   and "Sign in with Google" button below it. Set with explicit `order` values (rather than
   relying on where WordPress's 'login_form' hook happens to print the Google button in the
   markup) so the visual order is guaranteed regardless of hook position. */
body.login #loginform { display: flex; flex-direction: column; }
body.login #loginform .user-pass-wrap { order: 2; }
body.login #loginform .forgetmenot { order: 3; }
body.login #loginform p.submit { order: 4; }
body.login #loginform .fyp-hp-divider { order: 5; }
body.login #loginform .fyp-hp-google-row { order: 6; }

body.login #loginform p.submit,
body.login #lostpasswordform p.submit,
body.login #registerform p.submit,
body.login #resetpassform p.submit { margin-bottom: 0 !important; }
body.login #loginform .wp-generate-pw,
body.login #loginform .pw-weak { display: none; }
body.login #loginform input#wp-submit,
body.login #lostpasswordform input#wp-submit,
body.login #registerform input#wp-submit,
body.login #resetpassform input#wp-submit {
	width: 100%;
	background: var(--fyp-hp-red) !important;
	border-color: var(--fyp-hp-red) !important;
	color: #fff !important;
	font-weight: 700 !important;
	font-size: 15px !important;
	padding: 12px 16px !important;
	height: auto !important;
	border-radius: 9px !important;
	box-shadow: none !important;
	text-shadow: none !important;
}
body.login #loginform input#wp-submit:hover,
body.login #loginform input#wp-submit:focus,
body.login #lostpasswordform input#wp-submit:hover,
body.login #registerform input#wp-submit:hover,
body.login #resetpassform input#wp-submit:hover { background: var(--fyp-hp-red-dark) !important; border-color: var(--fyp-hp-red-dark) !important; }

/* Sign in with Google button injected by FYP_MS_Google_Auth::render_login_button() via the
   'login_form' action; positioned below "Log In" via the `order:` rules above, as the
   alternative to the WordPress username/password fields rather than the primary option. */
.fyp-hp-google-row { text-align: center; margin-bottom: 0 !important; }
.fyp-hp-google-btn {
	display: flex;
	align-items: center;
	justify-content: center;
	gap: 8px;
	width: 100%;
	background: #4285F4;
	color: #fff;
	text-decoration: none;
	font-weight: 700;
	font-size: 13px;
	white-space: nowrap;
	padding: 12px 10px;
	border-radius: 9px;
	transition: background 0.15s ease;
}
.fyp-hp-google-btn:hover, .fyp-hp-google-btn:focus { background: #3367d6; color: #fff; }
.fyp-hp-google-btn svg { width: 16px; height: 16px; background: #fff; border-radius: 3px; padding: 2px; flex-shrink: 0; }
.fyp-hp-divider {
	display: flex;
	align-items: center;
	gap: 12px;
	color: var(--fyp-hp-muted);
	font-size: 12.5px;
	margin: 22px 0 18px !important;
}
.fyp-hp-divider::before, .fyp-hp-divider::after { content: ""; flex: 1; height: 1px; background: var(--fyp-hp-border); }

/* "Lost your password?" (p#nav) is hidden -- sign-in is via the QIU Google account only, so
   there's no separate WordPress password to recover for the accounts that matter here; the
   WordPress username/password fields stay as a fallback for the coordinator/admin account, but
   without a self-service reset link surfaced. p#backtoblog is hidden because there's no separate
   "homepage" to link back to -- this page already is the homepage. */
body.login #login p#nav,
body.login #login p#backtoblog { display: none; }

body.login .privacy-policy-page-link { text-align: left !important; margin-top: 14px !important; font-size: 12.5px; }

/* ---------------------------------------------------------------------------------- Footer ---- */

.fyp-hp-footer {
	flex: 0 0 100%;
	background: var(--fyp-hp-navy);
	color: #b7bcc9;
	padding: 32px 5vw;
	display: flex;
	align-items: center;
	justify-content: space-between;
	flex-wrap: wrap;
	gap: 20px;
	font-size: 13px;
}
.fyp-hp-footer-brand { display: flex; align-items: center; gap: 12px; }
.fyp-hp-footer-brand img.fyp-hp-crest { width: 38px; height: 38px; border-radius: 8px; flex-shrink: 0; }
.fyp-hp-footer-brand-text b { display: block; color: #fff; font-size: 14px; }
.fyp-hp-footer-brand-text span { color: var(--fyp-hp-red); font-weight: 600; }
.fyp-hp-footer-wordmark img { height: 34px; width: auto; opacity: 0.9; }
.fyp-hp-footer-copy {
	flex: 0 0 100%;
	text-align: center;
	padding-top: 20px;
	margin-top: 8px;
	border-top: 1px solid rgba(255, 255, 255, 0.08);
	font-size: 12px;
	color: #7d8290;
}

/* --------------------------------------------------------------------------- Responsive ---- */

.fyp-hp-hero, body.login #login { min-width: 0; } /* let flex items shrink below their content's natural width instead of overflowing */

@media (max-width: 900px) {
	.fyp-hp-hero { flex: 0 0 100%; padding: 36px 6vw 8px; }
	body.login #login { flex: 0 0 100%; max-width: none; padding: 8px 6vw 36px; align-self: stretch; }
	.fyp-hp-illustration { max-width: 420px; }
}
@media (max-width: 520px) {
	.fyp-hp-navbar { padding: 14px 20px; }
	.fyp-hp-footer { padding: 24px 20px; align-items: flex-start; }
	/* On a phone the hero illustration just pushes the actual sign-in form further down the
	   page -- hide it so the form is reachable right away without scrolling past it first. The
	   heading/lede copy above it stays, so it's still obvious what page this is. */
	.fyp-hp-illustration { display: none; }
	.fyp-hp-hero { padding-bottom: 24px; }
	/* The second QIU wordmark in the footer is redundant with the crest already shown on the
	   left (and immediately above in the navbar) -- drop it on mobile to keep the footer to one
	   tidy block instead of an awkward wrap. */
	.fyp-hp-footer-wordmark { display: none; }
}