/* Login + Two-Factor (wp-login.php) */

body.login {
	background: var(--ifs-cream, #e6e0d6);
	color: var(--ifs-ink, #232323);
	font-family: var(--ifs-body, "Source Sans 3", "Segoe UI", sans-serif);
}

body.login.ifs-login--has-hero {
	background-color: var(--ifs-black, #100f0f);
	background-image:
		linear-gradient(180deg, rgba(16, 15, 15, 0.45), rgba(16, 15, 15, 0.72)),
		var(--ifs-login-hero);
	background-position: center top;
	background-size: cover;
	background-repeat: no-repeat;
}

.login h1 a {
	background-image: none;
	background-size: contain;
	background-position: center;
	background-repeat: no-repeat;
	width: auto;
	height: auto;
	min-height: 72px;
	padding: 0 8px;
	text-indent: 0;
	font-family: var(--ifs-display, "Barlow Condensed", sans-serif);
	font-weight: 800;
	font-size: 2rem;
	line-height: 1.1;
	text-transform: uppercase;
	color: var(--ifs-red, #bb322f) !important;
}

.login.ifs-login--has-hero h1 a {
	color: var(--ifs-white, #fff) !important;
	text-shadow: 0 2px 12px rgba(16, 15, 15, 0.45);
}

.login.ifs-login--has-logo h1 a {
	background-image: var(--ifs-login-logo);
	width: 168px;
	height: 168px;
	text-indent: -9999px;
	overflow: hidden;
}

#login {
	width: min(420px, calc(100% - 32px));
	padding: 6vh 0 32px;
}

#loginform,
#lostpasswordform,
#resetpassform,
#registerform {
	background: var(--ifs-cream-2, #f2ede4);
	border: 0;
	border-radius: 6px;
	box-shadow: 0 12px 28px rgba(16, 15, 15, 0.22);
	padding: 28px 28px 22px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
#authcode {
	background: var(--ifs-white, #fff);
	border: 1px solid color-mix(in srgb, var(--ifs-ink, #232323) 16%, transparent);
	border-radius: 6px;
	box-shadow: none;
	color: var(--ifs-ink, #232323);
	font-size: 16px;
	padding: 10px 12px;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
#authcode:focus {
	border-color: var(--ifs-red, #bb322f);
	box-shadow: 0 0 0 2px color-mix(in srgb, var(--ifs-red, #bb322f) 28%, transparent);
}

.login label,
.login .user-pass-wrap,
.login .forgetmenot {
	color: var(--ifs-ink, #232323);
	font-size: 0.95rem;
}

.wp-core-ui .button-primary,
.wp-core-ui .button-primary:focus {
	background: var(--ifs-red, #bb322f) !important;
	border-color: var(--ifs-red, #bb322f) !important;
	border-radius: 8px !important;
	box-shadow: none !important;
	color: var(--ifs-white, #fff) !important;
	font-family: var(--ifs-display, "Barlow Condensed", sans-serif) !important;
	font-size: 1.05rem !important;
	font-weight: 800 !important;
	letter-spacing: 0.04em;
	text-shadow: none !important;
	text-transform: uppercase;
	padding: 6px 22px !important;
	min-height: 44px;
}

.wp-core-ui .button-primary:hover {
	background: var(--ifs-red-deep, #8b2323) !important;
	border-color: var(--ifs-red-deep, #8b2323) !important;
}

.login .button.wp-hide-pw {
	color: var(--ifs-red, #bb322f) !important;
}

.login #nav,
.login #backtoblog {
	padding: 0 8px;
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a,
.login .language-switcher label {
	color: var(--ifs-ink, #232323);
	font-family: var(--ifs-body, "Source Sans 3", sans-serif);
}

.login.ifs-login--has-hero #nav a,
.login.ifs-login--has-hero #backtoblog a,
.login.ifs-login--has-hero .privacy-policy-page-link a,
.login.ifs-login--has-hero .language-switcher label {
	color: var(--ifs-white, #fff);
	text-shadow: 0 1px 8px rgba(16, 15, 15, 0.55);
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--ifs-red, #bb322f);
}

.login .message,
.login .notice,
.login .success {
	border-left-color: var(--ifs-red, #bb322f);
	box-shadow: 0 8px 18px rgba(16, 15, 15, 0.12);
}

.login #login_error {
	border-left-color: var(--ifs-red-deep, #8b2323);
}

.login .language-switcher {
	margin-top: 24px;
}

.login .language-switcher select {
	border-radius: 6px;
}

/* Two-Factor plugin uses the same login form */
.login form p {
	margin-bottom: 14px;
}

.login .backup-methods-wrap,
.login .two-factor-email,
.login form .submit {
	margin-top: 8px;
}

#login .backup-methods-wrap a {
	color: var(--ifs-red, #bb322f);
}