/*
 * Staff login (wp-login.php) in the Million Homes design.
 * wp-login markup is generated by WordPress core and cannot take utility classes,
 * so this small stylesheet mirrors the theme tokens (see src/app.css).
 */
@font-face { font-family: "Bodoni Moda Variable"; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "Bodoni Moda Variable"; font-weight: 400 900; font-display: swap; src: url("../fonts/bodoni-moda-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }
@font-face { font-family: "Outfit Variable"; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-ext-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0100-02BA, U+1E00-1E9F; }
@font-face { font-family: "Outfit Variable"; font-weight: 100 900; font-display: swap; src: url("../fonts/outfit-latin-wght-normal.woff2") format("woff2-variations"); unicode-range: U+0000-00FF, U+2000-206F, U+20AC; }

:root {
	--ink: #141414;
	--gold: #af7366;
	--gold-light: #ddb8b0;
	--line: rgb(255 255 255 / 0.14);
	--muted: rgb(255 255 255 / 0.55);
	--ease: cubic-bezier(0.22, 1, 0.36, 1);
}

html, body.login { height: 100%; }
body.login {
	margin: 0;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 0;
	box-sizing: border-box;
	min-height: 100%;
	height: auto;
	background: var(--ink);
	color: #fff;
	font: 300 15px/1.6 "Outfit Variable", "Helvetica Neue", Arial, sans-serif;
	-webkit-font-smoothing: antialiased;
	position: relative;
	overflow-x: hidden;
}

/* Ambient layer: the hero image, heavily blurred – same treatment as the home page. */
body.login::before,
body.login::after {
	content: "";
	position: fixed;
	inset: 0;
	pointer-events: none;
}
body.login::before {
	background: var(--mh-login-bg) center / cover no-repeat;
	filter: blur(36px) saturate(1.2) brightness(0.9);
	transform: scale(1.15);
}
body.login::after {
	background:
		radial-gradient(ellipse at 50% 45%, rgb(20 20 20 / 0.15), rgb(20 20 20 / 0.7) 75%);
}

/* The whole column is one glass card: logo, heading, messages, form, links. */
#login {
	position: relative;
	z-index: 1;
	width: min(460px, calc(100vw - 32px));
	box-sizing: border-box;
	margin: 0 auto;
	padding: 40px 40px 30px;
	background: rgb(20 20 20 / 0.62);
	border: 1px solid var(--line);
	border-top: 3px solid var(--gold);
	box-shadow: 0 40px 120px -30px rgb(0 0 0 / 0.8);
	-webkit-backdrop-filter: blur(24px) saturate(1.3);
	backdrop-filter: blur(24px) saturate(1.3);
	animation: mh-rise 0.9s var(--ease) both;
}
@keyframes mh-rise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { #login { animation: none; } }

/* Logo */
.login h1 { margin: 0 0 30px; }
.login h1 a {
	background: var(--mh-login-logo) center / contain no-repeat;
	width: 168px;
	height: 120px;
	margin: 0 auto;
	outline-offset: 6px;
}

.login form {
	margin: 0;
	padding: 0;
	background: none;
	border: 0;
	box-shadow: none;
	overflow: visible;
}
.mh-login-head { margin: 0 0 28px; padding-top: 26px; border-top: 1px solid var(--line); text-align: left; }
.mh-login-eyebrow {
	display: flex;
	align-items: center;
	gap: 14px;
	margin: 0;
	color: var(--gold-light);
	font-size: 10px;
	letter-spacing: 0.28em;
	text-transform: uppercase;
}
.mh-login-eyebrow::before { content: ""; width: 32px; height: 1px; background: var(--gold); }
.mh-login-title {
	margin: 14px 0 0;
	font: 400 30px/1.1 "Bodoni Moda Variable", Didot, Georgia, serif;
	letter-spacing: 0.04em;
	text-transform: uppercase;
	color: #fff;
}

/* Fields */
.login label {
	display: block;
	margin-bottom: 2px;
	color: var(--muted);
	font-size: 10px;
	letter-spacing: 0.18em;
	text-transform: uppercase;
}
.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	width: 100%;
	margin: 0 0 22px;
	padding: 10px 0;
	min-height: 0;
	font: 300 17px/1.4 "Outfit Variable", sans-serif;
	color: #fff;
	background: transparent;
	border: 0;
	border-bottom: 1px solid var(--line);
	border-radius: 0;
	box-shadow: none;
	transition: border-color 0.3s var(--ease);
}
.login form .input:focus,
.login input:focus {
	border-color: var(--gold) !important;
	box-shadow: none !important;
	outline: none;
}
.login input:-webkit-autofill {
	-webkit-text-fill-color: #fff;
	-webkit-box-shadow: 0 0 0 40px #1c1b19 inset;
	caret-color: #fff;
}
.login .wp-pwd { position: relative; }
.login .button.wp-hide-pw {
	top: 2px;
	right: -6px;
	color: var(--muted);
	background: none;
	border: 0;
	box-shadow: none;
}
.login .button.wp-hide-pw:hover,
.login .button.wp-hide-pw:focus { color: #fff; box-shadow: none; }

.login form .forgetmenot { float: none; display: flex; align-items: center; margin: 6px 0 28px; }
.login form .forgetmenot label { display: flex; align-items: center; gap: 10px; margin: 0; text-transform: none; letter-spacing: 0; font-size: 13px; color: var(--muted); }
.login input[type="checkbox"] { margin: 0; accent-color: var(--gold); width: 16px; height: 16px; border-radius: 0; background: transparent; border-color: var(--line); }
.login input[type="checkbox"]:checked::before { filter: brightness(10); }

/* Button */
.login .submit { float: none; padding: 0; }
.wp-core-ui.login .button-primary,
.login .button-primary {
	float: none;
	display: block;
	width: 100%;
	height: auto;
	min-height: 0;
	padding: 15px 20px !important;
	font: 400 11px/1 "Outfit Variable", sans-serif;
	letter-spacing: 0.2em;
	text-transform: uppercase;
	color: #fff;
	background: #9d6052; /* AA contrast with white text */
	border: 0;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	cursor: pointer;
	transition: background 0.5s var(--ease), color 0.5s var(--ease);
}
.wp-core-ui.login .button-primary:hover,
.wp-core-ui.login .button-primary:focus {
	background: #fff;
	color: var(--ink);
	box-shadow: none;
}
.wp-core-ui.login .button-primary:focus-visible { outline: 1px solid var(--gold); outline-offset: 4px; }

/* Links under the card */
.login #nav,
.login #backtoblog {
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
	font-size: 13px;
}
.login #nav a,
.login #backtoblog a {
	color: var(--muted) !important;
	text-decoration: none;
	border-bottom: 1px solid transparent;
	transition: color 0.3s, border-color 0.3s;
}
.login #nav a:hover,
.login #backtoblog a:hover { color: #fff !important; border-color: var(--gold); }
.login .privacy-policy-page-link { margin: 26px 0 0; }
.login .privacy-policy-link { color: rgb(255 255 255 / 0.4) !important; font-size: 12px; }

/* Messages */
.login .message,
.login .notice,
.login #login_error,
.login .success {
	margin: 0 0 22px;
	padding: 12px 16px;
	color: #fff;
	background: rgb(255 255 255 / 0.05);
	border: 0;
	border-left: 2px solid var(--gold);
	box-shadow: none;
	-webkit-backdrop-filter: blur(20px);
	backdrop-filter: blur(20px);
}
.login #login_error,
.login .notice-error { border-left-color: #e0645c; }
.login .message a,
.login #login_error a { color: var(--gold-light); }

/* Hide WordPress chrome that does not fit a private office login. */
.language-switcher,
.login .admin-email__details { display: none; }

/* Footer line */
.mh-login-foot {
	position: relative;
	z-index: 1;
	margin: 28px 0 0;
	text-align: center;
	color: rgb(255 255 255 / 0.35);
	font-size: 11px;
	letter-spacing: 0.24em;
	text-transform: uppercase;
}

@media (max-width: 480px) {
	#login { padding: 32px 22px 24px; }
	.mh-login-title { font-size: 25px; }
	.login h1 a { width: 100px; height: 85px; }
}