/* custom-login.css */

:root {
    --main-color-highlight: 123, 118, 220;
    --main-color-text: 1, 24, 113
}

body.login {
    background-color: #ffffff;
    color: rgba(var(--main-color-text), 1);
}

body.login a {
    color: rgba(var(--main-color-highlight), 1);
}

body.login a:hover {
    color: rgba(var(--main-color-highlight), 1);
}

body .login #backtoblog a,
body.login #nav a {
    text-decoration: none;
    color: rgba(var(--main-color-highlight), 1);
}

body .login #backtoblog a:hover,
body.login #nav a:hover {
    text-decoration: none;
    color: rgba(var(--main-color-highlight), 1);
}

.login h1 a {
    height: 30px;
}

body.login div#login h1 a {
    background-image: url('images/acgb.svg');
    /* Replace with your logo URL */
    padding-bottom: 30px;
    background-size: contain;
    width: 100%;
}

body.login #loginform {
    border-radius: 0;
    background: #fff;
    box-shadow: none;
    padding: 26px 24px;
    margin-top: 20px;
    border: 0;
}

body.login #loginform input[type="text"],
body.login #loginform input[type="password"] {
    border-radius: 5px;
}

/* body.login #loginform .button-primary,
body .wp-core-ui .button-primary {
    background: rgba(var(--main-color-highlight), 1);
    border-color: rgba(var(--main-color-highlight), 1);
    color: #fff;
    text-shadow: none;
    border-radius: 5px;
} */

body.login .wpml-login-ls {
    display: none;
}

body.login .language-switcher {
    display: none;
}

body.login input[type="checkbox"]:focus,
body.login input[type="color"]:focus,
body.login input[type="date"]:focus,
body.login input[type="datetime-local"]:focus,
body.login input[type="datetime"]:focus,
body.login input[type="email"]:focus,
body.login input[type="month"]:focus,
body.login input[type="number"]:focus,
body.login input[type="password"]:focus,
body.login input[type="radio"]:focus,
body.login input[type="search"]:focus,
body.login input[type="tel"]:focus,
body.login input[type="text"]:focus,
body.login input[type="time"]:focus,
body.login input[type="url"]:focus,
body.login input[type="week"]:focus,
body.login select:focus,
body.login textarea:focus {
    border-color: rgba(var(--main-color-highlight), 1);
    box-shadow: 0 0 0 1px rgba(var(--main-color-highlight), 1);
    outline: 2px solid transparent;
}

.wp-core-ui .button,
.wp-core-ui .button-secondary {
    border-color: rgba(var(--main-color-highlight), 1);
    background-color: rgba(var(--main-color-highlight), 1);
}

.wp-core-ui .button,
.wp-core-ui .button-secondary {
    border-color: rgba(var(--main-color-highlight), 1);
    background-color: rgba(var(--main-color-highlight), 1);
    border-radius: 5px;
    color: white;
}

.wp-core-ui .button-primary.focus,
.wp-core-ui .button-primary.hover,
.wp-core-ui .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-secondary:hover,
.wp-core-ui .button.hover,
.wp-core-ui .button:hover {
    border-color: rgba(var(--main-color-highlight), 1);
    background-color: rgba(var(--main-color-highlight), 0.1);
    color: rgba(var(--main-color-highlight), 1);
}

.login .message,
.login .notice,
.login .success {
    margin-top: auto;
    border-left: 4px solid rgba(var(--main-color-highlight), 0.8);
}

.login .button.wp-hide-pw:focus {
    background: 0 0;
    border-color: rgba(var(--main-color-highlight), 1);
    box-shadow: 0 0 0 1px rgba(var(--main-color-highlight), 1);
    outline: 2px solid transparent;
}

.button.wp-hide-pw:focus {
    background: 0 0;
    border-color: grgba(var(--main-color-highlight), 1);
    box-shadow: 0 0 0 1px rgba(var(--main-color-highlight), 1);
    outline: 2px solid transparent;
}

.wp-core-ui .button-secondary:focus,
.wp-core-ui .button.focus,
.wp-core-ui .button:focus {
    color: rgba(var(--main-color-highlight), 1);
    filter: brightness(70%);
}


@media screen and (min-width: 992px) {

    #login {
        width: 30%;
        padding: 5% 1rem 1rem 1rem;
        margin: 0 0 0 auto;
        min-height: 90vh;
        display: flex;
        flex-direction: column;
    }

    body.login #loginform {
        margin-top: auto;
    }

    #login:before {
        content: "";
        position: absolute;
        top: 0;
        right: 33.333%;
        bottom: 0;
        left: 0;
        background: linear-gradient(164deg, rgba(131, 139, 255, 1) 0%, rgba(71, 71, 201, 1) 100%);
        z-index: -1;
    }

    #login:after {
        content: "";
        position: absolute;
        top: 0;
        right: 0;
        bottom: 0;
        left: 0;
        background: url('images/logo-association-cantonale-genevoise-de-badminton-blanc.svg') no-repeat 8vw center;
        opacity: 0.05;
        background-size: 70%;
        z-index: -1;
    }

    body.login div#login h1 a {
        background-position: 15px center;
    }
}