/* ============================================================================
   wp-login.php in de huisstijl van de ledenomgeving.
   Vervangt wat LoginPress daar deed: logo, achtergrondfoto en knopkleuren.

   De waarden komen een-op-een uit tailwind.config.js, zodat dit scherm en de
   auth-schermen van de schil niet uiteen kunnen lopen:

     ink-900   #153560   primair, knopvulling, koppen
     ink-700   #0F2643   hover van de knop
     ink-300   #3F6598   rand bij focus; 5.96:1 op wit
     gray-50   #F4F6FA   grond van de pagina, zoals body bg-gray-50 daar
     gray-200  #E3E9F1   randen
     gray-400  #71808F   gedempte tekst
     gray-600  #3D4A5A   lopende tekst
     red-600   #B3261E   fouten -- bewust niet coral, zodat een waarschuwing
                         nooit als knop leest
     focusring 0 0 0 3px rgba(63,101,152,.45)  = .shadow-outline-ink

   Coral (#F98282) komt hier alleen voor als lijn in het merkteken. Als
   knopvulling haalt het AA niet: wit op coral is 2.46:1.

   Drie schermen, niet een: inloggen, ?action=lostpassword en de resetpagina
   (?action=rp / resetpass) krijgen dezelfde kaart, velden en knop.
   ============================================================================ */

:root {
	--rm-ink: #153560;
	--rm-ink-hover: #0F2643;
	--rm-ink-edge: #3F6598;
	--rm-ground: #F4F6FA;
	--rm-surface: #FFFFFF;
	--rm-border: #E3E9F1;
	--rm-muted: #71808F;
	--rm-text: #3D4A5A;
	--rm-error: #B3261E;
	--rm-ring: 0 0 0 3px rgba(63, 101, 152, .45);
	--rm-radius-card: 8px;
	--rm-radius-field: 6px;
}

/* ---------- de pagina ---------- */

body.login {
	/* Geen achtergrondfoto. Dezelfde grond als body bg-gray-50 in de schil. */
	background: var(--rm-ground) none;
	color: var(--rm-text);
	font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
}

body.login #login {
	width: 100%;
	max-width: 400px;
	padding: 8vh 20px 40px;
}

/* ---------- het merkteken, in plaats van het WordPress-logo ----------

   De kop is een <a> met de tekst "Rechtgids" erin (login_headertext). Core
   verbergt die tekst achter een achtergrondafbeelding; hier staat de tekst juist
   aan, met het merkteken ernaast -- hetzelfde beeld als bovenaan de zijbalk.
   Het teken is een data-URI, dus geen extra verzoek en geen CDN.                */

body.login h1 {
	margin: 0 0 20px;
}

body.login h1 a {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	width: auto;
	height: auto;
	margin: 0;
	padding: 0 0 0 29px;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='21' height='28' viewBox='0 0 50 66' fill='none' stroke='%23F98282' stroke-width='4' stroke-linejoin='miter' stroke-linecap='square'%3E%3Cpath d='M2.6 3.2 V52.2 H47.6 V2.4 H28 V64.4 L2.6 52.2 M2.6 3.2 L28 12'/%3E%3C/svg%3E");
	background-repeat: no-repeat;
	background-position: left center;
	background-size: 21px 28px;
	font-size: 18px;
	font-weight: 600;
	line-height: 28px;
	letter-spacing: -.01em;
	color: var(--rm-ink);
	text-indent: 0;
	text-decoration: none;
	overflow: visible;
}

body.login h1 a:hover,
body.login h1 a:focus {
	color: var(--rm-ink-hover);
	box-shadow: none;
}

body.login h1 a:focus-visible {
	outline: none;
	box-shadow: var(--rm-ring);
	border-radius: 4px;
}

/* ---------- de kaart ---------- */

body.login form {
	margin: 0;
	padding: 28px 28px 24px;
	background: var(--rm-surface);
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius-card);
	box-shadow: 0 1px 2px rgba(21, 53, 96, .04);
	overflow: visible;
}

body.login form p.submit {
	margin-top: 20px;
}

/* ---------- labels en velden ---------- */

body.login form label,
body.login form .wp-pwd label {
	display: block;
	margin-bottom: 6px;
	font-size: 14px;
	font-weight: 500;
	line-height: 1.4;
	color: var(--rm-ink);
}

body.login form .forgetmenot label,
body.login form label[for="rememberme"] {
	display: inline;
	margin: 0 0 0 6px;
	font-weight: 400;
	color: var(--rm-text);
}

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"],
body.login input[type="number"] {
	width: 100%;
	height: 48px;
	margin: 0 0 18px;
	padding: 0 12px;
	background: var(--rm-surface);
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius-field);
	box-shadow: none;
	/* 16px, anders zoomt iOS bij het focussen in op het veld. */
	font-size: 16px;
	line-height: 46px;
	color: var(--rm-text);
}

body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus,
body.login input[type="number"]:focus {
	border-color: var(--rm-ink-edge);
	box-shadow: var(--rm-ring);
	outline: none;
}

body.login input[type="checkbox"] {
	border: 1px solid var(--rm-border);
	border-radius: 3px;
}

