/* EGO Labs Branding: login screen */

@font-face { font-family: "Filson Soft"; src: url("../fonts/FilsonSoftBook.woff2") format("woff2"); font-weight: 400; font-style: normal; font-display: swap; }
@font-face { font-family: "Filson Soft"; src: url("../fonts/FilsonSoftBold.woff2") format("woff2"); font-weight: 700; font-style: normal; font-display: swap; }

body.login {
	--egol-teal: #003646;
	--egol-green: #bcd553;
	--egol-teal-mid: #2f6b7b;
	--egol-ink: #12303a;
	--egol-muted: #6a8088;
	--egol-line: #d5e1e4;
	--egol-teal-tint: #eaf1f3;
	background: var(--egol-teal);
	color: var(--egol-teal-tint);
	font-family: "Filson Soft", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	position: relative;
	overflow-x: hidden;
}

/* Mark watermark */
body.login::before {
	content: "";
	position: fixed;
	right: -160px;
	bottom: -160px;
	width: 620px;
	height: 620px;
	background: url("../img/mark.svg") center / contain no-repeat;
	opacity: .08;
	pointer-events: none;
	z-index: 0;
}

body.login #login {
	position: relative;
	z-index: 1;
	width: 360px;
	padding-top: 8vh;
}

/* Logo */
body.login div#login h1 a {
	background: url("../img/lockup-reversed.svg") center / contain no-repeat;
	width: 240px;
	height: 51px;
	margin: 0 auto 18px;
}

body.login .egol-login-site {
	text-align: center;
	margin: 0 0 22px;
	font-size: 16px;
	color: var(--egol-teal-tint);
}
body.login .egol-login-site strong { color: #fff; font-weight: 700; }

/* Card */
body.login form {
	background: #fff;
	border: 0;
	border-radius: 20px;
	box-shadow: 0 24px 60px rgba(0, 0, 0, .28);
	padding: 30px 28px 32px;
	margin-top: 0;
}

body.login label {
	color: var(--egol-ink);
	font-size: 15px;
	font-weight: 700;
}

body.login form .input,
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	font-family: inherit;
	font-size: 18px;
	border: 1px solid var(--egol-line);
	border-radius: 10px;
	padding: 6px 12px;
	background: #fff;
	color: var(--egol-ink);
	box-shadow: none;
}

body.login form .input:focus,
body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--egol-teal-mid);
	box-shadow: 0 0 0 3px rgba(188, 213, 83, .6);
	outline: 0;
}

body.login .button.wp-hide-pw { color: var(--egol-teal-mid); border-radius: 10px; }
body.login .button.wp-hide-pw:focus { border-color: var(--egol-teal-mid); box-shadow: 0 0 0 2px var(--egol-teal-mid); }
body.login .button.wp-hide-pw .dashicons { color: var(--egol-teal-mid); }

/* Remember me */
body.login input[type="checkbox"] { border-color: var(--egol-line); border-radius: 6px; }
body.login input[type="checkbox"]:focus { border-color: var(--egol-teal-mid); box-shadow: 0 0 0 2px rgba(188, 213, 83, .7); }
body.login input[type="checkbox"]:checked { background: var(--egol-green); border-color: var(--egol-green); }
body.login input[type="checkbox"]:checked::before {
	content: url("data:image/svg+xml;utf8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20viewBox%3D%270%200%2020%2020%27%3E%3Cpath%20d%3D%27M14.83%204.89l1.34.94-5.81%208.38H9.02L5.78%209.67l1.34-1.25%202.57%202.4z%27%20fill%3D%27%23003646%27%2F%3E%3C%2Fsvg%3E");
}
body.login .forgetmenot label { font-weight: 400; color: var(--egol-muted); }

/* Primary button */
body.login .button-primary,
body.login.wp-core-ui .button-primary {
	background: var(--egol-green);
	border: 0;
	border-radius: 999px;
	color: var(--egol-teal);
	font-family: inherit;
	font-weight: 700;
	font-size: 15px;
	min-height: 50px;
	line-height: 50px;
	padding: 0 24px;
	text-shadow: none;
	box-shadow: none;
}

/* Full-width button on its own line */
body.login .forgetmenot { float: none; }
body.login p.submit { clear: both; padding-top: 20px; }
body.login p.submit .button-primary,
body.login.wp-core-ui p.submit .button-primary {
	float: none;
	display: block;
	width: 100%;
	font-size: 17px;
}
body.login .button-primary:hover,
body.login .button-primary:focus {
	background: #cbe06f;
	color: var(--egol-teal);
}
body.login .button-primary:focus {
	box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--egol-teal-mid);
}

/* Notices */
body.login .message,
body.login .notice,
body.login .success,
body.login #login_error {
	border-radius: 12px;
	border-left-width: 6px;
	color: var(--egol-ink);
	box-shadow: none;
}
body.login .message,
body.login .notice-info,
body.login .success { border-left-color: var(--egol-green); }

/* Links under the card. "Go to site" link hidden. */
body.login #backtoblog { display: none; }
body.login #nav,
body.login #backtoblog { text-align: center; padding: 0; }
body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
	color: var(--egol-teal-tint);
	font-size: 14px;
}
body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-page-link a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus { color: var(--egol-green); }
body.login a:focus { box-shadow: 0 0 0 2px var(--egol-green); border-radius: 3px; outline: 0; }

/* Language switcher */
body.login .language-switcher { position: relative; z-index: 1; }
body.login .language-switcher label .dashicons { color: var(--egol-teal-tint); }
body.login .language-switcher select { border-radius: 10px; }
body.login .language-switcher .button { border-radius: 10px; color: var(--egol-teal); border-color: var(--egol-teal-tint); background: var(--egol-teal-tint); }

/* Byline */
body.login .egol-login-byline {
	position: relative;
	z-index: 1;
	text-align: center;
	margin: 36px 0 32px;
	font-size: 12px;
	font-weight: 700;
	letter-spacing: .2em;
	text-transform: uppercase;
	color: var(--egol-green);
}
body.login .egol-login-byline a { color: #fff; text-decoration: none; }
body.login .egol-login-byline a:hover { color: var(--egol-green); }

/* Session-expired modal inside wp-admin */
body.login.interim-login { background: var(--egol-teal); }
body.login.interim-login::before { display: none; }
body.login.interim-login #login { padding-top: 20px; }

@media (max-width: 400px) {
	body.login::before { width: 360px; height: 360px; right: -110px; bottom: -110px; }
	body.login #login { width: auto; padding-left: 16px; padding-right: 16px; }
	body.login form { padding: 24px 20px 26px; }
}