/**
 * Kaam Ase login screen.
 *
 * Version 1.0.0
 *
 * Why this file exists
 * --------------------
 * For a worker registering at a labour point, wp-login.php is the second
 * screen they ever see. A stock WordPress login page, with its own logo
 * and its own typography and nothing connecting it to the site they were
 * just on, undoes whatever trust the landing page built. People here
 * have good reason to be careful about entering details into something
 * that looks like it belongs to somebody else.
 *
 * This does not restyle wp-login into something unrecognisable. It makes
 * it look like the same place, at the same size, with the same colours,
 * and leaves everything else where WordPress put it.
 *
 * The tokens are repeated rather than imported, because this screen does
 * not load the main stylesheet and adding it would pull in the whole
 * design system for one form.
 */

:root {
	--ka-green-800: #0b4527;
	--ka-green-700: #10603a;
	--ka-green-600: #157a4a;
	--ka-green-100: #dff0e6;
	--ka-amber-500: #e8890b;
	--ka-ink-900:   #17150f;
	--ka-ink-700:   #46423a;
	--ka-ink-600:   #6b665c;
	--ka-ink-300:   #d8d4cb;
	--ka-ink-200:   #e8e5de;
	--ka-ink-50:    #faf9f6;
	--ka-busy:      #c0392b;
}

body.login {
	background: var(--ka-ink-50);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
		"Noto Sans", "Helvetica Neue", Arial, sans-serif;
	color: var(--ka-ink-900);
}

#login {
	width: 100%;
	max-width: 400px;
	padding: 6% 20px 40px;
}


/* --------------------------------------------------------------------------
   Wordmark

   No image. A logo file is one more request on a slow connection, and
   the site name set in the right type reads as deliberate rather than as
   a missing image when it fails to load.
   -------------------------------------------------------------------------- */

.login h1 {
	margin-bottom: 20px;
}

.login h1 a {
	width: auto;
	height: auto;
	margin: 0;
	padding: 0;
	background: none;
	background-image: none !important;
	text-indent: 0;
	font-size: 28px;
	font-weight: 700;
	letter-spacing: -0.02em;
	line-height: 1.2;
	color: var(--ka-green-800);
	overflow: visible;
}

.login h1 a:hover,
.login h1 a:focus {
	color: var(--ka-green-700);
	box-shadow: none;
}


/* --------------------------------------------------------------------------
   The form
   -------------------------------------------------------------------------- */

.login form {
	margin-top: 16px;
	padding: 24px 20px;
	background: #fff;
	border: 1px solid var(--ka-ink-200);
	border-radius: 14px;
	box-shadow: 0 2px 6px rgba(23, 21, 15, 0.09);
}

.login label {
	font-size: 14px;
	font-weight: 500;
	color: var(--ka-ink-700);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	/*
	 * 16px is not a style choice. Anything smaller and iOS zooms the page
	 * when the field is focused, which throws the person out of the form
	 * and is close to impossible to recover from on a small screen.
	 */
	font-size: 16px;
	min-height: 48px;
	padding: 10px 12px;
	background: #fff;
	border: 1px solid var(--ka-ink-300);
	border-radius: 10px;
	color: var(--ka-ink-900);
	box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--ka-green-600);
	box-shadow: 0 0 0 3px var(--ka-green-100);
	outline: none;
}

.login .button.wp-hide-pw {
	/* Keep the show password control on the field, and big enough to hit. */
	min-width: 44px;
	min-height: 44px;
	color: var(--ka-ink-600);
}

.login .forgetmenot label {
	font-size: 14px;
	line-height: 1.4;
}

.login input[type="checkbox"] {
	width: 20px;
	height: 20px;
	border-radius: 4px;
	border-color: var(--ka-ink-300);
}

.login input[type="checkbox"]:checked::before {
	color: var(--ka-green-700);
}


/* --------------------------------------------------------------------------
   Submit
   -------------------------------------------------------------------------- */

.login .button-primary,
.wp-core-ui .login .button-primary {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 100%;
	min-height: 52px;
	margin-top: 8px;
	padding: 0 20px;
	background: var(--ka-amber-500);
	border: none;
	border-radius: 10px;
	font-size: 17px;
	font-weight: 700;
	color: var(--ka-ink-900);
	text-shadow: none;
	box-shadow: none;
	float: none;
}

.wp-core-ui .login .button-primary:hover,
.wp-core-ui .login .button-primary:focus {
	background: #f5a623;
	color: var(--ka-ink-900);
	box-shadow: none;
}

.wp-core-ui .login .button-primary:focus-visible {
	outline: 3px solid var(--ka-green-700);
	outline-offset: 2px;
}

.login .submit {
	margin-top: 16px;
}


/* --------------------------------------------------------------------------
   Messages
   -------------------------------------------------------------------------- */

.login .message,
.login .notice,
.login #login_error {
	margin-bottom: 16px;
	padding: 14px 16px;
	border-radius: 10px;
	border: none;
	border-left: 4px solid;
	font-size: 14px;
	line-height: 1.5;
	box-shadow: none;
}

.login .message,
.login .notice-info {
	background: #e6f0f7;
	border-left-color: #1d5f8a;
}

.login #login_error {
	background: #fbe9e7;
	border-left-color: var(--ka-busy);
}


/* --------------------------------------------------------------------------
   Links below the form

   Registration is the loud one. Somebody who has landed here without an
   account should not have to look for the way to make one.
   -------------------------------------------------------------------------- */

.login #nav,
.login #backtoblog {
	margin: 16px 0 0;
	padding: 0 8px;
	text-align: center;
	font-size: 14px;
}

.login #nav a,
.login #backtoblog a {
	color: var(--ka-green-700);
	text-decoration: underline;
	text-underline-offset: 2px;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: var(--ka-green-600);
}

.login .privacy-policy-page-link {
	margin-top: 24px;
	font-size: 13px;
}


/* --------------------------------------------------------------------------
   Language switcher

   Hidden. It switches the WordPress interface language, not the
   platform's, so all it can do here is confuse somebody into thinking
   they have changed something about their account.
   -------------------------------------------------------------------------- */

.login .language-switcher {
	display: none;
}


/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {

	#login {
		padding-top: 24px;
	}

	.login h1 a {
		font-size: 24px;
	}

	.login form {
		padding: 20px 16px;
	}
}

@media (prefers-reduced-motion: reduce) {

	*, *::before, *::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}