body.login div#login h1 a {
    background-image: none;
    width: 100%;
    height: auto;
    margin-bottom: 0;
    font-size: 0; /* suppress site name text height; text remains in DOM for screen readers */
}

body.login div#login h1 a::before {
    content: '';
    display: block;
    background-image: var(--ls-logo-url, url("../assets/login-logo.png"));
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 100%;
    aspect-ratio: var(--ls-logo-ratio, auto);
    min-height: 84px;
    max-height: 168px;
}

body.login {
    background-image: url("../assets/login-bg-img.jpg");
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

body.login div#login h1 {
    padding: 26px 24px 13px;
    background-color: #fff;
    border: 1px solid #ccd0d4;
    border-bottom: 0;
}

body.login .message,
body.login #login_error {
    margin: 0;
    padding: 13px 24px 13px 21px;
    border-top: 0;
    border-right: 1px solid #ccd0d4;
    border-bottom: 0;
    border-left: 4px solid var(--ls-accent-color, #99c120);
    font-weight: bold;
}

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

body.login form {
    border-top: 0;
    margin-top: 0;
    padding-top: 13px;
}

body.login form .button {
    background: var(--ls-accent-color, #99c120);
    border-color: var(--ls-accent-color, #99c120);
    color: var(--ls-contrast-color, #fff);
}

body.login form .button:hover {
    background: var(--ls-accent-color, #99c120);
    border-color: var(--ls-accent-color, #99c120);
    color: var(--ls-contrast-color, #fff);
    box-shadow: inset 0 0 100px rgba(0 0 0 / 12.5%);
}

body.login input:focus,
body.login input:focus-visible,
body.login form .button:focus,
body.login form .button:focus-visible {
    border-color: var(--ls-accent-color, #99c120);
    box-shadow: 0 0 0 1px var(--ls-accent-color, #99c120);
    outline: 2px solid transparent;
}

body.login form .button:focus,
body.login form .button:focus-visible {
    background: var(--ls-accent-color, #99c120);
    color: var(--ls-contrast-color, #fff);
}

body.login form .button:active {
    box-shadow: inset 0 0 100px rgba(0 0 0 / 25%);
}

body.login #nav a:hover,
body.login #nav a:active,
body.login #backtoblog a:hover,
body.login #backtoblog a:active {
    color: var(--ls-accent-color, #99c120);
}

body.login #nav a:focus,
body.login #nav a:focus-visible,
body.login #backtoblog a:focus,
body.login #backtoblog a:focus-visible {
    color: var(--ls-accent-color, #99c120);
    box-shadow: 0 0 0 1px var(--ls-accent-color, #99c120);
    outline: 2px solid transparent;
}

body.login h1 a:focus,
body.login h1 a:focus-visible {
    box-shadow: 0 0 0 2px var(--ls-accent-color, #99c120);
    outline: 2px solid transparent;
}

body.login ::selection {
    background-color: var(--ls-accent-color, #99c120);
    color: var(--ls-contrast-color, #fff);
}

body.login form .button.wp-hide-pw,
body.login form .button.wp-hide-pw:hover,
body.login form .button.wp-hide-pw:focus,
body.login form .button.wp-hide-pw:active {
    color: var(--ls-accent-color, #99c120);
}

body.login form .button.wp-hide-pw:focus,
body.login form .button.wp-hide-pw:focus-visible {
    border-color: var(--ls-accent-color, #99c120);
    box-shadow: 0 0 0 1px var(--ls-accent-color, #99c120);
    outline: 2px solid transparent;
}

body.login form input[type='checkbox'] {
    accent-color: var(--ls-accent-color, #99c120);
}

body.login form input[type='checkbox']:checked {
    background: var(--ls-accent-color, #99c120);
    border-color: var(--ls-accent-color, #99c120);
}


body.login .language-switcher select {
    accent-color: var(--ls-accent-color, #99c120);
}

body.login .language-switcher select:focus {
    border-color: var(--ls-accent-color, #99c120);
    box-shadow: 0 0 0 1px var(--ls-accent-color, #99c120);
    outline: 2px solid transparent;
}