/*
 * The staff sign-in page, in the home page's clothes.
 *
 * Same fonts (Montserrat for display, Poppins for everything else), same
 * colours from wix-tokens.css, same yellow-with-pink button as the home's
 * "Learn More". The logo in its two halves: the face above, the name below.
 * No hero, no header, no footer -- a door, not a page.
 */

/*
 * One calm wash, on the page itself and fixed to the window: a tall page no
 * longer shows the background starting over halfway down, which is what a
 * gradient on <body> did once the form grew past the screen.
 */
html {
	background: linear-gradient(180deg, #e3f6ff 0%, #f5fbff 38%, #ffffff 70%) fixed no-repeat;
	min-height: 100%;
}

body.login {
	background: transparent;
	color: var(--wx-ink);
	font-family: var(--wx-font-body);
	min-height: 100vh;
}

#login {
	padding: clamp(24px, 7vh, 72px) 0 32px;
	width: min(400px, calc(100% - 32px));
}

/* ---------------------------------------------------------------- the logo */

.login h1 {
	text-align: center;
}

/* The face, in the white disc it wears in the site's header and hero. */
.login h1::before {
	background: var(--wx-white) var(--pp-login-face) center / 72% no-repeat;
	border-radius: 50%;
	box-shadow: 0 16px 36px -14px rgba(0, 47, 166, .45), 0 0 0 6px rgba(255, 255, 255, .7);
	content: "";
	display: block;
	height: 128px;
	margin: 0 auto 18px;
	width: 128px;
}

/* The name, under it. */
.login h1 a {
	background: var(--pp-login-name) center / contain no-repeat;
	height: 62px;
	margin: 0 auto 26px;
	width: min(320px, 100%);
}

.login h1 a:focus {
	box-shadow: 0 0 0 3px rgba(0, 47, 166, .25);
	border-radius: 8px;
	outline: none;
}

/* --------------------------------------------------------- the line above */

.login .pp-login-intro {
	background: none;
	border: 0;
	box-shadow: none;
	color: var(--wx-blue);
	font-size: 15px;
	line-height: 1.5;
	margin: 0 0 16px;
	padding: 0;
	text-align: center;
}

.pp-login-eyebrow {
	align-items: center;
	color: var(--wx-magenta);
	display: flex;
	font-family: var(--wx-font-display);
	font-size: 13px;
	font-weight: 900;
	gap: 10px;
	justify-content: center;
	letter-spacing: .22em;
	margin-bottom: 6px;
	text-transform: uppercase;
}

.pp-login-eyebrow::before,
.pp-login-eyebrow::after {
	background: var(--wx-magenta);
	border-radius: 2px;
	content: "";
	height: 3px;
	width: 26px;
}

/* ---------------------------------------------------------------- the card */

.login form {
	background: var(--wx-white);
	border: 0;
	border-radius: var(--wx-radius);
	box-shadow: var(--wx-shadow-lg);
	margin-top: 0;
	padding: 28px 28px 30px;
}

.login label {
	color: var(--wx-blue);
	font-size: 14px;
	font-weight: 600;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	background: #f7faff;
	border: 2px solid #d6e2fb;
	border-radius: 12px;
	box-shadow: none;
	color: var(--wx-ink);
	font-family: var(--wx-font-body);
	font-size: 17px;
	margin: 4px 0 18px;
	min-height: 48px;
	padding: 8px 14px;
	transition: border-color var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease);
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	background: var(--wx-white);
	border-color: var(--wx-blue);
	box-shadow: 0 0 0 4px rgba(0, 47, 166, .14);
	outline: none;
}

.login .button.wp-hide-pw {
	color: var(--wx-blue);
	height: 48px;
	margin-top: 4px;
}

.login .forgetmenot label {
	color: var(--wx-ink);
	font-weight: 500;
}

.login input[type="checkbox"] {
	accent-color: var(--wx-blue);
	border-color: #b9c9ef;
	border-radius: 5px;
}

/* The home's "Learn More": yellow, pink words, a pill. */
.login .button-primary,
.wp-core-ui .button-primary {
	background: var(--wx-yellow);
	border: 0;
	border-radius: var(--wx-radius-pill);
	box-shadow: 0 10px 22px -10px rgba(170, 0, 125, .55), inset 0 -3px 0 rgba(0, 0, 0, .08);
	color: var(--wx-magenta);
	font-family: var(--wx-font-display);
	font-size: 15px;
	font-weight: 900;
	letter-spacing: .06em;
	min-height: 48px;
	padding: 0 28px;
	text-shadow: none;
	text-transform: uppercase;
	transition: transform var(--wx-dur) var(--wx-ease), box-shadow var(--wx-dur) var(--wx-ease);
}

.login .button-primary:hover,
.login .button-primary:focus {
	background: var(--wx-yellow);
	box-shadow: 0 14px 26px -10px rgba(170, 0, 125, .6), inset 0 -3px 0 rgba(0, 0, 0, .08);
	color: var(--wx-magenta-dark);
	transform: translateY(-1px);
}

