/*
	========================
	WordPress Login Page CSS
	========================
*/

/* Reset outlines and shadows globally */
* {
	outline: none;
	box-shadow: none !important;
}

body.login {
	display: flex;
	flex-direction: column;
	justify-content: space-between;
	gap: 3rem;
}

/* Autofill cleanup for WebKit browsers */
input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1.875rem white inset !important;
	-webkit-text-fill-color: var(--black) !important;
	transition: background-color 100000s ease-in-out 0s;
}

/* Global login page background */
body.login {
	background: var(--white);
}

/* Logo and title area */
#login h1,
#login h1 a {
	background-size: auto 4rem;
	background-position: bottom center;
	background-repeat: no-repeat;
	width: auto;
	height: 4rem;
}

/* Success, error, and message boxes */
.login .message,
.login .success,
.login #login_error {
	margin: 0;
	position: absolute;
	top: 0;
	left: 0;
	width: 100%;
	border: 0;
	text-align: center;
	background: #d63638;
	color: var(--white) !important;
}

.login #login_error a {
	color: var(--white);
	font-weight: 700;
}

/* Universal form styles (login, lost password, register) */
.login form {
	padding: 1.5rem;
	background: var(--blue-one);
	border: 0;
	box-shadow: none;
}

/* All labels */
.login form label {
	color: var(--white);
}

/* Inputs: text, password, email, checkbox */
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login input[type="checkbox"] {
	border-color: var(--black);
	border-radius: 0;
	padding: .5rem;
	font-size: 1rem;
	margin: 0 0 1rem 0;
	background: var(--white);
	color: var(--black);
	font-family: inherit;
}

.login form .forgetmenot {
	display: flex;
	align-items: center;
	gap: .5rem
}

.login input[type="checkbox"],
.login label {
	margin: 0;
}

/* Submit button */
.login .button-primary {
	background: var(--green-one);
	border-color: var(--green-one);
	color: var(--white);
	border-radius: 0;
	font-family: inherit;
}

/* Submit button hover */
.login .button-primary:hover {
	background: var(--green-two);
	border-color: var(--green-two);
	color: var(--blue-one);
}

/* Footer and links */

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

.agency {
	padding: 2rem 1rem;
}

.agency h4 {
	padding-bottom: .5rem;
	font-size: clamp(1.25rem, 3vw, 1.375rem);
	font-weight: 400
}

.agency p {
	line-height: 1.375;
	max-width: 17.5rem;
	display: block;
	margin: auto;
	padding-bottom: 1rem;
}

.login #nav,
.login #backtoblog,
.agency {
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.agency,
.agency a,
a.privacy-policy-link,
.language-switcher label .dashicons {
	color: var(--black);
	text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover,
a.privacy-policy-link:hover {
	color: var(--black);
	text-decoration: underline;
}

/* iThemes Security ReCAPTCHA compatibility */
.itsec-recaptcha-opt-in p,
label.itsec-recaptcha-opt-in__agree {
	color: var(--black) !important;
}

.itsec-recaptcha-opt-in__agree input {
	border: .063rem solid var(--black) !important;
	border-radius: .1875rem !important;
}

/* Hide screen reader text if visually hidden */
.screen-reader-text {
	position: absolute !important;
	left: -9999px !important;
}