/**
 * SitesMonkey — Custom Login Page Styles
 *
 * Design: Modern 2026 — minimalistic, branded, WCAG 2.1 AA compliant.
 *
 * Architecture notes:
 * ─────────────────────────────────────────────────────────────────────
 * • Only cosmetic properties are overridden. Form structure, field order,
 *   and DOM elements injected by 2FA plugins (WP 2FA, Wordfence, Duo, etc.)
 *   are never touched — they inherit styling from the rules below.
 * • The logo background-image is NOT set here. It is injected at runtime
 *   via wp_add_inline_style() in LoginPage::enqueueAssets() so that the
 *   dynamic URL (stored in the database) can be used without a build step.
 * • All colour pairings meet WCAG 2.1 AA (≥ 4.5:1 normal text, ≥ 3:1 large).
 * ─────────────────────────────────────────────────────────────────────
 *
 * Colour palette (Tailwind-compatible naming):
 *   --ms-bg-from   : #eef2f7  (slate-50 tint)
 *   --ms-bg-to     : #dce8f5  (blue-100 tint)
 *   --ms-blue-600  : #2563eb  focus rings, links
 *   --ms-blue-700  : #1d4ed8  button background
 *   --ms-blue-800  : #1e40af  button hover, info text
 *   --ms-gray-50   : #f9fafb  input background
 *   --ms-gray-200  : #e5e7eb  input border
 *   --ms-gray-500  : #6b7280  muted text         (4.6:1 on white ✓ AA)
 *   --ms-gray-700  : #374151  label colour        (9.7:1 on white ✓ AAA)
 *   --ms-gray-900  : #111827  body text          (18.1:1 on white ✓ AAA)
 *   white on #1d4ed8 (button)                    (8.6:1 ✓ AAA)
 */

/* =============================================================
   1. Page background
   ============================================================= */

body.login {
    /* Subtle diagonal soft-gradient — immediately distinguishes the page
       from the default WP grey without being heavy. */
    background: linear-gradient(135deg, #eef2f7 0%, #dce8f5 55%, #e4ecfe 100%);
    background-attachment: fixed;
    min-height: 100vh;
    /* System-ui first, then Inter (Google Fonts if loaded by theme), then
       common sans-serif fallbacks. No external font load is triggered here. */
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI",
                 Roboto, Oxygen, Ubuntu, Cantarell, sans-serif;
    /* Flexbox: center the login form vertically and horizontally without
       extra margin causing unwanted scrollbars. */
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}

/* =============================================================
   2. Login card (#login)
   ============================================================= */

body.login #login {
    background: #ffffff;
    border-radius: 16px;
    /* Layered shadow: a broad ambient layer + a tighter crisp layer. */
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.08),
        0 2px 6px rgba(0, 0, 0, 0.04);
    padding: 40px 44px 32px;
    width: 500px;
    max-width: calc(100vw - 32px);
    /* Form is centered by flexbox on body.login, no extra margin needed. */
    margin: 0 auto;
    box-sizing: border-box;
}

/* =============================================================
   3. Logo / header area
   ============================================================= */

body.login h1 a {
    /* Square container — the monkey logo viewBox is 283×261 (≈ 1:0.92, nearly
       square), so a square box with background-size:contain gives the best fit.
       background-image is injected at runtime via wp_add_inline_style() in
       LoginPage::enqueueAssets(); a bundled SVG is used when no custom logo
       is uploaded. */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center center;
    width: 110px;
    height: 110px;
    display: block;
    margin: 0 auto 28px;
    text-indent: -9999px; /* hide the "WordPress" alt text from WP default */
    overflow: hidden;
    /* Remove the default box-shadow WordPress adds on focus */
    box-shadow: none;
    outline-offset: 4px;
}

body.login h1 a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 4px;
    border-radius: 4px;
}

/* =============================================================
   4. Form labels
   ============================================================= */

body.login label,
body.login .wp-pwd label {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.01em;
    display: block;
    margin-bottom: 4px;
}

