/*--------------------------------------------------------------
# DoItUK Custom WordPress Login
--------------------------------------------------------------*/

:root {

    /* Brand */
    --login-primary: #3e3e3e;
    --login-primary-hover: #555555;

    /* Page */
    --login-background: #ffffff;
    --login-card-background: #ffffff;

    /* Text */
    --login-text: #3c434a;
    --login-muted-text: #646970;

    /* Fields */
    --login-border: #dcdcde;
    --login-input-background: #ffffff;
    --login-focus-shadow: rgba(62, 62, 62, 0.20);

    /* Login card */
    --login-width: 360px;
    --login-padding: 30px;
    --login-radius: 8px;

    --login-shadow:
        0 2px 8px rgba(0, 0, 0, 0.08),
        0 12px 30px rgba(0, 0, 0, 0.06);

    /* Logo */
    --logo-width: 100%;
    --logo-height: 84px;

    /* Inputs */
    --input-padding: 10px 12px;
    --input-radius: 4px;

    /* Buttons */
    --button-radius: 4px;
}


/*--------------------------------------------------------------
# Page
--------------------------------------------------------------*/

body.login {
    background: var(--login-background);
    color: var(--login-text);
}


/*--------------------------------------------------------------
# Login Container
--------------------------------------------------------------*/

body.login #login {
    width: var(--login-width);
    max-width: calc(100% - 40px);

    margin: 7vh auto 0;
    padding: var(--login-padding);

    background: var(--login-card-background);

    border-radius: var(--login-radius);
    box-shadow: var(--login-shadow);

    box-sizing: border-box;
}


/*--------------------------------------------------------------
# Logo
--------------------------------------------------------------*/

body.login #login h1 {
    margin: 0 0 25px;
}


body.login #login h1 a {
    width: var(--logo-width) !important;
    height: var(--logo-height) !important;

    margin: 0 auto;

    background-size: contain !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
}


/*--------------------------------------------------------------
# Forms
--------------------------------------------------------------*/

body.login #loginform,
body.login #registerform,
body.login #lostpasswordform {
    margin: 0;
    padding: 0;

    background: transparent;

    border: 0;
    box-shadow: none;
}


/*--------------------------------------------------------------
# Labels
--------------------------------------------------------------*/

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


/*--------------------------------------------------------------
# Inputs
--------------------------------------------------------------*/

body.login input[type="text"],
body.login input[type="email"],
body.login input[type="password"] {
    min-height: 44px;

    padding: var(--input-padding);

    color: var(--login-text);
    background: var(--login-input-background);

    border: 1px solid var(--login-border);
    border-radius: var(--input-radius);

    box-shadow: none;

    font-size: 15px;
}


body.login input[type="text"]:focus,
body.login input[type="email"]:focus,
body.login input[type="password"]:focus {
    border-color: var(--login-primary);

    box-shadow:
        0 0 0 1px var(--login-primary),
        0 0 0 4px var(--login-focus-shadow);

    outline: none;
}


/*--------------------------------------------------------------
# Password Visibility
--------------------------------------------------------------*/

body.login .wp-hide-pw {
    color: var(--login-primary);
}


body.login .wp-hide-pw:hover,
body.login .wp-hide-pw:focus {
    color: var(--login-primary-hover);
}


/*--------------------------------------------------------------
# Checkbox
--------------------------------------------------------------*/

body.login input[type="checkbox"] {
    border-color: var(--login-border);
    box-shadow: none;
}


body.login input[type="checkbox"]:checked::before {
    content: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 20 20'><path fill='%233e3e3e' d='M16.7 5.3a1 1 0 0 0-1.4 0L8 12.6 4.7 9.3a1 1 0 0 0-1.4 1.4l4 4a1 1 0 0 0 1.4 0l8-8a1 1 0 0 0 0-1.4z'/></svg>");
}


body.login input[type="checkbox"]:focus {
    border-color: var(--login-primary);
    box-shadow: 0 0 0 1px var(--login-primary);
}


/*--------------------------------------------------------------
# Login Button
--------------------------------------------------------------*/

body.login #wp-submit,
body.login .button-primary {
    min-height: 40px;

    padding: 0 18px;

    background: var(--login-primary);
    border-color: var(--login-primary);

    border-radius: var(--button-radius);

    color: #ffffff;

    text-shadow: none;
    box-shadow: none;

    font-weight: 600;

    transition:
        background-color 0.2s ease,
        border-color 0.2s ease;
}


body.login #wp-submit:hover,
body.login #wp-submit:focus,
body.login .button-primary:hover,
body.login .button-primary:focus {
    background: var(--login-primary-hover);
    border-color: var(--login-primary-hover);

    color: #ffffff;

    box-shadow: none;
}


/*--------------------------------------------------------------
# Messages
--------------------------------------------------------------*/

body.login .message,
body.login .success,
body.login #login_error {
    margin: 0 0 20px;
    padding: 12px 15px;

    border-width: 1px;
    border-style: solid;
    border-radius: 4px;

    box-shadow: none;

    font-size: 13px;
    line-height: 1.5;
}


body.login .message,
body.login .success {
    color: #2c5e35;
    background: #edf7ef;
    border-color: #8fc89a;
}


body.login #login_error {
    color: #8a2428;
    background: #fdf0f0;
    border-color: #d89a9d;
}


/*--------------------------------------------------------------
# Navigation Links
--------------------------------------------------------------*/

body.login #nav,
body.login #backtoblog {
    margin: 18px 0 0;
    padding: 0;
}


body.login #nav a,
body.login #backtoblog a,
body.login .privacy-policy-page-link a {
    color: var(--login-primary);

    text-decoration: none;
}


body.login #nav a:hover,
body.login #nav a:focus,
body.login #backtoblog a:hover,
body.login #backtoblog a:focus,
body.login .privacy-policy-page-link a:hover,
body.login .privacy-policy-page-link a:focus {
    color: var(--login-primary-hover);

    text-decoration: underline;
}


/*--------------------------------------------------------------
# Language Switcher
--------------------------------------------------------------*/

body.login .language-switcher {
    margin: 25px auto 0;

    text-align: center;
}


body.login .language-switcher form {
    display: inline-flex;
    align-items: center;

    gap: 6px;

    margin: 0;
}


body.login .language-switcher select {
    min-height: 38px;

    padding: 0 32px 0 10px;

    color: var(--login-text);
    background-color: #ffffff;

    border: 1px solid var(--login-border);
    border-radius: 4px;

    box-shadow: none;
}


body.login .language-switcher select:focus {
    border-color: var(--login-primary);

    box-shadow:
        0 0 0 1px var(--login-primary);

    outline: none;
}


body.login .language-switcher .button {
    min-height: 38px;

    color: var(--login-primary);
    background: #ffffff;

    border-color: var(--login-primary);
    border-radius: 4px;

    box-shadow: none;
}


body.login .language-switcher .button:hover,
body.login .language-switcher .button:focus {
    color: #ffffff;
    background: var(--login-primary);

    border-color: var(--login-primary);
}


/*--------------------------------------------------------------
# Accessibility
--------------------------------------------------------------*/

body.login a:focus {
    color: var(--login-primary-hover);

    box-shadow:
        0 0 0 1px var(--login-primary);

    outline: none;
}


/*--------------------------------------------------------------
# Mobile
--------------------------------------------------------------*/

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

    body.login #login {
        width: calc(100% - 30px);

        margin-top: 20px;
        padding: 24px 20px;
    }


    body.login #login h1 a {
        height: 75px !important;
    }


    body.login .language-switcher form {
        flex-wrap: wrap;

        justify-content: center;
    }

}