body.login input[type="checkbox"]:checked::before {
	color: var(--rm-ink);
}

body.login input[type="checkbox"]:focus {
	border-color: var(--rm-ink-edge);
	box-shadow: var(--rm-ring);
	outline: none;
}

/* Het oogje naast het wachtwoordveld hoort binnen de veldrand te blijven. */
body.login .wp-pwd {
	position: relative;
	margin-bottom: 18px;
}

body.login .wp-pwd input[type="text"],
body.login .wp-pwd input[type="password"] {
	margin-bottom: 0;
	padding-right: 46px;
}

body.login .wp-pwd button.wp-hide-pw {
	top: 0;
	right: 0;
	width: 44px;
	height: 48px;
	color: var(--rm-muted);
}

body.login .wp-pwd button.wp-hide-pw:hover {
	color: var(--rm-ink);
}

body.login .wp-pwd button.wp-hide-pw:focus {
	border-radius: var(--rm-radius-field);
	box-shadow: var(--rm-ring);
	outline: none;
}

/* ---------- de knop ---------- */

body.login .button-primary,
body.login input[type="submit"].button-primary {
	display: block;
	float: none;
	width: 100%;
	height: 48px;
	margin: 0;
	padding: 0 16px;
	background: var(--rm-ink);
	border: 1px solid transparent;
	border-radius: var(--rm-radius-card);
	box-shadow: none;
	text-shadow: none;
	font-size: 15px;
	font-weight: 600;
	line-height: 46px;
	color: #fff;
	transition: background-color .15s ease-in-out;
}

body.login .button-primary:hover,
body.login .button-primary:active {
	background: var(--rm-ink-hover);
	border-color: transparent;
	color: #fff;
}

body.login .button-primary:focus {
	background: var(--rm-ink-hover);
	box-shadow: var(--rm-ring);
	outline: none;
}

/* ---------- meldingen ---------- */

body.login #login_error,
body.login .notice,
body.login .message,
body.login .success {
	margin: 0 0 18px;
	padding: 12px 14px;
	background: var(--rm-surface);
	border: 1px solid var(--rm-border);
	border-left: 4px solid var(--rm-ink);
	border-radius: var(--rm-radius-field);
	box-shadow: none;
	font-size: 14px;
	line-height: 1.5;
	color: var(--rm-text);
}

body.login #login_error {
	border-left-color: var(--rm-error);
}

body.login #login_error a,
body.login .message a {
	color: var(--rm-ink);
}

/* ---------- links onder de kaart ---------- */

body.login #nav,
body.login #backtoblog {
	padding: 14px 2px 0;
	font-size: 14px;
}

body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-link {
	color: var(--rm-ink);
	text-decoration: none;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login .privacy-policy-link:hover {
	color: var(--rm-ink-hover);
	text-decoration: underline;
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible,
body.login .privacy-policy-link:focus-visible {
	outline: none;
	box-shadow: var(--rm-ring);
	border-radius: 3px;
}

body.login .privacy-policy-page-link {
	margin: 18px 0 0;
}

/* ---------- wachtwoord opnieuw instellen ----------

   Dezelfde kaart en knop. De sterktemeter van core krijgt de randen van de
   velden, zodat hij niet als los blok onder het veld hangt.                     */

body.login.login-action-lostpassword form,
body.login.login-action-rp form,
body.login.login-action-resetpass form {
	padding-bottom: 24px;
}

body.login .wp-pwd .pw-weak {
	margin: 10px 0 0;
	font-size: 14px;
}

body.login #pass-strength-result {
	width: 100%;
	margin: 8px 0 0;
	padding: 8px 10px;
	box-sizing: border-box;
	background: var(--rm-ground);
	border: 1px solid var(--rm-border);
	border-radius: var(--rm-radius-field);
	font-size: 13px;
	font-weight: 500;
	color: var(--rm-text);
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
	background: #FDF3F2;
	border-color: #F4C6C2;
	color: #7A1B16;
}

body.login #pass-strength-result.good,
body.login #pass-strength-result.strong {
	background: var(--rm-ground);
	border-color: var(--rm-border);
	color: var(--rm-ink);
}

body.login .description,
body.login .indicator-hint,
body.login p.message.reset-pass-submit + p,
body.login form p.description {
	font-size: 13px;
	line-height: 1.5;
	color: var(--rm-muted);
}

body.login .reset-pass-submit {
	display: flex;
	flex-wrap: wrap;
	gap: 10px;
	align-items: center;
}

body.login .reset-pass-submit .button {
	height: 44px;
	border-radius: var(--rm-radius-field);
	border-color: var(--rm-border);
	background: var(--rm-surface);
	color: var(--rm-ink);
	line-height: 42px;
	font-weight: 500;
}

body.login .reset-pass-submit .button:hover {
	background: var(--rm-ground);
	border-color: var(--rm-ink-edge);
	color: var(--rm-ink-hover);
}

/* ---------- kleine schermen ---------- */

@media (max-width: 480px) {
	body.login #login {
		padding: 5vh 16px 32px;
	}

	body.login form {
		padding: 22px 18px 20px;
	}
}