/**
 * Pilatesology login screen.
 *
 * Brands wp-login.php — sign in, password reset and the Two Factor challenge —
 * so members never see WordPress chrome. Enqueued by pology\theme\Login, which
 * also injects the --pology-login-logo custom property.
 *
 * Colours mirror src/css/_variables.scss and the Beaver Builder skin: teal
 * #13ccb7 for the logo and accents, purple #5948d8 for primary buttons (the
 * site's CTA colour), charcoal #333 for text.
 *
 * Written by hand rather than compiled through Parcel so it ships without a
 * build step. Selectors are prefixed with `body.login` / `body.pology-login`
 * to out-specify core's login.css and the Two Factor plugin's inline <style>,
 * which prints after this file.
 */

body.login {
	--pology-teal: #13ccb7;
	--pology-teal-soft: rgba( 19, 204, 183, 0.22 );
	--pology-purple: #5948d8;
	--pology-purple-dark: #3928bb;
	--pology-purple-soft: rgba( 89, 72, 216, 0.28 );
	--pology-charcoal: #333;
	--pology-gray: #666;
	--pology-border: #dcdcdc;
	--pology-surface: #fff;
	--pology-page-bg: #f7f9f9;

	background: var( --pology-page-bg );
	color: var( --pology-charcoal );
	font-family: halyard-display, -apple-system, BlinkMacSystemFont, "Segoe UI", Helvetica, Arial, sans-serif;
	font-size: 16px;
	line-height: 1.65;
}

/* Layout ------------------------------------------------------------------- */

body.login #login {
	box-sizing: border-box;
	max-width: 420px;
	padding: 6vh 20px 40px;
	width: 100%;
}

/* The expired-session modal has far less room to work with. */
body.login.interim-login #login {
	padding: 24px 16px;
}

/* Logo --------------------------------------------------------------------- */

body.login h1,
body.login .wp-login-logo {
	margin: 0;
}

body.login h1 a,
body.login .wp-login-logo a {
	background-image: var( --pology-login-logo, none );
	background-position: center center;
	background-repeat: no-repeat;
	background-size: contain;
	display: block;
	height: 64px;
	margin: 0 auto 28px;
	overflow: hidden;
	padding: 0;
	text-indent: -9999px;
	width: 280px;
}

/*
 * Fallback for environments where the logo file was never synced: show the
 * site name as a teal wordmark rather than an empty gap.
 */
body.pology-login--no-logo h1 a,
body.pology-login--no-logo .wp-login-logo a {
	background-image: none;
	color: var( --pology-teal );
	font-size: 30px;
	font-weight: 600;
	height: auto;
	letter-spacing: 0.02em;
	text-align: center;
	text-decoration: none;
	text-indent: 0;
	width: auto;
}

/* Card --------------------------------------------------------------------- */

body.login form {
	background: var( --pology-surface );
	border: 1px solid #ececec;
	border-radius: 10px;
	box-shadow: 0 6px 28px rgba( 51, 51, 51, 0.08 );
	margin-top: 0;
	padding: 28px 26px 24px;
}

body.login form label {
	color: var( --pology-charcoal );
	font-size: 14px;
	font-weight: 600;
	line-height: 1.5;
}

/* Fields ------------------------------------------------------------------- */

body.login form .input,
body.login form input[type="text"],
body.login form input[type="password"],
body.login form input[type="email"],
body.login input.authcode {
	background: var( --pology-surface );
	border: 1px solid var( --pology-border );
	border-radius: 4px;
	box-shadow: none;
	box-sizing: border-box;
	color: var( --pology-charcoal );
	font-family: inherit;
	/* 16px keeps iOS from zooming the viewport on focus. */
	font-size: 16px;
	line-height: 1.4;
	margin: 0 0 16px;
	padding: 11px 14px;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
	width: 100%;
}

body.login form .input:focus,
body.login form input[type="text"]:focus,
body.login form input[type="password"]:focus,
body.login form input[type="email"]:focus,
body.login input.authcode:focus {
	border-color: var( --pology-teal );
	box-shadow: 0 0 0 3px var( --pology-teal-soft );
	/* Transparent outline stays visible in forced-colours mode. */
	outline: 2px solid transparent;
}

/* Show/hide password toggle */

body.login .wp-pwd {
	position: relative;
}

body.login .wp-pwd input[type="password"],
body.login .wp-pwd input[type="text"] {
	padding-right: 48px;
}

body.login .wp-pwd .button.wp-hide-pw {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var( --pology-gray );
	height: 46px;
	right: 0;
	top: 0;
	width: 46px;
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
	background: transparent;
	color: var( --pology-teal );
}

body.login .wp-pwd .button.wp-hide-pw:focus {
	border-radius: 4px;
	box-shadow: 0 0 0 3px var( --pology-teal-soft );
	outline: 2px solid transparent;
}

/* Remember me -------------------------------------------------------------- */

body.login .forgetmenot {
	float: none;
	line-height: 1.4;
	margin: 0 0 18px;
}

body.login .forgetmenot label {
	color: var( --pology-gray );
	font-size: 14px;
	font-weight: 400;
}

body.login .wp-core-ui input[type="checkbox"]:checked {
	background: var( --pology-teal );
	border-color: var( --pology-teal );
}

body.login .wp-core-ui input[type="checkbox"]:checked::before {
	color: #fff;
}

