/* FDTC Students: the WordPress screens that stay on wp-login.php (forgot/reset password,
   "check your email", the session-expired box in WP Admin), styled like My Account. */

@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 400;
	font-display: swap;
	src: url("../../../../../themes/fdtc/assets/fonts/FiraSans-Regular.woff2") format("woff2");
}
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 600;
	font-display: swap;
	src: url("../../../../../themes/fdtc/assets/fonts/FiraSans-SemiBold.woff2") format("woff2");
}
@font-face {
	font-family: "Fira Sans";
	font-style: normal;
	font-weight: 700;
	font-display: swap;
	src: url("../../../../../themes/fdtc/assets/fonts/FiraSans-Bold.woff2") format("woff2");
}

body.login {
	--st-blue: #283090;
	--st-blue-dark: #1c2268;
	--st-red: #e81820;
	--st-ink: #1b1d3a;
	--st-muted: #4a4e6b;
	--st-line: #d9dcea;
	--st-panel: #eef0f8;
	background: #fffdfa;
	color: var(--st-ink);
	font-family: "Fira Sans", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}

/* Red rule along the top, echoing the page-title underline. */
body.login::before {
	content: "";
	display: block;
	height: 6px;
	background: var(--st-red);
}

.login #login {
	width: 400px;
	max-width: calc(100% - 40px);
	padding: 6vh 0 2rem;
}

/* Family Dog logo instead of the WordPress one. */
.login h1 a {
	width: 230px;
	height: 72px;
	margin: 0 auto 1.75rem;
	background: var(--st-logo, none) no-repeat center / contain;
}

.login form {
	margin: 0;
	padding: 1.75rem 1.75rem 1.5rem;
	border: 0;
	border-radius: 8px;
	background: var(--st-panel);
	box-shadow: none;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: 46px;
	margin: .3rem 0 1rem;
	padding: .55rem .7rem;
	border: 1px solid #8a8fb0;
	border-radius: 6px;
	background: #fff;
	box-shadow: none;
	color: var(--st-ink);
	font-family: inherit;
	font-size: 1rem;
}

.login label {
	color: var(--st-ink);
	font-size: 1rem;
	font-weight: 600;
	line-height: 1.4;
}

.login .forgetmenot label {
	font-weight: 400;
}

.login input[type="checkbox"] {
	accent-color: var(--st-blue);
}

.login form .input:focus,
.login input:focus,
.login .button:focus {
	border-color: var(--st-blue);
	box-shadow: none;
	outline: 3px solid var(--st-blue);
	outline-offset: 1px;
}

/* Pill buttons, as on My Account. */
.login .button-primary,
.login .button.button-large {
	float: none;
	display: inline-block;
	min-height: 0;
	height: auto;
	padding: .65rem 1.3rem;
	border: 2px solid var(--st-blue);
	border-radius: 999px;
	background: var(--st-blue);
	box-shadow: none;
	color: #fff;
	font-family: inherit;
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	text-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
	border-color: var(--st-blue-dark);
	background: var(--st-blue-dark);
	color: #fff;
}

.login .submit {
	margin-top: .25rem;
}

.login .button.wp-hide-pw {
	min-height: 46px;
	margin-top: .3rem;
	color: var(--st-blue);
}

.login .button.wp-hide-pw .dashicons {
	top: .55rem;
}

/* Messages, like the notices on My Account. */
.login .message,
.login .notice,
.login #login_error,
.login .success {
	margin: 0 0 1.25rem;
	padding: .75rem 1rem;
	border: 0;
	border-left: 4px solid var(--st-blue);
	border-radius: 4px;
	background: var(--st-panel);
	box-shadow: none;
	color: var(--st-ink);
	font-size: 1rem;
}

.login #login_error,
.login .notice-error {
	border-left-color: #b8121a;
	background: #fdecec;
}

.login .success,
.login .notice-success {
	border-left-color: #1e7a3c;
	background: #e8f5ec;
}

/* Links under the form. */
.login #nav,
.login #backtoblog {
	margin: 1rem 0 0;
	padding: 0;
	font-size: 1rem;
}