/* =============================================================
   5. Text / password inputs
   ============================================================= */

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input[type="number"],
body.login input[type="tel"] {
    background: #f9fafb;
    border: 1.5px solid #e5e7eb;
    border-radius: 8px;
    /* Remove WP's default inset box-shadow */
    box-shadow: none;
    color: #111827;
    font-family: inherit;
    font-size: 15px;
    line-height: 1.5;
    padding: 10px 14px;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
    width: 100%;
    box-sizing: border-box;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input[type="number"]:focus,
body.login input[type="tel"]:focus {
    background: #ffffff;
    border-color: #2563eb;
    /* 3px ring with 15% opacity — visible but not overwhelming.
       The blue-on-white focus indicator satisfies WCAG 2.2 §3.3 (Focus Appearance). */
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.18);
    outline: none;
}

/* Password toggle button (WP 5.5+) */
body.login .wp-pwd .button.wp-hide-pw {
    background: transparent;
    border: none;
    box-shadow: none;
    color: #6b7280;
    padding: 0 8px;
    transition: color 0.15s ease;
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
    color: #2563eb;
    box-shadow: none;
}

/* =============================================================
   6. Submit button
   ============================================================= */

body.login .button-primary,
body.login .button-primary:visited,
body.login input#wp-submit,
body.login input[type="submit"].button-primary {
    background: #1d4ed8;
    border: none;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(29, 78, 216, 0.2);
    color: #ffffff;
    cursor: pointer;
    display: block;
    font-family: inherit;
    font-size: 15px;
    font-weight: 600;
    height: auto;
    letter-spacing: 0.02em;
    padding: 11px 20px;
    text-align: center;
    text-shadow: none;
    transition:
        background 0.15s ease,
        box-shadow 0.15s ease,
        transform  0.1s ease;
    width: 100%;
    line-height: 1.5;
}

body.login .button-primary:hover,
body.login input#wp-submit:hover {
    background: #1e40af;
    box-shadow: 0 4px 12px rgba(29, 78, 216, 0.3);
    transform: translateY(-1px);
    color: #ffffff;
}

body.login .button-primary:focus,
body.login input#wp-submit:focus {
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.4);
    outline: none;
    color: #ffffff;
}

body.login .button-primary:active,
body.login input#wp-submit:active {
    background: #1e3a8a;
    box-shadow: none;
    transform: translateY(0);
    color: #ffffff;
}

/* =============================================================
   7. "Remember me" checkbox row
   ============================================================= */

/* Re-order the form so Login + Remember me appear ABOVE the passkey divider. */
body.login #loginform {
    display: flex;
    flex-direction: column;
}

body.login .submit {
    order: 4;
}

body.login .forgetmenot {
    order: 5;
    display: flex;
    align-items: center;
    gap: 10px;
    margin: 10px 0 0;
}

body.login #monkeysm-passkey-login {
    order: 6;
    margin: 16px 0 0;
}

body.login .forgetmenot input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    cursor: pointer;
    flex-shrink: 0;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 1.5px solid #cbd5e1;
    border-radius: 4px;
    background: #ffffff;
    display: grid;
    place-content: center;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background 0.15s ease;
}

body.login .forgetmenot input[type="checkbox"]::before {
    content: "";
    width: 11px;
    height: 11px;
    /* Checkmark drawn with clip-path — no font dependency */
    background: #1d4ed8;
    clip-path: polygon(14% 44%, 0% 65%, 50% 100%, 100% 17%, 80% 0%, 43% 62%);
    transform: scale(0);
    transition: transform 0.12s ease-in-out;
}

body.login .forgetmenot input[type="checkbox"]:checked {
    border-color: #1d4ed8;
    background: #eff6ff;
}

body.login .forgetmenot input[type="checkbox"]:checked::before {
    transform: scale(1);
}

