/*
 * Lynx login + portal finder: Doorbijters house style (Barlow, navy #101D38, pink #E7295B, square corners).
 * Plain CSS, no build step. Loaded on wp-login.php and the finder page.
 */
@font-face { font-display: swap; font-family: Barlow; font-style: normal; font-weight: 400; src: url(fonts/barlow-v12-latin-regular.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Barlow; font-style: normal; font-weight: 600; src: url(fonts/barlow-v12-latin-600.woff2) format("woff2"); }
@font-face { font-display: swap; font-family: Barlow; font-style: normal; font-weight: 700; src: url(fonts/barlow-v12-latin-700.woff2) format("woff2"); }

body.lynx-login {
	--lynx-navy: #101d38;
	--lynx-brand: #e7295b;
	--lynx-brand-dark: #c01c49;
	--lynx-mist: #f3f3f5;
	--lynx-line: #d9dce3;
	--lynx-muted: #4b5568;
	background: var(--lynx-mist);
	color: var(--lynx-navy);
	font-family: Barlow, ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 17px;
	line-height: 1.55;
	min-height: 100vh;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 24px 16px;
	box-sizing: border-box;
}
.lynx-login *, .lynx-login *::before, .lynx-login *::after { box-sizing: border-box; }

.lynx-login #login { width: 100%; max-width: 420px; margin: 0; padding: 0; }
.lynx-login #login h1 { margin: 0 0 20px; }
.lynx-login #login h1 a {
	background: url(img/doorbijters.svg) center / contain no-repeat;
	display: block;
	width: 100%;
	height: 72px;
	margin: 0 auto;
}
.lynx-login .lynx-card,
.lynx-login #loginform, .lynx-login #lostpasswordform, .lynx-login #resetpassform, .lynx-login #registerform {
	background: #fff;
	border: 1px solid var(--lynx-line);
	border-top: 4px solid var(--lynx-brand);
	border-radius: 0;
	box-shadow: none;
	padding: 24px;
	margin: 0;
}
.lynx-login label { color: var(--lynx-navy); font-size: 16px; font-weight: 600; }
.lynx-login input[type="text"], .lynx-login input[type="password"], .lynx-login input[type="email"], .lynx-login .lynx-input {
	width: 100%;
	min-height: 46px;
	margin: 4px 0 16px;
	padding: 8px 12px;
	background: #fff;
	color: var(--lynx-navy);
	border: 1px solid #8a93a5;
	border-radius: 0;
	box-shadow: none;
	font: inherit;
	font-size: 17px;
}
.lynx-login input:focus, .lynx-login .lynx-input:focus { border-color: var(--lynx-navy); box-shadow: 0 0 0 3px rgba(16, 29, 56, .25); outline: 2px solid transparent; }
.lynx-login .button-primary, .lynx-login .lynx-submit {
	background: var(--lynx-brand);
	border: 1px solid var(--lynx-brand);
	border-radius: 0;
	box-shadow: none;
	color: #fff;
	cursor: pointer;
	font: inherit;
	font-weight: 700;
	min-height: 46px;
	padding: 0 24px;
	text-shadow: none;
}
.lynx-login .lynx-submit { width: 100%; }
.lynx-login .button-primary:hover, .lynx-login .lynx-submit:hover { background: var(--lynx-brand-dark); border-color: var(--lynx-brand-dark); }
.lynx-login .button-primary:focus-visible, .lynx-login .lynx-submit:focus-visible, .lynx-login a:focus-visible { outline: 3px solid var(--lynx-navy); outline-offset: 2px; box-shadow: none; }
.lynx-login .submit { margin-top: 8px; }
.lynx-login .forgetmenot { margin-bottom: 8px; }
.lynx-login input[type="checkbox"] { border-radius: 0; border-color: #8a93a5; }
.lynx-login input[type="checkbox"]:checked::before { content: "\2713"; margin: 0; width: auto; height: auto; color: var(--lynx-navy); font: 700 16px/1 Barlow, sans-serif; }

.lynx-login .message, .lynx-login .success, .lynx-login #login_error, .lynx-login .lynx-notice {
	background: #fff;
	border: 1px solid var(--lynx-line);
	border-left: 4px solid var(--lynx-navy);
	border-radius: 0;
	box-shadow: none;
	color: var(--lynx-navy);
	margin: 0 0 16px;
	padding: 12px 16px;
}
.lynx-login #login_error, .lynx-login .lynx-notice--error { border-left-color: var(--lynx-brand); }
.lynx-login .success, .lynx-login .lynx-notice--ok { border-left-color: #0a8f69; }

.lynx-login .lynx-login-help { width: 100%; max-width: 420px; }
.lynx-login #nav, .lynx-login #backtoblog, .lynx-login .lynx-login-help { margin: 16px 0 0; padding: 0; text-align: center; font-size: 16px; }
.lynx-login a { color: var(--lynx-navy); text-decoration: underline; text-underline-offset: 2px; }
.lynx-login a:hover { color: var(--lynx-brand-dark); }
.lynx-login .privacy-policy-page-link { margin-top: 16px; }
.lynx-login .lynx-lead { margin: 0 0 16px; color: var(--lynx-muted); }
.lynx-login .lynx-hp { position: absolute; left: -10000px; width: 1px; height: 1px; overflow: hidden; }
.lynx-login .lynx-title { font-size: 24px; font-weight: 700; line-height: 1.2; margin: 0 0 8px; }
.lynx-login .lynx-logo { display: block; width: 100%; height: 72px; margin: 0 0 20px; background: url(img/doorbijters.svg) center / contain no-repeat; }