/**
 * lmin Login — Neobrutalism Skin for wp-login.php
 *
 * Self-contained: tokens copied from the theme's lmin-variables.css
 * (wp-login.php never loads the theme, so tokens are redeclared here).
 * Loads AFTER auth.css (enqueue dependency 'lmin-auth-login') so it wins
 * cascade ties; auth.css's !important rules on .lmin-google-btn are matched
 * with !important here on purpose (cascade order alone cannot beat !important).
 *
 * @package lmin
 */

/* ============================================================
   Tokens (light) — mirrors themes/lmin/assets/css/lmin-variables.css
   ============================================================ */

:root {
	--lmin-font-sans: "Plus Jakarta Sans", Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
	--step--1: clamp(0.8333rem, 0.7754rem + 0.2899vw, 1rem);
	--step-0: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);
	--step-1: clamp(1.2rem, 1.0739rem + 0.6304vw, 1.5625rem);
	--step-2: clamp(1.44rem, 1.2615rem + 0.8924vw, 1.9531rem);

	--nb-border-width: 2px;
	--nb-border-color: #0F172A;
	--nb-border: 2px solid #0F172A;
	--nb-shadow: 4px 4px 0 #0F172A;
	--nb-shadow-sm: 2px 2px 0 #0F172A;
	--nb-shadow-lg: 6px 6px 0 #0F172A;
	--nb-shadow-press: 0 0 0 #0F172A;
	--nb-radius: 0;
	--nb-radius-sm: 4px;
	--nb-accent: #2563EB;
	--nb-accent-hover: #1D4ED8;
	--nb-accent-fg: #FFFFFF;
	--nb-transition: transform 0.1s ease, box-shadow 0.1s ease, background-color 0.1s ease;
	--nb-focus-outline: 2px solid #2563EB;
	--nb-focus-offset: 2px;
	/* Button padding — fluid, mirrors --nb-btn-padding-* in
	   themes/lmin/assets/css/lmin-variables.css (which is NOT enqueued on
	   wp-login.php, so values are inlined here). --space-2xs 8→10px vertical,
	   --space-m 24→30px horizontal; -sm = --space-3xs / --space-s. */
	--nb-btn-padding-y: clamp(0.5rem, 0.4565rem + 0.2174vw, 0.625rem);
	--nb-btn-padding-x: clamp(1.5rem, 1.3696rem + 0.6522vw, 1.875rem);
	--nb-btn-padding-y-sm: clamp(0.25rem, 0.2283rem + 0.1087vw, 0.3125rem);
	--nb-btn-padding-x-sm: clamp(1rem, 0.913rem + 0.4348vw, 1.25rem);

	--login-bg: #F7F8F9;
	--login-surface: #FFFFFF;
	--login-text: #0F172A;
	--login-text-muted: #475569;
	/* #B91C1C on #FEE2E2 = ~4.9:1 (WCAG 1.4.3; #DC2626 was 3.94:1) */
	--login-error: #B91C1C;
	--login-error-bg: #FEE2E2;
	--login-success-bg: #DCFCE7;
	--login-success: #15803D;
}

/* ============================================================
   Dark-mode token overrides (driven by data-theme attribute,
   set by the no-flash script injected via login_head priority 0)
   ============================================================ */

[data-theme="dark"] {
	--nb-border-color: #E2E8F0;
	--nb-shadow: 4px 4px 0 #E2E8F0;
	--nb-shadow-sm: 2px 2px 0 #E2E8F0;
	--nb-shadow-lg: 6px 6px 0 #E2E8F0;
	--nb-shadow-press: 0 0 0 #E2E8F0;
	--nb-border: 2px solid #E2E8F0;

	--login-bg: #0F172A;
	--login-surface: #1E293B;
	--login-text: #F1F5F9;
	--login-text-muted: #94A3B8;
	/* #F87171 on #450A0A = ~5.9:1, #4ADE80 on #052E16 = ~7.2:1 (WCAG 1.4.3) */
	--login-error: #F87171;
	--login-error-bg: #450A0A;
	--login-success: #4ADE80;
	--login-success-bg: #052E16;

	--nb-accent: #3B82F6;
	--nb-accent-hover: #60A5FA;
}

