/**
 * wp-login.php, wearing the church's clothes.
 *
 * The login screen cannot use theme.json, so the palette is repeated here.
 * Keep these values in step with theme.json if the palette changes.
 */

@font-face {
	font-family: "Source Serif 4";
	font-style: normal;
	font-weight: 200 900;
	font-display: swap;
	src: url("../fonts/source-serif-4-latin-wght-normal.woff2") format("woff2");
}

/* The wordmark's face. Trajan Pro when the viewer has the church's own
   font installed, Cinzel -- the closest free cut of the same Roman
   inscriptional capitals -- when they do not. The same pair the header
   uses, so the sign-in page is recognisably the same church. */
@font-face {
	font-family: "Cinzel";
	font-style: normal;
	font-weight: 400 900;
	font-display: swap;
	src: url("../fonts/cinzel-latin-wght-normal.woff2") format("woff2");
}

@font-face {
	font-family: "Inter";
	font-style: normal;
	font-weight: 100 900;
	font-display: swap;
	src: url("../fonts/inter-latin-wght-normal.woff2") format("woff2");
}

:root {
	--icc-ink: #12151c;
	--icc-ink-soft: #3a4250;
	--icc-muted: #6b7280;
	--icc-line: #e4e2dd;
	--icc-ground-soft: #f7f6f3;
	--icc-accent: #b07d2b;
	--icc-deep: #123c52;
}

body.login {
	background: var(--icc-ground-soft);
	font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
	color: var(--icc-ink);
}

/* The default is a WordPress logo sprite. In its place: the church's own mark,
   and the church's name under it in the header's Trajan-style capitals (round
   13, the church's request).

   One element does both -- the mark is the link's background, sitting above the
   padding that the text starts below -- because wp-login.php gives us an <a>
   inside an <h1> and nothing else to hang a second box on. The URL of the mark
   is injected from functions.php, since it is whatever the church has set as
   the site logo. */
.login h1 a {
	display: block;
	width: auto;
	height: auto;
	margin: 0 auto 1.4rem;
	padding: 0;
	background: none;
	background-repeat: no-repeat;
	background-position: top center;
	font-family: "Trajan Pro", "Cinzel", "Source Serif 4", Georgia, serif;
	font-size: 1.0625rem;
	font-weight: 600;
	letter-spacing: 0.1em;
	line-height: 1.35;
	text-transform: uppercase;
	text-indent: 0;
	color: var(--icc-ink);
	text-decoration: none;
	overflow: visible;
}

.login h1 a:hover,
.login h1 a:focus {
	color: var(--icc-deep);
	box-shadow: none;
}

.login form {
	border: 1px solid var(--icc-line);
	border-radius: 6px;
	box-shadow: none;
	padding: 1.75rem 1.75rem 1.5rem;
	background: #fff;
}

.login label {
	font-size: 0.8125rem;
	font-weight: 600;
	color: var(--icc-ink-soft);
}

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
	font-size: 1rem;
	padding: 0.6rem 0.7rem;
	border: 1px solid var(--icc-line);
	border-radius: 4px;
	background: #fff;
	color: var(--icc-ink);
	box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
	border-color: var(--icc-deep);
	box-shadow: 0 0 0 3px rgba(18, 60, 82, 0.15);
	outline: 2px solid transparent;
}

.login .button-primary,
.wp-core-ui .button-primary {
	background: var(--icc-ink);
	border-color: var(--icc-ink);
	color: #fff;
	border-radius: 4px;
	font-weight: 600;
	text-shadow: none;
	box-shadow: none;
	padding: 0.45rem 1.4rem;
	height: auto;
	line-height: 1.6;
}

.login .button-primary:hover,
.wp-core-ui .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:focus {
	background: var(--icc-deep);
	border-color: var(--icc-deep);
	box-shadow: none;
}

.login #nav,
.login #backtoblog {
	padding: 0.35rem 0;
	text-align: center;
	font-size: 0.8125rem;
}

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: var(--icc-muted);
	text-decoration: none;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover {
	color: var(--icc-accent);
}

.login .message,
.login .notice,
.login #login_error {
	border-left-color: var(--icc-accent);
	border-radius: 4px;
	box-shadow: none;
}

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

.login .privacy-policy-page-link {
	margin-top: 2rem;
}