.login .button-primary:focus {
	outline: 3px solid rgba(0, 47, 166, .35);
	outline-offset: 2px;
}

.login .submit {
	margin-top: 6px;
}

.login #wp-submit {
	float: none;
	width: 100%;
}

.login .forgetmenot {
	float: none;
	margin-bottom: 18px;
}

/* ------------------------------------------------------------- messages */

.login .message,
.login .notice,
.login #login_error,
.login .success {
	background: var(--wx-white);
	border: 0;
	border-left: 5px solid var(--wx-blue);
	border-radius: 12px;
	box-shadow: var(--wx-shadow-sm);
	color: var(--wx-ink);
	margin-bottom: 18px;
	padding: 12px 16px;
}

.login #login_error,
.login .notice-error {
	border-left-color: var(--wx-magenta);
}

/* ------------------------------------------------------------- the links */

.login #nav,
.login #backtoblog {
	font-size: 14px;
	margin: 18px 0 0;
	padding: 0;
	text-align: center;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--wx-blue);
	font-weight: 600;
	text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--wx-magenta);
	text-decoration: underline;
}

.login .privacy-policy-page-link {
	margin: 22px 0 0;
}

@media (max-width: 400px) {
	.login form {
		padding: 22px 18px 24px;
	}

	.login h1::before {
		height: 108px;
		width: 108px;
	}
}

/* ------------------------------------------------ signing in with a link */

/* "or" between two lines, then the link as an outlined pill. */
.pp-magic-offer {
	margin: 18px 0 0;
	text-align: center;
}

.pp-magic-offer span {
	align-items: center;
	color: var(--wx-grey);
	display: flex;
	font-size: 12px;
	gap: 12px;
	letter-spacing: .08em;
	margin-bottom: 14px;
	text-transform: uppercase;
}

.pp-magic-offer span::before,
.pp-magic-offer span::after {
	background: #e3e9f5;
	content: "";
	flex: 1;
	height: 1px;
}

.pp-magic-offer__link {
	border: 2px solid var(--wx-blue);
	border-radius: var(--wx-radius-pill);
	color: var(--wx-blue);
	display: block;
	font-size: 15px;
	font-weight: 600;
	padding: 11px 16px;
	text-decoration: none;
	transition: background var(--wx-dur) var(--wx-ease), color var(--wx-dur) var(--wx-ease);
}

.pp-magic-offer__link:hover,
.pp-magic-offer__link:focus {
	background: var(--wx-blue);
	color: var(--wx-white);
}

.pp-magic-lead {
	color: var(--wx-ink);
	font-size: 15px;
	line-height: 1.55;
	margin: 0 0 18px !important;
}

.pp-magic-sent {
	background: var(--wx-white);
	border-radius: var(--wx-radius);
	box-shadow: var(--wx-shadow-lg);
	line-height: 1.6;
	padding: 26px 26px 22px;
	text-align: center;
}

.pp-magic-sent__title {
	color: var(--wx-blue);
	font-family: var(--wx-font-display);
	font-size: 20px;
	font-weight: 900;
	margin: 0 0 8px;
}

/* -------------------------------------------------------------- arrival */

/* The face drops in with a bounce and nods once; the name and the form
   follow it up. Nothing moves for anyone who asked for less motion. */
@media (prefers-reduced-motion: no-preference) {
	.login h1::before {
		animation:
			pp-face-in .9s cubic-bezier(.34, 1.56, .64, 1) .1s both,
			pp-face-nod 1.1s ease-in-out 1.1s 1;
		transform-origin: 50% 90%;
	}

	.login h1 a {
		animation: pp-rise .6s var(--wx-ease) .45s both;
	}

	.login form,
	.login .pp-magic-sent {
		animation: pp-rise .6s var(--wx-ease) .6s both;
	}
}

@keyframes pp-face-in {
	from { opacity: 0; transform: translateY(-28px) scale(.55) rotate(-14deg); }
	to   { opacity: 1; transform: none; }
}

@keyframes pp-face-nod {
	0%, 100% { transform: rotate(0); }
	30%      { transform: rotate(-9deg); }
	60%      { transform: rotate(7deg); }
}

@keyframes pp-rise {
	from { opacity: 0; transform: translateY(12px); }
	to   { opacity: 1; transform: none; }
}

/* Opened as the phone app: the status bar strip in the brand's blue, and the
   page starting below it (see staff-app.php and staff-admin.css). */
@media (display-mode: standalone) {
	body.login::before {
		background: #00206f;
		content: "";
		height: env(safe-area-inset-top, 0px);
		left: 0;
		position: fixed;
		right: 0;
		top: 0;
		z-index: 10;
	}

	#login {
		padding-top: calc(env(safe-area-inset-top, 0px) + clamp(24px, 5vh, 56px));
	}
}