/*
 * 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-button-* says which link under the form becomes a
 * button.
 */
: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-register #nav a.wp-login-register,
.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-register #nav a.wp-login-register:hover,
.cjbec-nav-button-register #nav a.wp-login-register: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-register #nav a.wp-login-register: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);
}

/* Under the form: "or" divider, full-width button, then the other links. */
.cjbec-nav-button-register #nav:has(.wp-login-register),
.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-register #nav:has(.wp-login-register)::before,
.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-register #nav a.wp-login-register,
.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;
}