/* ============================================================
   Page — Background & Typography
   ============================================================ */

body.login {
	background: var(--login-bg);
	font-family: var(--lmin-font-sans);
}

/* ============================================================
   Card — the #login wrapper becomes the single nb card
   ============================================================ */

#login {
	background: var(--login-surface);
	border: var(--nb-border);
	box-shadow: var(--nb-shadow-lg);
	border-radius: var(--nb-radius);
	padding: 32px 28px;
	margin: 8% auto;
	width: 360px;
}

/* ============================================================
   Logo
   ============================================================ */

/* Keep the existing inline style (display:none when no logo uploaded). */
.login h1 a {
	margin-bottom: 0;
}

/* Site-name text fallback (auth.css inline style hardcodes color #1e293b
   for light mode — we restyle everything else; dark override below). */
.login h1::after {
	font-size: var(--step-2);
	font-weight: 800;
	color: var(--login-text);
	display: block;
	margin: 0 0 20px;
}

/* ============================================================
   Kill WP's inner cards — #login is the only card
   ============================================================ */

.login form {
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	padding: 0;
}

#loginform,
#registerform,
#lostpasswordform,
#resetpassform {
	background: transparent !important;
	border: none !important;
	box-shadow: none !important;
	border-radius: 0 !important;
}

/* ============================================================
   Form elements
   ============================================================ */

.login form label {
	font-size: var(--step--1);
	font-weight: 600;
	color: var(--login-text);
	margin-bottom: 6px;
	display: block;
}

.login input[type=text],
.login input[type=password],
.login input[type=email],
.login form .input {
	border: var(--nb-border);
	border-radius: var(--nb-radius-sm);
	background: var(--login-surface);
	color: var(--login-text);
	padding: 11px 14px;
	font-size: var(--step--1);
	width: 100%;
	box-sizing: border-box;
}

.login input[type=text]:focus,
.login input[type=password]:focus,
.login input[type=email]:focus,
.login form .input:focus {
	outline: var(--nb-focus-outline);
	outline-offset: var(--nb-focus-offset);
	box-shadow: var(--nb-shadow-sm);
	border-color: var(--nb-border-color);
}

#rememberme {
	accent-color: var(--nb-accent);
	width: 16px;
	height: 16px;
}

#wp-submit {
	background: var(--nb-accent);
	color: var(--nb-accent-fg);
	border: var(--nb-border);
	border-radius: var(--nb-radius-sm);
	box-shadow: var(--nb-shadow);
	padding: 0;
	font-size: var(--step--1);
	font-weight: 700;
	cursor: pointer;
	transition: var(--nb-transition);
	width: 100%;
}

#wp-submit:hover {
	background: var(--nb-accent-hover);
}

#wp-submit:active {
	transform: translate(4px, 4px);
	box-shadow: var(--nb-shadow-press);
}

/* ============================================================
   Messages & errors (never hidden — security constraint #2)
   ============================================================ */

.login .message,
.login .success {
	background: var(--login-success-bg);
	border: var(--nb-border);
	border-left: 4px solid var(--login-success);
	border-radius: var(--nb-radius);
	/* padding: 14px 16px; */
	margin: 0 0 20px;
	color: var(--login-success);
}

/* Specificity .login #login_error matches auth.css so the later load order wins */
.login #login_error,
.login .lmin-auth-error {
	background: var(--login-error-bg);
	border: var(--nb-border);
	border-left: 4px solid var(--login-error);
	border-radius: var(--nb-radius);
	padding: 14px 16px;
	margin: 0 0 20px;
	color: var(--login-error);
}