body.login .forgetmenot input[type="checkbox"]:focus-visible {
    outline: none;
    box-shadow: 0 0 0 3px rgba(37, 99, 235, 0.2);
    border-color: #2563eb;
}

body.login .forgetmenot label {
    color: #374151;
    font-size: 13px;
    font-weight: 500;
    margin-bottom: 0;
    cursor: pointer;
    line-height: 1.35;
}

/* =============================================================
   8. Submit row
   ============================================================= */

body.login .submit {
    /* Top margin from the password field in the new order. */
    margin-top: 20px;
    margin-bottom: 0;
    padding: 0;
}

/* =============================================================
   9. Navigation links (#nav, #backtoblog)
   ============================================================= */

body.login #nav {
    margin-top: 16px;
    margin-bottom: 0;
    padding: 0;
    text-align: center;
}

body.login #backtoblog {
    margin-top: 8px;
    margin-bottom: 0;
    padding: 0;
    text-align: center;
}

body.login #nav a,
body.login #backtoblog a {
    color: #4b5563;
    font-size: 13px;
    text-decoration: none;
    transition: color 0.15s ease;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
    color: #2563eb;
    text-decoration: underline;
    outline: none;
}

body.login #nav a:focus-visible,
body.login #backtoblog a:focus-visible {
    outline: 2px solid #2563eb;
    outline-offset: 2px;
    border-radius: 2px;
}

/* =============================================================
   10. Error & info messages
   ============================================================= */

body.login #login_error {
    background: #fef2f2;
    border: none;
    border-left: 4px solid #f87171;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    color: #991b1b;
    font-size: 13px;
    margin-bottom: 20px;
    padding: 12px 16px;
}

body.login .message,
body.login #login .message {
    background: #eff6ff;
    border: none;
    border-left: 4px solid #60a5fa;
    border-radius: 0 8px 8px 0;
    box-shadow: none;
    color: #1e40af;
    font-size: 13px;
    margin-bottom: 20px;
    padding: 12px 16px;
}

body.login #login_error a,
body.login .message a {
    color: inherit;
    text-decoration: underline;
}

/* =============================================================
   11. Form dividers & field groups
       (2FA plugins commonly inject <p> or <div> elements — these
        rules ensure they inherit the same spacing and typography
        without breaking their own structural CSS)
   ============================================================= */

body.login form p {
    margin-bottom: 16px;
}

body.login form .login-username,
body.login form .login-password {
    margin-bottom: 16px;
}

/* =============================================================
   12. MonkeySoft login footer
       Rendered via LoginPage::renderFooter() into the login_footer hook.
       Kept intentionally small and unobtrusive.
   ============================================================= */

.monkeysoft-login-footer {
    box-sizing: border-box;
    color: #9ca3af;
    font-family: -apple-system, BlinkMacSystemFont, "Inter", "Segoe UI", sans-serif;
    font-size: 11px;
    line-height: 1.6;
    margin: 0 auto;
    max-width: 360px;
    padding: 14px 16px 24px;
    text-align: center;
    width: 100%;
}

.monkeysoft-login-footer p {
    margin: 0;
}

.monkeysoft-heart {
    color: #e25555;
}

.monkeysoft-login-footer a {
    color: #9ca3af;
    text-decoration: none;
    transition: color 0.15s ease;
}

.monkeysoft-login-footer a:hover {
    color: #6b7280;
    text-decoration: underline;
}

/* =============================================================
   13. Responsive — narrow viewports (< 480px)
   ============================================================= */

@media (max-width: 480px) {
    body.login #login {
        border-radius: 12px;
        margin: 24px auto;
        padding: 28px 24px 24px;
        width: auto;
    }

    body.login h1 a {
        /* Keep square proportion on small screens */
        width: 80px;
        height: 80px;
    }

    body.login .button-primary,
    body.login input#wp-submit {
        font-size: 14px;
        padding: 10px 16px;
    }

    .monkeysoft-login-footer {
        padding: 12px 16px 20px;
    }
}