/* T-EP16 — EP-400 wp-admin login styles.
 *
 * Overrides WP default login styles to match the EP-400 auth shell:
 *   - Centred 320px white card on var(--cah-t2-bg-subtle).
 *   - Bee + BEEHIVE wordmark centred 132x60 at the top of the card.
 *   - H1 "Sign in" 24px Instrument Sans.
 *   - Dark-pill "Log in" CTA (brand-blue-600 bg, cream text).
 *   - Muted link "Use single-use email code instead →" → ?action=cah_otp.
 *
 * Tokens are pulled from cah-theme/style.css (loaded on the front-end
 * via theme.json). wp-login.php doesn't load the theme stylesheet by
 * default — the tokens we need are inlined here as a small subset so
 * the page is self-contained against the proxy IAM gate (see T-G12).
 *
 * Convention: var(--cah-t2-*) only; composite .cah-c-* utility classes
 * for typography. Never raw hex.
 */

:root {
    --cah-t1-brand-blue-200: #BCBEC0;
    --cah-t1-brand-blue-600: #272D33;
    --cah-t1-brand-blue-700: #23292E;
    --cah-t1-brand-blue-800: #1C2024;
    --cah-t1-brand-cream-100: #F4F1E4;
    --cah-t1-neutral-white: #FFFFFF;
    --cah-t1-neutral-200: #E5E5E5;
    --cah-t1-neutral-700: #404040;
    --cah-t2-bg-default: var(--cah-t1-neutral-white);
    --cah-t2-bg-subtle: var(--cah-t1-brand-blue-200);
    --cah-t2-bg-knockout: var(--cah-t1-brand-blue-600);
    --cah-t2-bg-knockout-hover: var(--cah-t1-brand-blue-700);
    --cah-t2-content-default: var(--cah-t1-brand-blue-600);
    --cah-t2-content-subtle: var(--cah-t1-neutral-700);
    --cah-t2-content-knockout: var(--cah-t1-brand-cream-100);
    --cah-t2-border-default: var(--cah-t1-brand-blue-200);
    --cah-t2-border-subtle: var(--cah-t1-neutral-200);
}

/* Page shell — flip WP's default white background to the EP-400 subtle
 * bg and centre the card vertically. This is the legacy T-EP16 stopgap;
 * once `body.cah-ep400` is present (the theme adds it on every native
 * auth route), the EP-400 auth.css owns the page surface, so this rule
 * is scoped to `:not(.cah-ep400)` to avoid double-painting a grey page
 * behind the white card.
 */
body.login:not(.cah-ep400) {
    background: var(--cah-t2-bg-subtle) !important;
    color: var(--cah-t2-content-default);
    font-family: 'Instrument Sans', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
}

/* Card: 320px white centred shell.
 * !important on background + border to win against WP's login.min.css
 * which loads after this file on staging / production. */
.login #login {
    width: 100%;
    max-width: 320px;
    padding: 0;
    margin: 0 auto;
}

.login:not(.cah-ep400) form,
.login:not(.cah-ep400) .cah-auth-card {
    background: var(--cah-t2-bg-default) !important;
    border: 1px solid var(--cah-t2-border-default) !important;
    border-radius: 12px;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.04);
    padding: 32px 24px 24px;
    margin-top: 16px;
}

/* Bee + BEEHIVE wordmark, centred 132x60 above the form. The theme's
 * existing login_head block sets the background-image on .login h1 a;
 * we tighten the box to the EP-400 spec dimensions here. */
.login h1 a {
    width: 132px !important;
    height: 60px !important;
    margin: 0 auto 8px !important;
}

/* "Sign in" heading — render via login_headertext filter. WP styles
 * .login h1 a as the logo block; the visible heading sits inside the
 * form (we inject it via login_form action in the theme). */
.login .cah-auth-heading,
.login h1.cah-auth-heading {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 24px;
    line-height: 32px;
    font-weight: 400;
    color: var(--cah-t2-content-default);
    margin: 0 0 16px;
    text-align: center;
}

/* Form labels + inputs */
.login form label {
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--cah-t2-content-default);
}

.login form .input,
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
    border: 1px solid var(--cah-t2-border-subtle) !important;
    border-radius: 8px !important;
    padding: 12px 14px !important;
    background: var(--cah-t2-bg-default) !important;
    color: var(--cah-t2-content-default) !important;
    font-size: 14px;
    line-height: 20px;
    box-shadow: none !important;
}

/* Dark-pill "Log in" CTA — EP-400 primary button.
 * !important on bg + color to win against WP's .button-primary which
 * uses inline-equivalent specificity. */
.login form .button-primary,
.login form .wp-core-ui .button-primary,
.login .cah-auth-button {
    background: var(--cah-t2-bg-knockout) !important;
    color: var(--cah-t2-content-knockout) !important;
    border: 1px solid var(--cah-t2-bg-knockout) !important;
    border-radius: 999px !important;
    padding: 12px 24px !important;
    font-family: 'Instrument Sans', 'Inter', sans-serif !important;
    font-size: 14px !important;
    line-height: 20px !important;
    font-weight: 700 !important;
    width: 100%;
    height: auto;
    text-shadow: none !important;
    box-shadow: none !important;
    text-transform: none;
}

.login form .button-primary:hover,
.login .cah-auth-button:hover {
    background: var(--cah-t2-bg-knockout-hover) !important;
}

/* Muted "Use single-use email code instead →" link — injected via
 * login_form filter in the theme. */
.cah-login-otp-link {
    display: block;
    text-align: center;
    margin-top: 16px;
    font-family: 'Instrument Sans', 'Inter', sans-serif;
    font-size: 14px;
    line-height: 20px;
    color: var(--cah-t2-content-subtle);
    text-decoration: underline;
}

.cah-login-otp-link:hover,
.cah-login-otp-link:focus {
    color: var(--cah-t2-content-default);
}

/* Suppress the default WP "Lost your password?" link — master-admin
 * password reset goes through the cah-core MFA reset flow, and general
 * users use the OTP flow (no password). Per ticket notes. */
.login #nav,
.login #backtoblog {
    text-align: center;
    margin-top: 12px;
    font-size: 12px;
    color: var(--cah-t2-content-subtle);
}

.login #nav a[href*="action=lostpassword"] {
    display: none;
}

/* Subtitle pseudo above the card — the theme's login_head block
 * already adds the body::before subtitle; harmonise its colour. */
body.login::before {
    color: var(--cah-t2-content-subtle) !important;
}