body.login .wp-core-ui input[type="checkbox"]:focus {
	border-color: var( --pology-teal );
	box-shadow: 0 0 0 3px var( --pology-teal-soft );
	outline: 2px solid transparent;
}

/* Primary button ----------------------------------------------------------- */

body.login form .submit {
	margin-bottom: 0;
}

body.login .button-primary,
body.login #wp-submit {
	background: var( --pology-purple );
	border: 1px solid var( --pology-purple-dark );
	border-radius: 4px;
	box-shadow: none;
	color: #fff;
	display: block;
	float: none;
	font-family: inherit;
	font-size: 16px;
	font-weight: 500;
	height: auto;
	line-height: 1.2;
	margin: 4px 0 0;
	padding: 12px 20px;
	text-align: center;
	text-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
	width: 100%;
}

body.login .button-primary:hover,
body.login .button-primary:focus,
body.login #wp-submit:hover,
body.login #wp-submit:focus {
	background: var( --pology-purple-dark );
	border-color: var( --pology-purple-dark );
	color: #fff;
}

body.login .button-primary:focus,
body.login #wp-submit:focus {
	box-shadow: 0 0 0 3px var( --pology-purple-soft );
	outline: 2px solid transparent;
}

/* Secondary links ---------------------------------------------------------- */

body.login #nav,
body.login #backtoblog,
body.login .privacy-policy-page-link {
	margin: 16px 0 0;
	padding: 0;
	text-align: center;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var( --pology-gray );
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease;
}

body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus {
	color: var( --pology-teal );
	text-decoration: underline;
}

/*
 * Core's language switcher is the last bit of WordPress chrome on the page.
 * Toned down rather than hidden so multi-language members keep the control.
 */
body.login .language-switcher {
	margin-top: 24px;
	text-align: center;
}

body.login .language-switcher form {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0;
}

body.login .language-switcher select {
	border: 1px solid var( --pology-border );
	border-radius: 4px;
	color: var( --pology-gray );
	font-family: inherit;
	font-size: 14px;
}

body.login .language-switcher .button {
	background: transparent;
	border: 1px solid var( --pology-border );
	border-radius: 4px;
	box-shadow: none;
	color: var( --pology-gray );
	font-family: inherit;
	font-size: 14px;
	text-shadow: none;
}

body.login .language-switcher .button:hover,
body.login .language-switcher .button:focus {
	background: var( --pology-surface );
	border-color: var( --pology-teal );
	color: var( --pology-charcoal );
}

/* Notices ------------------------------------------------------------------ */

body.login #login_error,
body.login .message,
body.login .success,
body.login .notice {
	background: var( --pology-surface );
	border: 1px solid #ececec;
	border-left: 4px solid var( --pology-teal );
	border-radius: 4px;
	box-shadow: 0 2px 10px rgba( 51, 51, 51, 0.06 );
	color: var( --pology-charcoal );
	font-size: 14px;
	margin: 0 0 20px;
	padding: 14px 16px;
}

body.login #login_error {
	border-left-color: #d43d3d;
}

/* Two Factor challenge ------------------------------------------------------ */

/* Out-specifies the plugin's own `#login form p.two-factor-prompt` rule. */
body.pology-login #login form p.two-factor-prompt {
	color: var( --pology-gray );
	font-size: 14px;
	line-height: 1.55;
	margin: 0 0 20px;
}

body.pology-login input.authcode {
	font-size: 20px;
	letter-spacing: 0.3em;
	text-align: center;
}

body.pology-login .two-factor-email-resend {
	margin: 14px 0 0;
	text-align: center;
}

body.pology-login .two-factor-email-resend .button {
	background: transparent;
	border: 1px solid var( --pology-border );
	border-radius: 4px;
	color: var( --pology-gray );
	font-family: inherit;
	font-size: 14px;
	padding: 9px 18px;
	text-shadow: none;
	width: 100%;
}

body.pology-login .two-factor-email-resend .button:hover,
body.pology-login .two-factor-email-resend .button:focus {
	background: var( --pology-page-bg );
	border-color: var( --pology-teal );
	color: var( --pology-charcoal );
}

body.pology-login .backup-methods-wrap {
	margin-top: 20px;
	padding: 0;
	text-align: center;
}

body.pology-login .backup-methods-wrap p {
	color: var( --pology-gray );
	font-size: 14px;
	margin: 0 0 6px;
}

body.pology-login .backup-methods-wrap ul {
	list-style: none;
	margin: 0;
	padding: 0;
}

body.pology-login .backup-methods-wrap li {
	margin: 0 0 4px;
}

body.pology-login .backup-methods-wrap a {
	color: var( --pology-gray );
	font-size: 14px;
	text-decoration: none;
	transition: color 0.15s ease;
}

body.pology-login .backup-methods-wrap a:hover,
body.pology-login .backup-methods-wrap a:focus {
	color: var( --pology-teal );
	text-decoration: underline;
}

/* Small screens ------------------------------------------------------------- */

@media screen and ( max-width: 480px ) {

	body.login #login {
		padding: 24px 16px 32px;
	}

	body.login form {
		padding: 22px 18px 20px;
	}

	body.login h1 a,
	body.login .wp-login-logo a {
		height: 50px;
		width: 220px;
	}

}

@media ( prefers-reduced-motion: reduce ) {

	body.login .input,
	body.login input,
	body.login a,
	body.login .button,
	body.login .button-primary {
		transition: none;
	}

}