:root {
	--sf-ink: #061b2b;
	--sf-blue: #0b6dff;
	--sf-cyan: #00bfe8;
	--sf-mint: #00cfab;
	--sf-yellow: #ffd04a;
}

* { box-sizing: border-box; }

body.login {
	min-height: 100vh;
	margin: 0;
	background: var(--sf-ink) url('../img/san-fratello-hero-v2.jpg') center / cover fixed no-repeat;
	font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
	color: var(--sf-ink);
}

body.login::before {
	content: "";
	position: fixed;
	inset: 0;
	background: linear-gradient(90deg, rgba(2, 25, 39, .88) 0%, rgba(2, 25, 39, .58) 48%, rgba(4, 76, 115, .25) 100%);
	pointer-events: none;
}

#login {
	position: relative;
	z-index: 1;
	width: min(460px, calc(100% - 32px));
	margin: 0 8vw 0 auto;
	padding: clamp(44px, 8vh, 92px) 0 36px;
}

.login h1 a {
	width: 250px;
	height: 88px;
	margin: 0 auto 22px;
	background: #fff url('../img/logo.png') center / 210px auto no-repeat;
	border-radius: 4px;
	box-shadow: 0 18px 60px rgba(0, 20, 35, .28);
}

.sf-login-welcome {
	margin: 0 0 16px;
	padding: 24px 26px;
	background: linear-gradient(115deg, var(--sf-mint), var(--sf-cyan) 52%, var(--sf-blue));
	color: #fff;
	border-radius: 4px 4px 0 0;
}

.sf-login-welcome span {
	display: block;
	margin-bottom: 8px;
	font-size: 12px;
	font-weight: 800;
	letter-spacing: .12em;
	text-transform: uppercase;
}

.sf-login-welcome strong {
	display: block;
	font-size: clamp(25px, 3vw, 34px);
	line-height: 1.05;
}

.sf-login-welcome p { margin: 10px 0 0; color: #eaffff; font-size: 15px; }

.login form {
	margin: 0;
	padding: 28px;
	background: rgba(255, 255, 255, .97);
	border: 0;
	border-radius: 0 0 4px 4px;
	box-shadow: 0 26px 70px rgba(0, 20, 35, .34);
}

.login label { color: #14364b; font-size: 14px; font-weight: 750; }

.login form .input,
.login input[type="text"],
.login input[type="password"] {
	min-height: 52px;
	margin-top: 7px;
	padding: 9px 13px;
	border: 1px solid #bdd5e2;
	border-radius: 3px;
	background: #f6fbfd;
	box-shadow: none;
	font-size: 18px;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus {
	border-color: var(--sf-blue);
	box-shadow: 0 0 0 3px rgba(11, 109, 255, .16);
}

.wp-core-ui .button-primary {
	min-height: 48px;
	padding: 0 24px;
	border: 0;
	border-radius: 3px;
	background: var(--sf-blue);
	font-size: 15px;
	font-weight: 800;
	box-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus { background: #064fbf; }

.login #nav,
.login #backtoblog { margin: 16px 0 0; padding: 0 4px; }
.login #nav a,
.login #backtoblog a { color: #fff; font-weight: 700; text-shadow: 0 1px 8px rgba(0,0,0,.35); }
.login #nav a:hover,
.login #backtoblog a:hover { color: var(--sf-yellow); }
.login .message,
.login .notice,
.login #login_error { border-left-color: var(--sf-yellow); border-radius: 3px; }
.login .privacy-policy-page-link a { color: #fff; }

@media (max-width: 700px) {
	body.login::before { background: rgba(2, 25, 39, .72); }
	#login { margin: 0 auto; padding-top: 28px; }
	.login h1 a { width: 220px; height: 76px; background-size: 185px auto; }
}