/*
 * Captcha Registration -- login page styles.
 * All color values reference CSS custom properties injected by class-forms.php.
 * Fallback values mirror the plugin defaults.
 */

:root {
    --cr-primary:  #2563eb;
    --cr-bg:       #f3f4f6;
    --cr-form-bg:  #ffffff;
    --cr-text:     #111827;
    --cr-radius:   8px;
    --cr-shadow:   0 4px 24px rgba(0, 0, 0, 0.08);
}

/* -- Page layout ----------------------------------------------------------- */

body.login {
    background-color: var(--cr-bg);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
    color: var(--cr-text);
}

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

#login h1 a,
.login h1 a {
    background-image: var(--cr-logo-url, none);
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
    width: 220px;
    height: 80px;
    display: block;
    margin: 0 auto 20px;
    /*
     * Hide the site-name text that WordPress renders inside this anchor.
     * overflow:hidden is required -- text-indent alone does not clip the text,
     * which causes the site name to visually overlap the logo image.
     * font-size:0 / line-height:0 ensure no space is reserved for the text.
     */
    overflow: hidden;
    font-size: 0;
    line-height: 0;
}

/* -- Form card ------------------------------------------------------------- */

#loginform,
#registerform,
#lostpasswordform {
    background: var(--cr-form-bg);
    border-radius: var(--cr-radius);
    box-shadow: var(--cr-shadow);
    border: none;
    padding: 32px 36px;
}

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

.login label {
    color: var(--cr-text);
    font-size: 0.875rem;
    font-weight: 500;
    letter-spacing: 0.01em;
}

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

.login input[type="text"],
.login input[type="password"],
.login input[type="email"] {
    background: var(--cr-bg);
    border: 1.5px solid #d1d5db;
    border-radius: calc(var(--cr-radius) - 2px);
    color: var(--cr-text);
    padding: 10px 14px;
    font-size: 1rem;
    width: 100%;
    box-sizing: border-box;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus {
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 20%, transparent);
    outline: none;
}

/* -- Submit button --------------------------------------------------------- */

.login .button-primary,
.login input[type="submit"].button-primary {
    background: var(--cr-primary);
    border: none;
    border-radius: calc(var(--cr-radius) - 2px);
    color: #ffffff;
    font-size: 1rem;
    font-weight: 600;
    padding: 11px 20px;
    width: 100%;
    cursor: pointer;
    transition: filter 0.15s;
    box-shadow: none;
    text-shadow: none;
}

.login .button-primary:hover,
.login .button-primary:focus {
    filter: brightness(1.1);
    background: var(--cr-primary);
    color: #ffffff;
}

/* -- Links ----------------------------------------------------------------- */

.login #nav a,
.login #backtoblog a {
    color: var(--cr-primary);
}

.login #nav a:hover,
.login #backtoblog a:hover {
    color: var(--cr-primary);
    filter: brightness(1.2);
}

/* -- Error / message boxes ------------------------------------------------- */

.login .message,
.login .success {
    border-left: 4px solid var(--cr-primary);
    border-radius: 0 var(--cr-radius) var(--cr-radius) 0;
}

/* -- Turnstile widget wrapper ---------------------------------------------- */

.captcha-reg-widget-wrap {
    margin: 16px 0;
    display: flex;
    justify-content: center;
}

/* Ensure the widget iframe doesn't overflow narrow form cards */
.captcha-reg-widget-wrap .cf-turnstile iframe {
    max-width: 100%;
}

/* -- Registration page customisations ------------------------------------- */

/*
 * Hide the WordPress default username field.
 * We auto-generate it from the email address server-side.
 * :has() hides the entire <p> wrapper; the fallback targets the inputs
 * directly for browsers that do not yet support :has().
 */
.login-action-register #registerform > p:has(#user_login) {
    display: none;
}
/* Fallback: hide just the input + label when :has() is unsupported */
@supports not selector(:has(*)) {
    .login-action-register #user_login,
    .login-action-register label[for="user_login"] {
        display: none;
    }
}


/* Style the Full Name field like WP's own label/input pairs */
.login-action-register .captcha-reg-fn-wrap label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cr-text);
    margin-bottom: 2px;
}

.login-action-register .captcha-reg-fn-wrap input {
    width: 100%;
    box-sizing: border-box;
    background: var(--cr-bg);
    border: 1.5px solid #d1d5db;
    border-radius: calc(var(--cr-radius) - 2px);
    color: var(--cr-text);
    padding: 10px 14px;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-action-register .captcha-reg-fn-wrap input:focus {
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 20%, transparent);
    outline: none;
}

/* -- Password fields (registration) --------------------------------------- */

.login-action-register .captcha-reg-pw-wrap {
    margin-top: 16px;
}

.login-action-register .captcha-reg-pw-wrap label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--cr-text);
    margin-bottom: 2px;
}

.login-action-register .captcha-reg-pw-wrap input {
    width: 100%;
    box-sizing: border-box;
    background: var(--cr-bg);
    border: 1.5px solid #d1d5db;
    border-radius: calc(var(--cr-radius) - 2px);
    color: var(--cr-text);
    padding: 10px 14px;
    font-size: 1rem;
    transition: border-color 0.15s, box-shadow 0.15s;
}

.login-action-register .captcha-reg-pw-wrap input:focus {
    border-color: var(--cr-primary);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--cr-primary) 20%, transparent);
    outline: none;
}

/*
 * Hide the "Registration confirmation will be emailed to you." notice —
 * the user sets their own password in the form, so this is no longer accurate.
 */
.login-action-register #reg_passmail {
    display: none;
}

/* -- Honeypot field (anti-bot) -------------------------------------------- */

/*
 * Moved off-screen rather than display:none or visibility:hidden —
 * sophisticated bots detect those and skip the field intentionally.
 * Real users never see or interact with this field.
 */
.captcha-reg-hp-wrap {
    position: absolute;
    left: -9999px;
    top: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
    opacity: 0;
}