/**
 * PrettyCoolApp — login screen styles.
 *
 * Loaded only on wp-login.php, after core's login.css, buttons.css and
 * forms.css. style.css is not loaded here, so the tokens the screen needs are
 * repeated below; keep them in step with style.css (Tokens).
 *
 * Core styles this screen with class selectors (.wp-core-ui .button-primary,
 * .login form .input, ...), so rules here start from #login to win on
 * specificity rather than reaching for !important.
 */

/* Tokens
 * ------------------------------------------------------------ */

:root {
	--pc-pink: #ff4d9d;
	--pc-pink-dark: #e62e82;
	--pc-pink-darker: #b91f65;
	--pc-pink-200: #ffc7e0;
	--pc-pink-100: #ffe0ee;
	--pc-pink-50: #fff2f8;
	--pc-sky: #6cd0ff;
	--pc-sky-dark: #39c0ff;
	--pc-sky-darker: #0088c8;
	--pc-sky-200: #a9e4ff;
	--pc-sky-100: #c8edff;
	--pc-sky-50: #e6f7ff;
	--pc-ink: #101014;
	--pc-ink-70: #4a4a52;
	--pc-ink-40: #8b8b94;
	--pc-white: #ffffff;
	--pc-bg: #fffdfe;

	--pc-line: 2px solid var(--pc-ink);
	--pc-line-thin: 2px solid var(--pc-ink);
	--pc-shadow: 4px 4px 0 var(--pc-ink);
	--pc-shadow-sm: 3px 3px 0 var(--pc-ink);
	--pc-shadow-lg: 10px 10px 0 var(--pc-ink);
	--pc-shadow-sky: 4px 4px 0 var(--pc-sky);

	--pc-radius-sm: 10px;
	--pc-radius: 18px;
	--pc-radius-lg: 28px;
	--pc-radius-pill: 999px;

	--pc-font-display: "Fraunces", "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, serif;
	--pc-font-body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;

	--pc-ease-bounce: cubic-bezier(0.2, 1.6, 0.4, 1);
	--pc-ease: cubic-bezier(0.4, 0, 0.2, 1);
}

/* Page
 * ------------------------------------------------------------ */

body.login {
	background-color: var(--pc-bg);
	color: var(--pc-ink);
	font-family: var(--pc-font-body);
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
}

/* The same pink and sky polka dots as the rest of the site. */
body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	z-index: -1;
	pointer-events: none;
	background-image:
		radial-gradient(var(--pc-pink-100) 1.5px, transparent 1.6px),
		radial-gradient(var(--pc-sky-100) 1.5px, transparent 1.6px);
	background-size: 26px 26px, 26px 26px;
	background-position: 0 0, 13px 13px;
	opacity: 0.75;
}

/* The re-auth modal in wp-admin loads this screen in a small frame. */
body.interim-login::before {
	display: none;
}

#login {
	width: min(25rem, 100% - 2rem);
	padding: clamp(1.5rem, 7vh, 4.5rem) 0 2rem;
}

.login-action-confirm_admin_email #login {
	width: min(38rem, 100% - 2rem);
}

#login a {
	color: var(--pc-pink-dark);
	text-decoration-thickness: 2px;
	text-underline-offset: 0.18em;
	transition: color 0.15s var(--pc-ease);
}

#login a:hover,
#login a:active {
	color: var(--pc-ink);
}

/* Keyboard focus is always visible and always obviously pink. */
#login a:focus,
#login :focus-visible {
	box-shadow: none;
	outline: 3px solid var(--pc-pink);
	outline-offset: 3px;
	border-radius: 4px;
}

/* Wordmark
 * ------------------------------------------------------------ */

#login h1 a {
	display: block;
	width: auto;
	height: auto;
	margin: 0 0 1.5rem;
	background: none;
	text-indent: 0;
	overflow: visible;
	text-align: center;
	text-decoration: none;
	color: var(--pc-ink);
}

#login h1 a:focus {
	border-radius: var(--pc-radius-sm);
}

#login h1 .site-title {
	display: inline-flex;
	align-items: center;
	gap: 0.3em;
	font-family: var(--pc-font-display);
	font-size: 2.5rem;
	font-weight: 900;
	font-variation-settings: "SOFT" 60, "WONK" 1;
	line-height: 1;
	letter-spacing: -0.03em;
}

