/*
 * SWO Spijkenisse – inlogscherm (/swoadmin/), geladen via inc/login.php.
 * Een gewoon, rustig inlogscherm (alleen voor beheerders, valt buiten de eisen van de ontwerpbrief):
 * standaard maten van WordPress, het SWO-logo en een oranje knop als enige merkaccent.
 */

@font-face {
	font-family: "Atkinson Hyperlegible Next";
	font-style: normal;
	font-weight: 200 800;
	font-display: swap;
	src: url("../fonts/AtkinsonHyperlegibleNext-Variable.woff2") format("woff2-variations");
}

body.login { color: #1E1E1E; background: #F3F4F6; font-family: "Atkinson Hyperlegible Next", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; }
.login input, .login button, .login label, .login p, .login a { font-family: inherit; }
.login #login { width: 340px; max-width: calc(100% - 32px); padding: 8vh 0 0; }

/* Logo */
.login h1.wp-login-logo a { width: 150px; height: 63px; margin: 0 auto 24px; background-position: center; background-repeat: no-repeat; background-size: contain; }

/* Kaart */
.login form { margin-top: 0; padding: 24px; background: #FFFFFF; border: 1px solid #E2E4E7; border-radius: 10px; box-shadow: 0 4px 16px rgba(0, 0, 0, .06); }
.login label { color: #1E1E1E; font-size: 14px; font-weight: 600; }
.login form .input,
.login input[type="text"],
.login input[type="email"],
.login input[type="password"] { min-height: 40px; padding: 6px 10px; font-size: 15px; border: 1px solid #C3C4C7; border-radius: 6px; box-shadow: none; }
.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="email"]:focus,
.login input[type="password"]:focus { border-color: #E97C1A; box-shadow: 0 0 0 1px #E97C1A; outline: 2px solid transparent; }
.login .button.wp-hide-pw { height: 40px; min-height: 40px; color: #50575E; }
.login .button.wp-hide-pw:hover, .login .button.wp-hide-pw:focus { color: #A34700; border-color: transparent; box-shadow: none; }
.login input[type="checkbox"] { -webkit-appearance: auto; appearance: auto; width: 16px; height: 16px; margin: 0 4px 0 0; accent-color: #E97C1A; }
.login .forgetmenot label { font-weight: 400; }

/* Knop */
.wp-core-ui.login .button-primary { min-height: 36px; padding: 0 16px; color: #1E1E1E; background: #E97C1A; border-color: #E97C1A; border-radius: 6px; box-shadow: none; text-shadow: none; font-size: 14px; font-weight: 600; }
.wp-core-ui.login .button-primary:hover,
.wp-core-ui.login .button-primary:focus { color: #1E1E1E; background: #D86D0D; border-color: #D86D0D; }
.wp-core-ui.login .button-primary:focus { box-shadow: 0 0 0 1px #FFFFFF, 0 0 0 3px #D86D0D; }

/* Meldingen: standaard WordPress, alleen iets ronder */
.login .notice, .login .message, .login .success, .login #login_error { border-radius: 6px; }

/* Links onder het formulier */
.login #nav, .login #backtoblog { padding: 0 4px; }
.login #nav a, .login #backtoblog a { color: #50575E; text-decoration: none; }
.login #nav a:hover, .login #backtoblog a:hover, .login #nav a:focus, .login #backtoblog a:focus { color: #A34700; text-decoration: none; }
.login a { text-decoration: none; }