/*
 * The login screen.
 *
 * The first thing a reader ever sees of the back of this site, and until now it
 * was the stock WordPress door with the WordPress logo on it. Paper, ink and
 * brass — and the logo replaced with the site's own name, set in the serif.
 */

body.login {
	background: #f6f1e7;
	color: #211d17;
	font-family: Georgia, 'Iowan Old Style', 'Palatino Linotype', Palatino, 'Times New Roman', serif;
}

/* The stock logo is a background image on an anchor. Drop the image and let the
   site name — which login_headertext supplies — stand as type instead. */
body.login h1 a {
	width: auto;
	height: auto;
	margin: 0 auto 1.4rem;
	padding: 0;
	background: none;
	text-indent: 0;
	overflow: visible;
	font-size: 1.6rem;
	line-height: 1.2;
	color: #211d17;
	text-decoration: none;
	letter-spacing: 0.01em;
}

body.login h1 a:hover,
body.login h1 a:focus { color: #6f552f; }

.login form {
	background: #fbf8f1;
	border: 1px solid rgba( 33, 29, 23, 0.14 );
	border-radius: 2px;
	box-shadow: 0 10px 30px rgba( 33, 29, 23, 0.12 );
}

.login label { color: #574f44; }

.login input[type='text'],
.login input[type='password'] {
	background: #fff;
	border-color: rgba( 33, 29, 23, 0.25 );
	border-radius: 2px;
}

.login input[type='text']:focus,
.login input[type='password']:focus {
	border-color: #8f6f42;
	box-shadow: 0 0 0 1px #8f6f42;
}

.wp-core-ui .button-primary {
	background: #8f6f42;
	border-color: #6f552f;
	color: #fff;
	text-shadow: none;
	border-radius: 2px;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus { background: #6f552f; border-color: #6f552f; }

.login #nav a,
.login #backtoblog a { color: #6f552f; }

.login #nav a:hover,
.login #backtoblog a:hover { color: #211d17; }

/* A line under the door. */
.hsw-login__note {
	max-width: 20rem;
	margin: 1.4rem auto 0;
	font-size: 0.82rem;
	font-style: italic;
	text-align: center;
	color: #574f44;
}

.login .language-switcher { opacity: 0.75; }

/* ==========================================================================
 * Taming the social sign-in, and finishing the door
 *
 * The plugin renders its buttons in three places at once: a block above the
 * form, a row of provider icons inside it, and a second block below that. So a
 * reader was offered "Continue with Google" twice and a row of unlabelled
 * squares — GitHub, LinkedIn and X — none of which this site has any use for.
 * Four ways in, three of them noise.
 *
 * One way in, at the top, styled as paper. The rest is hidden here rather than
 * disabled in the plugin, because CSS is reversible and a plugin setting is a
 * thing somebody has to find again.
 * ========================================================================== */

#loginform .nsl-container { display: none !important; }

.login .nsl-container { margin: 0 0 1.1rem; }

.login .nsl-container-buttons a,
.login .nsl-button {
	border-radius: 2px !important;
	border: 1px solid rgba( 33, 29, 23, 0.22 ) !important;
	box-shadow: none !important;
	font-family: Georgia, 'Iowan Old Style', Palatino, serif !important;
}

/* ---- The door itself ---- */

body.login {
	display: flex;
	flex-direction: column;
	justify-content: center;
	min-height: 100svh;
	padding-block: 2rem;
}

#login {
	width: min(92vw, 22rem);
	padding: 0;
}

/* The site name, set as the masthead of a book rather than a logo. */
body.login h1 a {
	font-size: clamp( 1.5rem, 6vw, 2rem );
	letter-spacing: 0.005em;
}

.login form {
	padding: 1.5rem 1.4rem 1.6rem;
	margin-block-start: 0;
}

/* Typed labels, as on every other admin surface here. */
.login label {
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.68rem;
	letter-spacing: 0.09em;
	text-transform: uppercase;
	color: #6f552f;
}

.login input[type='text'],
.login input[type='password'] {
	padding: 0.65rem 0.7rem;
	font-family: Georgia, 'Iowan Old Style', Palatino, serif;
	font-size: 1rem;
}

/* "Remember me" and the button on one line reads as a form; stacked, with the
 * button full width, it reads as a door. */
.login .forgetmenot { display: block; margin-block: 0.9rem 0.8rem; }
.login .forgetmenot label { text-transform: none; letter-spacing: 0.02em; font-size: 0.85rem; font-family: Georgia, serif; color: #574f44; }

.login .submit { float: none; }

.wp-core-ui .button-primary {
	display: block;
	width: 100%;
	padding-block: 0.55rem;
	font-family: 'Courier New', Courier, monospace;
	font-size: 0.8rem;
	letter-spacing: 0.1em;
	text-transform: uppercase;
}

/* The links under the door, quiet and evenly spaced. */
.login #nav,
.login #backtoblog {
	padding: 0;
	margin-block-start: 1rem;
	text-align: center;
	font-size: 0.85rem;
}

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

/* WordPress's own language picker is not a decision a reader of this site is
 * ever going to want to make at the door. */
.login .language-switcher { display: none; }

@media (prefers-reduced-motion: reduce) {
	.login * { transition: none !important; }
}