/* ==========================================================================
   wp-login.php — CJ's Brew & BBQ branding

   Covers every screen core serves from this file: sign in, lost password,
   choose a new password, and the confirmation/error states. Styling the shell
   rather than rebuilding the flow means the reset-key logic stays core's.

   THEME: the site's dark/light preference lives in localStorage and user meta,
   and neither is available here — wp-login.php runs outside the theme and often
   before anyone is identified. So this follows the OS via prefers-color-scheme,
   which is the honest reading of the "must work in both themes" rule for a page
   that has no theme class to read.
   ========================================================================== */

:root {
	--cjbb-login-bg: #0F0F0F;
	--cjbb-login-surface: #1A1A1A;
	--cjbb-login-border: #2E2E2E;
	--cjbb-login-text: #F5F5F5;
	--cjbb-login-muted: #B3B3B3;
	--cjbb-login-orange: #FF5810;
	/* --cjbb-login-logo is injected by CJBB_Login_Screen::enqueue(). */
}

body.login {
	background: var(--cjbb-login-bg);
	font-family: 'Rubik', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
	color: var(--cjbb-login-text);
}

/* ---------- Logo ---------- */

body.login h1 {
	margin-bottom: 8px;
}

/* Full-width box with background-size:contain, so the logo is centred and
   correctly scaled whatever its aspect ratio — the mascot is square (300x300),
   a wordmark would not be, and neither should be stretched.

   Core hides the anchor's text with text-indent/overflow and that is left
   alone deliberately: an earlier version here un-hid it as a "fallback" for a
   missing logo, which instead painted the site name straight over the logo in
   the normal case. A missing image leaving a gap is the better failure. */
body.login h1 a {
	background-image: var(--cjbb-login-logo, none);
	background-size: contain;
	background-position: center center;
	background-repeat: no-repeat;
	width: 100%;
	height: 120px;
	margin-bottom: 16px;
}

/* ---------- The card ---------- */

body.login form {
	background: var(--cjbb-login-surface);
	border: 1px solid var(--cjbb-login-border);
	border-radius: 12px;
	box-shadow: 0 8px 32px rgba(0, 0, 0, 0.45);
	padding: 28px 24px 24px;
	margin-top: 16px;
}

body.login form label,
body.login form .forgetmenot label {
	color: var(--cjbb-login-muted);
	font-size: 0.9rem;
	font-weight: 500;
}

/* ---------- Inputs — 2px border, 6px radius, 12px 16px padding ---------- */

body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"] {
	background: #0F0F0F;
	border: 2px solid var(--cjbb-login-border);
	border-radius: 6px;
	padding: 12px 16px;
	color: var(--cjbb-login-text);
	font-family: 'Rubik', sans-serif;
	font-size: 1rem;
	box-shadow: none;
	transition: border-color 0.15s;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus {
	border-color: var(--cjbb-login-orange);
	outline: 2px solid transparent;
	outline-offset: 2px;
	box-shadow: 0 0 0 3px rgba(255, 88, 16, 0.25);
}

/* The show/hide-password control core puts inside the field wrapper. */
body.login .wp-pwd .button.wp-hide-pw {
	color: var(--cjbb-login-muted);
	background: transparent;
	border: 0;
	box-shadow: none;
}

body.login .wp-pwd .button.wp-hide-pw:hover,
body.login .wp-pwd .button.wp-hide-pw:focus {
	color: var(--cjbb-login-orange);
	background: transparent;
	border: 0;
}

/* ---------- Buttons — Work Sans, square, capitalised ---------- */

body.login .button-primary,
body.login input[type="submit"] {
	background: var(--cjbb-login-orange) !important;
	border: 1px solid var(--cjbb-login-orange) !important;
	border-radius: 0 !important;
	color: #fff !important;
	font-family: 'Work Sans', sans-serif !important;
	font-weight: 500;
	font-size: 0.95rem;
	text-transform: capitalize;
	padding: 15px 25px !important;
	height: auto !important;
	line-height: 1.1 !important;
	width: 100%;
	text-shadow: none !important;
	box-shadow: none !important;
	transition: background 0.15s, border-color 0.15s;
}

body.login .button-primary:hover,
body.login .button-primary:focus,
body.login input[type="submit"]:hover,
body.login input[type="submit"]:focus {
	background: #E04A0A !important;
	border-color: #E04A0A !important;
	color: #fff !important;
}

/* Save Password is disabled by core's user-profile.js until a weak password is
   confirmed. Core's disabled rule is (0,3,0) !important and paints a light-grey
   slab that reads as a broken element on the dark card; this is (0,3,1). */