/* ============================================================
   Links, nav, backtoblog
   ============================================================ */

/* Specificity matches auth.css (.login #nav a) so the later load order wins */
.login #nav a,
.login #backtoblog a {
	color: var(--nb-accent);
	text-decoration: none;
	font-size: var(--step--1);
}

.login #nav a:hover,
.login #backtoblog a:hover {
	color: var(--nb-accent-hover);
	text-decoration: underline;
}

.login #nav,
.login #backtoblog {
	text-align: center;
	padding: 0;
	margin: 24px 0 0;
}

/* ============================================================
   Google section + divider
   ============================================================ */

.lmin-login-divider span {
	color: var(--login-text-muted);
}

.lmin-login-divider::before,
.lmin-login-divider::after {
	background: var(--nb-border-color);
}

.lmin-google-heading {
	color: var(--login-text-muted);
}

/* Google button — auth.css uses !important on ~10 properties, so these
   must also be !important to override (cascade order alone cannot). */
.lmin-google-btn {
	display: inline-flex !important;
	align-items: center;
	justify-content: center;
	gap: 10px;
	width: 100%;
	padding: var(--nb-btn-padding-y) var(--nb-btn-padding-x) !important;
	margin: 0 0 0 !important;
	background-color: var(--login-surface) !important;
	color: var(--login-text) !important;
	border: var(--nb-border) !important;
	border-radius: var(--nb-radius-sm) !important;
	font-family: var(--lmin-font-sans) !important;
	font-size: var(--step--1) !important;
	font-weight: 600 !important;
	text-decoration: none !important;
	cursor: pointer;
	transition: var(--nb-transition);
	box-sizing: border-box;
	box-shadow: var(--nb-shadow) !important;
}

.lmin-google-btn:hover {
	background-color: var(--login-surface) !important;
	box-shadow: var(--nb-shadow-sm) !important;
	transform: translate(2px, 2px);
}

.lmin-google-btn:active {
	transform: translate(4px, 4px) !important;
	box-shadow: var(--nb-shadow-press) !important;
}

/* ============================================================
   Turnstile container (kept visible when auth.js unhides it —
   never display:none !important here; inline style handles default)
   ============================================================ */

#lmin-turnstile-auth-container {
	margin: 20px 0 16px;
	text-align: center;
}

/* ============================================================
   Accessibility — visible focus everywhere (WCAG 2.4.7)
   ============================================================ */

.login :focus-visible {
	outline: var(--nb-focus-outline);
	outline-offset: var(--nb-focus-offset);
}

/* auth.css hardcodes outline:none on the submit button — restore the nb
   focus outline (accessibility constraint #3 / WCAG 2.4.7) */
.login #wp-submit:focus-visible {
	outline: var(--nb-focus-outline);
	outline-offset: var(--nb-focus-offset);
}

/* ============================================================
   Dark-mode force overrides — WP core + auth.css hardcode colors
   that tokens don't reach
   ============================================================ */

[data-theme="dark"] body.login {
	background: var(--login-bg);
}

/* Logo fallback: inline style from enqueue_login_assets() hardcodes
   color #1e293b — invisible on the dark card. !important beats inline
   author styles only with the same cascade origin; inline style wins
   over stylesheet rules, so this must live in a stylesheet rule with
   !important to match the author-origin inline declaration. */
[data-theme="dark"] .login h1::after {
	color: var(--login-text) !important;
}

[data-theme="dark"] .login input[type=text],
[data-theme="dark"] .login input[type=password],
[data-theme="dark"] .login input[type=email],
[data-theme="dark"] .login form .input {
	background: var(--login-surface) !important;
	color: var(--login-text) !important;
	border-color: var(--nb-border-color) !important;
}

[data-theme="dark"] .login form label {
	color: var(--login-text) !important;
}

[data-theme="dark"] .login #nav a,
[data-theme="dark"] .login #backtoblog a {
	color: var(--nb-accent);
}

