/*
 * SMG Club - branded WordPress login screens (forgot password, reset password, etc.)
 * Mirrors the "LOGIN PAGE" section of smgclub.css.
 *
 * smgclub.css isn't loaded on wp-login.php, so the variables below are copies of
 * the ones in its :root block. Keep them in sync.
 * The logo and tick image URLs (--smgc-login-logo, --smgc-login-tick) are set by
 * inc/login-branding.php.
 */
:root {
	--color-grey-1: #222222;
	--color-grey-2: #353535;
	--color-grey-3: #909090;
	--color-grey-4: #BBB8B8;

	--border-radius-large: 25px;
	--spacing-primary: 60px;

	--fontsize-heading-primary: 36px;
	--fontsize-body-normal: 16px;
	--fontsize-body-small: 12px;

	--fontfamily-body: "Helvetica Neue", sans-serif;

	color-scheme: only light;
}

/* --- Page --- */
html,
body.login {
	background: #000;
}

body::before {
	background-image:unset;
}

.language-switcher {
	display:none;
}

body.login {
	height: auto;
	min-height: 100vh;
	box-sizing: border-box;
	padding: 20px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #fff;
	font-family: var(--fontfamily-body);
	font-size: var(--fontsize-body-normal);
}

/* --- Card: logo + heading on the left, messages + form on the right --- */
body.login #login {
	box-sizing: border-box;
	width: 100%;
	max-width: 730px;
	margin: 0;
	padding: var(--spacing-primary);
	padding-bottom: calc(var(--spacing-primary) - 20px);
	background: linear-gradient(263deg, rgba(0, 0, 0, 0.20) 42.92%, rgba(52, 51, 51, 0.20) 73.8%), var(--color-grey-1);
	border-radius: var(--border-radius-large);
	display: grid;
	grid-template-columns: minmax(0, 1fr) 240px;
	column-gap: 60px;
}

body.login #login > * {
	grid-column: 2;
	min-width: 0;
}

/* The default WordPress logo link is replaced by the SMG logo below. */
body.login #login > .wp-login-logo {
	display: none;
}

/* Left column: logo, then a heading that depends on the screen. */
body.login #login::before {
	content: "Login";
	grid-column: 1;
	grid-row: 1 / span 10;
	align-self: center;
	padding-top: 60px;
	background: var(--smgc-login-logo) no-repeat top left;
	color: #fff;
	font-size: var(--fontsize-heading-primary);
	font-weight: 700;
	line-height: 1.2;
}

body.login.login-action-lostpassword #login::before {
	content: "Forgot password";
	font-size: 25px;
}

body.login.login-action-rp #login::before,
body.login.login-action-resetpass #login::before {
	content: "Reset password";
	font-size: 25px;
}

body.login.login-action-register #login::before {
	content: "Register";
	font-size: 25px;
}

body.login.smgc-check-email #login::before {
	content: "Check your email";
	font-size: 25px;
}

body.login.login-action-confirm_admin_email #login::before {
	content: "Confirm your email";
	font-size: 25px;
}

/* --- Messages and errors --- */
body.login #login .message,
body.login #login .notice,
body.login #login .success {
	margin: 0 0 20px;
	padding: 12px 16px;
	background: var(--color-grey-2);
	color: #fff;
	border: 0;
	border-left: 4px solid #fff;
	border-radius: 0;
	box-shadow: none;
	font-size: var(--fontsize-body-small);
	line-height: 1.5;
}

body.login #login .message p,
body.login #login .notice p,
body.login #login .success p {
	margin: 0;
	font-size: inherit;
	line-height: inherit;
}

body.login #login .notice-error,
body.login #login #login_error {
	border-left-color: #ff5a5f;
}

body.login #login .success {
	border-left-color: #4ab866;
}

body.login #login .message a,
body.login #login .notice a,
body.login #login .success a {
	color: #fff;
	text-decoration: underline;
}

/* --- Form --- */
body.login #login form {
	display: flex;
	flex-wrap: wrap;
	gap: 20px;
	margin: 0 0 20px;
	padding: 0;
	background: transparent;
	border: 0;
	box-shadow: none;
	overflow: visible;
	font-weight: 400;
}

