/*
 * Custom wp-login.php: left-side brand image, right-side glassmorphism
 * card. Reuses the site's token palette from main.css since this stylesheet
 * loads standalone on the login screen (main.css isn't enqueued there).
 */
:root {
	--ink: #0b3a5c;
	--muted: #4a6a80;
	--line: #dfe6ec;
	--bg: #fff;
	--sand: #f6f3ee;
	--tint: #d1e4ee;
	--accent: #0071b0;
	--accent-dark: #005a8d;
	--radius: 24px;
	--radius-sm: 12px;
	--display: "Outfit", system-ui, sans-serif;
}

html {
	background: var(--sand);
}

body.login {
	min-height: 100vh;
	margin: 0;
	padding: 0;
	font-family: var(--display);
	background: linear-gradient( 135deg, var(--tint), var(--sand) );
}

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	background: url( "../images/hero.jpg" ) center/cover no-repeat;
	width: 50%;
	left: 0;
	z-index: 0;
}

body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	width: 50%;
	left: 0;
	background: linear-gradient( 180deg, rgba(11,58,92,0.15), rgba(11,58,92,0.55) );
	z-index: 1;
}

#login {
	position: relative;
	z-index: 2;
	box-sizing: border-box;
	width: 50%;
	max-width: none;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	margin: 0 0 0 50%;
	padding: 2rem;
}

#login h1 {
	width: 100%;
	margin: 0 0 1.5rem;
}

/*
 * The White Label CMS plugin injects `#login h1 a { width: auto !important }`
 * at the end of the body, and core hides the link text with
 * text-indent: -9999px. Since #login is a centered flex column the h1 sizes to
 * fit-content, so an `auto` width collapses the anchor to nothing and the logo
 * has no box to paint into. Hence the !important on width — it is answering the
 * plugin's, not guarding against ourselves.
 */
#login h1 a {
	display: block;
	width: 220px !important;
	max-width: 100%;
	height: 64px;
	background-image: url( "../images/logo.png" ) !important;
	background-repeat: no-repeat;
	background-size: contain;
	background-position: center;
	margin: 0 auto;
	text-indent: -9999px;
	overflow: hidden;
}

#loginform,
#lostpasswordform,
#registerform {
	background: rgba( 255, 255, 255, 0.55 );
	backdrop-filter: blur( 20px ) saturate( 160% );
	-webkit-backdrop-filter: blur( 20px ) saturate( 160% );
	border: 1px solid rgba( 255, 255, 255, 0.6 );
	border-radius: var(--radius);
	box-shadow: 0 20px 60px rgba( 11, 58, 92, 0.18 );
	padding: 2.5rem 2rem;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: rgba( 255, 255, 255, 0.7 );
	border: 1px solid var(--line);
	border-radius: var(--radius-sm);
	color: var(--ink);
	box-shadow: none;
	padding: 10px 14px;
	font-size: 15px;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--accent);
	box-shadow: 0 0 0 3px rgba( 0, 113, 176, 0.15 );
}

.login label {
	color: var(--ink);
	font-weight: 500;
}

.login .button-primary {
	background: var(--accent);
	border: none;
	border-radius: 999px;
	box-shadow: none;
	text-shadow: none;
	padding: 8px 22px;
	height: auto;
	font-weight: 600;
	transition: background 0.2s var(--ease-out, ease);
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--accent-dark);
}

.login #nav,
.login #backtoblog {
	width: 100%;
	max-width: 320px;
	margin: 1rem auto 0;
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: var(--ink);
}

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

.sjc-login-poweredby {
	position: fixed;
	z-index: 2;
	left: 50%;
	bottom: 1.5rem;
	width: 50%;
	text-align: center;
	font-size: 13px;
	color: var(--muted);
}

@media ( max-width: 782px ) {
	.sjc-login-poweredby {
		left: 0;
		width: 100%;
	}
}

.sjc-login-poweredby a {
	color: var(--muted);
}

.sjc-login-poweredby a:hover {
	color: var(--accent);
}

.login .message,
.login #login_error {
	border-radius: var(--radius-sm);
	background: rgba( 255, 255, 255, 0.7 );
	backdrop-filter: blur( 10px );
	border-left: 4px solid var(--accent);
}

.login #login_error {
	border-left-color: #c0392b;
}

@media ( max-width: 782px ) {
	body.login::before,
	body.login::after {
		width: 100%;
	}

	#login {
		margin-left: 0;
	}
}