/* Dance Alchemy styling for WordPress' native authentication screens. */
:root {
    --da-teal: #427c7a;
    --da-teal-dark: #285856;
    --da-green: #a6c605;
    --da-paper: #fffdf7;
    --da-text: #606060;
}

body.login {
    min-height: 100vh;
    background: linear-gradient(160deg, #fff 0%, #f6fecc 100%);
    color: var(--da-text);
    font-family: Raleway, "Open Sans", Arial, sans-serif;
}

.login #login {
    width: min(420px, calc(100% - 32px));
    padding: clamp(32px, 8vh, 72px) 0 32px;
}

.login h1 a {
    width: 100%;
    height: auto;
    margin-bottom: 24px;
    background: none;
    color: #282a2b;
    font-size: 23px;
    font-weight: 700;
    line-height: 1.25;
    text-indent: 0;
    text-transform: uppercase;
    letter-spacing: .06em;
}

.login form {
    margin-top: 18px;
    padding: 30px;
    border: 1px solid rgba(166, 198, 5, .55);
    border-radius: 22px;
    background: rgba(255, 255, 255, .96);
    box-shadow: 0 9px 28px rgba(40, 42, 43, .09);
}

.login label { color: #333; font-size: 14px; font-weight: 600; }
.login form .input,
.login input[type="text"] {
    margin-top: 7px;
    border: 1px solid #c9d3d2;
    border-radius: 8px;
    background: #fff;
    color: #282a2b;
    font-size: 18px;
}
.login form .input:focus,
.login input[type="text"]:focus {
    border-color: var(--da-teal);
    box-shadow: 0 0 0 1px var(--da-teal);
}

.wp-core-ui .button-primary {
    min-height: 42px;
    padding: 4px 22px;
    border: 0;
    border-radius: 999px;
    background: var(--da-teal);
    box-shadow: none;
    font-weight: 700;
    text-shadow: none;
}
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
    background: var(--da-teal-dark);
}
.wp-core-ui .button-primary:focus { box-shadow: 0 0 0 2px #fff, 0 0 0 4px var(--da-teal); }

.login #nav,
.login #backtoblog { margin: 20px 4px 0; padding: 0; text-align: center; }
.login #backtoblog { margin-top: 12px; }
.login #nav a,
.login #backtoblog a { color: var(--da-teal); font-weight: 600; }
.login #nav a:hover,
.login #nav a:focus,
.login #backtoblog a:hover,
.login #backtoblog a:focus { color: #111; }

.da-auth-intro,
.login .message,
.login .notice,
.login #login_error,
.login .success {
    margin: 0 0 18px;
    padding: 16px 18px;
    border: 0;
    border-left: 4px solid var(--da-teal);
    border-radius: 10px;
    background: #fff;
    box-shadow: 0 4px 16px rgba(40, 42, 43, .07);
    color: #4c4c4c;
    line-height: 1.55;
}
.login #login_error { border-left-color: #b32d2e; }
.login .success { border-left-color: var(--da-green); }
.da-auth-intro p { margin: 0 0 10px; }
.da-auth-intro p:last-child { margin-bottom: 0; }
.da-auth-intro__title { color: #282a2b; font-size: 19px; font-weight: 700; }
.da-auth-intro__action a { font-weight: 700; }

.login .privacy-policy-page-link { margin: 22px 0 0; }
.login .privacy-policy-page-link a { color: var(--da-teal); }
.login .language-switcher { padding-top: 18px; }

@media (max-width: 480px) {
    .login #login { width: calc(100% - 24px); padding-top: 24px; }
    .login form { padding: 22px 18px; border-radius: 16px; }
    .login h1 a { font-size: 20px; }
    .login .button.wp-hide-pw { min-width: 44px; min-height: 44px; }
}

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

.login a { text-decoration: underline; text-decoration-thickness: .09em; text-underline-offset: .16em; }
.login a:focus-visible,
.login button:focus-visible,
.login input:focus-visible,
.login select:focus-visible { outline: 3px solid #111 !important; outline-offset: 3px; }