/**
 * Network login theme
 *
 * Uses the theme's CSS variables (from theme.css + per-site overrides)
 * so every site shares the same login layout while inheriting its own colors/logo.
 */

body.login {
	background: var(--color-lightest, #f6f7f7);
	background-image: radial-gradient(
		circle at 10% 10%,
		rgba(var(--color-primary-rgb, 182, 151, 55), 0.18) 0%,
		rgba(var(--color-primary-rgb, 182, 151, 55), 0.00) 55%
	),
	radial-gradient(
		circle at 90% 30%,
		rgba(var(--color-secondary-rgb, 28, 64, 136), 0.14) 0%,
		rgba(var(--color-secondary-rgb, 28, 64, 136), 0.00) 50%
	);
	background-attachment: fixed;
	color: var(--color-text-default, #1d2327);
}

body.login * {
	box-sizing: border-box;
}

body.login #login {
	width: min(380px, calc(100% - 2rem));
	padding: 3.25rem 0 2rem;
}

body.login #login h1 a {
	background-image: var(--login-logo-url);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	width: 100%;
	height: 84px;
	margin: 0 0 1.25rem;
	padding: 0;
}

body.login #login form {
	border: 1px solid rgba(0, 0, 0, 0.06);
	border-radius: 12px;
	background: var(--color-white, #ffffff);
	box-shadow: 0 14px 40px rgba(0, 0, 0, 0.08);
	padding: 26px;
}

body.login #login form .input,
body.login #login form input[type="text"],
body.login #login form input[type="password"] {
	border: 1px solid var(--color-gray-300, #ccd0d4);
	border-radius: 10px;
	padding: 0.65rem 0.75rem;
	font-size: 14px;
	line-height: 1.4;
	min-height: 44px;
	box-shadow: none;
}

body.login #login form .input:focus,
body.login #login form input[type="text"]:focus,
body.login #login form input[type="password"]:focus {
	border-color: var(--color-primary, #2271b1);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 34, 113, 177), 0.20);
	outline: none;
}

body.login.wp-core-ui .button-primary {
	background: var(--color-primary, #2271b1);
	border-color: var(--color-primary, #2271b1);
	color: var(--color-white, #ffffff);
	border-radius: 10px;
	padding: 0.55rem 0.9rem;
	min-height: 44px;
	line-height: 1.2;
	font-weight: 600;
	box-shadow: none;
	text-shadow: none;
    transition: all 0.3s ease;
}

body.login.wp-core-ui .button-secondary,
body.login.wp-core-ui .button.button-secondary,
body.login.wp-core-ui .button.wp-hide-pw {
	background: transparent;
	border: none;
	color: var(--color-primary, #2271b1);
	border-radius: 10px;
	min-height: 44px;
	box-shadow: none;
	text-shadow: none;
    transition: all 0.3s ease;
}

body.login.wp-core-ui .button-secondary:hover,
body.login.wp-core-ui .button:hover,
body.login.wp-core-ui .button.button-secondary:hover,
body.login.wp-core-ui .button.wp-hide-pw:hover,
body.login.wp-core-ui .button-secondary:focus,
body.login.wp-core-ui .button:focus,
body.login.wp-core-ui .button.button-secondary:focus,
body.login.wp-core-ui .button.wp-hide-pw:focus {
	background: var(--color-primary-400, #2271b1);
	border-color: var(--color-primary-dark, var(--color-primary, #135e96));
	color: var(--color-primary-dark, var(--color-primary, #135e96));
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 34, 113, 177), 0.18);
    transition: all 0.3s ease;
	outline: none;
}

body.login.wp-core-ui .button-primary:hover,
body.login.wp-core-ui .button-primary:focus {
	background: var(--color-primary-400, #2271b1);
	border-color: var(--color-primary-200, #2271b1);
	color: var(--color-white, #ffffff);
	box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 34, 113, 177), 0.18);
    transition: all 0.3s ease;
}

body.login.wp-core-ui .button.button-secondary:hover {
    background: transparent;
    box-shadow: none;
    border: none;
}

body.login.wp-core-ui .button-secondary:active,
body.login.wp-core-ui .button.button-secondary:active,
body.login.wp-core-ui .button.wp-hide-pw:active {
	transform: translateY(1px);
}

body.login.wp-core-ui .button.wp-hide-pw .dashicons,
body.login.wp-core-ui .button.wp-hide-pw .dashicons:before {
	color: currentColor;
}

body.login #login form p.submit {
	display: flex;
	justify-content: flex-end;
}

body.login #login form p.forgetmenot {
	margin-top: 0.5rem;
}

body.login #login form label {
	color: var(--color-text-default, #1d2327);
	font-weight: 600;
}

body.login #login .message,
body.login #login .success,
body.login #login #login_error {
	border-left-color: var(--color-secondary, var(--color-primary, #2271b1));
	border-radius: 12px;
	box-shadow: 0 10px 28px rgba(0, 0, 0, 0.06);
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--color-link, var(--color-primary, #2271b1));
	text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
	color: var(--color-link-hover, var(--color-primary-dark, #135e96));
	text-decoration: underline;
}

body.login .privacy-policy-page-link a {
	color: var(--color-text-muted, #646970);
}