/*
 * Nightshift sign-in layout: a two-column split. A narrow dark column on the left holds the form; the wider
 * right side is the plant at night under a deep overlay with a green glow, the brand copy set large, and a lit
 * line where the two halves meet. On phones the photo becomes a banner above the form. Colours come from
 * inc/login.php.
 */

:root { --mrp-l-split: 58%; }

body.login {
	padding-right: var(--mrp-l-split);
	background:
		radial-gradient(ellipse 80% 40% at 0% 0%, rgba(55, 211, 154, 0.10), transparent 70%),
		var(--mrp-l-bg);
}

#login {
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	justify-content: center;
	max-width: 420px;
	padding: 56px 40px;
}
.mrp-login-intro h2 { font-weight: 600; letter-spacing: -0.02em; font-size: 28px; }
#loginform, #lostpasswordform, #registerform, #resetpassform {
	padding: 0;
	border: 0;
	box-shadow: none;
	background: transparent;
}
.login .submit .button.button-primary, .login .submit input[type="submit"] {
	padding: 11px 18px;
	box-shadow: 0 10px 30px -12px rgba(55, 211, 154, 0.7);
}
#nav, #backtoblog { margin-left: 0; margin-right: 0; }

/* the night half */
.mrp-login-hero {
	position: fixed;
	inset: 0 0 0 auto;
	width: var(--mrp-l-split);
	overflow: hidden;
	color: var(--mrp-l-ink);
	background:
		radial-gradient(ellipse 70% 55% at 30% 100%, rgba(55, 211, 154, 0.28), transparent 70%),
		linear-gradient(90deg, rgba(10, 23, 19, 0.92) 0%, rgba(10, 23, 19, 0.55) 45%, rgba(10, 23, 19, 0.80) 100%),
		var(--mrp-l-hero) center / cover no-repeat,
		var(--mrp-l-panel);
}
/* the lit seam */
.mrp-login-hero::before {
	content: "";
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	width: 1px;
	background: linear-gradient(180deg, transparent, var(--mrp-l-primary) 50%, transparent);
	box-shadow: 0 0 18px 1px rgba(55, 211, 154, 0.55);
}
.mrp-login-hero__inner {
	position: absolute;
	inset: 48px 56px;
	display: flex;
	flex-direction: column;
	justify-content: space-between;
}
.mrp-login-hero__wordmark {
	font-family: var(--mrp-l-heading-font);
	font-weight: 600;
	font-size: 13px;
	letter-spacing: 0.32em;
	text-transform: uppercase;
	color: var(--mrp-l-muted);
}
.mrp-login-hero__eyebrow {
	margin: 0 0 14px;
	font-size: 12px;
	font-weight: 600;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: var(--mrp-l-primary);
}
.mrp-login-hero__title {
	margin: 0 0 20px;
	max-width: 13ch;
	font-family: var(--mrp-l-heading-font);
	font-weight: 700;
	font-size: clamp(34px, 4.2vw, 64px);
	line-height: 1.02;
	letter-spacing: -0.035em;
	color: var(--mrp-l-ink);
}
.mrp-login-hero__rule {
	width: 72px;
	height: 2px;
	margin: 0 0 18px;
	border: 0;
	background: linear-gradient(90deg, var(--mrp-l-accent), transparent);
}
.mrp-login-hero__tagline { margin: 0; max-width: 42ch; font-size: 15px; line-height: 1.6; color: var(--mrp-l-muted); }

.login .language-switcher { margin: 0 auto 32px; max-width: 420px; padding: 0 40px; box-sizing: border-box; }
.login #language-switcher { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.login .language-switcher label { margin: 0; color: var(--mrp-l-muted); }
.login .language-switcher select, .login .language-switcher .button {
	color: var(--mrp-l-ink);
	background: var(--mrp-l-input-bg);
	border-color: var(--mrp-l-input-border);
}

/* phones: the photo becomes a banner above the form */
@media (max-width: 782px) {
	body.login { padding-right: 0; display: flex; flex-direction: column; }
	.mrp-login-hero {
		position: relative;
		inset: auto;
		width: 100%;
		order: -1;
		flex: none;
		background:
			radial-gradient(ellipse 80% 70% at 30% 100%, rgba(55, 211, 154, 0.25), transparent 70%),
			linear-gradient(180deg, rgba(10, 23, 19, 0.6) 0%, rgba(10, 23, 19, 0.92) 100%),
			var(--mrp-l-hero-sm) center / cover no-repeat,
			var(--mrp-l-panel);
	}
	.mrp-login-hero::before {
		top: auto;
		right: 0;
		width: auto;
		height: 1px;
		background: linear-gradient(90deg, transparent, var(--mrp-l-primary) 50%, transparent);
	}
	.mrp-login-hero__inner { position: relative; inset: auto; display: block; padding: 24px 20px 26px; }
	.mrp-login-hero__wordmark { display: block; margin-bottom: 16px; font-size: 11px; }
	.mrp-login-hero__eyebrow { margin-bottom: 8px; font-size: 11px; }
	.mrp-login-hero__title { font-size: 26px; margin: 0; }
	.mrp-login-hero__rule, .mrp-login-hero__tagline { display: none; }
	#login { min-height: 0; display: block; padding: 28px 20px 32px; max-width: 480px; }
	.login .language-switcher { padding: 0 20px; }
}

body.interim-login { padding-right: 0; display: block; }
body.interim-login #login { min-height: 0; display: block; padding: 24px; }