/**
 * Memphis Child Theme — login page styling.
 *
 * Dynamic values (logo URL, accent color, button radius, etc.) come from
 * the NU Settings options and are injected as CSS variables by
 * memphis_login_dynamic_vars() in functions.php.
 *
 * Everything else lives here so it can be cached, edited, and version-controlled
 * without touching PHP.
 *
 * The :root values not driven by options are declared here as defaults; the
 * dynamic <style id="nu-login-vars"> block in <head> overrides only the
 * option-bound ones.
 */

:root {
	--nu-login-bg-end: #f5f5f7;
	--nu-login-card: #ffffff;
	--nu-login-card-radius: 18px;
	--nu-login-card-border: rgba(0, 0, 0, 0.06);
	--nu-login-card-shadow:
		0 0 0 1px rgba(0, 0, 0, 0.04),
		0 8px 24px rgba(0, 0, 0, 0.04);

	--nu-login-text: #1d1d1f;
	--nu-login-text-secondary: #6e6e73;
	--nu-login-separator: #d2d2d7;
	--nu-login-input-radius: 10px;
	--nu-login-input-height: 48px;

	--nu-login-font:
		-apple-system, BlinkMacSystemFont, "SF Pro Text",
		"Segoe UI", Roboto, Oxygen-Sans, Ubuntu, Cantarell,
		"Helvetica Neue", sans-serif;
}

/* Background: subtle two-tone vertical gradient */
body.login {
	background: linear-gradient(180deg, var(--nu-login-bg) 0%, var(--nu-login-bg-end) 100%) !important;
	background-attachment: fixed !important;
	font-family: var(--nu-login-font) !important;
	color: var(--nu-login-text) !important;
}

/* Logo: width comes from NU Settings; height auto-scales via aspect-ratio.
   Note: text-indent / SR-text handling is owned by num-accessibility mu-plugin
   (login_logo_sr_text feature). Do not add text-indent here, it will be
   overridden anyway and creates a redundant rule. */
body.login h1 a {
	background-image: var(--nu-login-logo) !important;
	background-size: contain !important;
	background-position: center !important;
	background-repeat: no-repeat !important;
	width: var(--nu-login-logo-width) !important;
	height: auto !important;
	aspect-ratio: 10 / 3 !important;
	max-height: 140px !important;
	margin: 0 auto 32px !important;
}

/* Outer container */
body.login #login {
	padding-top: calc(8vh + 30px);
	width: 360px;
}

/* Card: white, hairline border, soft elevation */
body.login #loginform,
body.login #lostpasswordform,
body.login #registerform {
	background: var(--nu-login-card) !important;
	border: 1px solid var(--nu-login-card-border) !important;
	border-radius: var(--nu-login-card-radius) !important;
	box-shadow: var(--nu-login-card-shadow) !important;
	padding: 36px 32px !important;
	margin-top: 0 !important;
}

/* Field rhythm: even spacing between fields and submit */
body.login form p {
	margin: 0 0 14px 0 !important;
}
body.login form p:last-of-type {
	margin-bottom: 0 !important;
}

/* Labels: quiet, slightly tracked */
body.login label {
	font-size: 13px !important;
	font-weight: 500 !important;
	color: var(--nu-login-text) !important;
	letter-spacing: -0.005em;
	margin-bottom: 6px !important;
	display: block;
}

/* Inputs: taller, hairline border, larger radius, smooth focus */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	background: var(--nu-login-card) !important;
	border: 1px solid var(--nu-login-separator) !important;
	border-radius: var(--nu-login-input-radius) !important;
	padding: 12px 14px !important;
	font-size: 17px !important;
	line-height: 1.3 !important;
	min-height: var(--nu-login-input-height) !important;
	color: var(--nu-login-text) !important;
	box-shadow: none !important;
	transition: border-color 0.2s ease-out, box-shadow 0.2s ease-out !important;
	font-family: var(--nu-login-font) !important;
}
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--nu-login-accent) !important;
	box-shadow: 0 0 0 4px rgba(var(--nu-login-accent-rgb) / 0.18) !important;
	outline: none !important;
}

/* Password field wrapper. Must NOT be flex (would push the eye icon into its
   own column instead of overlaying). */
body.login .wp-pwd {
	position: relative !important;
	display: block !important;
}
body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
	width: 100% !important;
	margin: 0 !important;
	display: block !important;
	padding-right: 48px !important; /* reserve room for the eye icon */
}

/* Eye icon: absolutely positioned, vertically centered on the input.
   WP core sets top:5px / bottom:5px on this button; the overrides below
   anchor the visual center to the input's true vertical midpoint. */