#login h1 .site-title__mark { color: var(--pc-pink); transition: color 0.15s var(--pc-ease); }
#login h1 .site-title__mark--sky { color: var(--pc-sky-darker); }
#login h1 a:hover .site-title__mark { color: var(--pc-pink-dark); }
#login h1 a:hover .site-title__mark--sky { color: var(--pc-ink); }

.pc-brand-mark {
	display: inline-block;
	line-height: 0;
	animation: pc-float 4s ease-in-out infinite;
}

.pc-brand-mark svg path { fill: var(--pc-sky); stroke: var(--pc-ink); }

@keyframes pc-float {
	0%, 100% { transform: translateY(0); }
	50% { transform: translateY(-8px); }
}

.pc-has-custom-logo #login h1 img {
	max-width: 100%;
	max-height: 5rem;
	width: auto;
	height: auto;
}

/* The card
 * ------------------------------------------------------------ */

#login form {
	margin: 0 0 1.5rem;
	padding: 1.75rem 1.5rem;
	overflow: visible;
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-lg);
	box-shadow: var(--pc-shadow);
}

/* The language switcher is a form too, but not a card. */
#login #language-switcher,
.language-switcher form {
	padding: 0;
	background: none;
	border: 0;
	border-radius: 0;
	box-shadow: none;
}

#login form p,
#login form .user-pass-wrap {
	margin-bottom: 1.125rem;
}

#login label {
	display: block;
	margin-bottom: 0.375rem;
	font-size: 0.9375rem;
	font-weight: 700;
	line-height: 1.4;
}

#login form .input,
#login input[type="text"],
#login input[type="email"],
#login input[type="password"] {
	display: block;
	width: 100%;
	height: 3.25rem;
	min-height: 0;
	margin: 0;
	padding: 0 0.9em;
	font-family: var(--pc-font-body);
	font-size: 1.0625rem;
	line-height: 1.4;
	color: var(--pc-ink);
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-sm);
	box-shadow: none;
	transition: box-shadow 0.15s var(--pc-ease);
}

#login form .input:focus,
#login input[type="text"]:focus,
#login input[type="email"]:focus,
#login input[type="password"]:focus {
	border-color: var(--pc-ink);
	box-shadow: var(--pc-shadow-sky);
	outline: 2px solid transparent;
}

#login input.password-input {
	font-family: var(--pc-font-body);
}

.js #login input.password-input {
	padding-right: 3.25rem;
}

/* The show/hide eye, sitting inside the password field's outline. */
#login .button.wp-hide-pw {
	top: 3px;
	right: 3px;
	width: 3rem;
	height: calc(3.25rem - 6px);
	min-height: 0;
	padding: 0;
	border: 0;
	border-radius: 0 7px 7px 0;
	color: var(--pc-ink);
	background: transparent;
	box-shadow: none;
	transform: none;
}

#login .button.wp-hide-pw:hover {
	color: var(--pc-pink-dark);
	background: transparent;
}

#login .button.wp-hide-pw:focus {
	border: 0;
	box-shadow: none;
	outline-offset: -5px;
}

/* Remember me */
#login form .forgetmenot {
	float: none;
	gap: 0.5rem;
	min-height: 0;
	margin-bottom: 1.25rem;
}

#login form .forgetmenot label,
#login .pw-weak label {
	display: inline;
	margin: 0;
	font-weight: 600;
}

#login input[type="checkbox"] {
	width: 1.375rem;
	height: 1.375rem;
	min-width: 1.375rem;
	margin: 0;
	border: var(--pc-line-thin);
	border-radius: 6px;
	background: var(--pc-white);
}

#login input[type="checkbox"]:checked {
	background: var(--pc-pink);
	border-color: var(--pc-ink);
}

#login input[type="checkbox"]:checked::before {
	width: 1.375rem;
	height: 1.375rem;
	margin: -0.125rem 0 0 -0.125rem;
}

#login input[type="checkbox"]:focus {
	border-color: var(--pc-ink);
	box-shadow: 0 0 0 2px var(--pc-white), 0 0 0 4px var(--pc-pink);
}

/* Buttons
 * ------------------------------------------------------------ */

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

#login .button {
	display: inline-flex;
	align-items: center;
	justify-content: center;
	min-height: 0;
	height: auto;
	padding: 0.85em 1.6em;
	font-family: var(--pc-font-body);
	font-size: 1rem;
	font-weight: 700;
	line-height: 1.2;
	white-space: normal;
	color: var(--pc-ink);
	background: var(--pc-white);
	border: var(--pc-line);
	border-radius: var(--pc-radius-pill);
	box-shadow: var(--pc-shadow-sm);
	text-shadow: none;
	transition: transform 0.15s var(--pc-ease-bounce), box-shadow 0.15s var(--pc-ease-bounce), background-color 0.15s var(--pc-ease);
}

