/**
 * wp-login.php Brand Styling — aiready.sg
 *
 * Mirrors the airi-ecosystem-stylesheet v1.6 design tokens. Tokens are
 * redeclared at :root because wp-login.php does NOT load the Customizer
 * Additional CSS — this stylesheet must be self-contained.
 *
 * Targets:
 *   - body.login                   (page chrome)
 *   - #login                       (centered card container)
 *   - #loginform                   (primary login + password)
 *   - body.login h1 a              (logo)
 *   - .button-primary              (Login button + Verify 2FA button)
 *   - #user_login, #user_pass      (primary fields)
 *   - #authcode                    (2FA TOTP input)
 *   - #two-factor-backup-code      (2FA backup-code input)
 *   - .two-factor-prompt           (challenge instruction text)
 *   - .backup-methods-wrap a       (alternate-method link)
 *   - .login .message, .login #login_error  (notices)
 *
 * Loaded via Airi\Integrations\Login\LoginBranding on login_enqueue_scripts.
 *
 * @since 5.2.5
 */

:root {
    --airi-red: #C00000;
    --airi-red-hover: #9B0000;
    --airi-black: #1A1A1A;
    --airi-text-strong: #404040;
    --airi-text-medium: #6B6B6B;
    --airi-text-subtle: #999999;
    --airi-white: #FFFFFF;
    --airi-bg-lighter: #F9F9F9;
    --airi-bg-subtle: #F2F2F2;
    --airi-border: #E5E5E5;
    --airi-radius: 8px;
    --airi-radius-sm: 4px;
    --airi-shadow: 0 4px 16px rgba(26, 26, 26, 0.08);
    --airi-shadow-sm: 0 2px 8px rgba(26, 26, 26, 0.04);
    --airi-transition: all 0.25s ease-in-out;
}

/* ==========================================================================
   1. Page chrome — background + base typography
   ========================================================================== */

body.login {
    background: var(--airi-bg-lighter);
    color: var(--airi-black);
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
}

/* ==========================================================================
   2. Logo — replace WP mark with airi logo
   ========================================================================== */

body.login h1 a {
    background-image: url('../images/airi-logo-login.png') !important;
    background-size: contain !important;
    background-repeat: no-repeat;
    background-position: center;
    width: 320px;
    height: 84px;
    margin: 0 auto;
    text-indent: -9999px;
    overflow: hidden;
}

/* ==========================================================================
   3. Card container — .airi-card treatment
   ========================================================================== */

#login {
    width: 380px;
    max-width: 92vw;
    padding: 32px 0 24px;
    box-sizing: border-box;
}

#loginform,
#registerform,
#lostpasswordform,
#login form#loginform,
.login form {
    background: var(--airi-white);
    border: 1px solid var(--airi-border);
    border-radius: var(--airi-radius);
    box-shadow: var(--airi-shadow);
    padding: 28px 28px 24px;
    margin-top: 16px;
    transition: var(--airi-transition);
}

/* ==========================================================================
   4. Inputs — brand border + red focus ring
   ========================================================================== */

.login form input[type="text"],
.login form input[type="email"],
.login form input[type="password"],
.login form input[type="tel"],
.login form input.input,
.login form input#authcode,
.login form input#two-factor-backup-code {
    width: 100%;
    padding: 10px 14px;
    border: 1.5px solid var(--airi-border);
    border-radius: var(--airi-radius);
    font-size: 1rem;
    color: var(--airi-black);
    background: var(--airi-white);
    transition: var(--airi-transition);
    box-shadow: none;
    line-height: 1.5;
    font-weight: 400;
}

.login form input[type="text"]:focus,
.login form input[type="email"]:focus,
.login form input[type="password"]:focus,
.login form input[type="tel"]:focus,
.login form input.input:focus,
.login form input#authcode:focus,
.login form input#two-factor-backup-code:focus {
    border-color: var(--airi-red);
    outline: none;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.08);
}

/* TOTP authcode field — center-aligned, larger digits */
.login form input#authcode {
    text-align: center;
    font-size: 1.25rem;
    letter-spacing: 0.15em;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

/* ==========================================================================
   5. Labels
   ========================================================================== */

.login form label,
.login label {
    color: var(--airi-text-strong);
    font-weight: 600;
    font-size: 0.9375rem;
    margin-bottom: 6px;
    display: block;
}

.login .forgetmenot label {
    font-weight: 400;
    font-size: 0.875rem;
    color: var(--airi-text-medium);
    display: inline;
    margin-bottom: 0;
}

/* Required asterisk if any */
.login form .required,
.login form abbr.required {
    color: var(--airi-red);
    text-decoration: none;
    margin-left: 2px;
}

/* ==========================================================================
   6. Submit button — brand red, matches LLMS 16E + FluentForms 14H
   ========================================================================== */