body.login .wp-pwd .button.wp-hide-pw,
body.login .wp-pwd .wp-hide-pw {
	background: transparent !important;
	border: 0 !important;
	box-shadow: none !important;
	color: var(--nu-login-text-secondary) !important;
	position: absolute !important;
	top: 50% !important;
	right: 6px !important;
	bottom: auto !important;
	transform: translateY(-50%) !important;
	margin: 0 !important;
	height: 32px !important;
	width: 32px !important;
	min-width: 32px !important;
	padding: 0 !important;
	border-radius: 6px !important;
	display: inline-flex !important;
	align-items: center !important;
	justify-content: center !important;
	line-height: 1 !important;
	font-size: 0 !important;
}
body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
	background: rgba(0, 0, 0, 0.04) !important;
	color: var(--nu-login-text) !important;
	outline: none !important;
}
body.login .wp-pwd .button.wp-hide-pw .dashicons,
body.login .wp-pwd .wp-hide-pw .dashicons {
	font-size: 18px !important;
	line-height: 18px !important;
	width: 18px !important;
	height: 18px !important;
	display: block !important;
	margin: 0 !important;
	padding: 0 !important;
	position: relative !important;
	top: 0 !important;
	vertical-align: middle !important;
}

/* Remember Me: checkbox and label inline.
   Note: the muted text color on .forgetmenot is owned by num-accessibility
   mu-plugin (login_contrast_bump feature) which bumps it from #6e6e73 to
   #5e5e63 for stronger WCAG AA pass. Color is intentionally omitted here. */
body.login .forgetmenot {
	font-size: 13px !important;
	margin: 6px 0 14px 0 !important;
	display: flex !important;
	align-items: center !important;
	gap: 8px !important;
}
body.login .forgetmenot label {
	display: inline-flex !important;
	align-items: center !important;
	gap: 8px !important;
	margin: 0 !important;
	font-size: 13px !important;
	font-weight: 400 !important;
	letter-spacing: 0 !important;
	cursor: pointer;
}
body.login .forgetmenot input[type="checkbox"] {
	margin: 0 !important;
	width: 16px !important;
	height: 16px !important;
	accent-color: var(--nu-login-accent) !important;
	flex: 0 0 auto !important;
	position: static !important;
}

/* Submit button: full-width, accent color */
body.login .button-primary,
body.login .wp-core-ui .button-primary,
body.login #wp-submit {
	background: var(--nu-login-accent) !important;
	background-color: var(--nu-login-accent) !important;
	border: 1px solid var(--nu-login-accent) !important;
	color: var(--nu-login-button-text) !important;
	text-shadow: none !important;
	box-shadow: none !important;
	border-radius: var(--nu-login-button-radius) !important;
	padding: 0 18px !important;
	height: var(--nu-login-input-height) !important;
	line-height: var(--nu-login-input-height) !important;
	font-size: 17px !important;
	font-weight: 500 !important;
	letter-spacing: -0.01em !important;
	width: 100% !important;
	margin-top: 4px !important;
	cursor: pointer !important;
	transition:
		background-color 0.15s ease-out,
		border-color 0.15s ease-out,
		color 0.15s ease-out !important;
}
body.login .button-primary:hover,
body.login .button-primary:focus,
body.login .wp-core-ui .button-primary:hover,
body.login .wp-core-ui .button-primary:focus,
body.login #wp-submit:hover,
body.login #wp-submit:focus {
	background: var(--nu-login-accent-hover) !important;
	background-color: var(--nu-login-accent-hover) !important;
	border-color: var(--nu-login-accent-hover) !important;
	color: var(--nu-login-button-text-hover) !important;
	outline: none !important;
}

/* "Lost your password?" — tight to the card bottom */
body.login #nav {
	font-size: 13px !important;
	text-align: center !important;
	margin: 14px 0 0 0 !important;
	padding: 0 !important;
}

/* "Back to site" — 60px below "Lost your password?", 30px above Privacy Policy */
body.login #backtoblog {
	font-size: 13px !important;
	text-align: center !important;
	margin: 60px 0 30px 0 !important;
	padding: 0 !important;
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--nu-login-accent) !important;
	text-decoration: none !important;
}
body.login #nav a:hover,
body.login #backtoblog a:hover {
	text-decoration: underline !important;
}

/* Privacy Policy link (WP 5.7+ login footer) */
body.login .privacy-policy-page-link {
	margin-top: 24px !important;
	text-align: center !important;
	font-size: 13px !important;
}

/* Errors and notices: hairline left border, calm typography */
body.login #login_error,
body.login .message,
body.login .success,
body.login .notice {
	background: var(--nu-login-card) !important;
	border: 1px solid var(--nu-login-card-border) !important;
	border-left: 3px solid var(--nu-login-accent) !important;
	border-radius: 8px !important;
	box-shadow: var(--nu-login-card-shadow) !important;
	padding: 12px 16px !important;
	font-size: 14px !important;
	line-height: 1.4 !important;
	color: var(--nu-login-text) !important;
	margin-bottom: 16px !important;
}
body.login #login_error {
	border-left-color: #d70015 !important; /* Apple system red */
}
body.login .message,
body.login .success {
	border-left-color: #34c759 !important; /* Apple system green */
}

/* Language switcher */
body.login .language-switcher {
	margin-top: 24px;
	text-align: center;
	font-size: 12px;
	color: var(--nu-login-text-secondary);
}