body.login #login form > * {
	width: 100%;
	margin: 0;
}

body.login #login form br.clear,
body.login #login form input[type="hidden"] {
	display: none;
}

body.login #login form p,
body.login #login form p.submit {
	margin: 0;
	padding: 0;
}

body.login #login label {
	display: block;
	margin: 0 0 10px;
	color: #fff;
	font-size: var(--fontsize-body-normal);
	font-weight: 300;
	line-height: 1em;
}

/* Text and password fields */
body.login #login form input[type="text"],
body.login #login form input[type="password"],
body.login #login form input[type="email"],
body.login #login form .input {
	display: block;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0 20px;
	background-color: var(--color-grey-2);
	color: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	outline: 0;
	font-size: var(--fontsize-body-small);
	font-weight: 400;
	line-height: normal;
}

/* Room for the show/hide password button */
body.login #login form input.password-input {
	padding-right: 40px;
}

body.login #login form input[type="text"]:focus,
body.login #login form input[type="password"]:focus,
body.login #login form input[type="email"]:focus {
	box-shadow: inset 0 0 0 1px #fff;
	outline: 0;
}

body.login #login form input::placeholder {
	color: #989898;
	opacity: 1;
	font-size: 10px;
	font-weight: 300;
}

/* Stop browser autofill turning the fields white */
body.login #login form input:-webkit-autofill {
	-webkit-box-shadow: 0 0 0 1000px var(--color-grey-2) inset;
	-webkit-text-fill-color: #fff;
	caret-color: #fff;
}

/* Show / hide password button */
body.login #login .button.wp-hide-pw {
	color: #fff;
	width: 40px;
	height: 40px;
	border-radius: 0;
}

body.login #login .button.wp-hide-pw:focus {
	border-color: #fff;
	box-shadow: none;
}

/* Checkboxes (Remember Me, weak password confirmation) */
body.login #login input[type="checkbox"] {
	-webkit-appearance: none;
	appearance: none;
	position: relative;
	flex: 0 0 13px;
	width: 13px;
	min-width: 13px;
	height: 13px;
	margin: 0;
	padding: 0;
	background: #fff;
	border: 0;
	border-radius: 0;
	box-shadow: none;
	cursor: pointer;
}

body.login #login input[type="checkbox"]:checked {
	background: #fff var(--smgc-login-tick) center / 9px auto no-repeat;
}

body.login #login input[type="checkbox"]:checked::before {
	content: none;
	display: none;
}

body.login #login input[type="checkbox"]:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

body.login #login form .forgetmenot,
body.login #login form .pw-weak {
	display: flex;
	align-items: center;
	gap: 10px;
	float: none;
	min-height: 0;
}

body.login #login form .forgetmenot label,
body.login #login form .pw-weak label {
	margin: 0;
}

/* Help tooltip next to Remember Me (newer WordPress versions) */
body.login #login .wp-tooltip .wp-tooltip__toggle {
	color: var(--color-grey-4);
}

body.login #login .wp-tooltip .wp-tooltip__toggle:hover,
body.login #login .wp-tooltip .wp-tooltip__toggle:focus {
	color: #fff;
}

/* Password strength meter and hint (reset password screen) */
body.login #login #pass-strength-result {
	margin: 10px 0 0;
	padding: 8px 10px;
	border-radius: 0;
	font-size: var(--fontsize-body-small);
}

body.login #login form .indicator-hint,
body.login #login form p.description {
	color: var(--color-grey-4);
	font-size: var(--fontsize-body-small);
	font-weight: 300;
	line-height: 1.5;
}

/* Buttons */
body.login #login .button-primary,
body.login #login #wp-submit {
	display: block;
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	background: #fff;
	color: #000;
	border: 1px solid #fff;
	border-radius: 0;
	box-shadow: none;
	text-shadow: none;
	font-family: var(--fontfamily-body);
	font-size: var(--fontsize-body-normal);
	font-weight: 700;
	line-height: 1;
	text-align: center;
	text-transform: uppercase;
	cursor: pointer;
	transition: all 0.1s ease 0s;
}

