/**
 * WHF Login Page Theme
 *
 * Custom login, registration, and password reset styling
 * with WHF branding — white background, dark text, brand red accents.
 *
 * @package WHF_Core
 */

/* ---------- Variables ---------- */
:root {
	--whf-red: #d61b26;
	--whf-red-dark: #b01c24;
	--whf-red-light: #f7d1d3;
	--whf-teal: #1b7f77;
	--whf-dark: #13100d;
	--whf-text: #1f1f1f;
	--whf-text-light: #434343;
	--whf-border: #d0d0d0;
	--whf-bg: #ffffff;
	--whf-bg-alt: #f5f5f5;
}

/* ---------- Page Background ---------- */
body.login {
	background: var(--whf-bg-alt);
}

/* ---------- Logo ---------- */
#login h1 a,
.login h1 a {
	width: 200px;
	height: 60px;
	margin: 0 auto 24px;
	background-size: contain;
	background-repeat: no-repeat;
	background-position: center;
	text-indent: -9999px;
	overflow: hidden;
	display: block;
}

/* ---------- Login Form ---------- */
.login form {
	background: var(--whf-bg);
	border: 1px solid var(--whf-border);
	border-radius: 4px;
	box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}

.login form .input,
.login form input[type="text"],
.login form input[type="password"],
.login form input[type="email"] {
	border-color: var(--whf-border);
	background: var(--whf-bg);
	color: var(--whf-text);
}

.login form .input:focus,
.login form input[type="text"]:focus,
.login form input[type="password"]:focus,
.login form input[type="email"]:focus {
	border-color: var(--whf-red);
	box-shadow: 0 0 0 1px var(--whf-red);
}

/* Labels */
.login label {
	color: var(--whf-text);
}

/* ---------- Primary Button ---------- */
.login .button-primary,
.wp-core-ui .button-primary {
	background: var(--whf-red);
	border: none;
	color: #fff;
	box-shadow: none;
	text-shadow: none;
	border-radius: 4px;
	font-weight: 600;
	padding: 6px 24px;
	height: auto;
	line-height: 1.6;
}

.login .button-primary:hover,
.login .button-primary:focus,
.wp-core-ui .button-primary:hover,
.wp-core-ui .button-primary:focus {
	background: var(--whf-red-dark);
	border: none;
	color: #fff;
	box-shadow: none;
}

.login .button-primary:focus {
	outline: 2px solid var(--whf-red);
	outline-offset: 2px;
}

.login .button-primary:active {
	background: var(--whf-red-dark);
	border: none;
	color: #fff;
	box-shadow: none;
}

/* ---------- Links ---------- */
.login #nav a,
.login #backtoblog a {
	color: var(--whf-text-light);
}

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

.login .privacy-policy-page-link a {
	color: var(--whf-text-light);
}

.login .privacy-policy-page-link a:hover {
	color: var(--whf-red);
}

/* ---------- Messages ---------- */
.login .message,
.login .success,
.login p.message,
.login div.message {
	border-left-color: var(--whf-teal);
	background: var(--whf-bg);
	border-color: var(--whf-border);
	border-left: 4px solid var(--whf-teal);
	box-shadow: none;
}

.login #login_error {
	border-left: 4px solid var(--whf-red);
	background: var(--whf-bg);
	box-shadow: none;
}

.login #login_error a {
	color: var(--whf-red);
}

/* ---------- Checkbox (Remember Me) ---------- */
.login input[type="checkbox"]:checked::before {
	color: var(--whf-red);
}

.login input[type="checkbox"]:focus {
	border-color: var(--whf-red);
	box-shadow: 0 0 0 1px var(--whf-red);
}

/* ---------- Password Strength Indicator ---------- */
#pass-strength-result.strong {
	border-color: var(--whf-teal);
}

/* ---------- Password Toggle ---------- */
.login .wp-hide-pw .dashicons,
.login .button.wp-hide-pw:hover .dashicons,
.login .button.wp-hide-pw:focus .dashicons {
	color: var(--whf-text-light);
}

.login .button.wp-hide-pw:hover .dashicons,
.login .button.wp-hide-pw:focus .dashicons {
	color: var(--whf-red);
}

/* ---------- Language Switcher ---------- */
.language-switcher {
	border-color: var(--whf-border);
	background: var(--whf-bg);
}