/* IAN.CLUB Calendar — branded login page */
:root {
	--ian-bg: #f7f5f0;
	--ian-fg: #1a1a1a;
	--ian-accent: #1f3a5f;
	--ian-accent-fg: #ffffff;
	--ian-border: #d8d2c4;
}

body.login {
	background: var(--ian-bg);
	font-family: -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif;
	color: var(--ian-fg);
}

body.login #login {
	width: 360px;
	padding: 6vh 0 5vh;
}

body.login h1 a {
	background-image: none;
	background-color: transparent;
	color: var(--ian-fg);
	font-size: 1.6rem;
	font-weight: 600;
	height: 64px;
	line-height: 64px;
	width: auto;
	text-indent: 0;
	text-decoration: none;
	margin-bottom: 16px;
}

body.login form {
	background: #ffffff;
	border: 1px solid var(--ian-border);
	border-radius: 12px;
	box-shadow: 0 6px 24px rgba(20, 30, 50, 0.06);
	padding: 32px 28px 26px;
	margin-top: 12px;
}

body.login form::before {
	display: block;
	content: "Sign in";
	font-size: 1.4rem;
	font-weight: 600;
	margin-bottom: 8px;
}

.login .message.ian-calendar-login__subtext {
	background: transparent;
	border: 0;
	box-shadow: none;
	padding: 0 0 18px;
	margin: 0;
	color: #4a4a4a;
	font-size: 0.95rem;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	border-radius: 8px;
	border: 1px solid var(--ian-border);
	padding: 10px 12px;
	font-size: 1rem;
}

.login .ian-show-password-wrapper {
	position: relative;
}

.login .ian-show-password {
	position: absolute;
	right: 8px;
	top: 50%;
	transform: translateY(-50%);
	background: transparent;
	border: 0;
	color: var(--ian-accent);
	cursor: pointer;
	font-size: 0.85rem;
	padding: 4px 6px;
}

.login .ian-show-password:focus {
	outline: 2px solid var(--ian-accent);
	outline-offset: 2px;
}

.wp-core-ui .button-primary {
	background: var(--ian-accent);
	border-color: var(--ian-accent);
	color: var(--ian-accent-fg);
	border-radius: 8px;
	padding: 8px 18px;
	box-shadow: none;
	text-shadow: none;
}

.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: #16294a;
	border-color: #16294a;
}

#nav,
#backtoblog {
	text-align: center;
	margin-top: 14px;
}

#nav a,
#backtoblog a {
	color: var(--ian-accent);
}

@media (max-width: 480px) {
	body.login #login {
		width: 92vw;
		padding: 4vh 0;
	}
}