.login #nav a,
.login #backtoblog a,
.login .message a,
.login #login_error a {
	color: var(--st-blue);
	text-decoration: underline;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--st-blue-dark);
}

.login .privacy-policy-page-link {
	margin: 2rem 0 0;
}

/* Password strength meter on the reset screen. */
.login #pass-strength-result {
	border-radius: 6px;
}

.login .indicator-hint,
.login .description {
	color: var(--st-muted);
	font-size: .9rem;
}

/* No language switcher (the site is English only). */
.login .language-switcher {
	display: none;
}

/* The session-expired box inside WP Admin: no top rule, less space. */
body.login.interim-login::before {
	display: none;
}

body.login.interim-login #login {
	padding-top: 1rem;
}

.login .message p,
.login .notice p,
.login #login_error p,
.login .success p {
	font-size: 1rem;
	line-height: 1.45;
}

/* "Generate Password": an outline pill, like the quiet buttons on My Account. */
.login .button.wp-generate-pw,
.login .button-secondary:not(.wp-hide-pw) {
	min-height: 0;
	height: auto;
	padding: .55rem 1.1rem;
	border: 2px solid var(--st-blue);
	border-radius: 999px;
	background: transparent;
	box-shadow: none;
	color: var(--st-blue);
	font-family: inherit;
	font-size: .95rem;
	font-weight: 700;
	line-height: 1.2;
}

.login .button.wp-generate-pw:hover,
.login .button-secondary:not(.wp-hide-pw):hover {
	background: var(--st-blue);
	color: #fff;
}

.login .wp-pwd input:focus,
.login .password-input-wrapper input:focus,
.login #pass1:focus {
	border-color: var(--st-blue);
	box-shadow: none;
}

/* Dark mode: follows the device setting, matching the fdtc theme's dark palette. This page
   doesn't load the theme stylesheet, so the values are repeated here. Scoped away from the
   session-expired box inside WP Admin (interim-login), which stays light like the admin. */
@media (prefers-color-scheme: dark) {
	body.login:not(.interim-login) {
		color-scheme: dark;
		--st-blue: #9FA9FF;
		--st-blue-dark: #C3C9FF;
		--st-red: #FF8D92;
		--st-ink: #EEF0FA;
		--st-muted: #B3B7D3;
		--st-line: #353A66;
		--st-panel: #1E2145;
		background: #14162E;
	}
	/* The logo has blue lettering: a warm-white chip keeps it readable. */
	body.login:not(.interim-login) h1 a {
		box-sizing: border-box;
		padding: 6px 10px;
		border-radius: 10px;
		background-color: #FFFDFA;
		background-origin: content-box;
		background-clip: padding-box;
	}
	body.login:not(.interim-login) form .input,
	body.login:not(.interim-login) input[type="text"],
	body.login:not(.interim-login) input[type="password"],
	body.login:not(.interim-login) input[type="email"] {
		background: #14162E;
		color: #EEF0FA;
	}
	body.login:not(.interim-login) input[type="checkbox"] { background: #14162E; }
	/* Light blue fills need dark text. */
	body.login:not(.interim-login) .button-primary,
	body.login:not(.interim-login) .button.button-large,
	body.login:not(.interim-login) .button-primary:hover,
	body.login:not(.interim-login) .button-primary:focus,
	body.login:not(.interim-login) .button.wp-generate-pw:hover,
	body.login:not(.interim-login) .button-secondary:not(.wp-hide-pw):hover {
		color: #14162E;
	}
	body.login:not(.interim-login) #login_error,
	body.login:not(.interim-login) .notice-error {
		border-left-color: #FF8D92;
		background: #3A1B28;
	}
	body.login:not(.interim-login) .success,
	body.login:not(.interim-login) .notice-success {
		border-left-color: #6FD08C;
		background: #16301F;
	}
	/* Core colors this link blue, which is too dim on the dark page. */
	body.login:not(.interim-login) .privacy-policy-page-link a { color: var(--st-blue); }
}