/**
 * Blideo Blames — wp-login.php theme (log in / register / lost password / reset).
 *
 * Reuses the global palette tokens from css/site-theme.css (enqueued alongside
 * this file, so every colour stays in sync with the rest of the site) and
 * overrides the stock WordPress login chrome to match the dark-purple theme.
 *
 * Selectors are prefixed with `body.login` to out-specify core's `.login` /
 * `.wp-core-ui` rules; this file is also enqueued after the core `login`
 * stylesheet, so it wins on equal-specificity ties too.
 */

/* --- Page background — match the site's dark gradient -------------------- */
body.login {
	background-color: var(--site-bg);
	background-image:
		radial-gradient(1100px 600px at 12% -8%, rgba(var(--site-accent-rgb), 0.2), transparent 60%),
		radial-gradient(900px 520px at 100% 0%, rgba(var(--site-accent-2-rgb), 0.14), transparent 55%),
		linear-gradient(180deg, var(--site-bg-2) 0%, var(--site-bg) 100%);
	background-attachment: fixed;
	color: var(--site-text);
	font-family: var(--site-font);
}

body.login #login {
	width: 360px;
	max-width: 92vw;
	padding: 6% 0 0;
}

/* --- Brand logo-mark in place of the WordPress logo ---------------------- */
body.login h1 a {
	background-image: url(../assets/logo-mark.svg);
	background-size: contain;
	background-position: center;
	width: 72px;
	height: 72px;
	border-radius: var(--site-radius-sm);
	box-shadow: 0 4px 14px rgba(var(--site-accent-rgb), 0.35);
	margin-bottom: 1.5rem;
}

/* --- The form "card" ----------------------------------------------------- */
body.login form {
	background: var(--site-popover-bg);
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius);
	box-shadow: var(--site-shadow-pop);
	padding: 1.6rem 1.5rem;
	margin-top: 1.25rem;
}

body.login form label,
body.login .forgetmenot label {
	color: var(--site-text);
	font-size: 0.9rem;
}

/* --- Text fields --------------------------------------------------------- */
body.login input[type="text"],
body.login input[type="password"],
body.login input[type="email"],
body.login input.input {
	background: var(--site-surface);
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-sm);
	color: var(--site-text);
	font-size: 1rem;
	padding: 0.6rem 0.7rem;
}

body.login input[type="text"]:focus,
body.login input[type="password"]:focus,
body.login input[type="email"]:focus,
body.login input.input:focus {
	outline: 2px solid var(--site-accent);
	outline-offset: 1px;
	border-color: transparent;
	box-shadow: none;
	color: var(--site-text);
}

body.login ::placeholder {
	color: rgba(var(--site-text-dim-rgb), 0.7);
}

/* --- Submit button — gradient pill matching site buttons ----------------- */
body.login .button-primary,
body.login #wp-submit {
	display: block;
	width: 100%;
	float: none;
	background: var(--site-accent-gradient);
	border: 1px solid transparent;
	border-radius: 999px;
	color: var(--site-on-accent);
	font-weight: 700;
	text-shadow: none;
	box-shadow: none;
	padding: 0.6rem 1.2rem;
	min-height: 0;
	transition: transform 0.12s ease, box-shadow 0.12s ease;
}

body.login .button-primary:hover,
body.login .button-primary:focus,
body.login #wp-submit:hover,
body.login #wp-submit:focus {
	transform: translateY(-1px);
	background: var(--site-accent-gradient);
	box-shadow: var(--site-glow-accent);
	color: var(--site-on-accent);
}

/* --- Show / hide password toggle — subtle ghost button ------------------- */
body.login .wp-pwd {
	position: relative;
}

body.login .wp-hide-pw {
	background: transparent;
	border: 0;
	box-shadow: none;
	color: var(--site-text-dim);
	transform: none;
}

body.login .wp-hide-pw:hover {
	background: transparent;
	color: var(--site-text);
	transform: none;
	box-shadow: none;
}

body.login .wp-hide-pw .dashicons {
	color: inherit;
}

body.login .forgetmenot {
	color: var(--site-text-dim);
}

/* --- Footer links: Register | Lost password, and "Go to site" ------------ */
body.login #nav,
body.login #backtoblog {
	text-align: center;
	margin-top: 1rem;
	text-shadow: none;
}

body.login #nav {
	color: var(--site-text-dim);
}

body.login #nav a,
body.login #backtoblog a {
	color: var(--site-accent-2);
}

body.login #nav a:hover,
body.login #backtoblog a:hover {
	color: var(--site-text-soft);
}

/* --- Notices: register info box, success / error messages ---------------- */
body.login .message,
body.login .notice,
body.login #login_error {
	background: var(--site-surface);
	border: 1px solid var(--site-border);
	border-left-width: 4px;
	border-radius: var(--site-radius-sm);
	color: var(--site-text);
	box-shadow: none;
}

body.login .message,
body.login .notice-info {
	border-left-color: var(--site-accent);
}

body.login .notice-success {
	background: var(--site-ok-bg);
	border-color: var(--site-ok-border);
	border-left-color: var(--site-ok);
	color: var(--site-ok-strong);
}

body.login #login_error {
	background: var(--site-err-bg);
	border-color: var(--site-err-border);
	border-left-color: var(--site-err);
	color: var(--site-err-strong);
}

body.login #login_error a,
body.login .message a,
body.login .notice a {
	color: var(--site-accent-2);
}

/* --- "Remember Me" checkbox — reuse the site's custom checkbox ------------ */
body.login input[type="checkbox"] {
	appearance: none;
	-webkit-appearance: none;
	width: 20px;
	height: 20px;
	border-radius: 6px;
	border: 2px solid var(--site-border);
	background: var(--site-surface);
	cursor: pointer;
	position: relative;
	vertical-align: -0.3em;
}

body.login input[type="checkbox"]:checked {
	background: var(--site-accent);
	border-color: var(--site-accent);
}

body.login input[type="checkbox"]:checked::before {
	content: "";
	position: absolute;
	left: 5px;
	top: 1px;
	width: 5px;
	height: 10px;
	border: solid var(--site-on-accent);
	border-width: 0 2px 2px 0;
	transform: rotate(45deg);
	background: none;
}

body.login input[type="checkbox"]:focus {
	outline: 2px solid var(--site-accent-2);
	outline-offset: 2px;
	box-shadow: none;
}

/* --- Reset-password screen: password strength meter ---------------------- */
/* The reset form (#resetpassform) reuses the field/button styling above; only
   the WordPress strength meter ships its own light background. */
body.login #pass-strength-result {
	background: var(--site-surface);
	border: 1px solid var(--site-border);
	border-radius: var(--site-radius-xs);
	color: var(--site-text);
}

body.login .indicator-hint {
	color: var(--site-text-dim);
}

body.login .wp-pwd .password-input {
	color: var(--site-text);
}