[data-theme="dark"] .login .forgetmenot label {
	color: var(--login-text-muted) !important;
}

/* ============================================================
   Interim login (modal iframe)
   ============================================================ */

body.login.interim-login #login {
	box-shadow: var(--nb-shadow-sm);
	padding: 16px;
	margin: 0;
}

/* ============================================================
   Split Screen — Option B (docs/plans/login-enhancement-plan.md)
   Toggle is injected by render_theme_toggle() via login_message;
   brand panel is injected by render_login_footer() via
   login_footer. The login_footer output is a direct child of
   body.login AFTER #login (verified in live DOM), so flex
   order:-1 places the panel left without touching any #login
   markup.
   ============================================================ */

/* Panel tokens — appended block merges with the :root blocks above */
:root {
	--login-brand-bg: #2563EB;
	--login-brand-fg: #FFFFFF;
	--login-brand-muted: rgba(255, 255, 255, 0.78);
	--login-brand-stripe: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] {
	/* Deeper accent wash in dark mode (plan §5: "accent #1D4ED8 darker wash") */
	--login-brand-bg: #1D4ED8;
	--login-brand-muted: rgba(255, 255, 255, 0.75);
	--login-brand-stripe: rgba(255, 255, 255, 0.06);
}

/* .screen-reader-text — wp-login.php loads neither the theme's style.css
   nor wp-admin's common.css, so the toggle's hidden label span (and WP
   core's own h1.screen-reader-text) need this locally. */
body.login .screen-reader-text {
	border: 0;
	clip: rect(1px, 1px, 1px, 1px);
	clip-path: inset(50%);
	height: 1px;
	width: 1px;
	margin: -1px;
	overflow: hidden;
	padding: 0;
	position: absolute;
}

/* ── Page: homepage pinstripe + flex split ──
   Pattern copied from style.css body rules (light lines 30-37, dark 44-53). */
body.login {
	display: flex;
	min-height: 100vh;
	margin: 0;
	padding: 0;
	background-color: #F5F2EC;
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 39px,
		rgba(0, 0, 0, 0.04) 39px,
		rgba(0, 0, 0, 0.04) 40px
	);
}

[data-theme="dark"] body.login {
	background-color: #0F172A;
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 39px,
		rgba(255, 255, 255, 0.03) 39px,
		rgba(255, 255, 255, 0.03) 40px
	);
}

/* ── Brand panel (left, ~45%) ── */

body.login .lmin-login-brand {
	order: -1;
	flex: 0 0 45%;
	display: flex;
	flex-direction: column;
	justify-content: center;
	box-sizing: border-box;
	min-height: 100vh;
	padding: 48px;
	background-color: var(--login-brand-bg);
	background-image: repeating-linear-gradient(
		90deg,
		transparent,
		transparent 39px,
		var(--login-brand-stripe) 39px,
		var(--login-brand-stripe) 40px
	);
	border-right: var(--nb-border);
}

body.login .lmin-brand-mark {
	display: flex;
	align-items: center;
	gap: 8px;
	font-size: clamp(2rem, 1.5rem + 2vw, 2.75rem);
	font-weight: 800;
	letter-spacing: -0.02em;
	color: var(--login-brand-fg);
}

body.login .lmin-brand-square {
	width: 0.35em;
	height: 0.35em;
	background: var(--login-brand-fg);
}

body.login .lmin-brand-tagline {
	margin: 12px 0 0;
	font-size: var(--step-1);
	font-weight: 600;
	color: var(--login-brand-muted);
}

body.login .lmin-brand-features {
	list-style: none;
	margin: 32px 0 0;
	padding: 0;
	display: grid;
	gap: 14px;
}

body.login .lmin-brand-features li {
	display: flex;
	align-items: center;
	gap: 12px;
	font-size: var(--step-0);
	font-weight: 600;
	color: var(--login-brand-fg);
}