.login form .button.button-primary,
.login form .button-primary,
.login form button[type="submit"],
.login form input[type="submit"] {
    background-color: var(--airi-red) !important;
    border: none !important;
    color: var(--airi-white) !important;
    border-radius: var(--airi-radius) !important;
    padding: 10px 28px !important;
    font-size: 0.95rem !important;
    font-weight: 600 !important;
    line-height: 1.4 !important;
    height: auto !important;
    min-height: 44px;  /* mobile tap target */
    cursor: pointer;
    transition: var(--airi-transition);
    text-decoration: none !important;
    text-shadow: none !important;
    box-shadow: none !important;
    width: 100%;
}

.login form .button.button-primary:hover,
.login form .button-primary:hover,
.login form button[type="submit"]:hover,
.login form input[type="submit"]:hover {
    background-color: var(--airi-red-hover) !important;
    transform: translateY(-1px);
    box-shadow: var(--airi-shadow-sm) !important;
}

.login form .button.button-primary:focus,
.login form .button-primary:focus {
    background-color: var(--airi-red-hover) !important;
    box-shadow: 0 0 0 3px rgba(192, 0, 0, 0.20) !important;
}

/* ==========================================================================
   7. 2FA challenge — instruction text + alternate-method link
   ========================================================================== */

.two-factor-prompt,
.login p.two-factor-prompt {
    color: var(--airi-text-strong);
    font-size: 0.9375rem;
    line-height: 1.5;
    margin-bottom: 16px;
}

.backup-methods-wrap {
    margin-top: 16px;
    padding-top: 16px;
    border-top: 1px solid var(--airi-border);
}
.backup-methods-wrap ul {
    list-style: none;
    margin: 0;
    padding: 0;
}
.backup-methods-wrap li {
    margin: 0;
    padding: 4px 0;
}
.backup-methods-wrap a {
    color: var(--airi-red);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-size: 0.9375rem;
    font-weight: 500;
}
.backup-methods-wrap a:hover {
    color: var(--airi-red-hover);
}

/* ASE 2FA button extras — spinner + checkmark — keep them readable */
.asenha-2fa-btn-spinner {
    color: var(--airi-white);
}
.asenha-2fa-btn-checkmark {
    color: var(--airi-white);
}

/* ==========================================================================
   8. Footer links — Lost password, Back to homepage, Register
   ========================================================================== */

#nav,
#backtoblog {
    text-align: center;
    margin: 16px 0 8px;
    font-size: 0.875rem;
    padding: 0;
}
#nav a,
#backtoblog a {
    color: var(--airi-red);
    text-decoration: underline;
    text-underline-offset: 3px;
    font-weight: 500;
}
#nav a:hover,
#backtoblog a:hover,
#nav a:focus,
#backtoblog a:focus {
    color: var(--airi-red-hover);
    box-shadow: none;
}

/* Remember-Me / Log-In gap — v5.2.55 ultra-specific.
   v5.2.47 + v5.2.54 lost the rendering battle (operator screenshots showed
   no change). Using ALL of: max specificity, !important, padding (harder to
   override than margin), AND a sibling selector for guaranteed gap. */
html body.login p.forgetmenot,
html body.login .forgetmenot,
html body.login form#loginform p.forgetmenot {
    margin: 16px 0 0 0 !important;
    padding-bottom: 24px !important;
    font-size: 0.875rem !important;
}
html body.login p.submit,
html body.login .submit,
html body.login form#loginform p.submit {
    padding-top: 24px !important;
    margin-top: 0 !important;
}
/* Sibling-combinator fallback — guaranteed gap regardless of margin collapse */
html body.login p.forgetmenot + p.submit,
html body.login .forgetmenot + .submit {
    margin-top: 24px !important;
}
.login .forgetmenot input[type="checkbox"] {
    accent-color: var(--airi-red);
    margin-right: 6px;
}

/* ==========================================================================
   9. Notices — error / success / info
   ========================================================================== */

.login #login_error,
.login .message,
.login .notice {
    border-radius: var(--airi-radius);
    border-left: 4px solid var(--airi-red);
    background: var(--airi-bg-lighter);
    color: var(--airi-text-strong);
    padding: 12px 16px;
    margin-bottom: 16px;
    box-shadow: none;
    font-size: 0.9375rem;
}
.login .message {
    border-left-color: var(--airi-text-medium);
}
.login .notice-success,
.login .updated {
    border-left-color: #2E7D32;
}

/* ==========================================================================
   10. Mobile — keep the 6-digit TOTP input usable
   ========================================================================== */

@media (max-width: 480px) {
    #login {
        width: 92vw;
        padding: 16px 0;
    }
    #loginform,
    .login form {
        padding: 20px 18px 18px;
    }
    body.login h1 a {
        width: 240px;
        height: 64px;
    }
    .login form input#authcode {
        font-size: 1.125rem;
        letter-spacing: 0.10em;
    }
}

/* ==========================================================================
   11. Fix WordPress tiny "Privacy Policy" link in footer
   ========================================================================== */

.privacy-policy-page-link a {
    color: var(--airi-text-medium);
    font-size: 0.8125rem;
}
.privacy-policy-page-link a:hover {
    color: var(--airi-red);
}