#login .button:hover {
	color: var(--pc-ink);
	background: var(--pc-sky-100);
	border-color: var(--pc-ink);
	transform: translate(-2px, -2px);
	box-shadow: var(--pc-shadow);
}

#login .button-primary {
	float: none;
	width: 100%;
	color: var(--pc-white);
	background: var(--pc-pink);
}

#login .button-primary:hover,
#login .button-primary:focus {
	color: var(--pc-white);
	background: var(--pc-pink-dark);
	border-color: var(--pc-ink);
}

#login .button:focus {
	box-shadow: var(--pc-shadow-sm);
}

/* Press it down like a real button. */
#login .button:active {
	transform: translate(2px, 2px);
	box-shadow: 1px 1px 0 var(--pc-ink);
}

/* Reset password: "Generate Password" beside "Save Password". */
#login .reset-pass-submit {
	gap: 0.75rem;
}

#login .reset-pass-submit .button {
	flex: 1 1 auto;
	width: auto;
	margin: 0;
}

/* Admin email check: two actions side by side, not stretched. */
#login .admin-email__actions .button-primary {
	width: auto;
	margin: 0;
}

#login .admin-email__heading {
	color: var(--pc-ink);
	font-family: var(--pc-font-display);
	font-size: 1.5rem;
	font-weight: 700;
	border-bottom: var(--pc-line-thin);
}

#login .admin-email__actions {
	display: flex;
	flex-wrap: wrap;
	align-items: center;
	gap: 1rem;
}

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

/* Messages
 * ------------------------------------------------------------ */

#login .message,
#login .notice,
#login .success {
	margin: 0 0 1.5rem;
	padding: 0.75rem 1rem;
	background: var(--pc-sky-50);
	border: var(--pc-line);
	border-left-width: 10px;
	border-radius: var(--pc-radius);
	box-shadow: var(--pc-shadow-sm);
}

#login .message p,
#login .notice p,
#login .success p {
	margin: 0.25em 0;
	font-size: 0.9375rem;
	line-height: 1.5;
}

#login .success {
	background: var(--pc-sky-100);
}

#login .notice-error {
	background: var(--pc-pink-50);
	border-left-color: var(--pc-pink-dark);
}

#login #reg_passmail,
#login form .indicator-hint {
	color: var(--pc-ink-70);
	font-size: 0.9375rem;
}

#login #pass-strength-result {
	margin: 0.5rem 0 1rem;
	padding: 0.5rem;
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
	color: var(--pc-ink);
}

/* Links under the card
 * ------------------------------------------------------------ */

.login #nav,
.login #backtoblog {
	margin: 0 0 0.75rem;
	padding: 0;
	font-size: 0.9375rem;
	text-align: center;
	color: var(--pc-ink-40);
}

#login #nav a,
#login #backtoblog a {
	color: var(--pc-ink-70);
	font-weight: 600;
}

#login #nav a:hover,
#login #backtoblog a:hover {
	color: var(--pc-pink-dark);
}

.login .privacy-policy-page-link {
	margin: 2rem 0 1.5rem;
	font-size: 0.9375rem;
}

.login .language-switcher label {
	font-weight: 700;
}

#login .language-switcher select {
	min-height: 2.5rem;
	border: var(--pc-line-thin);
	border-radius: var(--pc-radius-sm);
	font-family: var(--pc-font-body);
}

#login .language-switcher .button {
	padding: 0.5em 1.1em;
	font-size: 0.875rem;
}

/* reCAPTCHA note
 * The badge is hidden because this line, printed under the card on
 * `login_footer`, is what Google's terms require in its place. See
 * inc/recaptcha.php.
 * ------------------------------------------------------------ */

.grecaptcha-badge {
	visibility: hidden;
}

.login .pc-recaptcha-note {
	width: min(25rem, 100% - 2rem);
	margin: 0 auto 2rem;
	font-size: 0.8125rem;
	line-height: 1.5;
	text-align: center;
	color: var(--pc-ink-40);
}

.login .pc-recaptcha-note a {
	color: var(--pc-ink-70);
}

/* Motion
 * ------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
	.pc-brand-mark {
		animation: none;
	}

	#login .button,
	#login .button:hover,
	#login .button:active {
		transition: none;
		transform: none;
	}
}