/**
 * rcvda-core shared login-screen skin — wp-login.php (and its sibling flows:
 * lost password, reset, register, which share the same chrome).
 *
 * wp-login.php is a WordPress-core page: it renders WITHOUT the active theme, so
 * none of the rcvda-base `--wp--preset--color--*` tokens or the theme fonts are
 * available. Left alone it is the stock grey/blue WordPress login — jarring next
 * to the branded /account/ sign-in card and the "Log in with WordPress.com"
 * button the account form offers.
 *
 * This stylesheet is STRUCTURAL and site-agnostic: it styles the login chrome
 * entirely through semantic custom properties (`--l-*`). It carries NO colour
 * VALUES, no font URL and no logo image — those are injected inline per-site by
 * inc/login.php from the brand config (default = the rcvda-base family palette;
 * each site overrides via the `rcvda_login_brand` filter, e.g. its own logo).
 * That keeps this sheet static and cacheable and lets one file skin every
 * family site's login in its own brand.
 *
 * DARK MODE. wp-login.php does not load the theme, so the theme's dark-mode
 * script does not run here. inc/login.php prints a tiny inline script mirroring
 * the theme's own logic (rcvda-base/functions.php): it reads the shared
 * localStorage key `rcvda_theme_pref` and sets html[data-theme] to the stored
 * choice, falling back to the OS `prefers-color-scheme`. The token VALUES for
 * both modes are injected inline (`:root`, `html[data-theme="dark"]`, and the
 * `@media (prefers-color-scheme: dark) html:not([data-theme])` JS-off
 * fallback); the rules below merely consume `var(--l-*)`.
 */

/* ── Page ──────────────────────────────────────────────────────────────── */
body.login {
	background: var(--l-page);
	color: var(--l-text);
	font-family: var(--l-font, 'Atkinson Hyperlegible Next', 'Atkinson Hyperlegible', Verdana, Arial, sans-serif);
}

/* ── Logo (image + dimensions set inline from PHP per site) ─────────────── */
.login h1 a {
	width: 240px;
	height: 120px;
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	margin-bottom: 12px;
}

/* ── The form card ─────────────────────────────────────────────────────── */
.login form {
	background: var(--l-card);
	border: 1px solid var(--l-border);
	border-radius: 12px;
	box-shadow: var(--l-card-shadow);
	padding: 26px 24px 24px;
	margin-top: 20px;
}

.login form .input,
.login input[type="text"],
.login input[type="password"],
.login input[type="email"],
.login select {
	background: var(--l-field);
	border: 1px solid var(--l-border);
	border-radius: 8px;
	color: var(--l-text);
	font-size: 1rem;
	padding: 8px 10px;
}

.login form .input:focus,
.login input[type="text"]:focus,
.login input[type="password"]:focus,
.login input[type="email"]:focus,
.login select:focus {
	border-color: var(--l-link);
	box-shadow: 0 0 0 2px var(--l-focus-ring);
	outline: 2px solid transparent; /* keep a ring under forced-colors */
}

/* Hover / focus / active — WP core forms.css forces
   .wp-core-ui select:hover and :focus to color:#1e1e1e, which would render
   dark text on the dark field. Re-assert the token colours (equal specificity,
   this sheet loads after core) so the control stays legible in both modes. */
.login select:hover,
.login select:focus,
.login select:active {
	color: var(--l-text);
	background-color: var(--l-field);
}

/* Native option list when the select is open. */
.login select option {
	color: var(--l-text);
	background-color: var(--l-field);
}

.login label {
	color: var(--l-text);
	font-weight: 600;
}

.login .button.wp-hide-pw {
	color: var(--l-link);
	background: transparent;
	border: 0;
}

/* ── Primary button ("Sign in" / "Log In" / "Reset Password") ──────────── */
.login .button-primary,
.wp-core-ui .login .button-primary,
.login #wp-submit {
	background: var(--l-primary-bg);
	border-color: var(--l-primary-bg);
	color: var(--l-primary-fg);
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease;
}

.login .button-primary:hover,
.login .button-primary:focus,
.login #wp-submit:hover,
.login #wp-submit:focus {
	background: var(--l-primary-bg-hover);
	border-color: var(--l-primary-bg-hover);
	color: var(--l-primary-fg);
}

