/*
 * wp-login — palette in body.login. Logo: still lime in SVG; black via CSS filter.
 */

body.login {
	--bg: #fff;
	--text: #111;

	--form: #eee;
	--form-text: #111;

	/* Fields: text uses --form-text. Border is full value, e.g. none or 1px solid #ccc */
	--field-bg: #fff;
	--field-border: none;
	--focus-ring: #2271b1;

	--button: #444;
	--button-text: #fff;

	--alert: #555;
	--alert-text: #eee;

	--logo: url(logo.svg);
	/* Same space above the logo (inside #login) and below the logo before form / messages */
	--logo-vertical-gap: 4.5rem;

	min-height: 100vh;
	background: var(--bg);
	color: var(--text);
}

#login {
	box-sizing: border-box;
	width: 88%;
	max-width: 600px;
	margin-inline: auto;
	padding-top: var(--logo-vertical-gap);
}

/* Extra space around the logo; smaller graphic (SVG unchanged — sized by box + filter) */
.login h1 {
	margin: 0 0 var(--logo-vertical-gap);
	padding: 0 6%;
	text-align: center;
}

.login h1 a {
	box-sizing: border-box;
	display: block;
	width: 100%;
	max-width: 72%;
	height: clamp(1.85rem, 8.5vw, 3.75rem);
	margin-inline: auto;
	padding: 0.75rem 0;
	background: var(--logo) no-repeat center;
	background-size: contain;
	filter: brightness(0);
	overflow: hidden;
	text-indent: -9999px;
	white-space: nowrap;
	text-decoration: none;
	color: transparent;
}

.login h1 a:focus {
	outline: 2px solid var(--focus-ring);
	outline-offset: 3px;
}

#login_error,
.login .message {
	margin: 1em 0;
	padding: 1em;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	background: var(--alert);
	color: var(--alert-text);
}

.login form {
	margin: 0;
	padding: 1.25rem;
	background: var(--form);
	color: var(--form-text);
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.login form label {
	color: var(--form-text);
}

.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
	color: var(--form-text);
	background: var(--field-bg);
	border: var(--field-border);
	border-radius: 0;
	box-shadow: none;
}

.login form input[type="text"]:focus-visible,
.login form input[type="password"]:focus-visible,
.login form input[type="email"]:focus-visible {
	outline: 2px solid var(--focus-ring);
	outline-offset: 2px;
}

.login input.button-primary,
.login button.button-primary,
.login a.button-primary {
	background: var(--button);
	color: var(--button-text);
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.login p#backtoblog,
.login p#nav {
	clear: both;
	float: none;
	width: 100%;
	margin: 0;
	padding: 1rem 0 0;
	text-align: center;
}

.login p#backtoblog a,
.login p#nav a {
	color: inherit;
	text-decoration: none;
}

.login p#backtoblog a:hover,
.login p#nav a:hover,
.login p#backtoblog a:focus-visible,
.login p#nav a:focus-visible {
	text-decoration: underline;
}