/* Shared presentation for login, registration and password recovery. */

:root {
	--cb-login-bg: #f3f7fb;
	--cb-login-surface: #ffffff;
	--cb-login-text: #0f172a;
	--cb-login-muted: #526174;
	--cb-login-border: #d7e2ee;
	--cb-login-accent: #1473e6;
	--cb-login-link: #1262bd;
	--cb-login-glow: rgba(20, 115, 230, 0.10);
	color-scheme: light;
}

html[data-theme="dark"] {
	--cb-login-bg: #061722;
	--cb-login-surface: #0b1e2c;
	--cb-login-text: #eef5fc;
	--cb-login-muted: #b5c5d6;
	--cb-login-border: #244052;
	--cb-login-accent: #1473e6;
	--cb-login-link: #65b4ff;
	--cb-login-glow: rgba(32, 191, 213, 0.08);
	color-scheme: dark;
}

body.login {
	min-height: 100vh;
	margin: 0;
	background:
		radial-gradient(ellipse at top, var(--cb-login-glow), transparent 65%),
		var(--cb-login-bg);
	color: var(--cb-login-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI",
		Inter, Helvetica, Arial, sans-serif;
}

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

body.login #login {
	width: min(440px, calc(100% - 32px));
	padding: clamp(32px, 8vh, 80px) 0 24px;
}

.login h1 a {
	width: 100%;
	height: auto;
	margin: 0 auto 28px;
	padding: 4px;
	background-image: none;
	color: var(--cb-login-text);
	font-size: clamp(25px, 5vw, 32px);
	font-weight: 750;
	line-height: 1.2;
	letter-spacing: -0.035em;
	text-indent: 0;
	text-decoration: none;
}

.login form {
	margin-top: 20px;
	padding: clamp(24px, 5vw, 36px);
	border: 1px solid var(--cb-login-border);
	border-radius: 24px;
	background: var(--cb-login-surface);
	box-shadow: 0 16px 48px rgba(0, 0, 0, 0.06);
	color: var(--cb-login-text);
}

.login label {
	margin-bottom: 8px;
	color: var(--cb-login-text);
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	min-height: 52px;
	padding: 10px 14px;
	border: 1px solid var(--cb-login-border);
	border-radius: 12px;
	background: var(--cb-login-bg);
	color: var(--cb-login-text);
	font-family: inherit;
	font-size: 16px;
	line-height: 1.5;
	box-shadow: none;
}

.login .wp-pwd input {
	padding-right: 48px;
}

.login input:focus,
.login select:focus,
.login button:focus-visible,
.login a:focus-visible {
	outline: 2px solid var(--cb-login-link);
	outline-offset: 3px;
	box-shadow: none;
}

.login .button.wp-hide-pw {
	width: 48px;
	height: 52px;
	color: var(--cb-login-link);
}

.login .button-primary {
	min-height: 48px;
	padding: 10px 22px;
	border: 1px solid var(--cb-login-accent);
	border-radius: 12px;
	background: var(--cb-login-accent);
	color: #ffffff;
	font-family: inherit;
	font-size: 15px;
	font-weight: 650;
	text-shadow: none;
	box-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
	border-color: #0f60c4;
	background: #0f60c4;
	color: #ffffff;
}

.login .button-primary:disabled {
	opacity: 0.6;
	cursor: not-allowed;
}

.login form .forgetmenot {
	float: none;
	margin: 4px 0 20px;
}

.login .forgetmenot label {
	color: var(--cb-login-muted);
	font-weight: 400;
}

.login form .submit {
	margin-top: 20px;
}

.login form .submit .button-primary {
	float: none;
	width: 100%;
}

.login #nav,
.login #backtoblog {
	padding: 0 8px;
	text-align: center;
	line-height: 1.8;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a,
.login form a {
	color: var(--cb-login-link);
	text-decoration: underline;
	text-underline-offset: 3px;
}

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

.login .message,
.login .notice,
.login #login_error {
	padding: 16px 20px;
	border-radius: 12px;
	background: var(--cb-login-surface);
	color: var(--cb-login-text);
	line-height: 1.65;
	box-shadow: none;
}

.login #reg_passmail,
.login .description,
.login .indicator-hint {
	color: var(--cb-login-muted);
	line-height: 1.65;
}

.login .language-switcher {
	padding: 0 16px 32px;
	color: var(--cb-login-muted);
}

.login .language-switcher select,
.login .language-switcher .button {
	min-height: 40px;
	border: 1px solid var(--cb-login-border);
	border-radius: 8px;
	background: var(--cb-login-surface);
	color: var(--cb-login-text);
}

@media (max-width: 480px) {
	.login .language-switcher form {
		display: flex;
		flex-wrap: wrap;
		justify-content: center;
		gap: 8px;
	}
}

/* Keep the site title readable in every interaction state. */
body.login h1 a,
body.login h1 a:visited {
	color: var(--cb-login-text);
}

body.login h1 a:hover,
body.login h1 a:focus,
body.login h1 a:active {
	color: var(--cb-login-link);
	background-color: transparent;
}

body.login h1 a:focus-visible {
	outline: 2px solid var(--cb-login-link);
	outline-offset: 5px;
	border-radius: 8px;
}