.login .button-primary:focus-visible,
.login #wp-submit:focus-visible {
	outline: 3px solid var(--l-accent);
	outline-offset: 2px;
}

/* ── Secondary buttons (language "Change" + any .button-secondary) ───────── */
/* The language switcher renders a plain input.button (NOT .button-secondary),
   so target it explicitly — otherwise it falls through to wp-core-ui's default
   .button hover, which DARKENS. Per our button rules (fundseekers-components
   .rfs-btn--ghost), the secondary/ghost hover takes an amber border with a
   LIGHTER fill, never darker, and an amber focus-visible ring. */
.login .button-secondary,
.wp-core-ui .login .button-secondary,
.login .language-switcher .button {
	background: var(--l-card);
	border: 1px solid var(--l-border);
	color: var(--l-text);
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease;
}

.login .button-secondary:hover,
.login .button-secondary:focus,
.wp-core-ui .login .button-secondary:hover,
.wp-core-ui .login .button-secondary:focus,
.login .language-switcher .button:hover,
.login .language-switcher .button:focus {
	background: var(--l-card);
	border-color: var(--l-accent);
	color: var(--l-text);
	/* Lift the fill (white-wash), matching the primary's hover idiom; on the
	   white light-mode card this is a no-op so it never darkens. */
	box-shadow: inset 0 0 0 1000px rgba(255, 255, 255, 0.16);
}

.login .button-secondary:focus-visible,
.login .language-switcher .button:focus-visible {
	outline: 3px solid var(--l-accent);
	outline-offset: 2px;
}

/* ── Jetpack SSO: "Log in with WordPress.com" ──────────────────────────── */
/* Ghost button matching /account/: outline + brand text, amber on hover.    */
.login .jetpack-sso.button,
.login .jetpack-sso-wrap .button,
.login .jetpack-sso-wrap .button-primary {
	background: transparent;
	border: 2px solid var(--l-ghost-border);
	color: var(--l-ghost-fg);
	border-radius: 8px;
	text-shadow: none;
	box-shadow: none;
	font-weight: 600;
}

.login .jetpack-sso.button:hover,
.login .jetpack-sso.button:focus,
.login .jetpack-sso-wrap .button:hover,
.login .jetpack-sso-wrap .button:focus {
	background: transparent;
	border-color: var(--l-accent);
	color: var(--l-ghost-fg);
}

/* Jetpack ships the SSO explanatory line ("You can now save time…") as a
   class-less <p> forced to #777 by `#loginform #jetpack-sso-wrap p` — ~2.5:1 on
   the dark card, below WCAG AA. Recolour it to the accessible muted token
   (out-specifies Jetpack: 2 IDs + a class). */
.login #login #jetpack-sso-wrap p {
	color: var(--l-muted);
}

/* Jetpack's OR separator sits over a divider line, with a hard-coded white
   background on the <span> to mask the line. That white chip shows through on
   the dark card as light text on white. Repaint the chip to the card surface
   (matches the mask effect in both modes); #login out-specifies Jetpack's own
   span-background rule. */
.login .jetpack-sso-or,
.login #login .jetpack-sso-or span {
	color: var(--l-muted);
	background-color: var(--l-card);
}

.login .jetpack-sso-toggle,
.login a.jetpack-sso-toggle {
	color: var(--l-link);
}

/* ── Links: lost password, back to site ────────────────────────────────── */
.login #nav a,
.login #backtoblog a {
	color: var(--l-link);
}

.login #nav a:hover,
.login #backtoblog a:hover,
.login #nav a:focus,
.login #backtoblog a:focus {
	color: var(--l-link-hover);
}

/* ── Notices ───────────────────────────────────────────────────────────── */
.login .message,
.login .success {
	background: var(--l-card);
	border-left-color: var(--l-link);
	color: var(--l-text);
}

.login #login_error {
	background: var(--l-card);
	border-left-color: var(--l-red);
	color: var(--l-text);
}

/* Privacy / language row at the foot of the box. */
.login .privacy-policy-page-link a,
.login .language-switcher label {
	color: var(--l-muted);
}