/* ==========================================================================
   Custom Login Page Branding
   ========================================================================== */

#login h1 a,
.login h1 a {
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 320px;
    height: 100px;
    margin: 0 auto 25px;
}

body.login {
    background-color: var(--color-bg-secondary, #f5f5f5);
}

.login #backtoblog a,
.login #nav a {
    color: var(--color-primary-dark, #005a87);
    transition: color 0.3s ease;
}

.login #backtoblog a:hover,
.login #nav a:hover {
    color: var(--color-primary, #00a2f8);
}

.login .button-primary {
    background-color: var(--color-primary, #00a2f8);
    border-color: var(--color-primary, #00a2f8);
    box-shadow: none;
    text-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
    background-color: var(--color-primary-dark, #005a87);
    border-color: var(--color-primary-dark, #005a87);
    box-shadow: none;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--color-primary, #00a2f8);
    box-shadow: 0 0 0 1px var(--color-primary, #00a2f8);
}