/*
 * CCG Members - look of wp-login.php (login, lost password, set new password, invitation link).
 * The colours and the logo arrive as CSS variables on body.login (printed inline by login-look.php):
 * --ccg-primary, --ccg-secondary, --ccg-text, --ccg-accent, --ccg-dark, --ccg-cream, --ccg-logo.
 */

body.ccg-members-login {
	background: var(--ccg-cream, #f4f0e7);
	color: var(--ccg-text, #11100c);
	font-family: Roboto, system-ui, -apple-system, "Segoe UI", sans-serif;
}

body.ccg-members-login #login {
	width: 100%;
	max-width: 380px;
	padding: 6vh 16px 24px;
}

body.ccg-members-login #login h1 a {
	display: block;
	width: 100%;
	max-width: 260px;
	height: 84px;
	margin: 0 auto 16px;
	background-color: transparent;
	background-image: var(--ccg-logo, none);
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
}

body.ccg-members-login #login form {
	padding: 24px;
	border: 0;
	border-radius: 8px;
	background: #fff;
	box-shadow: 0 8px 30px rgba(5, 24, 58, 0.12);
}

body.ccg-members-login label {
	color: var(--ccg-text, #11100c);
	font-size: 14px;
}

body.ccg-members-login input[type="text"],
body.ccg-members-login input[type="password"],
body.ccg-members-login input[type="email"] {
	border: 1px solid #8c8f94;
	border-radius: 4px;
	color: var(--ccg-text, #11100c);
}

body.ccg-members-login input[type="text"]:focus,
body.ccg-members-login input[type="password"]:focus,
body.ccg-members-login input[type="email"]:focus {
	border-color: var(--ccg-accent, #073180);
	box-shadow: 0 0 0 1px var(--ccg-accent, #073180);
	outline: 2px solid transparent;
}

body.ccg-members-login .wp-core-ui .button-primary,
body.ccg-members-login .button-primary {
	border-color: var(--ccg-accent, #073180);
	border-radius: 4px;
	background: var(--ccg-accent, #073180);
	color: #fff;
	text-shadow: none;
	box-shadow: none;
}

body.ccg-members-login .wp-core-ui .button-primary:hover,
body.ccg-members-login .wp-core-ui .button-primary:focus,
body.ccg-members-login .button-primary:hover,
body.ccg-members-login .button-primary:focus {
	border-color: var(--ccg-dark, #05183a);
	background: var(--ccg-dark, #05183a);
	color: #fff;
}

body.ccg-members-login .button:focus-visible,
body.ccg-members-login a:focus-visible {
	outline: 2px solid var(--ccg-accent, #073180);
	outline-offset: 2px;
}

body.ccg-members-login a {
	color: var(--ccg-accent, #073180);
}

body.ccg-members-login a:hover,
body.ccg-members-login a:focus {
	color: var(--ccg-dark, #05183a);
	text-decoration: underline;
}

body.ccg-members-login #nav,
body.ccg-members-login #backtoblog {
	text-align: center;
}

body.ccg-members-login .message,
body.ccg-members-login .notice,
body.ccg-members-login #login_error {
	border-left-color: var(--ccg-primary, #46829b);
	border-radius: 4px;
	color: var(--ccg-text, #11100c);
}

body.ccg-members-login #login_error,
body.ccg-members-login .notice-error {
	border-left-color: #b32d2e;
}

body.ccg-members-login .ccg-login-help {
	margin: 16px 0 0;
	text-align: center;
	font-size: 13px;
	color: var(--ccg-text, #11100c);
}

@media (max-width: 480px) {
	body.ccg-members-login #login form {
		padding: 18px;
	}
}