body.login .button-primary:disabled,
body.login .button-primary[disabled] {
	background: var(--cjbb-login-border) !important;
	border-color: var(--cjbb-login-border) !important;
	color: var(--cjbb-login-muted) !important;
	cursor: not-allowed;
}

/* "Generate Password" on the reset screen — the one secondary button wp-login
   serves. Core draws it in admin blue (~3:1 on the dark card, and off-brand). */
body.login .button.wp-generate-pw {
	background: transparent !important;
	border: 2px solid var(--cjbb-login-border) !important;
	border-radius: 0 !important;
	color: var(--cjbb-login-text) !important;
	font-family: 'Work Sans', sans-serif !important;
	font-weight: 500;
	font-size: 0.95rem;
	text-transform: capitalize;
	padding: 15px 25px !important;
	height: auto !important;
	line-height: 1.1 !important;
	width: 100%;
	margin: 0 0 8px;
	box-shadow: none !important;
	transition: border-color 0.15s, color 0.15s;
}

body.login .button.wp-generate-pw:hover,
body.login .button.wp-generate-pw:focus {
	background: transparent !important;
	border-color: var(--cjbb-login-orange) !important;
	color: var(--cjbb-login-orange) !important;
}

/* Password hint under "Confirm new password" — secondary text, not a heading. */
body.login .description.indicator-hint {
	color: var(--cjbb-login-muted);
	font-size: 0.85rem;
	margin-top: 8px;
}

/* Checkboxes ("Remember Me", "Confirm use of weak password"). Core draws a
   white box with an admin-blue tick; native + accent-color follows the scheme. */
body.login input[type="checkbox"] {
	appearance: auto;
	-webkit-appearance: checkbox;
	accent-color: var(--cjbb-login-orange);
	background: transparent;
	border: 0;
	box-shadow: none;
	width: 18px;
	height: 18px;
	margin: 0 6px 0 0;
	vertical-align: middle;
}

body.login input[type="checkbox"]:checked::before {
	content: none;
}

/* Core floats Remember Me and the submit, leaving them touching once the
   button is full width. Core zeroes it via `#login form p` (1,1,1), hence the id. */
body.login #login form .forgetmenot {
	margin-bottom: 14px;
}

/* ---------- Links under the form ---------- */

body.login #nav,
body.login #backtoblog {
	padding: 0 4px;
	margin-top: 14px;
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--cjbb-login-muted);
	font-size: 0.88rem;
	text-decoration: none;
	transition: color 0.15s;
}

body.login #nav a:hover,
body.login #backtoblog a:hover,
body.login #nav a:focus,
body.login #backtoblog a:focus {
	color: var(--cjbb-login-orange);
}

/* ---------- Messages, notices and errors ---------- */

body.login .message,
body.login .notice,
body.login #login_error,
body.login .success {
	background: var(--cjbb-login-surface);
	border: 1px solid var(--cjbb-login-border);
	border-left: 4px solid var(--cjbb-login-orange);
	border-radius: 6px;
	color: var(--cjbb-login-text);
	box-shadow: none;
	padding: 12px 16px;
}

body.login #login_error {
	border-left-color: #FF3355;
}

body.login .message a,
body.login #login_error a {
	color: var(--cjbb-login-orange);
}

/* Password strength meter — core's own colours are unreadable on dark. */
body.login #pass-strength-result {
	background: #0F0F0F;
	border: 1px solid var(--cjbb-login-border);
	border-radius: 6px;
	color: var(--cjbb-login-text);
}

body.login #pass-strength-result.short,
body.login #pass-strength-result.bad {
	border-color: #FF3355;
}

body.login #pass-strength-result.good {
	border-color: #FFB000;
}

body.login #pass-strength-result.strong {
	border-color: #00C851;
}

body.login .privacy-policy-page-link a {
	color: var(--cjbb-login-muted);
}

body.login .language-switcher {
	display: none;
}

/* ---------- Light mode — same structure, swapped surfaces ---------- */

@media (prefers-color-scheme: light) {
	:root {
		--cjbb-login-bg: #F5F5F5;
		--cjbb-login-surface: #FFFFFF;
		--cjbb-login-border: #E0E0E0;
		--cjbb-login-text: #111111;
		--cjbb-login-muted: #555555;
	}

	body.login input[type="text"],
	body.login input[type="password"],
	body.login input[type="email"],
	body.login #pass-strength-result {
		background: #FFFFFF;
	}

	body.login form {
		box-shadow: 0 8px 28px rgba(0, 0, 0, 0.10);
	}
}

/* ---------- Small screens ---------- */

@media (max-width: 480px) {
	body.login h1 a {
		height: 92px;
	}

	body.login form {
		padding: 22px 18px 18px;
	}
}