/*
 * Log In, Register, Lost Password and Reset Password screens. The theme's
 * button and text colors are set inline from PHP (resolved to plain values,
 * since this screen doesn't load the theme's styles); these defaults are core's
 * admin colors. body.cjbec-nav-text (Log In, Register) or
 * .cjbec-nav-button-log-in (Reset Password) says how the links under the form
 * are laid out; Lost Password keeps core's.
 */
:root {
	--cjbec-accent: #2271b1;
	--cjbec-accent-hover: #135e96;
	--cjbec-on-accent: #fff;
	--cjbec-text: #1d2327;
}

/* Form button and the button under the form share a look. */
.login .button-primary,
.cjbec-nav-button-log-in #nav a.wp-login-log-in {
	border-color: var(--cjbec-accent);
	background: var(--cjbec-accent);
	color: var(--cjbec-on-accent);
}

.login .button-primary:hover,
.login .button-primary:active,
.cjbec-nav-button-log-in #nav a.wp-login-log-in:hover,
.cjbec-nav-button-log-in #nav a.wp-login-log-in:active {
	border-color: var(--cjbec-accent-hover);
	background: var(--cjbec-accent-hover);
	color: var(--cjbec-on-accent);
}

.login .button-primary:focus,
.cjbec-nav-button-log-in #nav a.wp-login-log-in:focus {
	color: var(--cjbec-on-accent);
	box-shadow: 0 0 0 1px var(--cjbec-on-accent), 0 0 0 3px var(--cjbec-accent);
	outline: 2px solid transparent;
}

/* Secondary buttons ("Generate Password"). The show-password eye is also a
   .button-secondary but keeps core's own colors. */
.login .button.wp-generate-pw,
.login .button-secondary:not(.wp-hide-pw) {
	border-color: var(--cjbec-accent);
	color: var(--cjbec-accent);
}

.login .button.wp-generate-pw:hover,
.login .button-secondary:not(.wp-hide-pw):hover {
	border-color: var(--cjbec-accent-hover);
	background: #fff;
	color: var(--cjbec-accent-hover);
}

.login .button.wp-generate-pw:focus,
.login .button-secondary:not(.wp-hide-pw):focus {
	border-color: var(--cjbec-accent);
	box-shadow: 0 0 0 1px var(--cjbec-accent);
}

/* Log In and Register screens: the links under the form as centered lines of
   text, led by "Don't have an account? Register" or "Already have an account?
   Log in", with the action in the theme's color. On Register the whole line is
   core's Log in link. */
.cjbec-nav-text #nav {
	display: flex;
	flex-direction: column;
	gap: 12px;
	padding: 0;
	text-align: center;
}

.cjbec-nav-text .cjbec-login-register {
	color: #50575e;
}

.login.cjbec-nav-text #nav a.wp-login-log-in {
	color: #50575e;
	text-decoration: none;
}

.login.cjbec-nav-text #nav :is(.cjbec-login-register a, .cjbec-login-action) {
	color: var(--cjbec-accent);
	font-weight: 600;
	text-decoration: underline;
}

.login.cjbec-nav-text #nav :is(.cjbec-login-register a:hover, a:hover .cjbec-login-action) {
	color: var(--cjbec-accent-hover);
}

/* Reset Password: "or" divider, full-width Log In button, then the other links. */
.cjbec-nav-button-log-in #nav:has(.wp-login-log-in) {
	display: flex;
	flex-direction: column;
	gap: 16px;
	padding: 0;
	text-align: center;
}

.cjbec-nav-button-log-in #nav:has(.wp-login-log-in)::before {
	content: var(--cjbec-login-or);
	order: -2; /* Above the button, which is moved first. */
	color: #50575e;
	/* A rule either side of the word. */
	background:
		linear-gradient(#c3c4c7, #c3c4c7) left center / calc(50% - 1.5em) 1px no-repeat,
		linear-gradient(#c3c4c7, #c3c4c7) right center / calc(50% - 1.5em) 1px no-repeat;
}

.cjbec-nav-button-log-in #nav a.wp-login-log-in {
	order: -1;
	display: block;
	padding: 0 12px;
	border: 1px solid var(--cjbec-accent);
	border-radius: 3px;
	font-size: 14px;
	font-weight: 600;
	line-height: 2.57142857; /* With the border, matches core's .button-large height. */
	text-decoration: none;
}

.login #backtoblog {
	padding: 0;
	text-align: center;
}

/* Info notices ("Register For This Site", etc.) in the theme's text color
   rather than its accent, which could read as an error. Errors and successes
   keep core's colors. */
.login .message,
.login .notice-info {
	border-left-color: var(--cjbec-text);
}

/* Registration: readers set a password and are logged in straight away
   (register.php), so core's "confirmation will be emailed" line no longer applies. */
#reg_passmail {
	display: none;
}

/* Core's script hides the confirm-password box (the show/hide button does
   its job), but only once it loads at the end of the page. Core swaps body's
   no-js class for js before the form renders, so hide it from the start;
   without JavaScript it still shows. */
.js #registerform .user-pass2-wrap {
	display: none;
}

/* Core's strength meter: shown once there's a password to rate. (Core's
   script shows it with an inline style, hence !important.) */
#registerform #pass-strength-result:not(.short, .bad, .good, .strong) {
	display: none !important;
}

/* Registration: optional profile photo. The circle is the file input's label. */
.cjbec-register-avatar label {
	display: flex;
	align-items: center;
	gap: 12px;
	cursor: pointer;
}

.cjbec-register-avatar__circle {
	position: relative;
	flex-shrink: 0;
	width: 60px;
	height: 60px;
	border: 1px solid #dcdcde;
	border-radius: 50%;
	background: #f0f0f1;
	color: #8c8f94;
}

.cjbec-register-avatar__placeholder {
	position: absolute;
	inset: 10px;
}

.cjbec-register-avatar__preview {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	border-radius: 50%;
	object-fit: cover;
}

.cjbec-register-avatar__preview[hidden] {
	display: none;
}

.cjbec-register-avatar__badge {
	position: absolute;
	right: -2px;
	bottom: -2px;
	display: flex;
	align-items: center;
	justify-content: center;
	width: 24px;
	height: 24px;
	border: 2px solid #fff;
	border-radius: 50%;
	box-sizing: border-box;
	background: var(--cjbec-accent);
	color: var(--cjbec-on-accent);
}

.cjbec-register-avatar label:hover .cjbec-register-avatar__badge {
	background: var(--cjbec-accent-hover);
}

.cjbec-register-avatar input:focus-visible + label .cjbec-register-avatar__circle {
	box-shadow: 0 0 0 1px #fff, 0 0 0 3px var(--cjbec-accent);
}

.cjbec-register-avatar__text {
	display: flex;
	flex-direction: column;
	gap: 2px;
}

.cjbec-register-avatar .description {
	color: #50575e;
}