:root {
	--size__form: 25rem;
	--font__main: Ringier, Helvetica Neue, Helvetica, Arial, sans-serif;
	--font-size__content: clamp( 1rem, calc( 0.9375rem + 0.25vw ), 1.125rem );
	--transition__default: 160ms ease-out;
}


@font-face {
	font-family: Ringier;
	font-weight: 400;
	font-display: swap;
	src: url( "../fonts/Ringier-Book.woff" ) format( "woff" );
}

@font-face {
	font-family: Ringier;
	font-weight: 400;
	font-style: italic;
	font-display: swap;
	src: url( "../fonts/Ringier-BookItalic.woff" ) format( "woff" );
}

body.login {
	background: #FFF;
	font-weight: 400;
	font-family: var( --font__main );
	font-size: var( --font-size__content );
	-webkit-font-smoothing: antialiased;
}

#login {
	width: auto;
	padding: 0;
}

.login a {
	color: #009fe3 !important;
}
.login a:hover {
	color: #15151e !important;
}

/* Login Logo */
.login h1 {
	margin-bottom: clamp( 1.25rem, 5vw, 3.75rem );
	padding: 0;
	background: #15151e;
}
.login h1 a {
	width: 100%;
	height: 5rem;
	background-image: url(../img/login-logo.svg);
	background-position: center;
	background-size: 190px 25px;
	margin: 0 auto;
	cursor: default;
}

/* Login form */

.login form {
	width: var( --size__form );
	max-width: 90%;
	margin: 0 auto;
	padding: 0 0 1.25rem 0;
	border: none;
	border-bottom: 2px solid #c6dcf1;
	border-radius: 0;
	box-shadow: none;
}

/* Form fields */
.login form .input,
.login input[type="text"],
.login input[type="password"] {
	width: 100%;
	margin: 0 0 1.25rem 0;
	padding: .75rem .9375rem;
	font-size: 1em;
	line-height: 1.25;
	color: #15151e;
	background-color: #e3f3fc; /* var( --color__brand-primary-soft ) */
	border: 2px solid #e3f3fc;
	border-radius: 5px;
	box-shadow: none;
	transition:
		background-color var( --transition__default ),
		border-color var( --transition__default );
}

.login form .input:hover,
.login input[type="text"]:hover,
.login input[type="password"]:hover {
	border-color: #95c7e3; /* var( --color__border-input-focus ) */
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	color: #15151e;
	background-color: #f5fafe; /* var( --color__brand-primary-softest ) */
	border-color: #009fe3; /* var( --color__border-input-focus ) */
	outline: none;
}

.login input.password-input {
	font-family: var( --font__main );
}

/* Radio, Checkboxes */
.login form input[type="checkbox"],
.login form input[type="radio"] {
	width: 1.5rem;
	height: 1.5rem;
	background: #FFF;
	border: 2px solid #d6eafe;
	outline: none;
	box-shadow: none;
	transition: border-color var( --transition__default );
}
.login form input[type="checkbox"]:hover,
.login form input[type="radio"]:hover {
	width: 1.5rem;
	height: 1.5rem;
	background: #FFF;
	border-color: #95c7e3;
}
.login form input[type="checkbox"]:checked {
	background: #009FE3;
	border-color: #009FE3;
}
.login form input[type="checkbox"]:checked::before {
	content: " ";
	width: .75rem;
	height: .75rem;
	margin: 3px 0 0 3px;
	background: url( 'data:image/svg+xml,<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.1333 1.68005C11.5383 1.97828 11.6204 2.5424 11.3166 2.94004L5.81664 10.14C5.6572 10.3487 5.41336 10.4792 5.14829 10.4977C4.88323 10.5162 4.62303 10.4209 4.43513 10.2364L0.768484 6.63642C0.410505 6.28495 0.410505 5.7151 0.768484 5.36363C1.12646 5.01216 1.70686 5.01216 2.06484 5.36363L4.98413 8.22985L9.84995 1.86005C10.1537 1.46241 10.7283 1.38182 11.1333 1.68005Z" fill="white"/></svg>' );
	background-size: .75rem .75rem;
}

/* Submit Button + Resend Code Button */
.wp-core-ui.login input.button-primary,
.two-factor-email-resend .button {
	position: relative;
	z-index: 1;
	overflow: hidden;
	padding: .75rem 1.25rem;
	line-height: 1.25;
	font-size: var( --font-size__content );
	outline: none;
	box-shadow: none;
	transition:
		background-color var( --transition__default ),
		border-color var( --transition__default );
}

/* Submit Button */
.wp-core-ui.login input.button-primary {
	background-color: #009fe3; /* var( --color__brand-primary ) */
	border: 2px solid #009fe3;
}

.wp-core-ui.login input.button-primary:hover {
	background-color: #028FCE;
	border-color: #028FCE;
}

/* Resend Code Button */
.two-factor-email-resend .button {
	color: #15151e;
	background-color: #f5fafe; /* var( --color__brand-primary-softest ) */
	border: 2px solid #d6eafe; /* var( --color__border-input ) */
}
.two-factor-email-resend .button:hover {
	color: #15151e;
	background-color: #f5fafe;
	border-color: #95c7e3;
}

/* Show / hide PW */
.login .button.wp-hide-pw {
	top: 0.25rem;
}

.login form .forgetmenot {
	margin-top: 0.625rem;
}

/* Messages above login form */
.login .message,
.login .success,
.login #login_error {
	box-sizing: border-box;
	width: var( --size__form );
	max-width: 90%;
	margin: 1.25rem auto;
	padding: 0 0 0 1.25rem;
	font-size: var( --font-size__content );
	box-shadow: none;
}

/* Links under login form */
.login #nav,
.login #backtoblog,
.login .privacy-policy-page-link,
.login .backup-methods-wrap {
	width: var( --size__form );
	max-width: 90%;
	margin: 1.25rem auto;
	padding: 0;
	font-size: var( --font-size__content );
	text-align: left;
}

.login label {
	display: inline-block;
	margin-bottom: .5em;
	font-size: var( --font-size__content );
}