/*
 * wp-login.php, restyled to match the hub.
 *
 * WordPress ships a lot of opinionated login CSS, so most rules here are
 * overrides rather than fresh styling. Selectors follow core's markup:
 * #login wraps everything, #loginform is the card.
 */

body.login {
	background: var(--ph-bg);
	color: var(--ph-text);
	font-family: var(--ph-font);
	font-size: var(--ph-fs-base);
	line-height: var(--ph-lh);
	min-height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	padding: var(--ph-sp-5) var(--ph-sp-4);
}

body.login #login {
	width: 100%;
	max-width: 360px;
	padding: 0;
}

/* ---------- Logo / wordmark ---------- */
.login h1 {
	margin-bottom: var(--ph-sp-5);
	text-align: center;
}

.login h1 a {
	display: inline-block;
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	transition: opacity var(--ph-t) var(--ph-ease);
}

.login h1 a:hover {
	opacity: .85;
}

.login h1 a:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus);
	border-radius: var(--ph-r-sm);
}

/* With a logo: hide the text, show the image. */
.ph-has-logo.login h1 a {
	width: 100%;
	height: 64px;
	text-indent: -9999em;
	overflow: hidden;
}

/* Without one: the site name becomes the wordmark. */
.ph-no-logo.login h1 a {
	width: auto;
	height: auto;
	background-image: none;
	text-indent: 0;
	font-family: var(--ph-font-display);
	font-weight: 700;
	font-size: 26px;
	line-height: 1.2;
	color: var(--ph-text);
	text-decoration: none;
}

/* ---------- Intro line ---------- */
.login .ph-login-intro {
	margin: 0 0 var(--ph-sp-4);
	padding: 0;
	text-align: center;
	font-size: var(--ph-fs-md);
	color: var(--ph-muted);
	background: none;
	border: 0;
	box-shadow: none;
}

/* ---------- The card ---------- */
.login form {
	background: var(--ph-surface-1);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-r-lg);
	box-shadow: none;
	padding: var(--ph-sp-5);
	margin-top: 0;
	overflow: visible;
}

.login label,
.login form .forgetmenot label {
	color: var(--ph-text-2);
	font-size: var(--ph-fs-md);
	font-weight: 600;
	line-height: var(--ph-lh);
}

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	background: var(--ph-surface-2);
	border: 1px solid var(--ph-border);
	border-radius: var(--ph-r-sm);
	color: var(--ph-text);
	font-family: var(--ph-font);
	font-size: var(--ph-fs-base);
	font-weight: 400;
	line-height: 1.5;
	padding: 11px 13px;
	margin: 4px 0 0;
	box-shadow: none;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--ph-accent-line);
	box-shadow: 0 0 0 3px var(--ph-accent-dim);
	outline: none;
}

/* Show/hide password button */
.login .wp-pwd {
	position: relative;
}

.login .wp-pwd button.wp-hide-pw {
	color: var(--ph-muted);
	background: none;
	border: 0;
	top: 4px;
}

.login .wp-pwd button.wp-hide-pw:hover {
	color: var(--ph-accent);
}

.login .wp-pwd button.wp-hide-pw:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus);
	border-radius: var(--ph-r-sm);
}

/* Remember me */
.login .forgetmenot {
	margin: var(--ph-sp-3) 0 0;
	float: none;
	display: flex;
	align-items: center;
	gap: 8px;
}

.login input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 18px;
	height: 18px;
	margin: 0;
	border: 1.5px solid var(--ph-faint);
	border-radius: var(--ph-r-sm);
	background: var(--ph-surface-2);
	display: grid;
	place-content: center;
	cursor: pointer;
}

.login input[type="checkbox"]:checked {
	background: var(--ph-accent);
	border-color: var(--ph-accent);
}

.login input[type="checkbox"]:checked::before {
	content: "";
	width: 10px;
	height: 5px;
	margin-top: -2px;
	border-left: 2px solid var(--ph-accent-ink);
	border-bottom: 2px solid var(--ph-accent-ink);
	transform: rotate(-45deg);
	background: none;
}

.login input[type="checkbox"]:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus);
}

/* Submit */
.login .submit {
	margin-top: var(--ph-sp-4);
}

.login .button-primary,
.wp-core-ui .login .button-primary {
	width: 100%;
	float: none;
	background: var(--ph-accent);
	border: 1px solid var(--ph-accent);
	border-radius: var(--ph-r-sm);
	color: var(--ph-accent-ink);
	font-family: var(--ph-font);
	font-size: var(--ph-fs-base);
	font-weight: 600;
	line-height: 1.5;
	height: auto;
	padding: 11px 16px;
	text-shadow: none;
	box-shadow: none;
	transition: background var(--ph-t) var(--ph-ease);
}

.wp-core-ui .login .button-primary:hover,
.wp-core-ui .login .button-primary:focus {
	background: var(--ph-accent-hover);
	border-color: var(--ph-accent-hover);
	color: var(--ph-accent-ink);
}

.wp-core-ui .login .button-primary:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus);
}

/* ---------- Messages ---------- */
.login #login_error,
.login .message,
.login .notice {
	background: var(--ph-surface-1);
	border: 1px solid var(--ph-border);
	border-left: 3px solid var(--ph-accent);
	border-radius: var(--ph-r-sm);
	color: var(--ph-text-2);
	font-size: var(--ph-fs-md);
	padding: 11px 14px;
	margin-bottom: var(--ph-sp-4);
	box-shadow: none;
}

.login #login_error {
	border-left-color: var(--ph-blocked);
	color: var(--ph-blocked);
	background: var(--ph-blocked-dim);
}

/* ---------- Footer links ---------- */
.login #nav {
	margin: var(--ph-sp-4) 0 0;
	padding: 0;
	text-align: center;
}

.login #nav a,
.login #backtoblog a {
	color: var(--ph-muted);
	font-size: var(--ph-fs-md);
	text-decoration: none;
}

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

.login #nav a:focus-visible,
.login #backtoblog a:focus-visible {
	outline: none;
	box-shadow: var(--ph-focus);
	border-radius: var(--ph-r-sm);
}

.login .privacy-policy-page-link,
.login .language-switcher {
	display: none;
}

/* ---------- Autofill ----------
 * Chrome paints its own near-white background on autofilled inputs, which
 * would put white on white. A long inset shadow is the only reliable
 * override.
 */
.login input:-webkit-autofill,
.login input:-webkit-autofill:hover,
.login input:-webkit-autofill:focus {
	-webkit-text-fill-color: var(--ph-text);
	-webkit-box-shadow: 0 0 0 1000px var(--ph-surface-2) inset;
	caret-color: var(--ph-text);
}

@media (max-width: 400px) {
	.login form {
		padding: var(--ph-sp-4);
	}
}