/**
 * User Profile — wp-login.php?action=register chrome.
 *
 * The fields themselves are styled by fields.css, which this file depends on. What
 * is left is making core's login box hold the longer field list, and bringing core's
 * own username/email inputs into the same visual system as the fields below them.
 *
 * Everything is scoped to `body.login-action-register`, so the log-in and
 * lost-password screens keep their current layout untouched.
 *
 * TWO overrides here need `!important`, and both are fighting the same opponent.
 * WPMU DEV Defender's captcha module prints an inline <style> on the login screen:
 *
 *   .login-action-register #registerform { width: 302px !important; }
 *   #login_error, .message                { width: 322px !important; }
 *
 * That plugin is not in this repo, so the rule cannot be removed at source. Inline
 * styles beat linked stylesheets on order, and `!important` beats specificity, so
 * the only way past it is `!important` at a higher specificity: prefixing `body`
 * takes our selector to (1 id, 1 class, 1 element) against Defender's (1 id, 1 class).
 * Pinning the form to 302px inside a 640px #login was also what made the form look
 * off-centre, since the box it sits in stayed full width.
 *
 * `#login` itself is deliberately NOT sized here. pro-child/custom-login/custom-login.css
 * already caps it at 40rem, and duplicating that would give two places to change it.
 */

body.login-action-register #registerform {
    position: relative;
    box-sizing: border-box;
    width: auto !important; /* see the Defender note above */
    padding: 2rem 1.5rem 1.5rem;
    overflow: hidden;
    border-radius: 0.667rem;
}

/* Brand ribbon across the top, matching the profile card. */
body.login-action-register #registerform::before {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    height: 0.5rem;
    background: linear-gradient(
        90deg,
        var(--darkpurple, #4d40b2) 0%,
        var(--lightpurple, #6c59ff) 50%,
        var(--coral, #ff5e5e) 100%
    );
}

/* Core's username and email sit above our sections with no heading of their own,
   which left the top of the form looking unstructured. Give them one, styled exactly
   like the section titles fields.css renders. */
body.login-action-register #registerform > p:first-of-type::before {
    content: "Your account";
    display: block;
    width: 100%;
    margin: 0 0 1rem;
    padding: 0 0 0.5rem;
    font-size: 0.8rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--darkpurple, #4d40b2);
    border-bottom: 1.5px solid var(--lightgray, rgb(240, 240, 240));
}

/* Core's own fields, matched to the shared control styling. */
body.login-action-register #registerform > p > label {
    display: block;
    margin: 0 0 0.24rem;
    font-size: 0.8rem;
    font-weight: 700;
    line-height: 1.4;
    letter-spacing: 0;
    color: var(--darkpurple, #4d40b2);
}

body.login-action-register #registerform input[type="text"],
body.login-action-register #registerform input[type="email"] {
    box-sizing: border-box;
    width: 100%;
    margin: 0.24rem 0 1rem;
    padding: 0.667rem 0.75rem;
    font-size: 1rem;
    line-height: 1.4;
    color: var(--darkpurple, #4d40b2);
    background: var(--white, #fff);
    border: 1.5px solid var(--lightgray, rgb(240, 240, 240));
    border-radius: 0.24rem;
    box-shadow: none;
    transition: 0.3s ease-out;
}

body.login-action-register #registerform input[type="text"]:hover,
body.login-action-register #registerform input[type="email"]:hover {
    border-color: var(--lightpurple50, rgba(108, 89, 255, 0.5));
}

body.login-action-register #registerform input[type="text"]:focus,
body.login-action-register #registerform input[type="email"]:focus {
    border-color: var(--lightpurple, #6c59ff);
    outline: var(--green, #00deab) auto 1px;
    box-shadow: none;
}

/* Our field block sits between core's email input and the submit row. */
body.login-action-register .kwp-register {
    margin: 1.5rem 0 0;
}

/* Tighter than the profile card: this form is a single column of sections rather
   than a page, so 2.25rem between them reads as gappy. */
body.login-action-register .kwp-register .kwp-section {
    margin-bottom: 1.5rem;
}

body.login-action-register .kwp-register .kwp-section:last-of-type {
    margin-bottom: 0;
}

/* Defender's captcha widget, given the same rhythm as the fields. */
body.login-action-register .captcha_wrap {
    margin: 1.5rem 0 0;
}

/* "Registration confirmation will be emailed to you." */
body.login-action-register #reg_passmail {
    margin: 1.5rem 0 0;
    font-size: 0.8rem;
    line-height: 1.4;
    color: var(--darkpurple, #4d40b2);
    opacity: 0.8;
}

/* Primary action, coral per the brand CTA rule. */
body.login-action-register #registerform .submit,
body.login-action-register #registerform p.submit {
    margin: 1.5rem 0 0;
    padding-top: 1.5rem;
    border-top: 1.5px solid var(--lightgray, rgb(240, 240, 240));
}

body.login-action-register #registerform .button-primary {
    float: none;
    box-sizing: border-box;
    width: 100%;
    height: auto;
    padding: 0.85rem 1.5rem;
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.2;
    color: var(--white, #fff);
    background: var(--coral, #ff5e5e);
    border: 0;
    border-radius: 0.24rem;
    text-shadow: none;
    box-shadow: none;
    transition: 0.3s ease-out;
}

body.login-action-register #registerform .button-primary:hover,
body.login-action-register #registerform .button-primary:focus {
    color: var(--white, #fff);
    background: var(--darkpurple, #4d40b2);
    box-shadow: none;
}

/* Core's error box, restyled to match the site's notices (coral top accent). The
   width override is the second half of the Defender fight described at the top. */
body.login-action-register #login_error,
body.login-action-register .message,
body.login-action-register .notice {
    box-sizing: border-box;
    width: auto !important; /* see the Defender note above */
    margin: 0 0 1.5rem;
    padding: 1rem;
    font-weight: bold;
    line-height: 1.4;
    color: var(--darkpurple, #4d40b2);
    background: var(--offwhite, #f9f9f9);
    border: 0;
    border-top: 3px solid var(--coral, #ff5e5e);
    border-radius: 0 0 0.24rem 0.24rem;
    box-shadow: none;
}

/* The "Registration confirmation will be emailed to you." success message uses the
   same box, so give the non-error variant the teal accent instead. */
body.login-action-register .message {
    border-top-color: var(--green, #00deab);
}

/* Links under the form. */
body.login-action-register #nav,
body.login-action-register #backtoblog {
    margin: 1rem 0 0;
    padding: 0;
    text-align: center;
}

@media only screen and (max-width: 600px) {
    body.login-action-register #registerform {
        padding: 1.5rem 1rem 1rem;
    }
}