body.login #login .button-primary:hover,
body.login #login .button-primary:focus,
body.login #login #wp-submit:hover,
body.login #login #wp-submit:focus {
	background: #000;
	color: #fff;
	border-color: #000;
	box-shadow: none;
}

body.login #login .button-primary:focus-visible,
body.login #login #wp-submit:focus-visible {
	outline: 2px solid #fff;
	outline-offset: 2px;
}

/* "Generate Password" button on the reset screen */
body.login #login .reset-pass-submit {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.login #login .wp-generate-pw {
	float: none;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	border: 1px solid var(--color-grey-3);
	border-radius: 0;
	box-shadow: none;
	font-family: var(--fontfamily-body);
	font-size: var(--fontsize-body-small);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
	cursor: pointer;
}

body.login #login .wp-generate-pw:hover,
body.login #login .wp-generate-pw:focus {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

/* --- Administrator "confirm admin email" screen --- */
body.login #login .admin-email__heading {
	margin: 0;
	padding: 0 0 10px;
	color: #fff;
	border-bottom: 1px solid var(--color-grey-2);
	font-size: 24px;
	font-weight: 700;
	line-height: 1.2;
	text-align: left;
}

body.login #login .admin-email__details {
	color: #fff;
	font-size: var(--fontsize-body-small);
	font-weight: 300;
	line-height: 1.5;
}

body.login #login .admin-email__details strong {
	font-weight: 700;
}

body.login #login .admin-email__actions-secondary a {
	font-size: var(--fontsize-body-small);
}

body.login #login .admin-email__actions div {
	padding-top: 0;
}

body.login #login .admin-email__actions-primary {
	display: flex;
	flex-direction: column;
	gap: 20px;
}

body.login #login .admin-email__actions-secondary {
	margin-top: 20px;
	text-align: center;
}

/* Secondary (non-primary) button links, e.g. "Update" */
body.login #login form a.button:not(.button-primary) {
	display: flex;
	align-items: center;
	justify-content: center;
	box-sizing: border-box;
	width: 100%;
	height: 40px;
	min-height: 40px;
	margin: 0;
	padding: 0;
	background: transparent;
	color: #fff;
	border: 1px solid var(--color-grey-3);
	border-radius: 0;
	box-shadow: none;
	font-size: var(--fontsize-body-small);
	font-weight: 700;
	line-height: 1;
	text-transform: uppercase;
}

body.login #login form a.button:not(.button-primary):hover,
body.login #login form a.button:not(.button-primary):focus {
	background: transparent;
	color: #fff;
	border-color: #fff;
}

/* Plain links inside forms */
body.login #login form a:not(.button) {
	color: var(--color-grey-4);
	text-decoration: underline;
}

body.login #login form a:not(.button):hover,
body.login #login form a:not(.button):focus {
	color: #fff;
	box-shadow: none;
}

/* --- Links under the form --- */
body.login #login #nav {
	margin: 0 0 20px;
	padding: 0;
	font-size: var(--fontsize-body-small);
	font-weight: 300;
	text-align: center;
}

body.login #login #nav a {
	color: var(--color-grey-4);
	text-decoration: none;
	transition: color 0.1s ease 0s;
}

body.login #login #nav a:hover,
body.login #login #nav a:focus {
	color: #fff;
	box-shadow: none;
}

/* "Go to site" just bounces back to /login, so it's hidden. */
body.login #login #backtoblog {
	display: none;
}

body.login .privacy-policy-page-link,
body.login .language-switcher {
	margin: 20px 0 0;
	padding: 0;
	width: auto;
	font-size: var(--fontsize-body-small);
}

body.login .privacy-policy-page-link a,
body.login .language-switcher a,
body.login .language-switcher label {
	color: var(--color-grey-4);
}

/* --- Mobile: single column, same breakpoint as the custom login page --- */
@media (max-width: 767px) {
	body.login #login {
		grid-template-columns: minmax(0, 1fr);
		padding: 30px;
		padding-bottom: 10px;
	}

	body.login #login > * {
		grid-column: 1;
	}

	body.login #login::before {
		grid-column: 1;
		grid-row: auto;
		align-self: start;
		margin-bottom: 20px;
		padding-top: 60px;
	}
}