/*--------------------------------------------------------------
# Login Page
#
# Layered on top of WordPress core's login.css (enqueued in
# inc/extras.php), so core keeps handling the password toggle,
# caps lock warning, screen reader text, etc.
--------------------------------------------------------------*/

body.login.wp-core-ui {
	--sgb-primary: #009cd9;
	--sgb-primary-dark: #0261b4;
	--sgb-text: #191919;
	--sgb-muted: #666;
	--sgb-border: #b2b2b2;
	--sgb-divider: #e5e5e5;

	/* Re-colour core buttons, focus rings and links. A darker shade
	   of the brand blue so white button text passes WCAG AA (4.8:1). */
	--wp-admin-theme-color: #0079ad;
	--wp-admin-theme-color--rgb: 0, 121, 173;
	--wp-admin-theme-color-darker-10: #006a93;
	--wp-admin-theme-color-darker-10--rgb: 0, 106, 147;
	--wp-admin-theme-color-darker-20: #005a7d;
	--wp-admin-theme-color-darker-20--rgb: 0, 90, 125;

	background:
		linear-gradient(135deg, var(--sgb-primary) 0%, var(--sgb-primary-dark) 100%) top / 100% 45vh no-repeat,
		#f4f6f8;
	color: var(--sgb-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, "Noto Sans", sans-serif;
	font-size: 16px;
	line-height: 1.5;
}



/*--------------------------------------------------------------
# Card
--------------------------------------------------------------*/

#login {
	box-sizing: border-box;
	width: calc(100% - 32px);
	max-width: 400px;
	margin: 12vh auto 48px;
	padding: 40px 32px 28px;
	background: #fff;
	border-top: 4px solid var(--sgb-primary);
	box-shadow: 0 12px 32px rgba(0, 0, 0, 0.12), 0 2px 6px rgba(0, 0, 0, 0.06);
}

.login h1 a {
	background-image: url(../img/logo/logo.png);
	background-position: center;
	background-size: contain;
	width: 100%;
	height: 56px;
	margin: 0 0 32px;
}

.login form {
	margin: 0;
	padding: 0;
	border: 0;
	box-shadow: none;
	overflow: visible;
}



/*--------------------------------------------------------------
# Fields
--------------------------------------------------------------*/

.login label {
	color: var(--sgb-text);
	font-size: 14px;
	font-weight: 600;
	margin-bottom: 6px;
}

.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] {
	box-sizing: border-box;
	width: 100%;
	min-height: 48px;
	margin: 0 0 20px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--sgb-border);
	border-radius: 0;
	box-shadow: none;
	color: var(--sgb-text);
	font-size: 16px;
	line-height: 1.5;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus {
	border-color: var(--wp-admin-theme-color);
	box-shadow: 0 0 0 1px var(--wp-admin-theme-color);
	outline: 2px solid transparent;
}

.login .wp-pwd {
	margin-top: 0;
}

.login .wp-pwd input.password-input {
	padding-right: 48px;
}

.login .button.wp-hide-pw {
	width: 48px;
	height: 48px;
	min-height: 48px;
	color: var(--sgb-muted);
}

.login .button.wp-hide-pw:hover {
	color: var(--wp-admin-theme-color);
}

.login form .forgetmenot {
	display: none;
}



/*--------------------------------------------------------------
# Submit
--------------------------------------------------------------*/

.login #wp-submit {
	float: none;
	width: 100%;
	min-height: 48px;
	padding: 0 16px;
	border-radius: 0;
	font-size: 16px;
	font-weight: 600;
	line-height: 46px;
}



/*--------------------------------------------------------------
# Notices
--------------------------------------------------------------*/

.login #login_error,
.login .message,
.login .notice,
.login .success {
	margin: 0 0 24px;
	padding: 12px 14px;
	background: #e6f5fb;
	border-left: 4px solid var(--sgb-primary);
	box-shadow: none;
	color: var(--sgb-text);
	font-size: 14px;
}

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

.login .success {
	background: #eef7f1;
	border-left-color: #55ab74;
}

.login #login_error a,
.login .message a,
.login .notice a {
	color: inherit;
	text-decoration: underline;
}



/*--------------------------------------------------------------
# Links
--------------------------------------------------------------*/

.login #nav,
.login #backtoblog {
	margin: 0;
	padding: 0;
	font-size: 14px;
	text-align: center;
}

.login #nav {
	margin-top: 24px;
	padding-top: 20px;
	border-top: 1px solid var(--sgb-divider);
}

.login #backtoblog {
	margin-top: 8px;
	font-size: 13px;
}

.login #nav a,
.login #backtoblog a {
	color: var(--wp-admin-theme-color);
	text-decoration: none;
}

.login #backtoblog a {
	color: var(--sgb-muted);
}

.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus {
	color: var(--wp-admin-theme-color-darker-20);
	text-decoration: underline;
}



/*--------------------------------------------------------------
# reCAPTCHA (Wordfence)
#
# Hidden with visibility (not display) so reCAPTCHA keeps working.
--------------------------------------------------------------*/

.grecaptcha-badge {
	visibility: hidden;
}



/*--------------------------------------------------------------
# Small Screens
--------------------------------------------------------------*/

@media screen and (max-width: 480px) {
	#login {
		margin-top: 32px;
		padding: 32px 20px 24px;
	}

	.login h1 a {
		height: 48px;
		margin-bottom: 24px;
	}
}



/*--------------------------------------------------------------
# Session Expired Modal (wp-admin iframe)
--------------------------------------------------------------*/

body.interim-login.wp-core-ui {
	background: #fff;
}

.interim-login #login {
	width: 100%;
	margin: 0 auto;
	padding: 24px;
	border-top: 0;
	box-shadow: none;
}