/* ==========================================================================
   WVNET Login Screen Branding
   --------------------------------------------------------------------------
   Upload to /wp-content/uploads/wvnet-login.css and enqueue on the
   login_enqueue_scripts hook.

   COLORS ARE PLACEHOLDERS. The values below were eyeballed from the BOG
   deck, not sampled from the official palette. Replace them with the exact
   hex values from the Phase 3 style guide before deploying.

     Blue       #016299
     Gold        #E09C17
     Blue (dark) #334155   used for hover/active states

   Selectors deliberately target WordPress core's own login classes and
   generic form elements, so the two-factor challenge, lost-password and
   password-reset screens inherit the branding without depending on the
   security plugin's markup, which changes between releases.

   Bump the version string in wp_enqueue_style() after editing this file,
   or browsers will serve the cached copy.
   ========================================================================== */


/* --------------------------------------------------------------------------
   Page background
   -------------------------------------------------------------------------- */

body.login {
	background-color: #F0F5FA;
}

/* Optional background photo. Keep it dark enough that the gold rule and the
   white form card stay legible, or delete this block entirely.

body.login {
	background-image: url('https://status.wvnet.edu/wp-content/uploads/login-bg.jpg');
	background-size: cover;
	background-position: center;
	background-repeat: no-repeat;
}
*/


/* --------------------------------------------------------------------------
   Logo
   Replace the default WordPress logo. Adjust width/height to match the
   aspect ratio of the uploaded file so it does not distort.
   -------------------------------------------------------------------------- */

#login h1 a,
.login h1 a {
	background-image: url('https://status.wvnet.edu/wp-content/uploads/2024/09/WVNETlogo_new-1.png');
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 300px;
	height: 84px;
	margin-bottom: 24px;
	padding-bottom: 0;
    color: #ffffff;
}


/* --------------------------------------------------------------------------
   Form card
   -------------------------------------------------------------------------- */
   
#login {
    width: 650px;
    padding: 10% 0;
    margin: auto;
}

.login form {
	border-top: 5px solid #016299;
	border-radius: 10px;
	box-shadow: 0 2px 12px rgba(0, 0, 0, 0.4);
    padding: 50px;
}

.login label,
.login form .forgetmenot label {
	color: #1d1d1d;
    font-size: 16px;
}

.login form .input, .login input[type=password], .login input[type=text] {
    font-size: 18px;
    line-height: 1.33333333;
    width: 100%;
    border-width: .0625rem;
    padding: 1rem;
    margin: 0 6px 16px 0;
    min-height: 40px;
    max-height: none;
}


/* --------------------------------------------------------------------------
   Focus states
   Visible keyboard focus is a WCAG 2.1 AA requirement. Use the brand gold
   rather than removing the outline. The transparent outline is preserved
   for Windows High Contrast Mode, where box-shadow is not rendered.
   -------------------------------------------------------------------------- */

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login input[type="number"]:focus,
.login input[type="tel"]:focus,
.login input:focus {
	border-color: #016299;
	box-shadow: 0 0 0 2px #334155;
	outline: 2px solid transparent;
}


/* --------------------------------------------------------------------------
   Buttons
   Gold fill with black text clears AA comfortably. Reversing this to gold
   text on a black fill drops the contrast ratio, so keep the fill light.
   -------------------------------------------------------------------------- */

.login .button-primary,
.wp-core-ui .button-primary {
	background: #E09C17;
	border-color: #E09C17;
	color: #000000;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
    border-radius: 10px;
}

.login .button-primary:hover,
.wp-core-ui .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:focus {
	background: #E09C17;
	border-color: #E09C17;
	color: #000000;
}

.wp-core-ui .button-primary:focus {
	box-shadow: 0 0 0 2px #ffffff, 0 0 0 4px #334155;
}

/* Secondary buttons. The two-factor screen uses these for actions such as
   "use a different method" and "send a new code". */

.login .button-secondary,
.wp-core-ui .button-secondary {
	color: #000000;
	border-color: #767676;
}


/* --------------------------------------------------------------------------
   Links below the form
   These sit on the dark page background, so they take the gold rather than
   the default blue.
   -------------------------------------------------------------------------- */

.login #nav a,
.login #backtoblog a,
.login .privacy-policy-page-link a {
	color: #334155;
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login .privacy-policy-page-link a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: #016299;
	text-decoration: underline;
}


/* --------------------------------------------------------------------------
   Messages and errors
   Errors keep the core red. Informational notices take the brand gold.
   -------------------------------------------------------------------------- */

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

.login .message,
.login .notice {
	border-left-color: #016299;
}


/* --------------------------------------------------------------------------
   Language switcher (WordPress 5.9+)
   -------------------------------------------------------------------------- */

.login .language-switcher select {
	background-color: #ffffff;
}


/* --------------------------------------------------------------------------
   Small screens
   -------------------------------------------------------------------------- */

@media screen and (max-width: 480px) {

	#login {
		padding: 6% 20px 0;
		width: auto;
		max-width: 320px;
	}

	#login h1 a,
	.login h1 a {
		width: 100%;
		max-width: 300px;
	}
}


/* --------------------------------------------------------------------------
   Reduced motion
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {

	.login * {
		transition: none !important;
	}
}

.itsec-backup-methods a {
	color: #000000;
}