body.login .lmin-brand-features li::before {
	content: "";
	flex: 0 0 auto;
	width: 9px;
	height: 9px;
	background: var(--login-brand-fg);
}

/* ── Form side: #login loses its card, sits on the pinstripe bg ── */

body.login #login {
	box-sizing: border-box;
	background: transparent;
	border: none;
	box-shadow: none;
	border-radius: 0;
	width: 100%;
	max-width: 400px;
	margin: auto;
	padding: 40px 32px;
}

/* ── Labels: small caps, letter-spaced ── */

body.login form label {
	text-transform: uppercase;
	letter-spacing: 0.08em;
	font-size: 0.75rem;
}

/* ── Inline "Lost your password?" ──
   login-theme-toggle.js relocates #nav into .user-pass-wrap and tags it
   .lmin-nav-inline (pure CSS cannot reparent #nav — it is a sibling of
   the form, not a descendant of .user-pass-wrap). Without JS the link
   stays below the form with the default centered styling above. */
body.login .user-pass-wrap {
	display: flex;
	flex-wrap: wrap;
	align-items: baseline;
}

body.login .user-pass-wrap > label {
	order: 0;
}

body.login #nav.lmin-nav-inline {
	order: 1;
	flex: 1 1 auto;
	margin: 0;
	padding: 0;
	text-align: right;
}

body.login .user-pass-wrap > .wp-pwd {
	order: 2;
	flex: 1 1 100%;
}

/* ── Dark-mode toggle (fixed top-right) ── */

body.login .lmin-theme-toggle {
	position: fixed;
	top: 20px;
	right: 20px;
	z-index: 9999;
	display: inline-flex;
	align-items: center;
	justify-content: center;
	width: 44px;
	height: 44px;
	box-sizing: border-box;
	padding: 0;
	background: var(--login-surface);
	color: var(--login-text);
	border: var(--nb-border);
	border-radius: var(--nb-radius-sm);
	box-shadow: var(--nb-shadow-sm);
	cursor: pointer;
	transition: var(--nb-transition);
}

body.login .lmin-theme-toggle:active {
	transform: translate(2px, 2px);
	box-shadow: var(--nb-shadow-press);
}

/* Icon swap — light shows moon, dark shows sun (CSS-driven; mirrors the
   theme's style.css rules, which are NOT loaded on wp-login.php) */
body.login .lmin-theme-icon-sun {
	display: none;
}

[data-theme="dark"] body.login .lmin-theme-icon-moon {
	display: none;
}

[data-theme="dark"] body.login .lmin-theme-icon-sun {
	display: block;
}

/* ── interim-login guard: wp-admin modal iframe restores the compact card ── */

body.login.interim-login {
	display: block;
	min-height: 0;
	background: var(--login-bg);
	background-image: none;
}

body.login.interim-login .lmin-login-brand,
body.login.interim-login .lmin-theme-toggle {
	display: none;
}

body.login.interim-login #login {
	background: var(--login-surface);
	border: var(--nb-border);
	border-radius: var(--nb-radius);
	box-shadow: var(--nb-shadow-sm);
	padding: 16px;
	margin: 0;
	width: 360px;
	max-width: none;
}

/* ── Mobile ≤900px: brand collapses to a compact strip ── */

@media (max-width: 900px) {
	body.login {
		flex-direction: column;
	}

	body.login .lmin-login-brand {
		flex: 0 0 auto;
		width: 100%;
		min-height: 0;
		padding: 24px 16px;
		border-right: none;
		border-bottom: var(--nb-border);
	}

	body.login .lmin-brand-features {
		display: none;
	}

	body.login .lmin-brand-mark {
		font-size: 1.5rem;
	}

	body.login .lmin-brand-tagline {
		margin-top: 4px;
		font-size: var(--step--1);
	}

	/* Full width minus 32px gutters (16px each side) */
	body.login #login {
		max-width: none;
		margin: 24px 0;
		padding: 0 0 40px;
	}
}