:root {
    --va-login-primary: #176b45;
    --va-login-primary-dark: #105536;
    --va-login-secondary: #245b78;
    --va-login-text: #202522;
    --va-login-muted: #5e6963;
    --va-login-border: #d5ddd8;
}

body.login {
    min-height: 100vh;
    background: linear-gradient(145deg, #f2f8f4 0%, #eef5f7 55%, #f8faf9 100%);
    color: var(--va-login-text);
}

body.login::before {
    content: "";
    position: fixed;
    inset: 0 0 auto;
    height: 0.35rem;
    background: linear-gradient(90deg, var(--va-login-primary), var(--va-login-secondary));
}

#login {
    box-sizing: border-box;
    width: min(92vw, 25rem);
    padding: clamp(2.5rem, 8vh, 5rem) 0 2rem;
}

.login h1 a {
    width: 15rem;
    height: 7.5rem;
    margin-bottom: 1rem;
    background-position: center;
    background-size: contain;
}

.va-login-intro {
    margin-bottom: 1.25rem;
    text-align: center;
}

.va-login-intro h2 {
    margin: 0 0 0.4rem;
    color: var(--va-login-text);
    font-size: 1.65rem;
    line-height: 1.25;
}

.va-login-intro p {
    margin: 0;
    color: var(--va-login-muted);
    font-size: 0.95rem;
}

.login form {
    margin-top: 0;
    padding: 1.75rem;
    border: 1px solid var(--va-login-border);
    border-radius: 0.8rem;
    background: #fff;
    box-shadow: 0 0.75rem 2.5rem rgb(20 40 30 / 10%);
}

.login label {
    color: var(--va-login-text);
    font-weight: 600;
}

.login form .input,
.login input[type="text"] {
    min-height: 3rem;
    margin-top: 0.4rem;
    border: 1px solid var(--va-login-border);
    border-radius: 0.5rem;
    color: var(--va-login-text);
    font-size: 1rem;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="checkbox"]:focus,
.login .button.wp-hide-pw:focus {
    border-color: var(--va-login-primary);
    box-shadow: 0 0 0 0.2rem rgb(23 107 69 / 20%);
    outline: 0;
}

.login .button-primary {
    min-height: 2.75rem;
    padding: 0 1.25rem;
    border-color: var(--va-login-primary);
    border-radius: 0.5rem;
    background: var(--va-login-primary);
    font-weight: 700;
    text-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
    border-color: var(--va-login-primary-dark);
    background: var(--va-login-primary-dark);
}

.login .button-primary:disabled {
    border-color: #7da892 !important;
    background: #7da892 !important;
}

.login #nav,
.login #backtoblog {
    margin: 1rem 0 0;
    padding: 0;
    text-align: center;
}

.login #nav a,
.login #backtoblog a {
    color: var(--va-login-secondary);
    font-weight: 600;
}

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

.login .message,
.login .notice,
.login #login_error {
    border-radius: 0.5rem;
}

.va-login-role-help {
    box-sizing: border-box;
    width: min(92vw, 25rem);
    margin: 1.4rem auto 0;
    color: var(--va-login-muted);
    font-size: 0.82rem;
    line-height: 1.5;
    text-align: center;
}

@media (max-width: 480px) {
    #login {
        padding-top: 2.5rem;
    }

    .login h1 a {
        width: 12.5rem;
        height: 6.25rem;
    }

    .login form {
        padding: 1.35rem;
    }

    .va-login-intro h2 {
        font-size: 1.4rem;
    }
}

@media (prefers-reduced-motion: reduce) {
    .login * {
        scroll-behavior: auto !important;
        transition: none !important;
    }
}